/* réinitialisation */
#interactive-chart, #interactive-chart *,#interactive-chart *::before,#interactive-chart *::after {
  box-sizing: border-box;
}

/* réinitialisation des boutons */
button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  line-height: normal;
  text-align: inherit;
  appearance: none;     /* Supprime le style natif (WebKit/Blink) */
  -webkit-appearance: none; /* Safari iOS */
  -moz-appearance: none;    /* Firefox */
  cursor: pointer;
}

ol {
  list-style-position: inside; /* La puce rentre dans le bloc */
}

/* Numéro en gras */
ol li::marker {
  font-weight: 700;
}

ul.no-bullet{
  list-style: none;
  padding-left:0;
}

ul.classic-bullets {
  list-style: disc;
  list-style-position: inside; /* La puce rentre dans le bloc */
  padding-left: 1.2rem; /* espace entre le bord et la puce + texte */
}

ul.classic-bullets li {
  position: relative;
  padding-left: 1.2rem; /* espace entre le bord et la puce + texte */
}

ul.custom-bullets {
  list-style: none;
  padding-left: 1.2rem;
  margin: 0;
}

ul.custom-bullets li {
  position: relative;
  padding-left: 1.2rem; /* espace entre le bord et la puce + texte */
}

ul.custom-bullets li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.6em; /* ajuster l'alignement vertical */
  width: 6px;
  height: 6px;
  line-height: 1;
  border-radius: 50%;
}

/* lb = light blue / db = dark blue */
ul.lb-bullets li::before{ background-color: #40a8e4; }
ul.db-bullets li::before{ background-color: #106ba4; }
ul.pink-bullets li::before{ background-color: #c105ad; }
ul.black-bullets li::before{ background-color: #000; }

/* pour espacement vertical entre 2 blocs => mb = margin-bottom */
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }

.mt-10px { margin-top: 10px; }
.mt-20px { margin-top: 20px; }
.mt-30px { margin-top: 30px; }

.mb-10px { margin-bottom: 10px; }
.mb-20px { margin-bottom: 20px; }
.mb-30px { margin-bottom: 30px; }

/* pour padding-left (pour les ul > li par exemple) */
.pl-20px { padding-left: 20px; }
.pl-30px { padding-left: 30px; }
.pl-40px { padding-left: 40px; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 2rem; }
.pl-6 { padding-left: 3rem; }

/* pour margin-left (pour les ul > li par exemple) */
.ml-20px { padding-left: 20px; }
.ml-30px { padding-left: 30px; }
.ml-40px { padding-left: 40px; }

ul.bullet {
  list-style-type: disc;
  padding-left: 1.5rem; /* ou 40px, pour décaler les puces vers la droite */
}


/* .quick-links ul { display:flex; flex-wrap:wrap; gap:.5rem 1rem; list-style:none; padding:0; margin:0; } */
.quick-links {
  display: flex;
  align-items: center;      /* aligne le label et les liens sur la même ligne */
  gap: .5rem 1rem;          /* espace entre label et liens */
  flex-wrap: wrap;          /* passe à la ligne si l’espace manque */
}

.quick-links-label {
  margin: 0;                /* supprime le margin par défaut du <p> */
  font-weight: 600;         /* optionnel : un peu plus visible */
}

.quick-links ul {
  display: flex;            /* met les <li> sur une ligne */
  gap: .5rem 1rem;          /* espace entre liens */
  list-style: none;         /* pas de puces */
  margin: 0;
  padding: 0;
  flex-wrap: wrap;          /* renvoie à la ligne si besoin */
}


/* ------------ boutons génériques bleus --------------------------------- */

a.generic-button{
display: inline-block!important;
margin-top: 12px;
padding: 6px 12px;
text-align: center;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
}
a.generic-button.blue-button{
background-color: #106ba4;
}
a.generic-button.dark-blue{
background-color: #013759;
}

a.generic-button.pink-button{
background-color: #ba0391;
}

a.generic-button:visited{
color: white;
}

a.generic-button:hover{
/* ou couleur orange de survol ? */
/* background-color:  #f8a412); */
color: white;
text-decoration:none;
}

a.generic-button.blue-button:hover{
background-color: #46b0f2;
}

a.generic-button.dark-blue:hover{
background-color: #46b0f2;
}

a.generic-button.pink-button:hover{
background-color: #ec31c2;
}


/* ############################################# CODES COULEUR ################################### */

/* ==================== codes couleur times tables ======================================================================== */

/* ==================== EN ==================== */
body.en .color-time-1{color:#029684} /* => vert foncé */
body.en .color-time-2{color:#10b101} /* => vert moyen */
body.en .color-time-3{color:#80cf04} /* => vert clair */
body.en .color-time-4{color:#00c5cd} /* => bleu turquoise */
body.en .color-time-5{color:#44abe6} /* => bleu clair */
body.en .color-time-6{color:#6072e0} /* => bleu foncé */
body.en .color-time-7{color:#9477e1} /* => mauve */
body.en .color-time-8{color:#7943bb} /* => violet */
body.en .color-time-9{color:#c3058d} /* => rose foncé */
body.en .color-time-10{color:#e270c5} /* => rose clair */
body.en .color-time-11{color:#ff8957} /* => orange */
body.en .color-time-12{color:#ee595d} /* => rouge */
/* ==================== FR ==================== */
body.fr .color-time-1{color:#10b101} /* => vert moyen */
body.fr .color-time-2{color:#80cf04} /* => vert clair */
body.fr .color-time-3{color:#00c5cd} /* => bleu turquoise */
body.fr .color-time-4{color:#44abe6} /* => bleu clair */
body.fr .color-time-5{color:#6072e0} /* => bleu foncé */
body.fr .color-time-6{color:#9477e1} /* => mauve */
body.fr .color-time-7{color:#c3058d} /* => rose foncé */
body.fr .color-time-8{color:#e270c5} /* => rose clair */
body.fr .color-time-9{color:#ff8957} /* => orange */
body.fr .color-time-10{color:#ee595d} /* => rouge */
body.fr .color-time-11{color:#7943bb} /* => violet */
body.fr .color-time-12{color:#029684} /* => vert foncé */


/* -------------------------------------------------------------------------- */
/* ----------------------------- COMMON SPINNER BOX ------------------------- */
/* -------------------------------------------------------------------------- */
.relative-position{position: relative}
/* Parent overlay : on active Flexbox pour centrer le spinner */
#common-overlay {
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
	font-family: 'Roboto Condensed', Calibri, sans-serif;
    display: flex;                /* ✅ Active le centrage flex */
    align-items: center;          /* ✅ Centre verticalement */
    justify-content: center;      /* ✅ Centre horizontalement */
}


/* Spinner centré grâce à Flexbox */
#common-spinner{
    box-sizing:border-box;
    font-weight:400;
	font-size:18px;
    text-align:center;
    border-radius:4px;
    overflow:hidden;
    background-color:#fff;
    color:#333;
    width:50%;
    max-width:500px; /* facultatif : limite la largeur sur grands écrans */
    padding:20px;    /* pour éviter que le texte touche les bords */
}

@media (max-width: 599px){
    #common-spinner{
        width:80%;
    }
}
@media (max-width: 480px){
    #common-spinner{
		padding:16px;
    }
}

.spinner-msg p{
    margin-bottom:0;
}

.spinner-msg:hover{
    background-color:#fff;
}

.spinner-ext{
    text-align:center;
}

.spinner-anim,
.spinner-anim:before,
.spinner-anim:after{
    border-radius:50%;
    width:2.5em;
    height:2.5em;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation:myanim 1.8s infinite ease-in-out;
    animation:myanim 1.8s infinite ease-in-out;
}

.spinner-anim{
    color:#ff513c;
    font-size:10px;
    margin:auto;
    margin-bottom:30px;
    position:relative;
    text-indent:-9999em;
    -webkit-transform:translateZ(0);
    -ms-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-animation-delay:-0.16s;
    animation-delay:-0.16s;
}

.spinner-anim:before,
.spinner-anim:after{
    content:'';
    position:absolute;
    top:0;
}

.spinner-anim:before{
    color:#ff9204;
    left:-3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner-anim:after{
    color:#ff087d;
    left: 3.5em;
}

@-webkit-keyframes myanim {
    0%,80%,100%{box-shadow: 0 2.5em 0 -1.3em}
    40%{ box-shadow: 0 2.5em 0 0}
}
@keyframes myanim {
    0%,80%,100%{box-shadow: 0 2.5em 0 -1.3em}
    40%{box-shadow: 0 2.5em 0 0}
}

/* -------------------------------------------------------------------------- */
/* ------------------------------------- OTHER ------------------------------ */
/* -------------------------------------------------------------------------- */
.banner-horizontal{text-align: center}
.banner-horizontal img{
width:100%;
max-width:100%;
height:auto;
display:block;
}