/* Variables */
:root {
    --carrot-orange: #f9a03fff;
    --jasmine: #f7d488ff;
    --cream: #eaefb1ff;
    --nyanza: #e9f7caff;
    --caf-noir: #4e392cff;
    --footer-Height: 2.5rem;
}

/* Fonts */
@font-face {
    font-family: FuturaHandwritten;
    src: url(../font/FuturaHandwritten.ttf);
}

body {
    /* Corriger le body */
    margin: 0px;
    height: 100vh;
    width: 100vw;

    background-image: url(../textures/corkboard-background-with-seamless-cork-texture.jpg);
    background-size: 50%;

    overflow-x: hidden; /* Évite des bugs de width (Thanks Dao-Li !) */

}

ul {
    margin: 0px;
}

p {
    margin: 0px;
    padding: 0px;
}

div#conteneur {
    display: flex;
    flex-flow: column;
    position: relative;
    min-height: 100%;
    box-sizing: border-box;

    header {
        /* Box shadow trouvé sur : https://getcssscan.com/css-box-shadow-examples #38 */
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.555) 0px 3px 6px;

        /* Fond en bois */
        background-image: url(../textures/natural-wooden-background.jpg);
        background-size: 100%;

        /* Positionnement */
        display: flex;
        align-items: center;
        justify-content: space-between;

        /* Éviter que les photos le chevauchent */
        z-index: 10;

        ul {
            box-sizing: border-box;

            /* Enlever le style */
            list-style-type: none;
            
            height: 3em;

            /* Positionnement du menu */
            display: flex;
            align-items: center;

            padding-right: 30px;

            /* Boutons */
            li {
                border: solid 3px var(--caf-noir);
                border-radius: 10px;
                padding: 10px;
                margin: 5px;

                a {
                    text-decoration: none;
                    color: var(--caf-noir);
                    font-family: sans-serif;
                    font-weight:bold;
                }
            }

            /* Bouton survol */
            li:hover {
                border-radius: 10px;
                padding: 10px;
                background-color: var(--caf-noir);

                a {
                    text-decoration: none;
                    color: var(--jasmine);
                    font-family: sans-serif;
                }
            }
        }

        h1 {
            font-family: "FuturaHandwritten", sans-serif;
            color: var(--caf-noir);
            padding-left: 40px;
        }
    }

    main {
        /* Donne de la place pour que */
        padding-top: 40px;

        /* Grille */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;


        div {
            box-sizing: border-box;
            width: 80%; /* 80% de la cellule de grille (approx la distance pour éviter du chevauchement */
            position: relative; /* Soutien du absolute */
            margin-left: 40px;
            
            .oeuvre {
                background-color: white; /*s'assure que si l'image est un png, il y ait un fond */
                box-sizing: border-box;
                width: 100%;
                border: solid whitesmoke 20px;
                border-bottom: solid whitesmoke 100px; /* Bas de la photo pour le style cathodique */
                max-height: 600px; /* Évite que les photos trop longues fassent trop décaler le grid*/
                object-fit: cover; 
                object-position: top left;

                /* Box shadow trouvé sur : https://getcssscan.com/css-box-shadow-examples #5 */
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            }

            .titre {
                font-family: "FuturaHandwritten", sans-serif;
                font-size: 30px;
                color: var(--caf-noir);

                /* Positionnement */
                text-align: center;
                translate: 0px -70px;
            }
            .auteur {
                font-family: "FuturaHandwritten", sans-serif;
                font-size: 15px;
                color: var(--caf-noir);

                /* Positionnement */
                text-align: left;
                translate: 10px -70px;
            }
            a {
                position: absolute;
                font-size: 30px;
                color: var(--caf-noir);

                /* Positionnement */
                right:-50px;
                top:10px;

                img{
                    background-color: var(--cream);
                    border-radius: 100%;
                    padding:10px;
                    /* Box shadow trouvé sur : https://getcssscan.com/css-box-shadow-examples #89 */
                    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
                }
            }
            a:last-child{
                /* Positionnement */
                right:-50px;
                top:70px;
                
                img{
                    background-color: var(--jasmine);
                }
            }
            .punaise{
                width: 75px;
                height: 75px;
                background-size: cover;
                position:absolute;
                top:0;
                z-index: 12;
                margin-left: 0px;
            }
        }
    }
}