/* pink = #D498C4
purple = #3E2341
yellow = #FFE900 */
@font-face {
    font-family: 'Arimo';
    src: url('../font/Arimo/static/Arimo-Bold.ttf');
}

*{
    margin: 0;
    font-family: 'Calibri';
    color: #3E2341;
}

.top{
    margin-top:3em;
}
.demi-top{
    margin-top: 1.5em;
}
.big-top{
    margin-top: 6em;
}

.void{
    display: none;
}

.bottom{
    margin-bottom: 1.5em !important;
}

.center{
    text-align: center;
    display: inline;
}
.button{
    color: #3E2341;
    background-color: #f1addf;
    /* background-color: #f1addf; */
    padding:0.5em 1em;
    border-radius: 15px;
    text-decoration: none;
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-size: 1.5em;
    margin-block: 10px;
}

.button:hover{
    background-color:#3E2341;
    color: #FFE900;
}
.micro-button{
    color: #3E2341;
    background-color: #f1addf;
    padding:0.2em 1em;
    border-radius: 15px;
    text-decoration: none;
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-size: 1.2em;
    margin-block: 5px;
}
.cardEdition{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cardEdition img{
    display: block;
    margin:auto;
    width: 120px;
    height: 120px;
    border-radius: 5px;

}

.micro-button:hover{
    background-color:#3E2341;
    color: #FFE900;
}
.mini-button{
    color: #3E2341;
    background-color: #f1addf;
    border-radius: 15px;
    text-decoration: none;
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-size: 1em;
    padding: 0.2em 0.5em;
}

.mini-button:hover{
    background-color:#3E2341;
    color: #FFE900;
}

nav{
    padding-block: 0.5em;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 3;
    /* background-color:#f1addf; */
    background-color: rgb(243, 215, 240);
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-transform: capitalize;
}
#brand-logo, #burger{
    width: 65px;
}
#burger{
    background-color: transparent;
    border: none;
    outline: none;
}

#burger img{
    width: 100%;
}

.nav{
    display: flex;
    gap:3em;
}

.nav-link{
    color: #3E2341;
    text-decoration: none;
    font-size: 1.5em;
    text-align: center;
    display: block;
}

.nav-link:hover, .footer-link:hover{
    
    text-decoration: underline;
}

.background{
    position: fixed;
    top: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    background:url('../images/background.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    flex-direction: column;
}
.imgWithButton{
    display: flex;
    anchor-name: --image;
}
.imgWithButtonUnique{
    display: flex;
    anchor-name: --imageUnique;
}

.prevUnique{
    position-anchor: --imageUnique;
    position: fixed;
    position-area: left center;
    height: 100%;
    border-radius: 15px 0 0 15px;
}
.nextUnique{
    position-anchor: --imageUnique;
    position: fixed;
    position-area: right center;
    height: 100%;
    border-radius: 0 15px 15px 0;
}

.prevButton, .nextButton, .nextUnique, .prevUnique{
    background-color: rgb(243, 215, 240);
    outline: none;
    border: none;
    opacity: 0.6;
}
.prevButton{
    position: fixed;
    position-anchor: --image;
    position-area: left center;
    translate: 100%;
    height: 100%;
    border-radius: 15px 0 0 0;
}

.nextButton{
    position: fixed;
    position-anchor: --image;
    position-area: right center;
    translate: -100%;
    height: 100%;
    border-radius: 0 15px 0 0;

}
.prevButton:disabled, .nextButton:disabled,.prevUnique:disabled, .nextUnique:disabled{
    opacity: 0.2;
}

.main-background{
    display: flex;
    justify-content: center;
    align-items: center;
    background:url('../images/background.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    flex-direction: column;
}

#main-title{
    position: absolute;
    visibility: hidden;
}
#main-logo{
    width: 40%;
}

.title{
    font-family: "Arimo";
    text-align:center;
    font-size: 2.5em;
}

#presentation{
    text-align:center;
    font-size:1.5em;
    margin-block: 1em;
    width: 60%;
    margin-inline: auto;
}

#accueil-section{
    margin-block: 2em;
}

.bg-form{
    background-color: rgb(255,255,255, 0.80);
    padding-block: 0.5em;
    border-radius: 35px;
    padding-inline:2em;
    width: fit-content;
    max-width: 75%;
    margin-inline: auto;
}

.input-field{
    display: flex;
    flex-direction: column;
    font-size: 1.4em;
    margin-block: 0.2em;
}

.field-mesures{
    justify-content: space-between;
}

input, textarea, select{
    font-size: 1em;
}

.input-form{
    background-color: rgb(255, 243, 126);
    border: 2px dashed #3E2341;
    outline: 4px solid rgb(255, 243, 126);
    border-radius: 15px;
    padding: 0.5em 1em;
}

.red{
    background-color:red !important;
    color: white !important;
}
.green{
    background-color: green;
    color:#FFE900;
}

.alert{
    padding:0.5em 1em;
    font-size: 1em;
    border-radius: 25px;
    font-size: 1.5em;
    margin-block: 1em;
    width: fit-content;
    margin-inline: auto;
}

#filtres{
    position: sticky;
    top: 5em;
    background-color: white;
    z-index: 2;
}
.hidden-filtre{
    display : none;
}
#filtres-form{
    margin-block: 1em;
    text-align: center;
    font-size: 1.5em;

    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.filtre-form{
    background-color: rgb(255, 243, 126);
    border: 2px dashed #3E2341;
    outline: 4px solid rgb(255, 243, 126);
    border-radius: 15px;
    padding: 0.2em 0.5em;
}

.barre{
    width: 80%;
    margin-inline: auto;
    border-color:#3E2341;
}
#top-barre{
    visibility: hidden;
}

.grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 2em auto;
    width: 80%;
}
.grid-edition{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: auto;
    width: 90%;
}

.card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(243, 215, 240);
    text-align: center;
    width: 250px;
    margin-inline: auto;
    border-radius: 15px;
    border: 1px solid #3E2341;
    -webkit-box-shadow: 0px 3px 2px -1px #3E2341;
    -moz-box-shadow: 0px 3px 2px -1px #3E2341;
    box-shadow: 0px 3px 2px -1px #3E2341;
}

.card-img{
    width: 250px;
    height: 250px;
    margin-inline: auto;
    border-radius: 15px 15px 0 0;

}

.card-tag{
    font-size:1.2em;
    border: 2px dashed #3E2341;
    outline: 2px solid white;
    background-color: white;
    width: fit-content;
    margin-inline: auto;
    padding: 0.2em 1em;
    margin-bottom: 5px;
    border-radius: 10px;
}

.card-text{
    font-size: 1.5em;
}

.card-link{
    color: white;
    background-color: #3E2341;
    padding:0.5em;
    border-radius: 10px;
    text-decoration: none;
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-size: 1em;
    margin-bottom: 0.3em;
}

.card-link:hover{
    color: #FFE900;
}

#img-article{
    display: block;
    width: 250px;
    height: 250px;
    text-align: center;
    margin-inline: auto;
    border-radius:15px;
}

.description{
    text-align: center;
    margin-block: 2em;
}

.tag{
    border-radius: 10px;
    border: 2px dashed #3E2341;
    background-color: rgb(243, 215, 240);
    outline: 3px solid rgb(243, 215, 240);
    text-align:center;
    width: fit-content;
    margin-inline: auto;
    padding: 0.5em 1em;
}

.grid-form{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 10px;
    align-items: end;
    
}

.grid-mesures{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.col-span-2{
    grid-column: 1/3;
}

.inline, .always-inline{
    display: flex;
    justify-content: center;
    width: fit-content;
    gap:20px;
    margin-inline:auto;
    align-items:center;
    margin-block: 0.5em;
}
.mini-inline{
    display: flex;
    justify-content: center;
    width: fit-content;
    gap: 5px;
    margin-inline:auto;
    align-items:center;
    margin-block: 0.5em;
}

.inline-end{
    display: flex;
    justify-content: center;
    width: fit-content;
    gap:20px;
    margin-inline:auto;
    align-items: end;
}


.modal{
    position: fixed;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #3E2341;
    margin-inline: auto;
    margin-block: auto;

}

.big-modal{
    /* top: 25%; */
    width: 50%;
    
}
.small-modal{
    /* top: 40%; */
    width: fit-content;
    
}

.catg-block{
    border: 2px dashed #3E2341;
    border-radius: 15px;
    background-color: rgb(243, 215, 240);
    outline: 4px solid rgb(243, 215, 240);
    padding-block: 1em;
    
}
.subCatg-block{
    border: 2px dashed #3E2341;
    border-radius: 15px;
    background-color: rgb(255, 243, 126);
    outline: 4px solid rgb(255, 243, 126);
    padding-block: 0.5em;
    margin-inline: auto;
    width: 90%;
    margin-block: 1em;
}
.mesures-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 95%;
    margin: auto;
}
.mesures-grid p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: justify;
    padding: 10px;
    border: 1px solid #3E2341;
}
.mesures-grid p:nth-child(1), .mesures-grid p:nth-child(2),.mesures-grid p:nth-child(3),
.mesures-grid p:nth-child(7), .mesures-grid p:nth-child(8),.mesures-grid p:nth-child(9),
.mesures-grid p:nth-child(13), .mesures-grid p:nth-child(14),.mesures-grid p:nth-child(15),
.mesures-grid p:nth-child(19), .mesures-grid p:nth-child(20),.mesures-grid p:nth-child(21),
.mesures-grid p:nth-child(25), .mesures-grid p:nth-child(26),.mesures-grid p:nth-child(27),
.mesures-grid p:nth-child(31), .mesures-grid p:nth-child(32),.mesures-grid p:nth-child(33),
.mesures-grid p:nth-child(37), .mesures-grid p:nth-child(38),.mesures-grid p:nth-child(39){
    background-color: rgb(243, 215, 240);
}
.bold{
    font-weight: bold;
    /* font-size: 0.8em !important; */
}
.catg-text{
    font-size: 1.5em;
    text-align: center;
}

.text{
    text-decoration: none;
    font-size: 1.5em;
    text-align: center;
}
.text-justify{
    text-decoration: none;
    font-size: 1.5em;
    text-align: justify;
    width: 80%;
    margin-inline: auto;
}

.commande-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr)!important;
    gap: 20px;
    margin: 2em auto;
    width: 80%;
}
.user-commande{
    border: 3px solid #3E2341;
    padding: 1em;
    background-color: white;
    height: 430px;
    /* height: fit-content; */
    overflow: hidden;
    border-radius: 15px;
}
.commande-card{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border: 1px solid #3E2341;
    border-radius: 15px;
    background-color: rgb(243, 215, 240);
    align-items: center;
}

.commande-card-img{
    width: 150px;
    height: 150px;
    border-radius: 15px 0 0 15px;
}

.commande-card-body{
    grid-column: 2/4;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.commande-card-tag{
    border: 1px solid #3E2341;
    background-color: white;
    padding:0.5em;
    border-radius: 10px;
    width: fit-content;
    margin-inline: auto;
}

.commande-card-text{
    font-size: 1.5em;
}

.commande-card-link{
    color: white;
    background-color: #3E2341;
    padding:0.5em;
    border-radius: 10px;
    text-decoration: none;
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-size: 1em;
    margin-bottom: 0.3em;
}

.commande-card-link:hover{
    color: #FFE900;
}

.commande-title{
    font-size: 1.5em;
    margin-bottom: 0.5em;
    text-align: center;
}

.commande-block{
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;
    height: 300px;
    border-bottom: 2px solid #3E2341;
    border-top: 2px solid #3E2341;
    border-radius: 15px;
    margin-block: 10px;
}
.F{
    background:url('../images/mesure-femme.png') no-repeat;
}
.H{
    background:url('../images/mesure-homme.png') no-repeat;
}
.img-inactive{
    display: none;
}

.area{
    cursor: pointer;
}
.filled{
    background-color: rgb(0, 255, 0, 0.2)
}
.notfilled{
    background-color: rgb(255, 0, 0, 0.2)
}

.mini-form{
    /* width: 40%; */
    margin-inline: auto;

    width: fit-content;
}
.refus{
    background-color: rgb(243, 215, 240);
    padding: 2em;
    border: 2px solid #3E2341;
    border-radius: 15px;
    outline: 4px solid rgb(243, 215, 240);
    text-align: center;
    font-size: 1em;
    width: fit-content;
    margin: auto;
    max-width: 80%;
}

.block-commande{
    width: 30%;
    margin-inline: auto;
}
.cartTag{
    background-color:#3E2341;
    color: #FFE900;
    border-radius: 75%;
    padding: 0.1em 0.4em;
    margin-left: 0.5em;
}
.back-link{
    display: block;
    font-size: 1.5em;
    margin-left: 1em;
    border-radius: 15px;
    background-color: #3E2341;
    color: #FFE900;
    width: fit-content;
    padding: 0.5em;
    text-decoration: none;
}

.back-link:hover{
    color: white;
    background-color: #f1addf;
}

#footer{
    width: 100%;
    background-color: rgb(243, 215, 240);
    /* background-color: rgb(243, 215, 240); */
    display: flex;
    font-size: 0.5em !important;
    align-items: center;
    justify-content: space-around;
    padding-block: 1em;
}

.footer-link{
    color: #3E2341;
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 2em;
}
.copyright{
    font-size: 2em;
}
.hidden{
    visibility: hidden;
}

.inline-footer{
    display: flex;
    justify-content: center;
    width: fit-content;
    gap:20px;
    margin-inline:auto;
    align-items:center;
}

#chat{
    position: fixed;
    z-index: 2;
    left: 50px;
    bottom: 25px;

    width: 125px;
}

.skeleton{
    background-image: url('../images/boutons.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 2em;
    transition: all 200ms ease-in-out;
    position: relative;
    background-color: #eaeaea;
}
.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    animation: load 1s infinite;
}
@keyframes load {
    100% {
        transform: translateX(100%);
    }
}


.icone-footer{
    width: 30px;
}

.supp-input{
    width: 50%;
    margin-inline: auto;
}

h1.titre-legal{
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 1em;
}
.titre-legal{
    margin-block: 0.5em;
    margin-inline: auto;
    width: 96%;
    text-align: justify;
    font-family: "Arimo";
}
.text-legal{
    width: 90%;
    text-align: justify;
    margin-inline: auto;
    margin-bottom: 20px;
}
ul.text-legal{
    width: 80%
}

.mesures-block{
    display: flex;
    width: 95%;
    margin: auto;
}
.mesures-block img{
    width: 450px;
    height: 450px
}
.mesures-form{
    display: grid;
    grid-template-columns: repeat(4, 225px);
    gap: 1em;
    justify-content: end;
    width: 100%;
}
.mesures-input{
    background-color: rgb(255, 243, 126);
    border: 2px dashed #3E2341;
    outline: 4px solid rgb(255, 243, 126);
    border-radius: 15px;
    padding: 0.2em 0.5em;
    font-size: 0.8em !important;
    width: 200px;
}

.mesures-form label{
    font-size: 0.7em;
    margin-bottom: 0.2em;
}

.notInPage{
    display: none;
}

.bouton-mesures{
    margin-inline: auto;
    width: fit-content;
    margin-block: 1em;
}

.bouton-mesures button{
    background-color: #f1addf;
    color: #3E2341;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;

}

.bouton-mesures button:hover{
    outline: 1px solid #3E2341;
}

.page-active{
    background-color: #3E2341 !important;
    color:#FFE900 !important;
}

.genre-input{
    font-size: 1.5em;
    gap: 10px;
    width: fit-content;
    margin-inline: auto;
    margin-block: 1em;
}

.test-display{
    display: none;
}
.active-dropdown{
    display: none;
}

.genre-mesures{
    display: none;
}
.input-field-settings{
    background-color:rgb(243, 215, 240);
    padding-block: 0.2em;
    outline: 4px solid rgb(243, 215, 240);
    border: 1px dashed #3E2341;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}
.helpButton{
    background-color: rgb(243, 215, 240);
    color: #3E2341;
    border-radius: 15px;
    font-size:0.6em;
    border: 1px solid #3E2341;
    margin-left: 0.5em;
}
#infoMesures ul{
    list-style-type: none;
}
#infoMesures h2, #helpModal h2{
    text-align: center !important;
}
#infoMesures, #helpModal{
    text-align: justify !important;
}
.redText{
    color: red;
    font-weight: bold;
}
.justify{
    text-align: justify !important;
}

.falseListItems{
    margin-left: 1em;
    margin-block: 0.5em;
}
.spaced-block{
    margin-block: 0.5em;
}
@media (width <= 700px) {
    .nav{
        flex-direction: column;
        position: absolute;
        top: 100%;
        background-color:  rgb(243, 215, 240);
        z-index: 4;
        gap: 30px;
        width: 100%;
        padding-block: 2em;
    }
    footer{
        flex-direction: column;
    }
    .inline-footer{
        flex-direction: column;
    }
    .inline, .inline-end{
        flex-direction: column;
    }
    #chat{
        width: 75px;
        left: 5px;
    }
    .icones-footer{
        flex-direction: row !important;
    }
    .grid{
        grid-template-columns: repeat(1, 1fr)!important;
        gap: 20px;
        margin: 2em auto;
        width: 80%;
    }
    .grid-form{
        display: block;
    }

    .big-modal{
        width: 90%;
    }
    .block-commande{
        width: 90%;
    }
    .mesures-block{
        flex-direction: column
    }
    .mesures-block img{
        width: 90%;
        height: 100%;
        margin: auto;
        display: block;
    }
    .mesures-form{
        grid-template-columns: repeat(1, 1fr)!important;
        width: 90%;
        text-align: center;
        margin: auto;
    }
    .mesures-input{
        margin: auto;
    }

    .mesures-form label{
        font-size: 1em;
    }
    .commande-grid{
        grid-template-columns: repeat(1, 1fr)!important;
    }
    #filtres-form{
        flex-direction: column;
    }
    .mesures-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .mesures-grid p{
        font-size: 0.8em;
    }
    .mesures-grid p:nth-child(odd){
        background-color:   rgb(243, 215, 240);
    }
    .mesures-grid p:nth-child(even){
        background-color: white;
    }
}

@media (width <= 1500px) {
    .nav{
        flex-direction: column;
        position: absolute;
        top: 100%;
        background-color:  rgb(243, 215, 240);
        z-index: 3;
        gap: 30px;
        width: 100%;
        padding-block: 2em;
    }
    footer{
        flex-direction: column;
    }
    .inline-footer{
        flex-direction: column;
    }
    .icones-footer{
        flex-direction: row !important;
    }
    #chat{
        width: 125px;
        left: 10px;
    }

    .grid{
        grid-template-columns: repeat(3, 1fr);
    }

    .commande-grid{
        grid-template-columns: repeat(2, 1fr)!important;
    }
    .mesures-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .mesures-grid p{
        font-size: 0.9em;
        background-color: white !important;
    }
    .mesures-grid p:nth-child(1), .mesures-grid p:nth-child(2),
    .mesures-grid p:nth-child(5),.mesures-grid p:nth-child(6),
    .mesures-grid p:nth-child(9),.mesures-grid p:nth-child(10),
    .mesures-grid p:nth-child(13),.mesures-grid p:nth-child(14),
    .mesures-grid p:nth-child(17),.mesures-grid p:nth-child(18),
    .mesures-grid p:nth-child(21),.mesures-grid p:nth-child(22),
    .mesures-grid p:nth-child(25),.mesures-grid p:nth-child(26),
    .mesures-grid p:nth-child(29),.mesures-grid p:nth-child(30),
    .mesures-grid p:nth-child(33),.mesures-grid p:nth-child(34),
    .mesures-grid p:nth-child(37),.mesures-grid p:nth-child(38),
    .mesures-grid p:nth-child(41),.mesures-grid p:nth-child(42)
    {
        background-color:   rgb(243, 215, 240) !important;
    }
    .mesures-block{
        flex-direction: column;
    }
    .mesures-block img{
        width: 400px;
        height: 400px;
        margin: auto;
        display: block;
    }
    .mesures-form{
        grid-template-columns: repeat(4, 1fr);
    }
    #filtres-form{
        /* margin-block: 1em;
        text-align: center;
        font-size: 1.5em;

        display: flex; */
        gap: 3em;
        /* justify-content: center;
        align-items: center; */
    }
    .filtre-field{
        display: flex;
        flex-direction: column;
    }
}

@media (width <= 950px) {
    .grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .mesures-form{
        grid-template-columns: repeat(3, 1fr);
    }
    .commande-grid{
        grid-template-columns: repeat(1, 1fr)!important;
    }
    #filtres-form{
        gap: 1em;
    }
    .filtre-field{
        display: flex;
        flex-direction: column;
    }
}