body{
    margin: 0;
    padding: 0;
    background-color: grey;
    /* background-image: url("/IMG/fond_clair.png"); */
    /* background-image: url("/IMG/fond_sombre.png"); */
    /* background-image: url("/IMG/spikes.png"); */
    background-image: url("/commerce/IMG/prism.png");
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

body,header,main,footer,div{
    display: flex;
    flex: 1;
}

header{
    /* flex: none;
    height: 15vh; */
    border-bottom: 2px solid #FA9F42;
}

#logo{
    color: #FA9F42;
    font-weight: bold;
    font-size: 2em;
    justify-content: center;
}

#barreRecherche{
    border: 2px solid #FA9F42;
    background-color: #FA9F42;
}

#barreRecherche div{
    height: 100%;
}

#barreRecherche form{
    width: 100%;
}

#barreRecherche input{
    width: 90%;
    /* border: 2px solid #FA9F42; */
}

#barreRecherche button{
    width: 10%;
    /* border: 2px solid #FA9F42; */
}

#headerUtilisateur{
    justify-content: center;
}

#headerUtilisateur i{
    font-size: 2em;
    align-self: center;
    padding-right: 0.5em;
}

#headerPanier{
    justify-content: center;
}

#headerPanier i{
    font-size: 2em;
    align-self: center;
    padding-right: 0.5em;
}

nav>div div{
    padding: 0.5em 1em;
}

nav a{
    text-decoration: none;
}

.mobNav{
    display: none;
    background-color: #FA9F42;
    font-weight: bold;
    padding: 0.5em;
    justify-content: center;
}

#boutonProduits{
    position: relative;
    background-color: #FA9F42;
    font-weight: bold;
}

#boutonProduits:hover{
    background-color: white;
    color: #2B4162;
    transition: all 0.5s;
}

#boutonProduits:hover #produitsDeroulant{
    display: flex;
}

#produitsDeroulant{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FA9F42;
    min-width: calc(100% - 1em);
    width: max-content;
    padding: 0.5em;
    z-index: 1;
    /* font-weight: normal; */
}

.boutonNav{
    flex: none;
}

.boutonNav:hover{
    /* border-bottom: 2px solid white;
    margin: -2px; */
    /* outline: 2px solid #FA9F42;
    outline-offset: -2px; */
}

#boutonGestion{
    position: relative;
}

#boutonGestion:hover #gestionDeroulant{
    display: flex;
}

#gestionDeroulant{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FA9F42;
    /* border-left: 2px solid #FA9F42;
    border-bottom: 2px solid #FA9F42;
    border-right: 2px solid #FA9F42; */
    /* background-color: #2B4162; */
    /* background-color: rgb(43, 65, 98,0.3); */
    width: max-content;
    padding: 0.5em;
}

#contenu{
    padding: 1.5em;
}

footer{
    border-top: 2px solid #FA9F42;
}

.bandeau{
    position: fixed;
    bottom: 0;
    height: auto;
    width: 30vw;
    margin: 1em;
    padding: 0.5em;
    background-color: #FA9F42;
    text-align: center;
    align-items: center;
}

/* Evite d'accumuler les espaces en haut et en bas du contenu */
#contenu h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, p:first-child{
    margin-top: 0;
}

#contenu h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, p:last-child{
    margin-bottom: 0;
}

/* CRUD Listes */

.elements input[type="checkbox"]{
    align-self: center;
}

.boutonAjout{
    width: 100%;
    padding: 1%;
    border: 2px solid #d66b00;
    background-color: #FA9F42;
    color: white;
    font-weight: bold;
}

.libelle{
    align-self: center;
    justify-content: center;
}

.actions{
    justify-content: space-around;
    padding: 0.5%;
    outline: 2px solid #d66b00;
    background-color: #FA9F42;
}

#divForm1, #divForm2{
    height: 100%;
}

input[type="text"], input[type="password"], input[type="date"], input[type="email"], select{
    width: 100%;
    box-sizing: border-box;
}

textarea{
    width: 100%;
    min-height: 10vh;
}

.imageFormProduit img {
    width: 10vw;
}

/* CRUD Commandes */

.libellesCommandes{
    border-bottom: 2px solid white;
    font-weight: bold;
    padding-bottom: 0.2em;
}

.totalCommandes{
    border-top: 2px solid white;
    font-weight: bold;
    padding-top: 0.3em;
}

/* Inscription */

.inscription{
    text-align: center;
}

.inscription input{
    height: 1.5em;
}

.inscription button{
    width: 100%;
    height: 3em;
    font-weight: bold;
}

.divInputInscription{
    flex-direction: column;
    position: relative;
}

.messageInscription{
    max-width: 80%;
    background-color: #FA9F42;
    justify-content: center;
    padding: 1vh;
    position: absolute;
    left: 110%;
    width: fit-content;
    font-size: 0.8em;
}

.messageInscription div i{
    margin-left: 1em;
}

.rouge i{
    color: rgb(255, 110, 110);
}

.vert i{
    color: rgb(134, 201, 33);
}

.oeil, .oeilBarre{
    position: absolute;
    right: 5px;
    top: 25%;
    cursor: pointer;
}

.oeilBarre{
    display: none;
}

.inputErreur{
    border-bottom: 3px solid red;
}

/* Catalogue */

.cadreProduit{
    outline: 2px solid #FA9F42;
    /* background-color: #2B4162; */
    color: white;
    text-decoration: none;
    font-weight: bold;
    align-items: center;
    height: 20vh;
}

.cadreProduitImage{
    background-color: white;
    height: 100%;
    justify-content: center;
    outline: 2px solid #FA9F42;
    align-items: center;
}

.cadreProduitImage img{
    max-height: 100%;
    max-width: 100%;
}

.cadreProduitNom, .cadreProduitPrix{
    justify-content: center;
    text-align: center;
    font-size: 1.2em;
}

/* Panier */

.cadrePanier{
    outline: 2px solid #FA9F42;
    /* background-color: #2B4162; */
    background-color: rgb(43, 65, 98,0.5);
    color: white;
    text-decoration: none;
    font-weight: bold;
    align-items: center;
    height: 10vh;
}

.cadrePanierNom, .cadrePanierQuantite, .cadrePanierPrix, .divQte{
    justify-content: center;
    padding: 1em;
}


.boutonPanierBis{
    background-color: #FA9F42;
    border-radius: 1em;
}

.boutonPanierBis a{
    width: 100%;
    height: 100%;
    padding: 1em;
    text-align: center;
    text-decoration: none;
}

.panierSupprimer{
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}

.cadrePanierQuantite button{
    width: 100%;
}

#totalPanier::after, .cadrePanierPrix::after{
    content: "€";
}

.cadrePanierPrix, #totalPanier{
    font-size: 1.3em;
}

#messageStock{
    padding: 1em;
    font-weight: bold;
    justify-content: center;
    background-color: rgb(255, 110, 110);
}

/* Page produit */

.imageProduit{
    height: fit-content;
}

.imageProduit img{
    width: 100%;
    cursor: pointer;
}

.cadreDescription{
    margin: 1em;
}

.cadrePrix{
    background-color: #FA9F42;
    height: fit-content;
}

.prixProduit{
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
}

.selectProduit{
    text-align-last: center;
}

.boutonPanier{
    background-color: #2B4162;
    border-radius: 1em;
    padding: 1em;
    text-align: center;
    color: white;
    font-weight: bold;
}

.disponibilite{
    justify-content: center;
}

#lightbox{
    background-color:rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    position: fixed;
}

#divImage{
    flex: 2;
}

#divImage img{
    width: 100%;
    margin: auto;
}

/* Compte / Commandes */

#menuCompte{
    height: fit-content;
}

#messageEtat{
    padding: 1em;
    font-weight: bold;
    margin-bottom: 1em;
    justify-content: center;
    display: none;
}

.etatTrue{
    background-color: rgb(134, 201, 33);
}

.etatFalse{
    background-color: rgb(255, 110, 110);
}

.enteteMenuCompte{
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    justify-content: center;
    padding: 0.5em 0;
    background-color: #FA9F42;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

.boutonMenuCompte{
    align-content: center;
    padding: 0.5em 0;
    margin-top: 0.5em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    border: 2px solid #FA9F42;
}

.boutonMenuCompte a{
    width: 100%;
}

.boutonMenuCompte a div{
    justify-content: center;
}

.ligneCommande{
    margin-top: 0.3em;
}

.boutonDetailsCommande{
    text-decoration: underline;
    cursor: pointer;
}

.detailsCommande{
    margin: 0.3em 0;
    padding: 0.3em 0;
    border-bottom: 2px dashed white;
    /* border-top: 2px dashed #FA9F42; */
    /* padding: 0.5em;
    border: 2px dashed #FA9F42; */
}

/* Classes */

.colonne{
    flex-direction: column;
}

.bleu{
    /* background-color: #2B4162; */
    background-color: rgb(43, 65, 98,0.3);
}

.orange{
    background-color: #FA9F42;
}

.bordureOrange{
    border: 2px solid #FA9F42;
}

a{
    color: white;
}

.flexNone{
    flex: none;
}

.block{
    display: block;
}

.alItCenter{
    align-items: center;
}

.gras{
    font-weight: bold;
}

.souligne{
    text-decoration: underline;
}

.height100{
    height: 100%;
}

.h2Centre{
    text-align: center;
}

.displayNone{
    display: none;
}

.flex05{flex: 0.5;}
.flex15{flex: 1.5;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.flex6{flex: 6;}
.flex7{flex: 7;}
.flex8{flex: 8;}
.flex9{flex: 9;}
.flex10{flex: 10;}

.espH1{flex:none;height:1vh;}
.espH2{flex:none;height:2vh;}
.espH3{flex:none;height:3vh;}
.espH4{flex:none;height:4vh;}
.espH5{flex:none;height:5vh;}
.espH6{flex:none;height:6vh;}
.espH7{flex:none;height:7vh;}
.espH8{flex:none;height:8vh;}
.espH9{flex:none;height:9vh;}
.espH10{flex:none;height:10vh;}

@media screen and (max-width: 640px) {
    
    .espV{
        display: none;
    }

    header .espH3{
        height: 1vh;
    }

    .mobColonne{
        flex-direction: column;
    }

    main{
        flex-direction: column;
    }

    /* Navigation */
    .mobNav{
        display: flex;
    }

    .navBoutons{
        display: none;
    }

    nav:hover .navBoutons{
        display: flex;
    }

    /* Catalogue */
    .cadreProduit{
        height: 10vh;
    }

    /* Page produit */
    .cadreProduitNom, .cadreProduitPrix{
        font-size: 1em;
    }

    /* Panier */
    .cadrePanier .cadreProduitImage{
        display: none;
    }

    .cadrePanierPrix, #totalPanier {
        font-size: 1em;
    }

}