:root {
    --header-height: 52px;
    --col-inrae: #00a3a6;
    --col-inrae-bright: #66d1bf;
    --col-inrae-dark: #275662;
    --col-dark-gray: #797870;
    --col-light-gray: #c4c0b3;
    --shadow-color: rgba(0, 0, 0, 0.1);

    --col-inrae-comp-green: #9dc544;
    --col-inrae-comp-light-blue: #9ed6e3;
    --col-inrae-comp-dark-blue: #423089;
    --col-inrae-comp-red: #ed6e6c;
    --col-inrae-comp-dark-gray: #797870;
    --col-inrae-comp-light-gray: #c4c0b3;
}

body {
    margin: 0;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 87.5;
    font-size: 1em;
    /* Chrome vertical : bandeau haut · contenu extensible · pied de page. Toute la page défile d'un bloc,
       l'en-tête reste collé (position: sticky). Remplace l'ancienne mise en page à sidebar fixe. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

p {
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHROME — bandeau haut (identité + navigation) et pied de page.
   Remplace l'ancienne sidebar de 300 px. Cf. fragments/header.html & footer.html.
   ───────────────────────────────────────────────────────────────────────────── */
.site-header {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--header-height);
    box-sizing: border-box;
    padding: 6px 24px;
    background: linear-gradient(to right, var(--col-inrae-dark), var(--col-inrae));
    position: sticky;
    top: 0;
    z-index: 1100; /* au-dessus des cartes Leaflet et du sommaire collant */
    box-shadow: 0 2px 4px var(--shadow-color);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.site-logo {
    height: 34px;
    width: auto;
    display: block;
}

.site-wordmark {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 1.4em;
    color: white;
    letter-spacing: 0.02em;
}

.site-nav {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.site-nav a {
    color: white;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.site-nav a:hover {
    background-color: var(--col-inrae-bright);
    color: black;
}

/* Focus clavier visible (accessibilité) — anneau blanc net sur le bandeau coloré. */
.site-nav a:focus-visible,
.site-brand:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Entrée de la page courante. */
.site-nav a[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.22);
    font-weight: 700;
}

.site-footer {
    background: var(--col-inrae-dark);
    color: white;
    padding: 20px 24px;
    box-sizing: border-box;
}

.site-footer .site-funding {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.85em;
    line-height: 1.5;
}

/* Contenu principal : occupe la place restante entre bandeau et pied, pousse le pied en bas. */
.site-main {
    flex: 1 0 auto;
    box-sizing: border-box;
}

/* Pages de contenu éditorial (« Qu'est-ce que Popcorn ? », « Méthodologie »). Conteneur lisible et
   centré ; la mise en forme fine (responsive, tableaux, infographies) viendra en Phase 4. */
.page-contenu {
    max-width: 72ch;
    margin: 0 auto;
    padding: 40px 24px 64px;
    color: #2b2b2b;
    line-height: 1.6;
}
.page-contenu h1 {
    font-family: "Raleway", sans-serif;
    color: var(--col-inrae-dark);
    font-size: 2em;
    line-height: 1.2;
    margin: 0 0 16px;
}
.page-contenu h2 {
    font-family: "Raleway", sans-serif;
    color: var(--col-inrae-dark);
    font-size: 1.4em;
    line-height: 1.25;
    margin: 40px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--col-inrae);
}
.page-contenu h3 {
    font-family: "Raleway", sans-serif;
    color: var(--col-inrae-dark);
    font-size: 1.1em;
    margin: 24px 0 8px;
}
.page-contenu p {
    margin: 0 0 16px;
}
.page-contenu ul {
    margin: 0 0 16px;
    padding-left: 24px;
}
.page-contenu li {
    margin-bottom: 8px;
}
.page-contenu a {
    color: var(--col-inrae-dark);
    text-decoration: underline;
}

/* Bandeau « contenu provisoire » (les textes/infographies sont à finaliser avec le client et l'agence). */
.contenu-provisoire {
    margin: 0 0 32px;
    padding: 12px 16px;
    border-left: 4px solid #d9a441;
    background: #fdf6e6;
    border-radius: 0 6px 6px 0;
    font-size: 0.9em;
    color: #6b5219;
}

/* Marqueur inline « [provisoire] » (mentions ajoutées en attendant la version du client). */
.marqueur-provisoire {
    font-style: italic;
    color: #8a5200;
}

/* Tableaux éditoriaux (correspondances d'âge, hébergements…). Le wrapper permet un défilement horizontal
   sur écran étroit plutôt que de casser la page. */
.table-contenu-wrapper {
    overflow-x: auto;
    margin: 8px 0 24px;
}
.table-contenu {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}
.table-contenu th,
.table-contenu td {
    border: 1px solid #d5e0e0;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.table-contenu thead th {
    background: var(--col-inrae-dark);
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
}
/* En-têtes de ligne (première colonne, <th scope="row"/"rowgroup">) : fond léger + gras pour les distinguer.
   Pas de zébra (tr:nth-child) : incohérent avec les rowspan du tableau des correspondances d'âge. */
.table-contenu tbody th {
    background: #eaf4f4;
    font-weight: 700;
}
.table-contenu caption {
    caption-side: top;
    text-align: left;
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: var(--col-inrae-dark);
    font-size: 1.05em;
    margin-bottom: 8px;
}

/* Infographies éditoriales (schémas de l'agence). Denses → on les fait DÉBORDER symétriquement de la colonne
   de texte (72ch), centrées, jusqu'à ~1200px : à cette largeur, la taille du texte DANS l'image est proche de
   celle du texte de la page (les images sont des exports 2× / 144 dpi). Plafonné à la fenêtre (94vw). */
.infographie {
    --infog-w: min(1000px, 94vw);
    width: var(--infog-w);
    margin-inline: calc(50% - var(--infog-w) / 2);
    margin-top: 32px;
    margin-bottom: 32px;
}
.infographie img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(39, 86, 98, 0.12);
}
.infographie figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 0.9em;
    color: #555;
}

@media (max-width: 640px) {
    .page-contenu {
        padding: 24px 16px 48px;
    }
    .page-contenu h1 {
        font-size: 1.6em;
    }
    .page-contenu h2 {
        font-size: 1.2em;
    }
}

/* Conteneur de la page outil (ancienne colonne de droite du layout à sidebar). */
.content {
    padding: 12px 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Encadré chapeau de la page outil. NB : sélecteur `.header` (et non `div .header`) — le conteneur
   parent est passé de <div class="content"> à <main class="content">, un <main> n'étant pas un <div>
   le descendant `div .header` ne matchait plus (dégradé perdu). */
.header {
    background: linear-gradient(135deg, var(--col-inrae-bright), var(--col-inrae));
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--shadow-color);
    padding: 14px 20px;
    color: white;
    text-align: center;
    /* Encadré chapeau à 2/3 de la largeur, centré (sans la sidebar, il s'étalait sur toute la page). */
    width: 66.6667%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.header h1 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3em;
    margin: 0;
}

.header p {
    margin-top: 6px;
}

/* Lien « En savoir plus » dans le chapeau (texte blanc sur bandeau coloré). */
.header-link {
    color: white;
    text-decoration: underline;
    font-weight: 700;
}

.header-link:hover,
.header-link:focus-visible {
    color: var(--col-inrae-dark);
}

/* Rappel discret du financement, DANS l'encadré chapeau (D4) — une ligne ; texte blanc atténué pour
   rester lisible sur le dégradé sans concurrencer le chapeau. La mention complète est au pied de page. */
.funding-reminder {
    margin: 6px 0 0;
    text-align: center;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.85);
}

.columns-container {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    height: 520px;
}

/* Pendant un calcul : neutralise la carte et la liste des communes, que `disabled` ne peut pas
   atteindre (Leaflet et liens générés). Évite de modifier le territoire pendant qu'un calcul le concerne. */
.columns-container.saisie-verrouillee {
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Zone du rapport sur la page outil : le rapport s'affiche sous le formulaire,
   qui reste affiché (chantier improve-ui, D1).
   ───────────────────────────────────────────────────────────────────────────── */
.rapport-zone {
    margin-top: 24px;
}

/* Barre de statut du rapport — ne sert qu'à annoncer un calcul en échec : toute modification du
   formulaire efface simplement le rapport, sans message (le bouton « Calculer » est juste au-dessus). */
.rapport-statut {
    background: #fdecea;
    border: 1px solid #d93025;
    border-left: 5px solid #d93025;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.rapport-statut p {
    color: #8c1d16;
}

/* Barre d'actions : « Remettre à zéro » (quart gauche, gris) + « Calculer » (le reste, couleur INRAE). */
.actions-calcul {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.actions-calcul .button {
    height: 48px;
    font-size: 1.1em;
    flex: 3 1 0;
}

.actions-calcul .button-secondaire {
    flex: 1 1 0;
}

/* Action secondaire : grise, présente mais en retrait — elle ne doit pas concurrencer « Calculer ».
   Sélecteur composé (.button.button-secondaire) et non .button-secondaire seul : à spécificité égale,
   c'est la règle la plus BASSE dans le fichier qui gagne, et `.button` (couleur INRAE) est déclarée plus
   bas. Le composé l'emporte par spécificité — donc quel que soit l'ordre des blocs. */
.button.button-secondaire {
    background: var(--col-dark-gray);
}

.button.button-secondaire:not(:disabled):hover {
    background: var(--col-light-gray);
    color: black;
}

.param-columns-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    align-items: stretch;
}

.column {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--shadow-color);
    padding: 20px;
    box-sizing: border-box;
    display: flex; /* Added to enable flex layout */
    flex-direction: column; /* Ensure children stack vertically */
}

.param-column {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--shadow-color);
    padding: 12px;
    box-sizing: border-box;
    display: flex; /* Added to enable flex layout */
    flex-direction: column; /* Ensure children stack vertically */
    flex: 1;
}

.compo {
    min-height: 40px; /* Minimum height for uniformity */
    height: 40px; /* Uniform height */
    border: 1px solid var(--col-inrae); /* Thin INRAE-colored border */
    border-radius: 5px; /* Rounded corners */
    padding: 5px 10px; /* Inner padding */
    box-sizing: border-box;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
}

.compo:focus {
    outline: none; /* Remove default focus outline */
    border-color: var(--col-inrae-bright); /* Highlight border on focus */
    box-shadow: 0 0 5px var(--col-inrae-bright); /* Subtle focus shadow */
}

.column select:focus {
    outline: none;
    border-color: var(--col-inrae-bright); /* Highlight border on focus */
    box-shadow: 0 0 5px var(--col-inrae-bright); /* Subtle focus shadow */
}

.column input:focus {
    outline: none;
    border-color: var(--col-inrae-bright); /* Highlight border on focus */
    box-shadow: 0 0 5px var(--col-inrae-bright), 0 2px 4px var(--shadow-color); /* Subtle focus shadow */
}

.button {
    height: 40px;
    background: var(--col-inrae);
    color: white;
    border: none;
    border-radius: 5px;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    cursor: pointer; /* Hand cursor */
    box-shadow: 0 2px 4px var(--shadow-color); /* Default shadow */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition */
}

.button:not(:disabled):hover {
    background: var(--col-inrae-bright); /* Change to bright color on hover */
    box-shadow: 0 4px 8px var(--shadow-color); /* Enhanced shadow on hover */
}

/* Bouton désactivé (p. ex. « Calculer » pendant un calcul en cours) : curseur « interdit », grisé — pour
   signaler qu'un nouveau clic est sans effet. Le survol est neutralisé en amont via `:not(:disabled)` sur les
   règles :hover, de sorte qu'un bouton désactivé garde sa couleur de base (primaire teal, secondaire gris). */
.button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

#filtered-list {
    margin-top: 10px;
    flex-grow: 1; /* Allow the filtered list to take up remaining vertical space */
    overflow-y: auto;
    border: 1px solid var(--col-inrae);
    border-radius: 5px;
    padding: 10px;
    /*height: 200px; !* Fixed height to ensure consistent size *!*/
}

/* Add styles for the filtered list items */
.filtered-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 5px; /* Rounded corners */
    padding: 10px;
    margin-bottom: 5px; /* Space between items */
}

.filtered-item-empty {
    /*display: flex;*/
    /*justify-content: space-between;*/
    align-items: center;
    text-align: center;
    margin-top: 20px; /* Space between items */
    color: #999; /* Lighter color for empty state */
}

.filtered-item button {
    background-color: var(--col-inrae);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    box-shadow: 0 1px 2px var(--shadow-color);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.filtered-item button:hover {
    background-color: var(--col-inrae-bright);
    box-shadow: 0 2px 4px var(--shadow-color);
}

.reset-selection {
    display: block;
    margin: 5px 0;
    color: var(--col-inrae);
    text-decoration: none;
    text-align: end;
    font-size: 0.9em;
    cursor: pointer;
    transition: color 0.3s;
}

.reset-selection:hover {
    color: var(--col-inrae-bright);
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--col-inrae);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.leaflet-control-loader {
    z-index: 2000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    height: 40px;
    width: 40px;
    /*border-radius: 10px;*/
    /*background-color: #0000ff33;*/
    /*background: url('images/leaflet-loader.gif') center center no-repeat rgba(255,255,255,0.8);*/
}

.param-card-title {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 6px;
}

/* Common style for parameter card labels */
.param-label {
    display: block;
    font-size: 0.8em;
    color: var(--col-inrae);
    margin-bottom: 4px;
}

/* Common style for parameter card inputs */
.param-input {
    min-height: 40px;
    height: 40px;
    border: 1px solid var(--col-inrae);
    border-radius: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
}

.param-input:focus {
    outline: none;
    border-color: var(--col-inrae-bright);
    box-shadow: 0 0 5px var(--col-inrae-bright);
}

/* Tooltip styles for param cards */
.param-tooltip-container {
    display: inline-block;
    position: relative;
    margin-left: 8px;
    vertical-align: middle;
}

.param-tooltip-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--col-inrae);
    color: #fff;
    border: none;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px var(--shadow-color);
    padding: 0;
    transition: background 0.2s;
}

.param-tooltip-btn:hover,
.param-tooltip-btn:focus {
    background: var(--col-inrae-bright);
    outline: none;
}

.param-tooltip-text {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Change tooltip position to appear below the button */
    top: 130%;
    /* Remove bottom positioning */
    /* bottom: 130%; */
    min-width: 220px;
    background: #fff;
    color: #333;
    font-size: 0.95em;
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow-color), 0 1px 6px rgba(0, 163, 166, 0.13);
    padding: 10px 14px;
    z-index: 100;
    white-space: normal;
    text-align: left;
    pointer-events: none;
}

.param-tooltip-container:hover .param-tooltip-text,
.param-tooltip-container:focus-within .param-tooltip-text {
    display: block;
}

/* Info-bulles du RAPPORT : les explications y sont plus longues que les rappels du formulaire (on y définit
   une notion, on y signale une réserve de méthode). On élargit donc la bulle, en la bornant à la largeur de
   la fenêtre pour qu'elle reste lisible sur mobile et ne sorte pas de l'écran sur les cartes de bord. */
.report-section-content .param-tooltip-text {
    min-width: 300px;
    max-width: min(400px, 78vw);
    font-size: .9em;
    line-height: 1.45;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Le bouton « ? » suit la taille du libellé qu'il accompagne, plus petit ici que dans le formulaire. */
.report-section-content .param-tooltip-btn {
    width: 17px;
    height: 17px;
    font-size: .72rem;
}

.report-section-content .param-tooltip-container {
    margin-left: 6px;
}

/* Close button for modal, consistent with .button style */
.modal-close-btn {
    background: var(--col-inrae);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow: 0 2px 4px var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.modal-close-btn:hover {
    background: var(--col-inrae-bright);
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* Alternating row colors for resident details table */
#resident-details-table tbody tr:nth-child(odd) {
    background: #fafbfc;
}

#resident-details-table tbody tr:nth-child(even) {
    background: #f0f1f3;
}

#resident-details-table td {
    padding: 2px 32px 2px 4px;
}

#resident-details-table td:last-child {
    padding-left: 32px;
    padding-right: 0;
}

.modal-title {
    margin-top: 0;
    color: var(--col-inrae);
    font-size: 1.15em;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.resident-days-select {
    transition: text-decoration 0.2s;
}

.resident-days-select:hover {
    text-decoration: underline;
}

.region-title {
    text-align: left;
    color: var(--col-inrae);
    font-size: 0.95em;
    padding-bottom: 8px;
}

.title-terr-etude {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 5px;
}

.comm-sel-text {
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--col-dark-gray);
}

/* Fond gris de la PAGE OUTIL (formulaire + rapport), sans marge blanche ; scopé à cette page — les pages de
   contenu et d'erreur gardent le fond par défaut. En impression, on repasse en blanc (économie d'encre). */
body.page-outil {
    background: #f7f7f7;
}
@media print {
    body.page-outil { background: #fff; }
}

.report-layout {
    display: flex;
    flex-direction: row;
    gap: 0;
    /* Le rapport (contenu + sommaire) est plafonné et centré : sur écran large, la pleine largeur rendait
       les cartes démesurées. Le FORMULAIRE, lui, reste pleine largeur (il est au-dessus, hors de ce bloc). */
    max-width: 1408px;
    margin: 0 auto;
    padding: 32px 32px 32px 32px;
    box-sizing: border-box;
    /* Le fond gris est porté par la page (body) — le bloc rapport est donc transparent, juste centré. */
    background: transparent;
    width: 100%;
}

.main-report-content {
    flex: 1 1 auto;
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
    margin-right: auto;
    margin-bottom: 1000px;
}

.report-section-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--col-inrae);
    margin-bottom: 32px;
    padding: 0;
    /* PAS de `overflow: hidden` ici. Il y en avait un, pour que l'arrondi des coins soit respecté — mais
       l'en-tête n'a aucun fond propre, il n'y a donc rien à rogner, et ce rognage coupait les info-bulles
       des cartes de la colonne de droite, au ras du bord de la section. Le rognage nécessaire pendant
       l'animation de repli est porté par `.report-section-content`, pas par la carte. */
    transition: box-shadow 0.2s;
}

.report-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px 0 36px;
    cursor: pointer;
    user-select: none;
}

.expand-toggle-btn {
    background: none;
    border: none;
    color: var(--col-inrae);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 0 0 16px;
    transition: color 0.2s;
}

.expand-toggle-btn:focus {
    outline: none;
    color: var(--col-inrae-bright);
}

.report-section-content {
    padding: 0 36px 28px 36px;
    transition: max-height 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.3s;
    /* AUCUN plafond au repos. Il y avait ici une valeur fixe (3000px) qui ROGNAIT toute section plus haute
       au PREMIER rendu — le défaut ne se voyait qu'après avoir assez garni une section, et il fallait la
       replier puis la déplier pour que le JS lève le plafond. Le plafond n'est nécessaire QUE pendant
       l'animation de repli, et report.js pose déjà une hauteur explicite en pixels juste avant de replier
       (puis la remet à `none` après ouverture) : la transition fonctionne donc sans valeur fixe ici. */
    max-height: none;
    opacity: 1;
    /* Débordement VISIBLE au repos, pour la même raison que le plafond ci-dessus : les info-bulles des
       cartes s'ouvrent SOUS leur bouton et dépassent le bas de la section. Un `hidden` ici les rognerait
       silencieusement, et seulement pour les cartes du bas — le pire des défauts, invisible à la relecture.
       Le rognage n'est nécessaire QUE pendant l'animation (report.js pose alors `overflow:hidden` en ligne,
       comme il pose déjà une hauteur en pixels) et à l'état replié (règle `.collapsed` juste dessous). */
    overflow: visible;
    will-change: max-height, opacity;
}

.report-section-card.collapsed .report-section-content {
    max-height: 0 !important;
    opacity: 0;
    padding-bottom: 0;
    pointer-events: none;
    /* Une section repliée doit rogner : sans cela son contenu déborderait par-dessus la suivante. */
    overflow: hidden;
}

/* Impression / PDF : une section repliée (dont « Détail du calcul », replié par défaut) doit tout de même
   apparaître en entier sur le papier — sinon la trace du calcul disparaîtrait silencieusement des copies. */
@media print {
    .report-section-card.collapsed .report-section-content {
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto;
    }
}

/* Cible d'ancre décalée sous le bandeau collant : sans cela, cliquer un lien du sommaire ferait défiler
   le titre de section DERRIÈRE l'en-tête sticky, le masquant. (Régression corrigée — revue Omnia Phase 1.) */
.main-report-content h2[id],
.main-report-content h3[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.report-summary {
    flex: 0 0 320px;
    position: sticky;
    /* Colle sous le bandeau haut (lui-même sticky). NB : suppose un en-tête sur une seule ligne
       (~64px) — l'outil est desktop-only (scoping D5). Un nav qui reviendrait à la ligne (zoom fort,
       très petit écran) décalerait cet offset ; assumé hors périmètre. */
    top: calc(var(--header-height) + 16px);
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--col-inrae);
    border-radius: 14px;
    box-shadow: 0 4px 16px var(--shadow-color);
    padding: 24px 20px;
    margin-top: 0;
    min-width: 220px;
    max-width: 320px;
    font-size: 1em;
    margin-left: 32px;
    margin-right: 0;
}

.report-summary-title {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: var(--col-inrae-dark);
    font-size: 1.1em;
    margin-bottom: 18px;
}

.report-summary ul {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0;
}

.report-summary li {
    margin-bottom: 8px;
}

.report-summary a {
    color: var(--col-inrae-dark);
    text-decoration: none;
    border-left: 3px solid transparent;
    padding-left: 8px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    border-radius: 4px;
    display: block;
}

.report-summary a.active {
    color: var(--col-inrae);
    background: #e6f7f7;
    border-left: 3px solid var(--col-inrae);
    font-weight: bold;
}

.report-summary .subsection-link {
    font-size: 0.97em;
    margin-left: 18px;
}

/* Section titles */

.main-report-content h3 {
    margin-top: 28px;
    margin-bottom: 10px;
    color: var(--col-inrae);
    font-size: 1.08em;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
}

.main-report-content p {
    margin-bottom: 18px;
    color: #444;
}

/* Styles pour la modal des communes */
.communes-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.25);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

.communes-modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px var(--shadow-color);
    padding: 20px;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    margin: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.communes-table-container {
    overflow-y: auto;
    margin-top: 16px;
    flex: 1;
}

.communes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.communes-table th {
    position: sticky;
    top: 0;
    background: white;
    padding: 8px 16px;
    text-align: left;
    border-bottom: 2px solid var(--col-inrae);
    color: var(--col-inrae-dark);
    font-family: "Raleway", sans-serif;
    cursor: pointer;
}

.communes-table td {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
}

.communes-table tbody tr:nth-child(odd) {
    background: #fafbfc;
}

.communes-table tbody tr:nth-child(even) {
    background: #f0f1f3;
}

.sort-icon {
    margin-left: 5px;
}

.communes-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.communes-count {
    font-size: 1em;
    color: var(--col-dark-gray);
}

.communes-details-btn {
    background: var(--col-inrae);
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 1em;
    cursor: pointer;
    margin-left: 10px;
    box-shadow: 0 2px 4px var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.communes-details-btn:hover {
    background: var(--col-inrae-bright);
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* EPP Card styles */
/* Chapô : courte mise en contexte sous un titre de section (concept EPP, comparaison, consommation). */
/* Chapô de section / sous-section. La mesure reste limitée (une ligne de 1400px serait illisible), mais un
   simple bloc étroit au milieu d'une carte large donne un retour à la ligne qui a l'air ACCIDENTEL. Le filet
   vertical rend la colonne de texte manifestement voulue : on lit un chapô, pas un paragraphe tronqué. */
.report-intro {
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
    max-width: 88ch;
    margin: 0 0 18px;
    padding-left: 14px;
    border-left: 3px solid var(--col-inrae-bright);
}

.epp-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

.epp-card {
    background: linear-gradient(135deg, #f6fcfa 0%, #e6f7f7 100%);
    /* tons clairs */
    border-radius: 14px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--col-inrae);
    padding: 32px 40px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 320px;
    max-width: 100%;
}

.epp-card.epp-card-light {
    background: linear-gradient(135deg, #f6fcfa 0%, #e6f7f7 100%);
}

.epp-value {
    font-family: "Raleway", sans-serif;
    font-size: 2.8em;
    font-weight: 700;
    color: var(--col-inrae-dark);
    margin-bottom: 0;
    margin-top: 8px;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #ffffff44;
    font-variant-numeric: tabular-nums;
}

.epp-caption {
    font-size: 1.1em;
    color: var(--col-inrae-dark);
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0.95;
}

.epp-elements-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.epp-element-card {
    background: linear-gradient(135deg, #f6fcfa 0%, #e6f7f7 100%);
    border-radius: 14px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--col-inrae);
    padding: 24px 28px 18px 28px;
    width: 80%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Remove min-width and min-height for auto sizing */
}

.epp-element-title {
    font-family: "Raleway", sans-serif;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--col-inrae-dark);
    margin-bottom: 12px;
}

.epp-element-label {
    font-weight: 600;
    color: var(--col-inrae);
    margin-right: 6px;
    margin-bottom: 8px;
}

.epp-element-value {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--col-inrae-dark);
    margin-bottom: 0;
    margin-top: 0;
    font-variant-numeric: tabular-nums;
}

.epp-element-details {
    font-size: 1em;
    font-weight: 400;
    color: #444;
    margin-bottom: 0;
    margin-top: 16px;
    text-align: center;
}

.epp-element-details ul {
    margin: 0;
    padding-left: 18px;
    text-align: left;
}

.epp-element-details li {
    margin-bottom: 6px;
    font-size: 1em;
}

/* Le graphe de répartition dans chaque carte de tranche d'âge : marge au-dessus + padding resserré,
   par-dessus le style de base de .socio-chart-wrapper (fond blanc, bordure, ombre). */
.epp-element-card .socio-chart-wrapper {
    margin-top: 16px;
    padding: 12px;
}

/* --- Consommation alimentaire (nouvelle section) --- */
/* Sélecteur de tri du diagramme des consommations (par quantité / par nom) */
.consommation-sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0 0;
    font-size: 0.9em;
    color: #333;
}

.consommation-sort-control select {
    padding: 3px 8px;
    border: 1px solid var(--col-inrae-dark);
    border-radius: 4px;
    background: #fff;
    color: #333;
    font: inherit;
    cursor: pointer;
}

.consommation-chart-wrapper {
    width: 100%;
    height: 680px;
    max-height: 70vh;
    position: relative;
    margin: 24px 0 12px 0;
    background: #fff;
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    padding: 16px 22px 10px 22px;
    box-sizing: border-box;
}

.consommation-table-wrapper {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    padding: 12px 18px 18px 18px;
    box-sizing: border-box;
}

.consommation-table {
    /* Compact et centré dans sa carte : les largeurs de colonnes sont fixées en inline, donc width:auto
       laisse le tableau à sa taille naturelle et margin auto le centre (au lieu de l'étirer sur 100 %). */
    width: auto;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.95em;
}

.consommation-table thead th {
    position: sticky;
    top: 0;
    background: #e6f7f7;
    color: var(--col-inrae-dark);
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 2px solid var(--col-inrae);
}

/* Colonnes de détail par âge : police plus petite */
.consommation-table thead th:nth-child(2),
.consommation-table thead th:nth-child(3),
.consommation-table thead th:nth-child(4) {
    font-size: 0.85em;
}

.consommation-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
}

/* Chasse fixe (tabular-nums) sur les colonnes de chiffres (2 à 6) — alignement net entre les lignes. */
.consommation-table tbody td:not(:first-child),
.consommation-table tfoot td:not(:first-child) {
    font-variant-numeric: tabular-nums;
}

/* Colonnes de détail par âge : police plus petite dans le corps */
.consommation-table tbody td:nth-child(2),
.consommation-table tbody td:nth-child(3),
.consommation-table tbody td:nth-child(4) {
    font-size: 0.88em;
}

.consommation-table tbody tr:nth-child(odd) {
    background: #fafbfc;
}

.consommation-table tbody tr:nth-child(even) {
    background: #f0f1f3;
}

.consommation-table tfoot td {
    font-weight: 700;
    background: #d9f1f1;
    border-top: 2px solid var(--col-inrae);
}

/* Colonnes de détail par âge : police plus petite dans le footer */
.consommation-table tfoot td:nth-child(2),
.consommation-table tfoot td:nth-child(3),
.consommation-table tfoot td:nth-child(4) {
    font-size: 0.88em;
}

/* --- Constitution du territoire --- */
.territoire-section-grid {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 8px;
}

/* ===== Tri des tableaux au clic : en-têtes cliquables (souris + clavier) + indicateur ▲/▼ ===== */
.territoire-table thead th,
.consommation-table thead th {
    cursor: pointer;
    user-select: none;
}
.territoire-table thead th:hover,
.consommation-table thead th:hover {
    filter: brightness(0.97);
}
.territoire-table thead th:focus-visible,
.consommation-table thead th:focus-visible {
    outline: 2px solid var(--col-inrae);
    outline-offset: -2px;
}
.territoire-table thead th[aria-sort="ascending"]::after,
.consommation-table thead th[aria-sort="ascending"]::after {
    content: " \25B2"; /* ▲ */
    font-size: 0.72em;
    vertical-align: middle;
}
.territoire-table thead th[aria-sort="descending"]::after,
.consommation-table thead th[aria-sort="descending"]::after {
    content: " \25BC"; /* ▼ */
    font-size: 0.72em;
    vertical-align: middle;
}

.territoire-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    width: 100%;
}

/* Cartes de statistique (territoire : superficie/densité ; socio-éco : emploi/logement) — style unifié
   (les deux séries avaient dérivé sur des tailles de police/grille légèrement différentes). */
.territoire-stat-card,
.socio-stat-card {
    background: linear-gradient(135deg, #f6fcfa 0%, #e6f7f7 100%);
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    padding: 14px 16px 12px;
    box-shadow: 0 2px 6px var(--shadow-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.territoire-stat-label,
.socio-stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--col-inrae-dark);
    margin: 0 0 4px 0;
}

.territoire-stat-value,
.socio-stat-value {
    font-family: "Raleway", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--col-inrae-dark);
    margin: 0;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Bloc « niveau de vie médian » (revenus) : un chiffre central + une barre de dispersion min–médiane–max
   des médianes communales + une note méthodologique. Pas un histogramme (on n'a que les médianes communales). */
#revenus-niveau-vie {
    margin: 12px auto 0;   /* centré horizontalement dans la sous-section Revenus */
    background: linear-gradient(135deg, #f6fcfa 0%, #e6f7f7 100%);
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    box-shadow: 0 2px 6px var(--shadow-color);
    padding: 14px 18px 12px;
    max-width: 520px;
}

.revenus-nv-label {
    font-size: .72rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--col-inrae-dark);
    margin: 0 0 4px 0;
}

.revenus-nv-approx {
    text-transform: none;
    font-weight: 500;
    color: #666;
}

.revenus-nv-value {
    font-family: "Raleway", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--col-inrae-dark);
    margin: 0;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Barre de dispersion : piste horizontale + marqueur (médiane pondérée) positionné en % entre min et max. */
.revenus-dispersion {
    position: relative;
    margin: 14px 0 6px 0;
}

.revenus-dispersion-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #cfeceb 0%, var(--col-inrae) 100%);
}

.revenus-dispersion-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--col-inrae-dark);
    transform: translateX(-50%);
}

.revenus-dispersion-bornes {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: .72rem;
    color: #555;
    font-variant-numeric: tabular-nums;
}

.revenus-nv-note {
    font-size: .8rem;
    color: #555;
    margin: 8px 0 0 0;
    line-height: 1.35;
}

/* Carte combinée graphique + tableau, côte à côte (recensement âge, recensement sexe, densité).
   Repli en colonne (graphique au-dessus du tableau) quand la largeur manque (flex-wrap). */
.territoire-combo {
    background: #fff;
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 30px;
}

.territoire-chart-wrapper {
    /* Colonne graphique de la carte combinée, à TAILLE FIXE (flex 0 0 auto : ne grandit pas) → les
       graphiques sont uniformes et le couple graphique+tableau reste un groupe compact, centré par la
       combo (justify-content:center). Le fond/la bordure sont portés par .territoire-combo. */
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
}

/* Diagramme de flux de navetteurs (cartes EPP adultes et adolescents) : entrants / sortants / sur place,
   en barres proportionnelles au plus grand des trois flux. */
.flux-navetteurs {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e4efef;
    font-size: 0.85rem;
}

.flux-navetteurs:empty {
    display: none;   /* territoire sans mobilité : pas de séparateur orphelin */
}

.flux-titre {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--col-inrae-dark);
    margin: 0 0 8px;
}

.flux-ligne {
    display: grid;
    grid-template-columns: 8.5em 1fr 4.5em;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.flux-libelle {
    color: #555;
}

.flux-barre-piste {
    background: #eef4f4;
    border-radius: 3px;
    height: 10px;
    overflow: hidden;
}

.flux-barre {
    display: block;
    height: 100%;
    border-radius: 3px;
}

/* Entrants : ils ajoutent des présents → vert de la charte. Sortants : ils en retranchent → corail.
   Sur place : neutres pour le solde → gris chaud de la charte. */
.flux-barre.flux-entrants { background: #9dc544; }
.flux-barre.flux-sortants { background: #ed6e6c; }
.flux-barre.flux-internes { background: #797870; }

.flux-valeur {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--col-inrae-dark);
    font-weight: 600;
}

.flux-solde {
    margin: 8px 0 10px;
    padding-left: 2px;
    color: #444;
}

.flux-note {
    margin: 8px 0 0;
    font-size: .78rem;
    color: #666;
    line-height: 1.35;
}

/* Pyramide des âges : pleine largeur de la section, hauteur fixée en JS selon le nombre de barreaux. */
#recensement-pyramide-card {
    width: 100%;
    box-sizing: border-box;
}

/* Graphique en barres (densité, maintainAspectRatio:false). Contrairement aux camemberts (taille fixe), il
   GRANDIT pour occuper la place libre à côté du tableau (il paraissait trop petit en taille fixe), plafonné
   pour que le groupe reste centré sur les cartes très larges. Plus haut aussi : les libellés de classes
   (longs, en oblique) mangeaient la hauteur des barres. */
.territoire-chart-wrapper:not(.pie-wrapper) {
    flex: 1 1 400px;
    min-width: 320px;
    max-width: 520px;
    height: 300px;
}

.territoire-table-wrapper {
    /* Colonne tableau : largeur naturelle (compacte), ne grandit pas ; peut rétrécir et défiler
       horizontalement si la place manque (min-width:0 rend l'overflow-x effectif dans un flex item). */
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.territoire-table {
    /* Compact : le tableau se réduit à son contenu au lieu de s'étirer sur toute la largeur de la carte.
       Trois colonnes pour des chiffres courts s'y retrouvaient très espacées (grand vide libellé↔chiffres) ;
       l'overflow-x du wrapper gère le cas où le contenu dépasserait sur très petit écran. */
    width: auto;
    border-collapse: collapse;
    font-size: .92rem;
}

.territoire-table thead th {
    position: sticky;
    top: 0;
    background: #e6f7f7;
    color: var(--col-inrae-dark);
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 2px solid var(--col-inrae);
    text-align: left;
}

.territoire-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
}

/* Colonnes de chiffres (2 = effectif, 3 = part %) : en-têtes ET cellules alignés à droite — l'intitulé
   surplombe ainsi ses chiffres, au lieu de flotter à gauche d'une colonne large. L'alignement est défini
   ICI, une seule fois (et non en inline dans report.js). Chasse fixe (tabular-nums) sur les cellules pour
   un alignement net des chiffres entre eux. */
.territoire-table thead th:nth-child(2),
.territoire-table thead th:nth-child(3),
.territoire-table tbody td:nth-child(2),
.territoire-table tbody td:nth-child(3) {
    text-align: right;
}

.territoire-table tbody td:nth-child(2),
.territoire-table tbody td:nth-child(3) {
    font-variant-numeric: tabular-nums;
}

.territoire-table tbody tr:nth-child(odd) {
    background: #fafbfc;
}

.territoire-table tbody tr:nth-child(even) {
    background: #f0f1f3;
}

/* Survol de ligne : légère surbrillance des deux tableaux demandés (consommations + densité). La densité
   est ciblée par son id — la cibler par .territoire-table étendrait le survol aux tableaux âge/sexe (même
   classe). Bloc placé APRÈS les :nth-child : côté consommation, l'ordre source fait gagner le survol. */
.consommation-table tbody tr,
#densite-table tbody tr {
    transition: background-color 0.2s ease;
}

.consommation-table tbody tr:hover,
#densite-table tbody tr:hover {
    background: #cdecec;
}

/* --- Profil socio-économique --- */
.socio-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 8px 0 18px;
}

.socio-chart-wrapper {
    background: #fff;
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    padding: 16px 20px 12px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Grilles d'anneaux (emploi : 2 ; logement : 3). FLEX et non grid : quand le dernier passe à la ligne,
   `justify-content: center` le centre — une grille l'aurait laissé collé à gauche. `align-items: stretch`
   donne à toutes les cartes d'une même ligne la même hauteur, quitte à laisser du blanc sous la légende
   la plus courte. */
.emploi-charts-grid,
.logement-charts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
    margin-top: 6px;
}

.emploi-charts-grid > *,
.logement-charts-grid > * {
    flex: 0 1 320px;
}

/* Boîte du disque : CARRÉE et de taille FIXE, identique pour tous les anneaux du rapport. La légende étant
   sortie du canvas (cf. poseLegendeHtml), le disque occupe toute cette boîte → même diamètre et même axe
   partout, quel que soit le nombre de libellés. */
.emploi-charts-grid .pie-chart-container,
.logement-charts-grid .pie-chart-container {
    width: 240px;
    height: 240px;
    aspect-ratio: auto;
    min-width: 0;
    max-width: none;
}

/* Légende HTML, sous le disque. Elle peut s'étaler sur plusieurs lignes sans jamais rogner l'anneau. */
.legende-doughnut {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    font-size: .8rem;
    color: #444;
}

.legende-doughnut li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legende-puce {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    flex: none;
}


.socio-subnote {
    font-size: .78rem;
    color: #555;
    margin-top: 6px;
}

/* NEW: shared responsive constrained pie/doughnut container */
.pie-chart-outer-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 4px 0 10px;
    box-sizing: border-box;
}

.pie-chart-container {
    width: clamp(240px, 48%, 420px);
    max-width: 420px;
    min-width: 240px;
    aspect-ratio: 1 / 1;
    position: relative;
}

.pie-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Slightly reduce internal padding on wrappers that only contain a small pie */
.socio-chart-wrapper.pie-wrapper {
    padding: 14px 16px 12px;
}


/* Optional: center legend under smaller pies */
.chartjs-render-monitor + .chart-legend {
    text-align: center;
}

@media (max-width: 640px) {
    .pie-chart-container {
        width: clamp(220px, 80%, 360px);
    }
}

/* Pyramide des âges : une CARTE à part entière (le style de carte est porté par .territoire-combo, dont
   la pyramide ne fait pas partie — sans cette règle, elle flottait sans fond ni bordure), avec son canvas
   centré et de largeur bornée pour ne pas s'étirer démesurément sur grand écran. */
#recensement-pyramide-card {
    background: #fff;
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    padding: 16px 20px;
    box-sizing: border-box;
    /* C'est la CARTE qu'on borne et qu'on centre, pas le canvas : Chart.js donne au canvas la largeur de
       son conteneur, si bien qu'un max-width posé sur le canvas le laissait calé à gauche au lieu de le
       centrer. En bornant la carte, le graphe suit. */
    width: 100%;
    max-width: 576px;
    align-self: center;
}

/* --- Comparateur EPP vs Population --- */
.comparison-container {
    width: 80%;
    background: #fff;
    border: 1px solid var(--col-inrae);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    padding: 24px 32px;
    margin-top: 16px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
}

/* Comparaison sous forme de flux : [Population du recensement]  →(variation %)→  [EPP]. */
.comparison-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.comparison-endpoint {
    flex: 0 1 auto;
    min-width: 0;
}

.comparison-endpoint-label {
    display: block;
    font-size: 0.9em;
    color: var(--col-inrae-dark);
    margin-bottom: 10px;
}

.comparison-endpoint-value {
    font-family: "Raleway", sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: var(--col-inrae-dark);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* La flèche entre les deux, avec la variation (%) posée juste en dessous. */
.comparison-arrow {
    flex: 1 1 110px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.comparison-arrow-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: var(--col-inrae);
}

.comparison-arrow-line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 9px solid var(--col-inrae);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.comparison-arrow-value {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--col-inrae-dark);
}

.comparison-arrow-value.positive { color: var(--col-inrae-comp-green); }
.comparison-arrow-value.negative { color: var(--col-inrae-comp-red); }

/* Liens « carte » ouvrant les modales de flux de navetteurs.
   Ciblés par CLASSE et non par id : la règle ne listait que les deux liens des adultes, si bien que les
   liens scolaires — ajoutés plus tard — tombaient sur le style par défaut du navigateur (et viraient au
   violet une fois visités). Une classe couvre d'office tout nouveau lien de flux.
   :visited est réaffirmé car href="#" rend le lien « visité » dès le premier clic. */
.lien-carte-flux,
.lien-carte-flux:visited {
    color: var(--col-inrae);
    text-decoration: none;
    font-weight: normal;
}

.lien-carte-flux:hover,
.lien-carte-flux:focus-visible {
    text-decoration: underline;
}

/* D3.js tooltip styles */
.d3-tooltip {
    font-family: "Noto Sans", sans-serif;
    line-height: 1.4;
}

/* D3.js axis styles */
#epp-adultes-breakdown-chart .x-axis line,
#epp-adultes-breakdown-chart .y-axis line {
    stroke: #333;
}

#epp-adultes-breakdown-chart .x-axis path,
#epp-adultes-breakdown-chart .y-axis path {
    stroke: #333;
}

#epp-adultes-breakdown-chart .grid line {
    stroke: #e4efef;
    stroke-opacity: 0.7;
}

#epp-adultes-breakdown-chart .grid path {
    stroke-width: 0;
}

/* ---- Détail du calcul (trace pas-à-pas, dépliable par étape) ---- */
.detail-calcul-intro {
    color: #555;
    font-style: italic;
    margin: 8px 0 18px;
}

.detail-calcul-step {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fafafa;
}

.detail-calcul-step > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--col-inrae-dark);
    list-style: none;
    user-select: none;
}

.detail-calcul-step > summary::-webkit-details-marker {
    display: none;
}

.detail-calcul-step > summary::before {
    content: "\25B8"; /* ▸ — triangle Unicode (pas de dépendance FontAwesome pour ce marqueur) */
    margin-right: 10px;
    color: var(--col-inrae);
    display: inline-block;
    transition: transform 0.15s;
}

.detail-calcul-step[open] > summary::before {
    transform: rotate(90deg);
}

.detail-calcul-step > pre {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background: #fff;
    overflow-x: auto;
    white-space: pre;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.82em;
    line-height: 1.45;
    color: #333;
}