/* ---------------------- MODIFICATION GÉNÉRAL DE LA PAGE--------------------- */

* {
    padding: 0;
    margin: 0;
}

/* Définition des variables de couleurs utilisées dans tout le site */
:root {
    --color-primaire: #B08C7E;
    --color-secondaire: #4B2F2C;
    --color-menu: #621C28;
    --color-block: #FFE6E3;
}

/* Images courbes décoratives qui s'ajustent à la largeur de l'écran */
.curves {
    width: 100%;

}

/* Classe pour afficher les éléments uniquement sur la version desktop */
.c-desk {
    display: none;
}

body {
    background-color: var(--color-primaire);
    display: grid;
    grid-template-rows: 2% 20% 30% 70% 12%;


    font-family: "Libre Baskerville";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 90.358%;
    letter-spacing: 1.05px;
}

/* ----------------MENU---------------- */

/*  */
.btn-menu {
    position: fixed;
    z-index: 3;
    top: 2%;
    left: 8.5%;
}

/* Icône du menu hamburger pour les appareils mobiles */
.icone-burger {
    font-size: 500%;
    color: var(--color-menu);


}

/* Icône de fermeture du menu qui s'affiche au clic */
.icone-fermer {
    font-size: 500%;
    color: white;
    display: none;

    position: fixed;
    top: 2%;
    left: 10%;

}

nav {
    background-color: var(--color-menu);
    width: 30%;
    height: 30%;
    padding-top: 20%;
    border: #FFE6E3 5px double;
    /* Positionnement fixe du menu qui se déplace hors écran par défaut */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;


    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    /* Animation : le menu sort de gauche avec une transition de 0.5 secondes */
    translate: -110%;
    transition: translate 0.5s;
}

a {
    color: white;
}

/*bouton de navigation losqu'il est cliqué,affichera le menu*/
nav a:hover {
    color: rgb(251, 255, 0);
}

/* Quand la checkbox est cochée, le menu se déplace vers la gauche */
#cc-nav-principale:checked~header>nav {
    translate: 0;
}

#cc-nav-principale:checked~header>label>.icone-burger {
    display: none;
}

/* Affiche l'icône de fermeture quand le menu est ouvert */
#cc-nav-principale:checked~header>label>.icone-fermer {
    display: initial;
}

#cc-nav-principale {
    display: none;
}

/* -----------------------ACCUEIL------------------------- */
#accueil {
    font-family: "Libre Caslon Display";
    color: white;


}

#accueil img {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;

}

#accueil h1 {
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 3.36px;
    line-height: 100%;

    margin: 30% 0% 50% 8.5%;
}

#accueil h3 {
    margin-left: 8.5%;
}

/* ----------------------À PROPOS----------------------- */
#a-propos {

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#a-propos h2 {
    font-family: "Libre Baskerville";
    font-size: 35px;
    font-weight: 100;
    line-height: 90%;
    letter-spacing: 2px;
    text-align: center;

    color: white;
    position: relative;
    top: 200px;
}

#a-propos p {
    font-size: 100%;
    line-height: 100%;
}

#a-propos img {
    width: 100px;
    position: relative;
    top: 72px;
    left: -150px;
    margin: 0;
    padding: 0;
}

#a-propos .block-texts {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

#a-propos .block {
    background: var(--color-block);
    width: 85%;
    height: 5%;
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 5%;
}

#a-propos .block:first-of-type {
        padding: 3% 5% 7% 60%;
        font-size: 65%;
        width: 30%;
    }

/* --------------------------VENTES------------------------------ */
#acheter {
    background-color: var(--color-secondaire);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

#acheter h1 {
    color: white;
}

/* Conteneur des cartes de produits alignées verticalement */
.ventes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Carte de produit avec ombre et coins arrondis */
.vente {
    background-color: var(--color-block);
    border-radius: 25px;
    box-shadow: 0 23px 18px 0 rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    text-align: center;
}

.vente h3 {
    margin-top: 10px;
}

.vente img {
    width: 100%;
    height: 80%;
    border-radius: 25px 25px 0px 0px;

}

#acheter .extra {
    background-color: var(--color-block);
    margin: 40% auto;
    font-size: 150%;
    text-align: center;
    line-height: 100%;
    border-radius: 25px;
    padding: 10px;
    width: 90%;
    height: 5%;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* --------------------CONTACT---------------------- */

footer {
    background-color: var(--color-menu);
    color: white;
    text-align: center;
}

footer h3 {
    position: relative;
    top: -20%;
}

footer #contact {
    position: relative;
    top: -15%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.media {
    width: 15%;
}

.media img {
    width: 20%;
}


/* -------------------VERSION DESKTOP----------------------- */

@media (width > 750px) {

    body {
        grid-template-rows: 2% 20% 40% 70% 12%;
    }

    /* n'apparais que sur la version desktop */

    /* .curseur { */
    /* height: 2.4rem;
	width: 2.4rem;
	/* background-color: rgba(140, 140, 140, 0.6);
	border: 1px solid white;
	border-radius: 50%; */

    /*Positionnement CSS: fixed
    - pour l'enlever du flux normal du document et le positionner par rapport à la fenêtre du navigateur (viewport)
    - pour permettre également le positionnement de ses pseudo-éléments
    */
    /* position: fixed; */

    /*Décalage pour centrer le curseur sur le pointeur de la souris
    MOINS moitié de la largeur et MOINS moitié de la hauteur
    */
    /* transform: translate(-50%, -50%); */

    /*Positionnement du curseur*/
    /* top: 0;
	left: 0; */

    /*Affichage en avant-plan de toutes les autres éléments HTML*/
    /* z-index: 500; */

    /*Le curseur ne doit pas recevoir les événements de souris...*/
    /* pointer-events: none; */

    /*Transition*/
    /* transition: translate 500ms cubic-bezier(0.15, 0.9, 0.35, 0.95); */
    /* } */


    /* Cache les courbes de version mobile */
    .curves {
        display: none;
    }

    /* Affiche les courbes optimisées pour la version desktop */
    .c-desk {
        display: initial;
    }

    /* -----------MENU---------------- */
    .btn-menu {
        display: none;
    }

    /* Navigation en barre horizontale sur desktop, visible par défaut */
    nav {
        width: 99.5%;
        height: 10%;
        padding: 0;
        font-size: larger;

        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        translate: 0;
    }

    /* -------------------------ACCUEIL--------------------------- */
    #accueil h1 {
        font-size: 80px;
        font-weight: 400;
        letter-spacing: 4px;
        line-height: 100%;

        margin: 5% auto 5% 8.5%;
    }


    /* ------------------A PROPOS ----------------- */

    #a-propos h2 {
        font-size: 50px;
        top: 200px;
    }

    #a-propos {
        font-size: 200%;
    }


    .block-texts>p:nth-of-type(1) {
        color: #621C28;
    }

    #a-propos img {
        width: 200px;
        position: relative;
        top: 145px;
        left: -275px;
        margin: 0;
        padding: 0;
    }

    #a-propos .block-texts {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text-align: center;
    }

    #a-propos .block:first-of-type {
        padding: 2% 5% 8% 50%;
        font-size: 80%;
    }

    /* --------------------VENTES--------------------- */

    /* Les cartes de produits s'affichent honrizontalement sur desktop */
    .ventes {
        flex-direction: row;
        justify-content: space-around;
        height: 25%;
    }

    .vente {
        width: 27%;
        height: 75%;
    }

    #acheter .extra {
        margin: 0% auto 20% auto;
    }
}