@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

* {
    box-sizing: border-box;
  }

h1,h2,h3,h4,h5,h6,a,span {
    font-family: 'Montserrat';
}

span.secondary--red {
    font-weight: 300;
    font-size: 22px;
    color: red;
    padding-bottom: 27px;
}

a {
    color: black;
    text-decoration: none;
}

strong {
    font-weight: bold;
}

header {
    display: flex;
    align-items: center;
}

.wrapper__max {
    width: 100%;
    max-width: 1920px;
    padding: 0px 24px 0px 12px;
}

.wrapper__navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.navbar-wrapper {
    display: flex;
    justify-content: space-between;
}

.navbar-wrapper__menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

.navbar-wrapper__logout {
    display: flex;
    align-items: center;
}

.navbar-wrapper__logout a {
    display: flex;
    align-items: center;
    gap: 8px;
 }

.home-icon {
    width: 100%;
    height: auto;
}

.menu__item--navbar {
    padding-left: 0;
}

.menu__item__nav--navbar {
    display: flex;
}

.menu__item__wrapper {
    display: flex;
    justify-content: center;
    height: 100%;
}

.menu__item__wrapper:last-child {
    display: flex;
    gap: 24px;
}

.menu__item--navbar__tab {
    list-style: none;
}

.submenu {
    display: none;
}

.menu__item__wrapper__prevnext--container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu__item__wrapper__prevnext--container span:hover {
    color: red;
    transition: color 0.1s ease;
}

.menu__item__wrapper__prevnext--container img {
    cursor: pointer;
}

.WR_Button_Class_Link:hover {
    color: red;
    transition: color 0.1s ease;
}


.logout-icon {
    width: 18px;
    height: 18px; 
}


.main-content {
    background-color: #f7f7f7;
    padding: 8px 16px 32px;
    height: fit-content;
}

.main-content-section__title {
    display: flex;
    flex-direction: column;
    margin: 40px 0;
}

.main-content-section__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 40px;
    margin: 40px 0;
}


.cards__item {
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px 64px 40px 40px;
    cursor: pointer;
}

.cards__item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.main-title {
    font-weight: 800;
    font-size: 48px;
    padding-bottom: 15px;
}

.wrapper_btn-prevNext {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}

.btn-prevNext {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.btn-prevNext:hover {
    background-color: #0056b3;
}

.nav-filAriane--wrapper__item {
    list-style: none;
}

.nav-filAriane__item--link {
    font-weight: 500;
    font-size: 12px;
    color: grey;
}

.page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    padding-left: 16px;
    margin : 8px 0;
}

/* Styles pour le fil d'Ariane */
.nav-filAriane {
    padding: 0.5rem 0;
}

.nav-filAriane--wrapper {
    display: flex;
    list-style: none;
    padding-left: 32px;
    margin: 0;
}

.nav-filAriane--wrapper__item {
    display: flex;
    align-items: center;
}

.nav-filAriane--wrapper__item:not(:last-child)::after {
    content: ">";
    margin: 0 0.5rem;
    color: #666;
}

.nav-filAriane__item--link {
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}

.nav-filAriane__item--link:hover {
    color: #0056b3;
}

.nav-filAriane--wrapper__item.active .nav-filAriane__item--link {
    color: #0056b3;
    font-weight: bold;
}

#cards_wrapper {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    padding: 8px;
}


.cards_section_row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px;
}

.cards_section_title {
    display: block;
    font-size: 1.5rem;
    color: #333333;  /* gris foncé pour le texte principal */
    font-weight: 350;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.cards_section_title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #E63946;  /* rouge pour la ligne décorative */
}

.cards_section_title_emphase {
    color: #E63946;  /* rouge pour le texte mis en emphase */
    margin: 0 4px;
    font-weight: 500;
}


.card__item {
    flex: 1 1 100%;
    max-width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* Ombre initiale plus marquée */
    transition: all 0.3s ease;
    cursor: pointer;
}

.card__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);  /* Ombre au hover encore plus prononcée */
}

.card__item--title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 16px 0;
    margin: 0 auto;
    height: 40px;
    width: 100%;
    /* Styles de texte pour le titre */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #1d1d1d;
    /* Transition pour l'effet hover */
    transition: color 0.3s ease;
    background-color: white;
}

.card__item:hover .card__item--title {
    /* Changement de couleur du titre au hover */
    color: red; /* ou une autre couleur de votre choix */
    font-weight: 500;
}

.card__item--photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 160px;
    width: 100%;
    overflow: hidden;  /* Ajout de overflow hidden */
    position: relative; /* Pour contenir le zoom */
}

#populationPict {
    background-image: url("../Images/population.png");
}

#menagePict {
    background-image: url("../Images/parent_enfance_petite_enfance.jpg");
}

#emploiPict {
    background-image: url("../Images/insertion_emploi_solidarite.jpg");
}


#revenuPict {
    background-image: url("../Images/revenus.png");
}

#marcheImmobilierPict {
    background-image: url("../Images/logement_habitat.jpg");
}

#meteoPict {
    background-image: url("../Images/meteo.png");
}

#nouvelleDonneDemographique {
    background-image: url("../Images/personnes_agees.jpg");
}

#nouvelleDonneEconomique {
    background-image: url("../Images/nouvelledonneeconomique.png");
}

#nouvelleDonneSociale {
    background-image: url("../Images/prevention_sante.jpg");
}

    /* SECTION 3 */


#rechauffementClimatique {
    background-image: url("../Images/developpement_durable_2.jpg");
}

#finMoteursThermiques {
    background-image: url("../Images/decolletage.png");
}

#changementPratiquesConso {
    background-image: url("../Images/pratiqueconsommateur.png");
}

#constructionFaceAuZan {
    background-image: url("../Images/constructeurfaceauzan.png");
}

#emploiFrontalier {
    background-image: url("../Images/emploifrontalier.png");
}


#situationsExtremes {
    background-image: url("../Images/situationsextremes.png");
}

#chantiersVivreEnsemble {
    background-image: url("../Images/handicap.jpg");
}



/* L'effet de zoom sur l'image */
.card__item--photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    transform: scale(1);
    background-image: inherit; /* Hérite de l'image du parent */
}

.card__item:hover .card__item--photo::after {
    transform: scale(1.1); /* Zoom plus subtil */
}

.submenu__graph {
    border-bottom: 1pt solid rgb(82, 82, 82);
}

#data_extract {
    font-size: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0px 0px 0px 16px;
    border-radius: 15px;
}

#data_wrapper {
    display: flex;
    gap: 1rem;
}

#data_wrapper__graph--container {
    flex: 2;
 }



#data_graph {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#WR_Graphe_Container {
    position: relative;
    height: auto;
}

.WR_TriContainer {
    width: auto;
    height: 640px !important;
}

/* .sc-charts-renderer {
    min-height: 450px !important;
} */

/* .sc-chart-container {
    height: 640px !important;
} */

/* rect {
    height: 640px !important;
} */

/* .sc-chart-zone-legend {
    height: 500px !important;
} */

.sc-chart-zone, .sc-chart-zone-legend {
    min-height: 450px !important;
}



footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 50px;
    background-color: white;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
}

footer .copyright {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #414141;
}

footer .scroll-top {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s ease;
}

footer .scroll-top:hover {
    background-color: #E63946;
    transform: translateY(-2px);
}

footer .scroll-top i {
    color: #666;
    font-size: 18px;
    transition: color 0.3s ease;
}

footer .scroll-top:hover i {
    color: white;
}

.navbar-wrapper__logout {
    display: none;
 }

 .wrapper__navbar {
    position: relative;
}

.navbar-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 16px;
}

#navbar_menu {
    width: 100%;
}

.mega-menu__submenu, 
.mega-menu__submenu-item,
.mega-menu__thirdlevel {
    color: initial;
}

.pages-enfants-wrapper {
    width: fit-content;
    display: none;
    gap: 1rem;
    padding: 0.5rem 1rem;
    margin-top: 1px;
}

.pages-enfants-wrapper a {
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 14px;
    transition: color 0.3s;
}

.pages-enfants-wrapper a:hover {
    color: #E63946;
}

#rose-des-vents-wrapper {
    position: absolute;
    bottom: 0;
    right: 36px;
    z-index: 10000;
}

.pages-enfants-wrapper a span {
    color: initial !important; /* Annule l'héritage */
    font-size: 12px;
}

.active-link {
    color: red !important; /* Force l'application du rouge */
}


/* Entre 768px et 1024px : 2 cards par ligne */
@media (min-width: 768px) {
    .card__item {
        flex: 1 1 calc(50% - 16px);
        max-width: calc(50% - 16px);
    }
    .cards_section_title {
        margin-left: 16px;
    }
    .navbar-wrapper__logout {
        margin-top: 8px;
    }
    
    .navbar-wrapper__logout a {
        font-size: 14px;
    }
    
    .logout-icon {
        width: 16px;
        height: 16px;
    }
}

/* Entre 1024px et 1280px : 3 cards par ligne */
@media (min-width: 1024px) {
    .card__item {
        flex: 1 1 calc(33.333% - 16px);
        max-width: calc(33.333% - 16px);
    }
    .pages-enfants-wrapper {
        display: flex;
    }
    
}

/* Au-delà de 1280px : 6 cards par ligne */
@media (min-width: 1280px) {
    .card__item {
        flex: 1 1 calc(16.666% - 16px);
        max-width: calc(16.666% - 16px);
    }

    #data_wrapper {
        flex-direction: row;
    }
    
    #data_wrapper__text--container {
        flex: 1;
    }
    
    #data_wrapper__graph--container {
        flex: 2;
    }
    .navbar-wrapper__logout {
        display: flex;
        align-items: center;
    }
    .navbar-wrapper__logout a {
        display: flex;
        align-items: center;
        gap: 8px;
    }
 
    .logout-icon {
        width: 18px;
        height: 18px;
    }
    
}

#data_section_wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 16px;
    position: relative;
}


.data_row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;
}

/* Conteneur des graphiques - 3/4 */
#data_wrapper__graph--container {
    display: flex;
    flex: 3;
    max-width: calc(75% - 1rem);
    gap: 1rem;
    flex-wrap: wrap;
}

/* Style de base pour tous les portlets */
#data_wrapper__graph--container .portlet.light {
    margin-bottom: 2rem;
}

/* Si un seul graphique */
#data_wrapper__graph--container .portlet.light:only-child {
    flex: 1;
    max-width: 100%;
}

/* Si deux graphiques */
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(2),
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(2) ~ .portlet.light {
    flex: 1;
    max-width: calc(50% - 1rem);
}

/* Si trois graphiques */
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(3),
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(3) ~ .portlet.light {
    flex: 1;
    max-width: calc(33.333% - 1.333rem);
}

/* Si quatre graphiques - Mise à jour */
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(4),
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(4) ~ .portlet.light {
    max-width: calc(50% - 1rem);
}

/* Positionnement spécifique pour 4 graphiques */
#data_wrapper__graph--container .portlet.light:nth-child(-n+2) {
    flex: 1;
    max-width: calc(50% - 1rem);
    order: 1;
}

#data_wrapper__graph--container .portlet.light:nth-child(n+3) {
    flex: 1;
    max-width: calc(50% - 1rem);
    order: 2;
}

/* Nouvelle classe pour la mise en page verticale */
#data_wrapper__graph--container.vertical-layout {
    flex-direction: column;
}

#data_wrapper__graph--container.vertical-layout .portlet.light {
    flex: 1;
    max-width: 100% !important; /* Force la pleine largeur */
    margin-bottom: 1rem;
}

#data_wrapper__graph--container.vertical-layout .portlet.light:last-child {
    margin-bottom: 0;
}

/* Base styles */
.data_cell {
    min-width: 0;
}


.portlet.light {
    height: 100%;
}

.navBtn-container {
    display: flex;
    justify-content: right;
    gap: 20px;
    margin: 20px 0 0;
    position: absolute;
    top: -60px;
    right: 50px;
 }
 
 .navBtn-link {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 5px 12px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 180px;
 }
 
 /* Style pour le bouton Précédent */
 .navBtn-link:first-child {
    background-color: #808080; /* Gris */
    color: white;
    border: 2px solid #808080;
 }
 
 .navBtn-link:first-child:hover {
    background-color: #666666;
    border-color: #666666;
 }
 
 /* Style pour le bouton Suivant */
 .navBtn-link:last-child {
    background-color: #E63946; /* Rouge */
    color: white;
    border: 2px solid #E63946;
 }
 
 .navBtn-link:last-child:hover {
    background-color: #E63946;
    border-color: #E63946;
 }
 
 .navBtn-label {
    font-size: 13px;
    font-weight: 500;
 }


/* Responsive */
@media (max-width: 768px) {
    .data_row {
        flex-direction: column;
    }
    
    .data_cell,
    #data_wrapper__text--container,
    #data_wrapper__graph--container {
        width: 100%;
        max-width: 100%;
    }
}


#data_wrapper {
    display: flex;
    gap: 1rem;
}


#data_wrapper__graph--container {
    display: flex;
    flex: 3;
    max-width: calc(75% - 1rem);
    gap: 1rem;
    flex-wrap: wrap;
}

/* Styles communs pour les portlets */
#data_wrapper__graph--container .portlet.light {
    margin-bottom: 1rem;
    height: 100%;
    box-sizing: border-box;
}

/* Cas 1 graphique */
#data_wrapper__graph--container .portlet.light:only-child {
    flex: 1;
    max-width: 100%;
    width: 100%;
}

/* Cas 2 graphiques */
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(2),
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(2) ~ .portlet.light {
    flex: 1;
    max-width: calc(50% - 0.5rem);
}

/* Cas 3 graphiques */
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(3),
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(3) ~ .portlet.light {
    flex: 1;
    max-width: calc(33.333% - 0.667rem);
}

/* Cas 4 graphiques - Disposition spéciale */
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(4),
#data_wrapper__graph--container .portlet.light:first-child:nth-last-child(4) ~ .portlet.light {
    flex: 0 1 calc(50% - 0.5rem);
}

#data_wrapper__graph--container .portlet.light:nth-child(-n+2) {
    order: 1;
}

#data_wrapper__graph--container .portlet.light:nth-child(n+3) {
    order: 2;
}

/* Responsive */
@media (max-width: 768px) {
    #data_wrapper {
        flex-direction: column;
    }
    
    #data_wrapper__text--container,
    #data_wrapper__graph--container {
        max-width: 100%;
    }
    
    #data_wrapper__graph--container .portlet.light {
        max-width: 100% !important;
    }
}

#data_wrapper__graph--container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.data_row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#data_wrapper__text--container {
    flex: 1 1 100%;
    margin-bottom: 1rem;
}

#data_wrapper__graph--container .portlet.light {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    margin-bottom: 1rem;
}

/* For 4 graphs, create a 2x2 grid */
#data_wrapper__graph--container .portlet.light:nth-child(-n+2) {
    order: 1;
}

#data_wrapper__graph--container .portlet.light:nth-child(n+3) {
    order: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #data_wrapper__graph--container .portlet.light {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Grille personnalisée pour les graphiques */
.custom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2 colonnes égales */
    gap: 20px; /* Espacement entre les colonnes */
}

.custom-grid_cell {
    flex: 1;
}

/* Styles spécifiques pour les portlets des graphiques */
.custom-portlet.light {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
}

.custom-portlet-title {
    display: none;  /* Si vous ne voulez pas afficher de titre dans les portlets */
}

.custom-portlet-body {
    padding: 20px;
    background-color: #f9f9f9;
}

.caption {
    font-weight: bold;
    margin-bottom: 10px;
}


.portlet-body.graphe-courbe {
    height: 265px;
}


.twoCols-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

.twoCols-grid.oneCol-com {
    grid-template-columns: 1fr 2fr;
}

.threeCols-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.fourCols-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
}

.oneCol-twoRows-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 285px 285px;
    gap: 1rem;
    width: 100%;
}

.oneCol-threeRows-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
    width: 100%;
}

/* Supprimez ou modifiez les propriétés flex de .data_row qui ne sont plus nécessaires */
.data-col {
    width: 100%;
}

.data_cell {
    width: 100%;
}

.wrapper_commentaire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.wrapper_commentaire.oneCol {
    display: grid;
    grid-template-columns: 1fr;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.commentaireGraph {
    font-family: 'Montserrat', sans-serif;
    text-align: justify;
    line-height: 24px;
    font-size: 14px;
    margin : 32px 24px;
    color: #464646;
}

.commentaireGraph.lef-col {
    margin-right: 12px;
}

.commentaireGraph.right-col {
    margin-left: 12px;
}

/* Classes pour le comportement sticky */
.wrapper_graph {
    background-color: white;
    position: sticky;
    top: 20px;
    align-self: start;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.wrapper_graph.twoColsTwoRows {
    background-color: transparent;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1rem;
}

.wrapper_graph.twoColsOneRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1rem;
}


.wrapper_graph.oneCol-twoRows-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    width: 100%;
}

.wrapper_graph.oneCol-twoRows-grid-curbGraph {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 285px 400;
    gap: 1rem;
    width: 100%;
}

.wrapper_graph.oneCol-twoRows-grid-fullH {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}


.wrapper_graph.oneCol-threeRows-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
    width: 100%;
}


.wrapper_graph.noSticky {
    position: static;
}

.wrapper_commentaire, .wrapper_graph {
    border-radius: 15px;
    height: fit-content;
    width: 100%;
}

.portlet {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.wrapper_legend {
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 8px;
}

.wrapper_histo_curbes {
    height: 320px;
    background-color: white;
    padding-bottom: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: auto;
}

.wrapper_histo_curbes_xl {
    height: 350px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: auto;
}

.graph-legend {
    font-size: 11px;
    color: #666;
    margin-top: 10px;
    line-height: 1.4;
}


.graph_container {
    padding: 24px;
} 

.titre_graph_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 24px;
}

.source_graph_wrapper {
    display: flex;
    align-items: center;
    justify-content: right;
}

.titre_graph_wrapper > span {
    padding-left: 16px;
    font-size: 14px;
    font-weight: 600;
}


.footer_graph {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-top: 12px;
}

.footer_graph.avecBoussole {
    justify-content: space-between !important;
}

.footer_graph span {
    font-size: 10px;
    font-weight: 400;
    color: gray;
}

.footer_graph img {
    width: 64px;
    height: 64px;
}

.wrapper_cleDeLecture {
    padding: 24px;
}


.titre_graph_wrapper span {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2C3E50;
    letter-spacing: 0.2px;
    line-height: 1.4;
    padding-left: 16px;
}

/* Style pour le titre de la clé de lecture */
.cleDeLectureTitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 8px;
}

/* Style pour le contenu de la clé de lecture */
.cleDeLecture {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #606060;
    line-height: 1.6;
    margin-top: 8px;
    font-style: italic;
}

.grid-2-1 {
    position: relative;  /* Important pour le positionnement absolu des enfants */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.graphs-section, .key-section {
    width: 100%;
    z-index: 2;  /* Pour s'assurer qu'ils restent au-dessus du contenu */
}

.graphs-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: white;
}

.key-section {
    background: white;
}

/* Ajustement pour la grille à deux colonnes */
.twoCols-grid.oneCol-com {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    align-items: start; /* Important pour l'alignement correct */
}



.sc-chart-zone[data-sc-object="TSC_MapChartSlice"] {
    height: 500px !important;
}

.sc-chart-zone-legend[data-sc-object="TSC_ZoomableBubbleChart"] {
    height: 500px !important;
}

.sc-chart-zone[data-sc-object="TSC_Histogram"] {
    height: 500px !important;
}

.sc-chart-zone[data-sc-object="TSC_StackedHistogram"] {
    height: 500px !important;
}


.sc-chart-zone[data-sc-object="TSC_Line"] {
    height: 500px !important;
}

.sc-chart-zone-legend[data-sc-object="TSC_HombroThermique"] {
    width: 100%;
    height: 350px !important;
}

.wrapper_histo_curbes .sc-chart-zone[data-sc-object="TSC_Line"] {
    height: 265px !important;
}

.wrapper_histo_curbes_xl .sc-chart-zone[data-sc-object="TSC_StackedHorizontalBars"] {
    height: 320px !important;
}

.sc-chart-zone[data-sc-object="TSC_Line"] {
    height: 500px !important;
}

.sc-chart-zone[data-sc-object="TSC_Area"] .dxc.dxc-chart {
    height: 500px !important;
}

.sc-chart-zone-legend[data-sc-object="TSC_PieOfPieAMChart"] {
    height: 500px !important;
}

.sc-chart-zone[data-sc-object="TSC_MapSVGHauteSavoie2025"] {
    display: flex;
    justify-content: center;
}

.sc-chart-zone[data-sc-object="TSC_MapSVGHauteSavoie2025"] svg[width="100%"] {
    max-width: 100% !important;
}

.sc-chart-zone[data-sc-object="TSC_MapSVGFrance2025"] {
    display: flex;
    justify-content: center;
}

.sc-chart-zone object[type="image/svg+xml"] {
    width: 100%; /* Largeur totale du conteneur */
    height: auto; /* Hauteur proportionnelle */
    max-width: 800px; /* Largeur maximale optionnelle */
    max-height: 600px; /* Hauteur maximale optionnelle */
}



#imgCarte svg {
    max-width: 100% !important;
}

.resizeSvg svg {
	height : 500px !important;
	width: auto;
}

.sc-chart-zone-legend[data-sc-object="TSC_SmoothedStackedGraph"] {
    height: 500px !important;
}

i {
    color: #D6290C !important;
}

.hidden{
    display: none;
}

/* .wrapper_graph {
    background-color: white;
    position: sticky;
    top: 20px;
    align-self: start;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    height: fit-content;
    width: 100%;
} */


/* [data-sc-rendering-id="8A5B451722484C3BB7BEEA5956DBE234"] {
    height: 285px;
  } */

  /* .sc-chart-zone[data-sc-object="TSC_Line"] {
    height: 250px !important;
  } */

  /* .sc-chart-zone[data-sc-object="TSC_StackedHorizontalBars"] {
    max-height: 400px !important;
  }


  .sc-chart-zone[data-sc-object="TSC_StackedHistogram"] {
    height: 400px !important;
  } */
  
@media(max-width:1000px){
  .twoCols-grid.oneCol-com{
    grid-template-columns: 1fr;
  }
}