html{
    font-family: 'Fredoka', sans-serif;
}

body{
    background-color: #333333;
}

/* Header */

header{
    font-weight: bolder;
    color:#ffd107;
}

#logo{
    display: flex;
    /* border: 3px solid green; */
}

#slogan{
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 20px;
}

#logo img{
    width: 200px;
    height: 200px;
    margin-right: -50px;
}

#logo h1{
    font-size: 3em;
    margin-bottom: 0px;
}

#logo h2{
    font-size: 1em;
    margin-top: -10px;
}




/* Menu Catégories */

.menuPasBurger{
    display:flex;
    justify-content: center;
    list-style: none;
    height:55px;
    column-gap: 2%;
    background-color: #ffd107;
    margin-left: -8px;
    margin-right: -8px;
    
    /* border: 3px solid red; */
}

.menuPasBurger li{
    padding: 16px 0;
    /* border: 3px solid green; */
}

.menuPasBurger a{
    font-weight: 600;
    font-size: 1em;
    color: #333333;
    text-decoration: none;
}

.menuPasBurger li:hover{
    border-bottom: 4px solid #333333;
}

#home{
    margin: -16px 0;
    padding-bottom: 3px;
    height: 36px;
}



.menuBurger{
    height: 100%;
    width: 350px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -400px;
    background-color: #888888;
    padding-top: 60px;
    transition: left 0.5s ease;
    text-decoration: none;
}

.closeBtn{
    
    position: absolute;
    top: 30px;
    right: 50px;
}

.menuBurger ul{
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.menuBurger a{
    padding: 8px 8px 16px 32px;
    font-size: 1.25em;
    color: #333333;
    text-decoration: none;
    display: block;
    transition: 0.3s;
}


.menuBurger.active{
    left: 0;
}

.menuBurger.close{
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
}

.burger{
    display: none;
    background-color: #ffd107;
    padding: 5px;
    border-radius: 10px;
}



/* Main */
/* Bandeau "About Us" */

.aboutUs{
    position: relative;
    margin-top: 50px;
}

.aboutUs a{
    text-decoration: none;
}

.title{
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    bottom: 40%;
    white-space: nowrap;
    color:#888888;
    font-size: 3em;
    text-align: center;
}

.banner{
    width: 100%;
}

.aboutUs a:hover h3{
    color:#ffd107;
}





/* Présentation produits par catégorie */

.container{
    border-top: 2px solid #ffd107;
    border-bottom: 2px solid #ffd107;
    text-align: center;
    margin: 100px -8px 0 -8px;
}

.presentationProduits h3{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2.5em;
    color: #ffd107;
    margin: 0 auto;
    /* border: 3px solid red; */
}

.presentationProduits ul{
    display: flex;
    justify-content: center;
    list-style: none;
    /* border: 3px solid green; */
}

.presentationProduits li{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 280px;
    height: 410px;
    margin: 50px 30px 5px 30px;
    padding: 15px;
    color: #ffd107;
    border: 1px solid rgba(255,193,7,0.75);
    border-radius: 10px;
}

.presentationProduits h4{
    height: 40px;
    font-size: 1.25em;
}

.presentationProduits img{
    width: 280px;
}

.presentationProduits ul li a{
    color: #333333;
    text-decoration: none;
    background-color: #ffd107;
    border-radius: 10px;
    padding: 7px 10px;

    /* border: 3px solid red; */
}

.presentationProduits ul li a:hover{
    color: #ffd107;
    background-color: #888888;
    cursor:pointer;
}


.posAfficherTout{
    text-align: right;
    margin-top: 60px;
    margin-right: 5%;
}
.afficherTout{
    font-size: 1.25em;
    color:#333333;
    text-decoration: none;
    background-color: #ffd107;
    border-radius: 10px;
    padding: 10px;
    
    /* border: 3px solid red; */
} 

.afficherTout:hover{
    color: #ffd107;
    background-color: #888888;
}




/* Footer */
/* Infos */

.liste{
    display: flex;
    justify-content: space-evenly;
    background-color: #888888;
    height: 210px;
    margin: 10% -8px 0 -8px;
    list-style: none;
}

.liste h5{
    font-size: 1.5em;
    margin-bottom: 10px;
    /* border: 3px solid green; */
}

.liste p{
    font-size: 1.125em;
    color: #333333;
}

.reseaux{
    display: flex;
    justify-content: space-evenly;
}

.reseaux a:hover{
    margin-top: -5px;
}

.navigation{
    font-size: 1.125em;
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    /* border: 3px solid blue; */
}

.navigation a{
    text-decoration: none;
    color: #ffd107;
}

.navigation a:hover{
    color: #333333;
}

/* Copyright */

.copyright{
    display: flex;
    background-color: black;
    text-decoration: underline;
    color: #888888;
    font-size: 1.125em;
    justify-content: center;
    /*text-align: center;*/
    margin: 0 -8px -8px -8px;
    /*padding: 0 auto;*/
}





/* Pages categories .html */

.titrePos{
    font-size: 2em;
    text-align: left; 
    /* white-space: nowrap; */
    /* width: 40%; */
    margin-left: 12.5%;
    padding-left:10px;
    border-left: 10px solid #ffd107;
    color: #ffd107;

    /* border: 3px solid red; */
}



.produits ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
}

.produitBouton{
    display: block;
    border: 1px solid rgba(255,193,7,0.75);
    border-radius: 10px;
    width: 280px;
    height: 410px;
    margin: 50px 20px 5px 20px;
    padding: 15px;
    text-decoration: none;
}

.produits img{
    width: 280px;
}

.produitBouton h4{
    font-size: 1.25em;
    margin: 10% -5%;
    height: 30px;
    text-align: center;
    color: #ffd107;
    /* border:3px solid red; */
}

.produitBouton h5{
    font-size: 1em;
    text-align: center;
    color: #888888;
    /* border: 2px solid green; */
}

.produitBouton:hover{
    border: 1px solid #888888;
    box-shadow: 0px 0px 25px rgba(0,0,0, 0.5);
}

.produitBouton:hover h4, .produitBouton:hover h5{
    color: #888888;
}



/* Pages produit */

.descriptionProduit{
    width: 60%;
    margin: 5% 20% 0;
    /* border: 3px solid red; */
}

.grandeImg{
    width: 500px;
    /* border: 3px solid green; */
}

.infosProduit{
    display: flex;
    /* border: 3px solid blue; */
}

.description{
    margin-left: 5%;
    /* border: 3px solid green; */
}

#nom{
    font-size: 2.5em;
    margin-bottom: 0;
    color: #ffd107;
}

#categorie{
    font-size: 1.5em;
    margin-top: 0;
    color: #888888;
}

.titreDescr{
    font-size: 2em;
    margin-bottom: 0;
    color: #ffd107;
}

#descr{
    font-size: 1.25em;
    margin-top: 10px;
    color: #888888;
}

.listeImages{
    display: flex;
    width: 100%;
    margin-top: 5px;
    padding-left: 0;
    /* border: 3px solid green; */
}

.listeImages li{
    list-style: none;
    /* border: 3px solid red; */
}

.listeImages img{
    width: 99px;
    margin-right: 10px;
}

.listeImages li:hover{
    margin-top: -5px;
    margin-bottom: 5px;
}

.lien{
    font-size: 1.25em;
    color:#333333;
    background-color: #ffd107;
    text-align: center;
    margin-left: 40%;
    padding: 10px 15px;
    border-radius: 10px;
    text-decoration: none;
}

.lien:hover{
    color:#ffd107;
    background-color: #888888;
}



/* galerie.html */

.boutonsGalerie li{
    width: 270px;
    list-style: none;
    cursor: default;

    font-size: 1.5em;
    text-align: center;
    color:#ffd107;
    background-color: #888888;
    border-radius: 10px;
    padding: 10px 0;
    margin-bottom: 15px;
 
    /*border: 2px solid red;*/
}

.boutonsGalerie li:hover{
    color:#ffd107;
    background-color: #333333;
}



/* aboutUs.html */

.nous{
    text-align: center;
    margin: 10% 10%  10%;
    align-content: center;
    /* border: 3px solid red; */
}

.nous h3{
    color: #ffd107;
    font-size: 3em;
}

.nousImg{
    display: flex;
    flex-direction: column;
}

.nousImg img{
    margin-top: 10%;
}



/* catalogue.html */

.research{
    display: flex;
    justify-content: flex-end;
    margin-right: 10%;  
    /* border: 3px solid red; */
}

.rechercher{
    font-family: 'Fredoka', sans-serif;
    font-size: 1.25em;
    color: #333333;
    background-color: #888888;
}

.rechercher::placeholder{
    color: #333333;
}

.loupe:hover{
    margin-top: -5px;
    margin-bottom: +5px;
    cursor: pointer;
}

/* Media Queries */

 @media screen and (max-width: 767px) {

    /* header */

    .burger{
        display: block;
    }

    .menuPasBurger{
        display: none;
    }

    /* Main */
    /* Bannière + About Us */

    .aboutUs{
        margin-top: 80px;
    }

    .title{
        font-size: 3em;
        white-space: nowrap;
        bottom: 20%;
        /* border: 3px solid red; */
    }

    /* Produits */
    .presentationProduits h3{
        font-size: 2em;
    }

    .presentationProduits ul{
        flex-wrap: wrap;
        padding-left: 50%;
        padding-right: 49%;
    }

    .presentationProduits li{
        width: 175px;
        height: 300px;
    }

    .presentationProduits img{
        width: 175px;
    }

    .presentationProduits li h4{
        margin-top: 10px;
        margin-bottom: 40px;
    }

    /* Footer*/
    .liste{
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 0 60px 150px 50px;
        /*border: 3px solid red;*/
    }

    .liste h5{
        font-size: 1em;
    }

    .liste p, a{
        font-size: 0.795em;
        padding-right: 0px;
    }

    .copyright{
        font-size: 1em;
    }

    
    /* Pages categories .html */

    .titrePos{
        font-size: 1.6em;
    }

    .produits ul{
        padding-left: 50%;
        padding-right: 49%;
    }

    .produitBouton{
        width: 200px;
        height: 343px;
    }

    .produitBouton img{
        width: 200px;
    }

    .produitBouton h4{
        font-size: 1.9em;
    }

    .produitBouton h5{
        font-size: 1.25em;
        margin-top: 25%;
    }


    /* Page produit.html */

    .descriptionProduit{
        width: 80%;
        margin-top: 20%;
        margin-left: 10%;
    }

    .infosProduit{
        display: flex;
        flex-direction: column;
    }

    #grandeImg{
        width: 100%;
    }

    .listeImages img{
        width: 90%;
        /* border: 3px solid blue; */
    }

    .description{
        margin-bottom: 20%;
    }

    #descr{
        margin-bottom: 20%;
    }

    .lien{
        margin-left: 35%;
    }

}