/*@todo variable*/

:root{
    --couleur1:#960021;
    --couleur2: #ffe6ec;
    --couleur3: #FFF8FA;
    --couleurB:#FFFFFFFF;
    --couleurN:#000000FF;
    --couleurR: rgba(220, 53, 69, 1);


    /* hover */
    --hover1: #ffe6ecb5;
    --hover2 :#960021bd;
    --hover3 :rgba(255, 239, 217, 0.5);
    --hover4 :#ffe6ff;
    --hoverB : rgba(255, 255, 255, 0.8);
    --hoverR: rgba(220, 53, 69, 0.8);
}

/*@todo couleur texte*/

.color1{
    color:var(--couleur1);
}
.color2{
    color:var(--couleur2);
}
.colorB{
    color:var(--couleurB);
}
.colorN{
    color:var(--couleurN);
}

/*@todo background*/

.background1{
    background-color: var(--couleur1);
}
.background2{
    background-color: var(--couleur2);
}
.backgroundB{
    background-color: var(--couleurB);
}
.backgroundN{
    background-color: var(--couleurN);
}

/* @todo trait horizontal */

.traitHorizontaleHeader {
    border-left-color: var(--couleur1);
}
.traitHorizontale1{
    border-color: var(--couleur1);
}
.traitHorizontale2{
    border-color: var(--couleur2);
}
.traitHorizontaleB{
    border-color: var(--couleurB);
}
.traitHorizontaleN{
    border-color: var(--couleurN);
}

/*@todo boutons */

.bouton1{
    background:var(--couleur2);
    color:var(--couleur1);
}
.bouton2{
    background-color:var(--couleur1);
    color:var(--couleur2);
}
.bouton3{
    background-color:var(--couleurB);
    color:var(--couleur1);
}
.boutonBoutique{
    background:var(--couleur1);
    color:var(--couleurB);
}
.boutonSupp{
    background:var(--couleurR);
    color:var(--couleurB);
}

/*todo les href */

.a1{
    color: var(--couleur1) !important;
}
.a2{
    color: var(--couleurB) !important;
}
.a3{
    color: var(--couleur3) !important;
}

/*todo les hover */

.bouton1:hover,.bouton1:active,.bouton1:focus {
    background: var(--hover4);
    color:var(--couleur1);
}
.bouton2:hover{
    background-color:var(--hover2);
    color:var(--couleurB);
}
.bouton3:hover{
    background-color:var(--couleur2);
}
.boutonBoutique:hover{
    background:var(--hover2);
}
.boutonSupp:hover{
    background:var(--hoverR);
}


.a1:hover{
    color:var(--hover2) !important;
    background:var(--couleurB);
}
.a2:hover{
    color:var(--hoverB) !important;
}

.hover1:hover{
    color:var(--hover1);
}
.hover2:hover{
    color:var(--hover2);
}

/*todo les active */
.dropdown-item:active{
    background-color: var(--hover1) !important;
}


/*todo Couleurs des checkbox et radio et des formulaires */

.form-control{
    background-color: var(--couleur3);
}
.form-check-input{
    background-color: var(--couleur3);
}
.form-check-input:checked{
    background-color:var(--couleur1);
}

/*todo compte*/
.bg-white,#pageAdresseCompte .card-body{
    background-color: rgb(202 202 202 / 10%) !important;
}

#compte{
    margin-top:10rem;
}