/* -----------------------------------------------------------
		D3 Diagramme v1 !!! :-)
-------------------------------------------------------------- */
    
.d3_large_screen_svg {
  background: white;
  border: 2px solid #A6A6A6;
  width: 100%;
  height: auto;
}
    
/* ATTENTION SVG !!!
  Les couleurs et les marges / padding 
  doivent être changées dans le SVG, marche pas ici ! */    

/* Chart title styling */
.title_d3_large_screens_v1 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 800;
  font-size: 24px;
}

/* Chart legend styling */
/* Large screens: 1025px and above */
.legend_d3_large_screens_v1 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-size: 14px;
  fill: #666;
}
/* Medium screens: 768px – 1024px */
@media only screen and (max-width: 1024px) {
  .legend_d3_large_screens_v1 {
    font-size: 17px; /* slightly smaller font for tablets */
  }
}
/* Small screens: 767px and below 
POUR une raison inconnue, cette troisième taille ne marche pas !*/
@media only screen and (max-width: 767px) {
  .legend_d3_large_screens_v1 {
    font-size: 18px; /* largest font again for mobile */
  }
}

/* Chart yAxis labels styling */
.yAxis_text_d3_large_screens_v1 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-size: 20px;
}
/* 2nd small line with details */
.yAxis_subline_d3_large_screens_v1 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-size: 16px;
  fill: #666;
}

.bar_label_d3_large_screens_v1 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-size: 20px;    
}


/* -----------------------------------------------------------
		Fin D3 Diagramme v1 !!!
-------------------------------------------------------------- */



/* -----------------------------------------------------------
		D3 Diagrammes v2  !!! :-)
-------------------------------------------------------------- */

div.frame_d3_LS_v2 {
  background: white;
  border: 2px solid #A6A6A6;
  width: 100%;
  height: auto;
  margin-top: 15px;
  padding-bottom: 10px;
  /*margin-bottom: 40px;*/
  container-type: inline-size; /* Enables container queries */
}

/* only the diagram part, without Title / legend */
svg.d3_LS_svg_v2 {
  /*background: white;*/
  border: 0px dashed pink;
  width: 100%;
  height: auto;
}

/* ––– D3 Diagram Title ––– */
/* Large screens: 1025px and above */
h2.title_d3_LS_v2 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  color: #404040;
  font-weight: 800;
  margin-top: 42px;
  margin-bottom: 0;
  text-align: center;
  font-size: 2.85em;
  font-size: 3.5vw; /* Percent of the viewport width, fallback */
  font-size: 3.6cqw; /* Percent of the container's width */
}
/* Medium screens: 768px – 1024px */
@media only screen and (max-width: 1024px) {
  h2.title_d3_LS_v2 {
  margin-top: 34px;
  font-size: 3.7vw;
  font-size: 3.9cqw;
  }
}
/* Small screens: 767px and below 
POUR une raison inconnue, cette troisième taille ne marche pas !*/
@media only screen and (max-width: 767px) {
  h2.title_d3_LS_v2 {
  margin-top: 28px;
  font-size: 4vw;
  font-size: 4.2cqw;
  }
}

/* ––– D3 Additional Title class – when there is no subtitle ––– */
/* Large screens: 1025px and above */
h2.no_subtitle_d3_LS_v2 {
  margin-bottom: 24px;
}
/* Medium screens: 768px – 1024px */
@media only screen and (max-width: 1024px) {
  h2.no_subtitle_d3_LS_v2 {
  margin-bottom: 18px;
  }
}
/* Small screens: 767px and below 
POUR une raison inconnue, cette troisième taille ne marche pas !*/
@media only screen and (max-width: 767px) {
  h2.no_subtitle_d3_LS_v2 {
  margin-bottom: 12px;
  }
}



/* ––– Subtitle ––– */
/* Large screens: 1025px and above */
h3.subtitle_d3_LS_v2 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  color: #666;
  font-weight: 400;
  margin-top: 16px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 2em;
  font-size: 2.5vw; /* Percent of the viewport width, fallback */
  font-size: 2.6cqw; /* Percent of the container's width */
}
/* Medium screens: 768px – 1024px */
@media only screen and (max-width: 1024px) {
  h3.subtitle_d3_LS_v2 {
  margin-top: 13px;
  margin-bottom: 15px;
  font-size: 2.8vw;
  font-size: 2.9cqw;
  }
}
/* Small screens: 767px and below 
POUR une raison inconnue, cette troisième taille ne marche pas !*/
@media only screen and (max-width: 767px) {
  h3.subtitle_d3_LS_v2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 3vw;
  font-size: 3.1cqw;
  }
}

/* ––– Legend ––– */
/* Large screens: 1025px and above */
p.legende-text_d3_LS_v2 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  color: #666;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 1.6em;
  font-size: 2.1vw; /* Percent of the viewport width, fallback */
  font-size: 2.2cqw; /* Percent of the container's width */
  line-height: 1.5;
}
/* Medium screens: 768px – 1024px */
@media only screen and (max-width: 1024px) {
  p.legende-text_d3_LS_v2 {
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: 2.25vw;
  font-size: 2.35cqw;
  }
}
/* Small screens: 767px and below 
POUR une raison inconnue, cette troisième taille ne marche pas !*/
@media only screen and (max-width: 767px) {
  p.legende-text_d3_LS_v2 {
  margin-top: 5px;
  margin-bottom: 8px;
  font-size: 2.4vw;
  font-size: 2.5cqw;
  }
}


/* ATTENTION SVG !!!
  Les couleurs et les marges / padding 
  doivent être changées dans le SVG, marche pas ici ! */    

/* Chart yAxis labels styling */
.yAxis_text_d3_LS_v2 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-size: 20px;
}

/* 2nd small line with details */
.yAxis_subline_d3_LS_v2 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-size: 16px;
  fill: #666;
}

.bar_label_d3_LS_v2 {
  font-family: rubik-local,Rubik,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-size: 20px;    
}

/* -----------------------------------------------------------
		FIN D3 Diagrammes v2
-------------------------------------------------------------- */