
:root{
    --refMarron: #38302b;  /* marron */
    --refOrange: #fdc651;  /* orange */
    --refJaune: #ffe27d;  /* jaune */
    --refJauneC: #fff5d2;  /* jaune clair */
    --refRouge: #dc3545;  /* rouge */
    --refVert: #28a745;  /* vert */
    --refGrisC: #f9f9f9;  /* gris clair */

}
html {font-size: 62.5%;}
body {font-family: "Poppins", sans-serif;color:black;font-size: 1.5rem;line-height: 1.7rem;
    background: var(--refGrisC, white);
}

.infosDev{display: none !important;}

h1, .h1{font-size:3.5rem;line-height:3.7rem;font-weight:900;text-align:center;margin:4.0rem 0 3.5rem 0 ;color:var(--refRouge, black);position: relative;font-family: "Playfair Display", serif;}
h1 span, .h1 span{font-size:2.8rem;line-height:3.0rem;font-weight:900;text-align:center;color:black;}
h2, .h2{font-size:2.4rem;line-height:2.6rem;font-weight:900;text-align:center;margin-top:2.5rem;margin-bottom:1.0rem;color:black;padding:10px 20px;border-radius: 5px;width: 100%;font-family: "Playfair Display", serif;}
/*h2 span{font-size:2.0rem;line-height:2.2rem;font-weight:300;}*/
h3, .h3{font-size:1.6rem;line-height:1.7rem;font-weight:600; text-align:left;margin-top:2.0rem;margin-bottom:0.8rem;color:black;}
h4, .h4{font-size:1.5rem;line-height:1.6rem;font-weight:600; text-align:left;margin-top:1.0rem;margin-bottom:0.5rem;color:black;}
h5, .h5{font-size:1.4rem;line-height:1.5rem;font-weight:600; text-align:left;margin-top:0.8rem;margin-bottom:0.4rem;color:black;}
h6, .h6{font-size:1.3rem;line-height:1.4rem;font-weight:600; text-align:left;margin-top:0.6rem;margin-bottom:0.3rem;color:black;}
a{color:black; }
a:hover{color:black;cursor: pointer; }
@media screen and (max-width: 991px){
    h1, .h1{font-size:2.4rem;line-height:2.6rem;}
    h1 span, .h1 span{font-size:2.1rem;line-height:2.3rem;}
    /*  h2, .h2{font-size:1.6rem;line-height:1.8rem;}
      h3, .h3{font-size:1.4rem;line-height:1.6rem;}
      h4, .h4{font-size:1.3rem;line-height:1.5rem;}
      h5, .h5{font-size:1.2rem;line-height:1.4rem;}
      h6, .h6{font-size:1.1rem;line-height:1.3rem;}*/
}
.olStyleInside{list-style-position: inside !important;}

/* formulaire
----------------------------- */
label, input,select,option{color: black;font-size: 1.6rem;line-height: 1.7rem;font-family: "Poppins", sans-serif;}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 255, 255, 0.3);
    outline: 0 none;
}

.form-control::file-selector-button{padding:11px 15px;}

/* 1. Ajouter l'étoile rouge aux labels qui ont la classe 'required' */
label.required::after {content: "*";color: var(--bs-danger);padding-left: 0.25rem;font-weight: 600;}
/* 2. Exclure les labels des input type radio */
input[type="radio"] + label.required::after {content: ""; /* Supprimer l'étoile rouge pour les radios */}
/* 3. Ajouter "(facultatif)" aux champs qui ne sont pas required
input:not([required]) + label::after,
textarea:not([required]) + label::after,
select:not([required]) + label::after {content: " (facultatif)";color: #6c757d;font-style: italic;padding-left: 0.25rem;}*/
input[type="checkbox"]:checked {background-color: black;border-color: black;accent-color: black;}

.table tr>th{color:black;padding:10px;background-color: black; }
.table tr>td{vertical-align: middle;}
/*.table tr:nth-child(even){background-color: #f2f2f2;}*/

.formErrors{margin:10px 0;}
    .formErrors ul{margin:0;margin: 0; list-style-type:none;}
        .formErrors ul li{margin:0;margin: 0;}

.textSuccessUpload{font-style: italic;font-size: 12px;}

/* bloc
----------------------------- */
.clearBoth{clear:both !important;height:0px !important; overflow: hidden !important;border:none !important;padding:0 !important;margin:0 !important;}
.dblock{display: block;}
.boxSixing{  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

/* class fond
----------------------------- */
/*.bgBlanc{background-color: white;}*/
/*.bgNoir{background-color: black;}*/

/*.bgRouge{background-color: var(--refRouge, black);}*/
/*.bgVert{background-color: var(--refVert, black);}*/

/* class fond hover
----------------------------- */
/*.bgHoverBlanc:hover{background-color: white !important;}*/
/*.bgHoverNoir:hover{background-color: black !important;}*/

/*.bgHoverVert:hover{background-color: var(--refVert, black) !important;}*/
/*.bgHoverRouge:hover{background-color: var(--refRouge, black) !important;}*/


/* class border
----------------------------- */
/*.bBlanc{border: 1px solid white;}*/
/*.bNoir{border: 1px solid black;}*/

/*.bVert{border: 1px solid var(--refVert, black);}*/
/*.bRouge{border: 1px solid var(--refRouge, black);}*/

/* class couleur texte
----------------------------- */
/*.cBlanc{color: white !important;}*/
/*.cNoir{color: black !important;}*/

/*.cVert{color: var(--refVert, black) !important;}*/
/*.cRouge{color: var(--refRouge, black) !important;}*/

/* class couleur texte hover
----------------------------- */
/*.cHoverBlanc:hover{color: white !important;}*/
/*.cHoverNoir:hover{color: black !important;}*/

/*.cHoverVert:hover{color: var(--refVert, black) !important;}*/
/*.cHoverRouge:hover{color: var(--refRouge, black) !important;}*/


/* largeur
----------------------------- */
/* rajoute des tailles en plus de celle de bootstrap5 : w-25, w-50, w-75, w-100, w-auto */
.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w30 {width: 30%;}
.w35 {width: 35%;}
.w40 {width: 40%;}
.w45 {width: 45%;}
.w55 {width: 55%;}
.w60 {width: 60%;}
.w65 {width: 65%;}
.w70 {width: 70%;}
.w80 {width: 80%;}
.w85 {width: 85%;}

/* max width */
.maxWidth600{max-width: 600px;width: 100%;}
.maxWidth700{max-width: 700px;width: 100%;}
.maxWidth800{max-width: 800px;width: 100%;}
.maxWidth900{max-width: 900px;width: 100%;}
.maxWidth1000{max-width:1000px;width: 100%;}
.maxWidth1100{max-width:1100px;width: 100%;}

/* bouton largeur mini
----------------------------- */
/*.btnMinWidth{min-width: 280px;}*/

/* bouton defaut
----------------------------- */
.btnDefaut{text-decoration: none;color:black;font-size: 1.5rem;line-height:1.7rem;font-weight: 400;text-align: center;
    background-color: var(--refOrange, black);border:0;border-radius: 10px;padding: 10px 20px 10px 20px;box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);transition: transform .2s;}
.btnDefaut:hover{background-color: var(--refMarron, black);color: white;}
.btnDefaut:active, .btnDefaut:focus, .btnDefaut:focus-visible {background-color: var(--refOrange, black) !important;color: white !important;}
.btn-check:checked + .btnDefaut{background-color: var(--refOrange, black) !important;color: white !important;}

.btnVert{background-color: var(--refVert, black); color: white;}
/*.btnVert:hover{background-color: var(--refVert, black); color: white;}*/
.btnRouge{background-color: var(--refRouge, black); color: white;}
/*.btnRouge:hover{background-color: var(--refRouge, black); color: white;}*/
.btnGrisC{background-color: var(--refGrisC, black); color: black;}

.divBtnValidEtape{text-align: center;}
.divBtnValidEtape button{text-transform: uppercase;font-size: 20px;font-weight: 700;}

.btnDefaut:disabled,
.btnDefaut[disabled]{display: none;}

/*********************************************************************************************/
/* override class bootstrap
*********************************************************************************************/

/* container
----------------------------- */
.container {max-width: 1100px; }

/* formulaire
----------------------------- */
/* form select */
.form-control, .form-select{color: black;font-size: 1.6rem;line-height: 1.7rem;font-family: "Poppins", sans-serif;height: 40px;border-radius: 10px;}

/* bouton
----------------------------- */
/*.btn{font-size: 1.6rem;line-height: 1.7rem;}*/



