/* =====================================================================
   Rubrique « S'implanter dans le Val-d'Oise » (#184) et fil d'Ariane.
   Composants de la charte DA (docs/design/CHARTE.md) : grille de 8 px, corps 16/24, rien sous 12 px,
   cibles tactiles de 44 px, tableaux qui défilent dans leur cadre (première colonne figée), aucun
   libellé de bouton ou d'en-tête sur deux lignes. Jetons de couleur : core/static/core/css/styles.css.
   ===================================================================== */

/* Fil d'Ariane : règles .ui-breadcrumb dans styles.css (communes aux rubriques S'implanter et Actualités). */
/* Sur les pages à fond de carte (listes), le fil d'Ariane est posé sur un cartouche blanc */
.ui-breadcrumb--carte { display: inline-block; max-width: 100%; padding: 0 16px; background: #fff; border: 1px solid var(--c-border, #E2E8F0); border-radius: var(--r-sm, 8px); position: relative; z-index: 10; }
.ui-breadcrumb--carte ol { min-height: 40px; }
.ui-breadcrumb--carte .ui-breadcrumb { margin: 0; }

/* Valeur absente */
.ui-nd { color: var(--c-text-muted, #64748B); cursor: help; }

/* En-tête de page de la rubrique */
.si-head { margin: 0 0 24px; }
.si-kicker { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-brand, #1853A2); }
.si-intro { margin: 8px 0 0; max-width: 70ch; font-size: 16px; line-height: 24px; color: var(--c-text-body, #1E293B); }
.si-section { margin: 0 0 32px; }
.si-section > .ui-h2 { margin: 0 0 16px; }
.si-section > .ui-h2 + .si-lead { margin-top: -8px; }
.si-lead { margin: 0 0 16px; max-width: 70ch; font-size: 16px; line-height: 24px; color: var(--c-text-body, #1E293B); }
.si-card { background: #fff; border: 1px solid var(--c-border, #E2E8F0); border-radius: var(--r-md, 12px); box-shadow: var(--sh-2); padding: 16px; min-width: 0; }
@media (min-width: 1024px) { .si-card { padding: 24px; } }

/* Navigation locale : sept sous-rubriques, défilement horizontal dans son cadre sur petit écran */
.si-subnav { margin: 0 0 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.si-subnav ul { display: flex; gap: 8px; margin: 0; padding: 4px; list-style: none; width: max-content; }
.si-subnav a { display: inline-flex; align-items: center; min-height: var(--tap, 40px); padding: 0 16px; border-radius: 9999px; border: 1px solid #CBD5E1;
    background: #fff; color: var(--c-text-body, #1E293B); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.si-subnav a:hover { background: var(--c-bg-2, #F1F5F9); }
.si-subnav a[aria-current="page"] { background: var(--c-brand, #1853A2); border-color: var(--c-brand, #1853A2); color: #fff; }
.si-subnav a:focus-visible, .si-th a:focus-visible, .si-link:focus-visible { outline: 2px solid var(--ui-focus, #1D4ED8); outline-offset: 2px; }

/* Source et millésime, sous chaque bloc */
.ui-source { margin: 16px 0 0; font-size: 13px; line-height: 18px; color: var(--c-text-2, #475569); max-width: 90ch; }
.ui-source strong { font-weight: 600; color: var(--c-text-body, #1E293B); }
.ui-source a { color: var(--c-action, #0066CC); }

/* Chiffres clés */
.si-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .si-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.si-figs--4 { }
@media (min-width: 1024px) { .si-figs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.si-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--c-border, #E2E8F0); border-radius: var(--r-md, 12px); box-shadow: var(--sh-2); }
.si-fig__n { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--c-text, #0F172A); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 1024px) { .si-fig { padding: 24px; } .si-fig__n { font-size: 30px; line-height: 38px; } }
.si-fig__l { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-text-body, #1E293B); }
.si-fig__s { font-size: 13px; line-height: 18px; color: var(--c-text-2, #475569); }

/* Carte du département et liste associée */
.si-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1024px) { .si-map { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.si-map__frame { position: relative; z-index: 0; isolation: isolate; aspect-ratio: 4 / 3; border: 1px solid var(--c-border, #E2E8F0); border-radius: var(--r-md, 12px); overflow: hidden; background: #E2E8F0; }
@media (min-width: 1024px) { .si-map__frame { aspect-ratio: 16 / 10; } }
#si-carte { position: absolute; inset: 0; z-index: 0; }
.si-map .leaflet-container { font-family: inherit; }
.si-map .leaflet-control-attribution { font-size: 12px; line-height: 16px; }
.si-pin { display: flex !important; background: none !important; border: 0 !important; }
.si-pin span { display: flex; align-items: center; justify-content: center; margin: auto; box-sizing: border-box; width: 100%; height: 100%; border-radius: 9999px; background: #1853A2; color: #fff;
    border: 2px solid #fff; font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(15, 23, 42, .45); }
.si-pin:hover span, .si-pin:focus-visible span { background: #123F7C; }
.si-pin:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 9999px; }
@media (pointer: coarse), (max-width: 1023.98px) { .si-map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; } }
.si-list { margin: 0; padding: 0; list-style: none; }
.si-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--c-border, #E2E8F0); }
.si-list li:last-child { border-bottom: 0; }
.si-link { color: var(--c-action, #0066CC); font-weight: 600; text-decoration: none; }
.si-link:hover { text-decoration: underline; }
.si-list .si-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; overflow-wrap: anywhere; }

/* Répartition par secteur : une barre par ligne (longueur = part), valeur et pourcentage en clair */
.si-bars { width: 100%; border-collapse: collapse; }
.si-bars th, .si-bars td { padding: 8px 0; text-align: left; vertical-align: middle; font-size: 16px; line-height: 24px; }
.si-bars th { font-weight: 600; color: var(--c-text-body, #1E293B); width: 1%; white-space: nowrap; padding-right: 16px; }
.si-bars td.si-num { width: 1%; padding-left: 16px; }
.si-bar { display: block; height: 16px; border-radius: 4px; background: var(--c-bg-2, #F1F5F9); overflow: hidden; }
.si-bar > span { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--c-brand, #1853A2); }
@media (max-width: 639.98px) {
    .si-bars, .si-bars tbody, .si-bars tr { display: block; }
    .si-bars tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 16px; padding: 8px 0; }
    .si-bars th, .si-bars td, .si-bars td.si-num { display: block; padding: 0; width: auto; min-width: 0; white-space: normal; }
    .si-bars td.si-bars__bar { grid-column: 1 / -1; grid-row: 2; padding-top: 8px; }
}

/* Tableaux de données : défilement dans le cadre, première colonne figée, en-têtes sur une ligne */
.si-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--c-border, #E2E8F0); border-radius: var(--r-md, 12px); box-shadow: var(--sh-2); }
.si-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; color: var(--c-text-body, #1E293B); }
.si-table th, .si-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-border, #E2E8F0); }
.si-table tbody tr:last-child > * { border-bottom: 0; }
.si-table thead th { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--c-text-2, #475569); background: var(--c-bg, #F8FAFC); white-space: nowrap; }
.si-table tbody tr { height: 48px; }
.si-table tbody tr:hover > * { background: var(--c-bg-2, #F1F5F9); }
.si-table tbody th { font-weight: 600; background: #fff; }
.si-table .si-num, .si-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.si-table thead th.si-num { text-align: right; }
.si-table th:first-child { position: sticky; left: 0; z-index: 1; }
.si-table thead th:first-child { z-index: 2; }
.si-th a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: inherit; text-decoration: none; white-space: nowrap; }
.si-th a:hover { color: var(--c-action, #0066CC); }
.si-th [aria-hidden] { font-size: 12px; color: var(--c-text-muted, #64748B); }
.si-th.is-sorted a { color: var(--c-text, #0F172A); }
.si-th.is-sorted [aria-hidden] { color: var(--c-brand, #1853A2); }
@media (pointer: coarse), (max-width: 1023.98px) { .si-th a { min-height: 44px; } .si-table .si-link { display: inline-flex; align-items: center; min-height: 44px; } }
.si-table .si-sub { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--c-text-2, #475569); }

/* Tableau -> cartes sur petit écran (annuaire des élus, comparateur exclu) */
@media (max-width: 767.98px) {
    .si-tablewrap--cards { overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
    .si-table--cards, .si-table--cards tbody { display: block; }
    .si-table--cards thead { display: none; }  /* chaque cellule porte son libellé (data-label) */
    .si-table--cards tbody tr { display: block; height: auto; margin: 0 0 16px; padding: 16px; background: #fff; border: 1px solid var(--c-border, #E2E8F0); border-radius: var(--r-md, 12px); box-shadow: var(--sh-2); }
    .si-table--cards tbody tr:hover > * { background: none; }
    .si-table--cards tbody th, .si-table--cards tbody td { display: block; position: static; padding: 0; border: 0; background: none; }
    .si-table--cards tbody th { font-size: 18px; line-height: 26px; margin: 0 0 8px; }
    .si-table--cards tbody td { padding: 8px 0 0; }
    .si-table--cards tbody td::before { content: attr(data-label); display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--c-text-2, #475569); }
}

/* Formulaire de filtre au-dessus d'un tableau */
.si-filtres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: end; margin: 0 0 16px; }
@media (min-width: 768px) { .si-filtres { grid-template-columns: minmax(0, 320px) minmax(0, 280px) auto auto; } .si-filtres--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }
.si-filtres .ui-label { margin-bottom: 8px; }
.si-filtres .ui-btn { justify-self: start; }
@media (max-width: 767.98px) { .si-filtres .ui-btn { width: 100%; justify-self: stretch; } }
.si-count { margin: 0 0 16px; font-size: 14px; line-height: 20px; color: var(--c-text-2, #475569); }

/* Cartes : sous-rubriques, organismes, intercommunalités */
.si-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .si-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1280px) { .si-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.si-cards > li { display: flex; flex-direction: column; gap: 8px; }
.si-cards .ui-h3 { overflow-wrap: anywhere; }
.si-cards p { margin: 0; font-size: 14px; line-height: 20px; color: var(--c-text-body, #1E293B); }
.si-cards .si-card__foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.si-cards .ui-btn--link { padding: 0; justify-content: flex-start; }
.si-card--lien { position: relative; transition: box-shadow .2s; }
.si-card--lien:hover { box-shadow: var(--sh-3); }
.si-card--lien a::after { content: ""; position: absolute; inset: 0; }
.si-card--lien:focus-within { outline: 2px solid var(--ui-focus, #1D4ED8); outline-offset: 2px; }
.si-card--lien a:focus-visible { outline: none; }
.si-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 8px 0 0; }
.si-dl div { min-width: 0; }
.si-dl dt { font-size: 13px; line-height: 18px; color: var(--c-text-2, #475569); }
.si-dl dd { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--c-text, #0F172A); font-variant-numeric: tabular-nums; }
.si-details { margin: 8px 0 0; }
.si-details > summary { display: inline-flex; align-items: center; min-height: var(--tap, 40px); cursor: pointer; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-action, #0066CC); }
.si-details > summary:focus-visible { outline: 2px solid var(--ui-focus, #1D4ED8); outline-offset: 2px; border-radius: 4px; }
.si-details ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.si-details li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--c-action, #0066CC); text-decoration: none; }
.si-details li a:hover { text-decoration: underline; }
@media (pointer: coarse), (max-width: 1023.98px) { .si-details li a { min-height: 44px; } }
.si-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.si-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 16px 0 0; }
.si-note { margin: 16px 0 0; padding: 16px; border-radius: var(--r-sm, 8px); background: #DBEAFE; border: 1px solid #93C5FD; color: #1E40AF; font-size: 14px; line-height: 20px; max-width: 90ch; }
.si-note ul { margin: 8px 0 0; padding-left: 24px; }
.si-names { margin: 0; padding: 0; list-style: none; }
.si-names li { padding: 0; }

/* Carte de situation (SVG, sans fond de carte) */
.si-situation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 1024px) { .si-situation { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.si-situation svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.si-situation .dep { fill: #E2E8F0; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.si-situation .dep--95 { fill: #1853A2; }
.si-situation .dep--75 { fill: #94A3B8; }
.si-situation text { font-family: inherit; font-size: 13px; font-weight: 600; fill: #1E293B; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.si-situation text.t95 { fill: #fff; stroke: #1853A2; font-size: 15px; font-weight: 700; }
.si-situation text.trepere { text-anchor: start; }
.si-situation .repere { fill: #B45309; stroke: #fff; stroke-width: 2; }
.si-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--c-text-body, #1E293B); }
.si-legend li { display: inline-flex; align-items: center; gap: 8px; }
.si-legend i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }

/* Comparateur de communes */
.si-compare th[scope="col"] { min-width: 160px; }
.si-compare thead th a { color: var(--c-action, #0066CC); font-size: 14px; }
.si-compare .si-groupe th { background: var(--c-bg, #F8FAFC); color: var(--c-text-2, #475569); font-size: 13px; line-height: 18px; }

/* Encart d'appel (page des commercialisateurs) */
.ui-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 24px; padding: 16px 24px; background: #fff; border: 1px solid #93C5FD; border-radius: var(--r-md, 12px); box-shadow: var(--sh-2); position: relative; z-index: 10; }
.ui-callout p { margin: 0; font-size: 16px; line-height: 24px; color: var(--c-text-body, #1E293B); min-width: 0; }
.ui-callout strong { display: block; font-weight: 700; color: var(--c-text, #0F172A); }
@media (max-width: 639.98px) { .ui-callout { padding: 16px; } .ui-callout .ui-btn { width: 100%; } }

/* Élus : photo de la fiche contact (ou initiales), nom, mandat */
.si-elus { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.si-elus--serre { gap: 8px 16px; }
.si-elu { display: flex; align-items: center; gap: 16px; min-width: 0; }
.si-elu__photo { flex-shrink: 0; width: 56px; height: 56px; border-radius: 9999px; object-fit: cover; background: var(--c-bg-2, #F1F5F9); border: 1px solid var(--c-border, #E2E8F0); }
.si-elu__photo--initiales { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--c-brand, #1853A2); background: var(--c-brand-soft, #DBEAFE); border-color: #BFDBFE; }
.si-elu__txt { display: flex; flex-direction: column; min-width: 0; }
.si-elu__nom { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--c-text, #0F172A); overflow-wrap: anywhere; }
.si-elu__role { font-size: 13px; line-height: 18px; color: var(--c-text-2, #475569); }
.si-groupe-elus { margin: 0 0 24px; }
.si-groupe-elus > .ui-h3 { margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }

/* Les ancres ne passent pas sous le menu collant */
.si-section, .si-section [id] { scroll-margin-top: 96px; }

/* #204 : députés par circonscription, conseillers départementaux par canton (chaque élu une seule fois) */
.si-mandats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.si-mandat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--c-border, #E2E8F0); border-radius: var(--r-sm, 8px); background: var(--c-bg, #F8FAFC); }
.si-mandat__titre { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-text-body, #1E293B); }
.si-mandat .si-elus { grid-template-columns: minmax(0, 1fr); }
.si-mandat .si-details { margin: 0; }
.si-elu--renvoi { min-height: 56px; padding-left: 72px; }
.si-elu:target .si-elu__nom { text-decoration: underline; text-decoration-color: var(--c-brand, #1853A2); text-decoration-thickness: 2px; }

/* Interlocuteurs d'administration (#201) : services et responsables publiés par les institutions */
.si-ilo { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.si-ilo__service { min-width: 0; padding-top: 12px; border-top: 1px solid var(--c-border, #E2E8F0); }
.si-ilo__service:first-child { padding-top: 0; border-top: 0; }
.si-ilo__nom { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-text, #0F172A); overflow-wrap: anywhere; }
.si-ilo__personnes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.si-ilo__personne { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-text-body, #1E293B); overflow-wrap: anywhere; }
.si-ilo__fonction { display: block; font-size: 14px; line-height: 20px; color: var(--c-text-muted, #475569); overflow-wrap: anywhere; }
.si-ilo__coord { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--c-text-body, #1E293B); overflow-wrap: anywhere; min-width: 0; }
.si-ilo__coord a { color: var(--c-action, #0066CC); overflow-wrap: anywhere; }
.si-ilo__source { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--c-text-muted, #475569); }
.si-ilo__source a { color: inherit; text-decoration: underline; }
.si-ilo__categorie { margin: 16px 0 8px; }
/* #223 : page d'entrée en cartes par groupe ; navigation locale limitée aux pages sœurs (elle tient sur une ligne ou passe à la ligne, sans défilement horizontal) */
.si-groupe { margin: 0 0 32px; }
.si-groupe__titre { margin: 0 0 16px; padding: 0 0 8px; border-bottom: 2px solid var(--c-brand, #1853A2); }
.si-groupe__page { font-size: 16px; line-height: 24px; }
.si-subnav ul { width: auto; flex-wrap: wrap; }
/* sur mobile, la liste est repliée derrière un bouton « groupe · page affichée » (core/includes/nav_locale.html) */
@media (max-width: 639.98px) { .si-subnav { overflow: visible; } .si-subnav ul { display: none; flex-direction: column; padding: 8px 0 0; } .si-subnav.est-ouvert ul { display: flex; } .si-subnav a { width: 100%; } }