* {
  box-sizing: border-box; 
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  font-family: 'tex_gyre_adventorregular';
  font-size: 17px;
}
#main {
  display: flex;
  flex: 1;
}
#main > article {
  flex: 1 1 60vw;
  order: 2;
  display:flex;
  max-height: 66vh;
}
#main > aside {
  flex: 1 1 40vw;
  display:flex;
  flex-direction:column;
  order: 1;
  max-height: 66vh;
}
/* solution page */
#bg_first_block {
  flex-grow: 100;
  background-image: url('../img/new/indicesOpaque.jpg');
  background-size: cover;
}
#ourSolution {
  flex-grow:100;  
  font-size: 20px;
  text-align: justify;
}
#ourSolution > p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  overflow-wrap: break-word;
}
#ourSolutionFirstBlock {
  display: flex;
  flex: 1;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  margin-left: 5%;
  margin-right: 5%;
  font-size: 16px;
}
#ourSolutionFirstBlock > article {
  display:flex;
  flex-direction:column;
  order: 1;
  margin-left: 3%;
  margin-right: 3%;
}
#ourSolutionFirstBlock > aside {
  order: 2;
  display:flex;
  position: relative;
  flex: 0 0 25vw;
  margin-top: 5%;
  padding-left: 5%;
}
#ourSolutionSecondBlock {
  display: flex;
  flex: 1;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 16px;
  margin-top: 50px
}
#ourSolutionSecondBlock > aside {
  display:flex;
  flex-direction:column;
  order: 1;
  margin-left: 2%;
}
#ourSolutionSecondBlock > article {
  order: 2;
  display:flex;
  position: relative;
  flex: 0 0 90vw;
  margin-left: 5%;
}
#video > video {
  
  /*-webkit-box-shadow: 3px 3px 3px 3px #0061ad;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  /*-moz-box-shadow:    3px 3px 3px 3px #0061ad;  /* Firefox 3.5 - 3.6 */
  /*box-shadow:         3px 3px 3px 3px #0061ad;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
#plaquette {
  flex-grow: 100;
  background-image: url('../img/new/indicesOpaque.jpg');
  background-size: cover;  
  position: relative;
  align-items: right;
}
#visuelPlaquette {
  margin-left: 85%;
  position: relative;
  margin-right: 20px;
  display: flex;
  border-radius: 3px;
  box-shadow: 0 0 3px rgb(0 0 0 / 100%);
  background-color: rgba(0 0 0 /100%);
  border-style: groove;
  border-color: rgba(0 0 0 /100%);
  overflow: hidden;
  transform: rotate(8.415216549184834deg);
  width: 158px;
  height: 211px;
}
#textePlaquette {
  position: relative;
  margin: 63px 50px 64px calc((100% - 980px) * 0.7);
  left: 130px;
  top: 100px;
  grid-area: 1 / 1 / 2 / 2;
  justify-self: start;
  align-self: start;
  text-align: center;
  color: #0061ad;
  font-weight: bold;
}
/* legal page */  
#legal > a {
  text-decoration: none;
}
header {
    width: 100%; /* Prend toute la largeur de l'écran */
    background-color: #ffffff; /* Couleur de fond (modifiable) */
    padding: 10px 0; /* Espace autour du header */
    position: relative;
}

.header-container {
    display: flex; /* Utiliser le flexbox pour centrer les images */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    flex-wrap: wrap; /* Permet le passage à la ligne si nécessaire */
    max-width: 1200px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centre le conteneur dans le header */
}

.header-container a {
    margin: 0 15px; /* Espace horizontal entre les images */
}

.logo {
    width: 135px; /* Largeur de l'image du logo */
    height: 90px; /* Hauteur de l'image du logo */
    object-fit: cover; /* Ajustement de l'image */
    object-position: 50% 50%; /* Positionnement de l'image */
}

.index-image {
    width: 576px; /* Largeur de l'image d'index */
    height: 124px; /* Hauteur de l'image d'index */
    object-fit: cover; /* Ajustement de l'image */
    object-position: 70% 50%; /* Positionnement de l'image */
}
footer, article aside {
  padding: 1em;
}
footer{
  height: 15vh;
  display: flex;
  flex-direction:column;
  align-items: center;
  color: #0061ad;
  font-weight: bold;
  font-size: 15px;
}
footer > div {
}
aside > adide1{
  flex: 1 1 13vw;
  display:flex;
}
aside > adide2 {
  flex: 1 1 17vw;
  display:flex;
}
adide1 > adide12{
  display:flex;
  flex:33.33333% 0 0;
}
centerheader{
  display: flex;
  flex-direction: row;
  align-items: inherit;
}
#mainaboutus {
  display: flex;
  flex: 1;
}
#aboutus {
  background-image: 
  url("../img/new/aboutus.jpg");
  background-size:cover; 
  background-position: center;
  flex-grow: 100;
  display: flex;
  flex-direction: column-reverse;
}
#governance {
  background-image: 
  url("../img/new/governance.jpg");
  background-size:cover; 
  background-position: center;
  display: flex;
  flex-grow: 100;
  flex-direction: column-reverse;
}
#news {
  background-image: 
  url("../img/new/news.jpg");
  background-size:cover; 
  background-position: center;
  display: flex;
  flex-grow: 100;
  flex-direction: column-reverse;
}
#solution {
  background-image: 
  url("../img/new/solution.jpg");
  background-size:cover; 
  background-position: center;
  flex-grow: 100;
  display: flex;
  justify-content: center;
}
#indices {
  background-image: 
  url("../img/new/indices.jpg");
  background-size:cover; 
  flex-grow: 100;
  display: flex;
  justify-content: center;
}

#indices:hover, #solution:hover, #governance:hover, #aboutus:hover, #news:hover {
  cursor: pointer;
  background-size:0 0,auto;
}

#indices:hover{
  background-image: 
  url("../img/new/indices_hover.jpg");
  background-size:cover; 

}

#solution:hover{
  background-image: 
  url("../img/new/solution_hover.jpg");
  background-size:cover; 

}

#governance:hover{
  background-image: 
  url("../img/new/governance_hover.jpg");
  background-size:cover; 
}

#news:hover{
  background-image: 
  url("../img/new/news_hover.jpg");
  background-size:cover;
  background-position: center; 
}

#aboutus:hover{
  background-image: 
  url("../img/new/abousus_hover.jpg");
  background-size:cover; 

}


content{
  color:white;
  align-self: center;
  font-size: 1.9em;
  text-shadow: 2px 2px black;
}
contentbottom{
  color:white;
  align-self: flex-end;
  font-size: 1.7em;
  text-shadow: 2px 2px black;
  margin-right: 5px;
  margin-bottom: 5px;
  padding-right: 5px;
}

@media only screen and (max-width: 1728px) {
    #main {
        flex-direction: column; /* Empêche l'alignement horizontal */
        width: 100%; /* Prend toute la largeur de l'écran */
    }

    article, aside > div, #solution {
        width: 100%; /* Chaque bloc prend 100 % de la largeur */
        flex: none; /* Empêche la flexibilité par défaut */
        box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur totale */
        margin: 0; /* Réinitialise les marges pour éviter tout débordement */
        padding: 10px; /* Ajoute un peu de padding si nécessaire */
    }

    aside {
        display: flex;
        flex-wrap: wrap; /* Permet de passer à la ligne */
        justify-content: space-between; /* Espacement égal entre les blocs */
    }

    aside > div {
        flex: 1 1 30%; /* Prend environ 30 % de la largeur pour trois colonnes */
        margin: 5px; /* Ajoute un espacement entre les colonnes */
    }

    #solution {
        margin-top: 10px; /* Espace entre le bloc de solution et les autres */
    }
    .header-container {
        flex-direction: column; /* Aligne les images en colonne sur petits écrans */
    }
    .header-container a {
        margin-bottom: 10px; /* Espace vertical entre les images */
    }
    
    /* Style spécifique pour le graphique */
    .highcharts-container, main-indice {
        width: 100% !important; /* S'assure que le graphique utilise toute la largeur */
        height: 300px; /* Hauteur fixe pour le graphique */
        padding: 0 10px;
    }
    
    
}






/* about us page */

aboutus{
  background-image: url("../img/new/aboutusbackground.webp"); 
  background-size:cover; 
  flex-grow: 100;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#aboutusblock1{
  flex-basis: 70%;
  display: flex;
  flex-direction: column;
  margin-right: 90px;
  margin-left: 90px;
  margin-bottom: 40px;
  margin-top: 40px;
}

#aboutusblock2{
  width: 95%;
  margin: 0 auto;
}

#aboutusblock2 > table > tbody > tr >  th{
  font-weight: unset;
  text-align: left;
  width: 100%;
}

#aboutusblock2 > table,#aboutusblock2 > table > tbody > tr > th,#aboutusblock2 > table > tbody > tr > td {
  border: 10px solid transparent;
}

title{

  display: flex;
  justify-content: center;

}

/* governance page */

.pdfimg{
	width: 50%;
	  -webkit-box-shadow: 3px 3px 3px 3px #000000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	  -moz-box-shadow:    3px 3px 3px 3px #000000;  /* Firefox 3.5 - 3.6 */
	  box-shadow:         3px 3px 3px 3px #000000;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

}

aside > aside1{
  flex: 1 1 20vw;
  display:flex;
}
aside > aside2 {
  flex: 1 1 20vw;
  display:flex;
}
#gov {
  display: flex;
  flex: 1;
  max-height: 66vh;
}
#gov > article {
  /*flex: 1;*/
  order: 2;
  flex: 0 0 60vw;
  display:flex;
  max-height: 66vh;
}
#gov > aside {
  flex: 0 0 40vw;
  display:flex;
  flex-direction:column;
  order: 1;
  max-height: 66vh;
}
#methodo {
  background-image: 
  url("../img/new/statementsbg.webp");
  background-size:cover; 
  flex-grow: 100;
  display: flex;
  justify-content: center;
  max-height: 80vh;
}
#ESGmethodo {
  background-image: 
  url("../img/new/sustainability.jpg");
  background-size:cover; 
  flex-grow: 100;
  display: flex;
  justify-content: center;
  max-height: 80vh;
}
#statements {
  background-image: 
  url("../img/new/indices.jpg");
  background-size:100% 100%; 
  display: flex;
  flex-grow: 100;
  justify-content: center;
  max-height: 80vh;
}
#ESGstatements {
  background-image: 
  url("../img/new/sustainability2.jpg");
  background-size:cover; 
  display: flex;
  flex: 0 1 60%;
  flex-grow: 100;
  justify-content: center;
  background-position: center;
  max-height: 80vh;
}
#policies {
  background-image: 
  url("../img/new/tingey-injury-law-firm-DZpc4UY8ZtY-unsplash.jpg");
  background-size:cover; 
  flex-grow: 100;
  display: flex;
  justify-content: center;
  max-height: 80vh;
}
#policies > a {
	justify-content: center;
	align-items: center;
	display: flex;
  flex: 1;
}
#ESGScope {
  background-image: 
  url("../img/new/andreas-gucklhorn-mawU2PoJWfU-unsplash.jpg");
  background-size:cover; 
  flex-grow: 100;
  display: flex;
  justify-content: center;
  max-height: 80vh;
}
#ESGScope > a {
  justify-content: center;
  align-items: center;
  display: flex;
  flex: 1;
}
#statements > a {
	justify-content: center;
	align-items: center;
	display: flex;
  flex: 1;
}
#ESGstatements > a {
  justify-content: center;
  align-items: center;
  display: flex;
  flex: 1;
}
#methodo> a {
	justify-content: center;
	align-items: center;
	display: flex;
}
#methodo > a {
  flex: 0 1 auto;
}
#ESGmethodo> a {
  justify-content: center;
  align-items: center;
  display: flex;
}
#ESGmethodo > a {
  flex: 0 1 auto;
}
#statements > a {
  /*padding: 50px;*/
  flex: 0 1 auto;
}
#ESGstatements > a {
  /*padding: 50px;*/
  flex: 0 1 auto;
}
#policies > a {
  flex: 0 1 auto;
}

/*Fonts*/

@font-face {
  font-family: 'tex_gyre_adventorregular';
  src: url('./fonts/texgyreadventor-regular-webfont.eot');
  src: url('./fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fonts/texgyreadventor-regular-webfont.woff') format('woff'),
  url('./fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
  url('./fonts/texgyreadventor-regular-webfont.svg#tex_gyre_adventorregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'tex_gyre_adventoritalic';
  src: url('texgyreadventor-italic-webfont.eot');
  src: url('texgyreadventor-italic-webfont.eot?#iefix') format('embedded-opentype'),
  url('texgyreadventor-italic-webfont.woff2') format('woff2'),
  url('texgyreadventor-italic-webfont.woff') format('woff'),
  url('texgyreadventor-italic-webfont.ttf') format('truetype'),
  url('texgyreadventor-italic-webfont.svg#tex_gyre_adventoritalic') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'tex_gyre_adventorbold_italic';
  src: url('texgyreadventor-bolditalic-webfont.eot');
  src: url('texgyreadventor-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
  url('texgyreadventor-bolditalic-webfont.woff2') format('woff2'),
  url('texgyreadventor-bolditalic-webfont.woff') format('woff'),
  url('texgyreadventor-bolditalic-webfont.ttf') format('truetype'),
  url('texgyreadventor-bolditalic-webfont.svg#tex_gyre_adventorbold_italic') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'tex_gyre_adventorbold';
  src: url('texgyreadventor-bold-webfont.eot');
  src: url('texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('texgyreadventor-bold-webfont.woff2') format('woff2'),
  url('texgyreadventor-bold-webfont.woff') format('woff'),
  url('texgyreadventor-bold-webfont.ttf') format('truetype'),
  url('texgyreadventor-bold-webfont.svg#tex_gyre_adventorbold') format('svg');
  font-weight: normal;
  font-style: normal;

}

#app{
  flex-grow:100;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.geographic {
    text-align: left;
}

#body-index{
  flex-basis: 85%;
  text-align: center;
}

.indextableFirstColumn{
  text-align: left !important;
}

.negativeClass{
  color: red;
}

.positiveClass{
  color: #12ae26;
}

/* Dark mode background and text */
.dark-mode {
  background-color: #131722;
  color: #c0c9d6;
  transition: background-color 0.3s, color 0.3s;
}

/* Header and navigation */
.dark-mode header, .dark-mode nav {
  background-color: #1e2734;
  color: #c0c9d6;
  border-bottom: 1px solid #2a3f5a;
}

.dark-mode a {
  text-decoration: none;
  transition: color 0.3s;
}

.dark-mode a:hover {
  color: #72a7ff;
}

/* Table styling */
.dark-mode .table {
  background-color: #1b2431;
  border-color: #2a3f5a;
}

.dark-mode .table th, .dark-mode .table td {
  color: #c0c9d6;
  border-color: #2a3f5a;
}

.dark-mode .table th {
  background-color: #212b38;
}

.dark-mode .indextableFirstColumn {
  color: #ffffff;
  font-weight: bold;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: #1f2732;
}

.dark-mode .table-striped tbody tr:nth-of-type(even) {
  background-color: #1b212b;
}

/* Buttons and form elements */
.dark-mode .btn-secondary {
  background-color: #29374e;
  color: #ffffff;
  border: 1px solid #3c4b65;
}

.dark-mode .btn-secondary:hover {
  background-color: #3d4f6d;
}

/* Input and select fields */
.dark-mode input, .dark-mode select {
  background-color: #1e2838;
  color: #c0c9d6;
  border: 1px solid #3c4b65;
}

.dark-mode input::placeholder, .dark-mode select {
  color: #8a95a6;
}

/* Footer styling */
.dark-mode footer {
  background-color: #1e2734;
  color: #a5b1c5;
  border-top: 1px solid #2a3f5a;
}

/* Highcharts graph container */
.dark-mode .highcharts-container {
  color: #c0c9d6;
}

.dark-mode .highcharts-axis line {
  stroke: #404b5a;
}

.dark-mode .highcharts-grid-line {
  stroke: #333e4d;
}

.dark-mode .highcharts-tooltip {
  background-color: #1e2734 !important;
  color: #c0c9d6 !important;
}

/* Scrollbars */
.dark-mode ::-webkit-scrollbar {
  width: 10px;
}

.dark-mode ::-webkit-scrollbar-track {
  background-color: #131722;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background-color: #3c4b65;
  border-radius: 5px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: #4e5d77;
}

/* Cards or panels */
.dark-mode .card {
  background-color: #1f2732;
  color: #c0c9d6;
  border: 1px solid #2a3f5a;
}

.dark-mode .card-header {
  background-color: #212b38;
  color: #ffffff;
}

/* Additional hover effects for buttons or links */
.dark-mode .hover-effect:hover {
  color: #4e83f3;
}

/* General button styling */
.dark-mode-toggle {
    background-color: #131722;
    color: #ffffff;
    border: 1px solid #131722;
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
}

.dark-mode-toggle svg {
    margin-right: 8px;
}

.dark-mode-toggle:hover {
    background-color: #4e83f3;
    border-color: #72a7ff;
    color: #ffffff;
}

/* Styling for the moon icon or sun icon inside the button */
.dark-mode-toggle svg path {
    fill: #ffffff;
}

.dark-mode .dark-mode-toggle {
    background-color: #ffffff;
    border-color: #ffffff;
}

.dark-mode .dark-mode-toggle:hover {
    background-color: #72a7ff;
    border-color: #ffffff;
    color: #ffffff;
}

/* Dark mode styles for Highcharts */
.dark-mode .highcharts-axis,
.dark-mode .highcharts-grid-line {
    display: none;  /* Hide the grid lines */
}

.dark-mode .highcharts-background {
    fill: rgba(0, 0, 0, 0);  /* Set chart background color */
}

/* Dark mode styles for Highcharts */
.dark-mode .highcharts-axis-labels text {
    fill: #ffffff; /* Change axis labels color to white */
}

.dark-mode .highcharts-tooltip {
    background-color: rgba(20, 20, 20, 0.9); /* Dark background for tooltip */
    color: #ffffff; /* White text color for tooltip */
    border-radius: 5px; /* Optional: round the tooltip corners */
}

.dark-mode .highcharts-tooltip tspan {
    fill: #ffffff; /* Ensure all text inside the tooltip is white */
}

/* Dark mode styles for Highcharts */
.dark-mode .highcharts-legend text {
    fill: #ffffff; /* Change legend text color to white */
}

.dark-mode .highcharts-legend {
    background-color: rgba(30, 30, 30, 0.8); /* Semi-transparent background for legend */
    border-radius: 4px; /* Optional: rounded corners */
    padding: 10px; /* Optional: padding around the legend */
}

#darkModeButton {
    margin-left: auto; /* Push the button to the far right */
    margin-bottom: 0; /* Adjust as necessary */
}

/* Dark mode styles */
.dark-mode .data-table {
    background-color: #222531; /* Dark background for the table */
    color: #ffffff; /* Light text color */
}

/* Header styles */
.dark-mode .data-table th {
    background-color: #2C2F3C; /* Darker background for table header */
    color: #ffffff; /* Light text color for headers */
}

/* Row styles */
.dark-mode .data-table tr {
    border-bottom: 1px solid #444; /* Dark border for rows */
}

.dark-mode .data-table tr:hover {
    background-color: #333; /* Highlight color on row hover */
}

/* Cell styles */
.dark-mode .data-table td {
    color: #ffffff; /* Light text color for table cells */
}

/* Alternating row colors for better readability */
.dark-mode .data-table tr:nth-child(even) {
    background-color: #2C2F3C; /* Even rows background */
}

.dark-mode .data-table tr:nth-child(odd) {
    background-color: #222531; /* Odd rows background */
}

/* Dark mode styles for select elements */
.dark-mode select {
    background-color: #2C2F3C; /* Dark background for select */
    color: #ffffff; /* Light text color */
    border: 1px solid #444; /* Dark border */
    padding: 8px; /* Add some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}

/* Focus state */
.dark-mode select:focus {
    outline: none; /* Remove the default outline */
    border: 1px solid #0061ad; /* Border color when focused */
    background-color: #333; /* Slightly lighter background on focus */
}

/* Option styles */
.dark-mode select option {
    background-color: #2C2F3C; /* Dark background for options */
    color: #ffffff; /* Light text color for options */
}

/* Highcharts dark mode styles */
body.dark-mode .highcharts-legend-item text {
    fill: #FFFFFF !important; /* Legend text in white */
    font-weight: normal !important; /* Not bold in dark mode */
}

body.dark-mode .highcharts-axis text {
    fill: #FFFFFF !important; /* Axis labels in white */
}

body.dark-mode .highcharts-tooltip {
    background-color: rgba(50, 50, 50, 0.85) !important; /* Tooltip background */
    color: #FFFFFF !important; /* Tooltip text in white */
}

/* X and Y axis grid lines */
body.dark-mode .highcharts-grid-line {
    stroke: #444444 !important; /* Darker grid lines */
}

/* Dark mode styles for Highcharts range selector buttons */
.dark-mode .highcharts-range-selector button {
    background-color: #3a3a3a !important; /* Dark gray background */
    color: #CCCCCC !important; /* Light gray text */
    border: none; /* Remove default borders */
}

/* Dark mode hover effect for range selector buttons */
.dark-mode .highcharts-range-selector button:hover {
    background-color: #4a4a4a !important; /* Slightly lighter gray on hover */
    color: #FFFFFF !important; /* White text on hover */
}

/* Dark mode selected state for range selector buttons */
.dark-mode .highcharts-range-selector button:focus,
.dark-mode .highcharts-range-selector button.selected {
    background-color: #2a2a2a !important; /* Darker gray for selected state */
    color: #FFFFFF !important; /* White text for selected state */
}

/* Optional: Ensuring button borders are consistent */
.dark-mode .highcharts-range-selector button {
    border-radius: 4px; /* Optional: add rounded corners */
    border: 1px solid transparent; /* Make sure there's no border */
}

/* Ensure button's focus outline is not distracting */
.dark-mode .highcharts-range-selector button:focus {
    outline: none; /* Remove default outline */
}

/* Dark mode specific styling */
.dark-mode {
    background-color: #121212; /* Dark background color */
}

.dark-mode p {
    color: #000000; /* Black color for general paragraphs */
}

.dark-mode h1 {
    color: #ffffff; /* White color for headers */
}

.dark-mode .geographic {
    color: #c0c9d6; /* White color for headers */
}

/* Specific color for the paragraph starting with 'From the Entire' */
.dark-mode #ourSolutionSecondBlock p:nth-of-type(5) {
    color: #c0c9d6; /* Light gray for the specific paragraph */
}

.dark-mode #ourSolutionFirstBlock h1,
.dark-mode #ourSolutionSecondBlock h1 {
    color: #ffffff; /* White color for section headers */
}*/

/* Dark mode styles for solution text */
.dark-mode .solution-text {
    color: #ffffff; /* Black text color for general solution text */
}

/* Specific color for the targeted paragraph */
.dark-mode .solution-text:nth-of-type(3),
.dark-mode .solution-text:nth-of-type(4) {
    color: #c0c9d6; /* Light gray for the specific paragraph */
}

/* Ensure other solution text stays black */
.dark-mode .solution-text {
    color: #ffffff; /* Black color for other paragraphs */
}

/* Adjust the style for bold paragraphs if needed */
.dark-mode .solution-text[style*="font-weight: bold;"] {
    color: #ffffff; /* Maintain black color for bold text */
}

/* Dark mode styles for about us page text */
.dark-mode #aboutusblock1 div {
    color: #000000; /* Couleur noire par défaut pour le texte en dark mode */
}

/* Dark mode for bold text inside aboutusblock1 */
.dark-mode #aboutusblock1 div[style*="font-weight: bold"] {
    color: #000000; /* Couleur gris clair pour les textes en gras */
}

/* Dark mode for table text in aboutus page */
.dark-mode #aboutusblock2 th, .dark-mode #aboutusblock2 td {
    color: #000000; /* Texte dans les tableaux en gris clair pour le mode sombre */
}

/* Dark mode for ul list in aboutus */
.dark-mode #aboutusblock2 ul li {
    color: #000000; /* Gris clair pour les éléments de liste en mode sombre */
}

/* Appliquez à la première colonne (colonne d'index ou autre) */
.fixed-column {
    position: sticky;
    left: 0;
    background-color: white; /* La couleur de fond doit correspondre au fond de la table */
    z-index: 1;
    box-shadow: 2px 0px 5px rgba(0,0,0,0.1); /* Optionnel : ajoute un léger ombrage pour l'effet visuel */
}

/* Styles pour le conteneur de la table */
.table-container {
    display: block;
    overflow-x: auto; /* Défilement horizontal */
    white-space: nowrap; /* Empêche les colonnes de se réduire pour un affichage compact */
}