/* Pages communes, index /commune/ et guides (scripts/page-commune.mjs, scripts/page-guide.mjs).
   Henri, 06/10/2026 : « le style cheap, la tonalité », puis « si on a une approche comme Palantir, il faut une mise en
   page pointue avec une gamme chromatique et graphique cohérente de cabinet de conseil ». Grammaire : un bandeau sombre
   (le constat et les chiffres clés), puis des chapitres numérotés ouverts par un filet d'encre ; chaque graphique est une
   PIÈCE numérotée, titrée par son constat, avec sa source. Une encre, une gamme lagon, du sable pour le foncier. Pas de
   carte arrondie, pas d'ombre, pas de pastille : des filets. Page claire, même si le système est en sombre. */
.page-commune, .page-guide {
  --c-encre: #0E1116; --c-encre-2: #3B4048; --c-gris: #6E747C; --c-filet: #DADDE0; --c-fond: #F7F7F5; --c-lagon: #0B4F5C; --c-lagon-2: #2E8C8C; --c-sable: #C8A96A;
  --fond: #F7F7F5; --surface: #FFFFFF; --encre: #0E1116; --encre-2: #3B4048; --encre-3: #5F656D; --filet: #DADDE0; --filet-2: #C9CDD1; --survol: #EEF0F1; --accent: #1B3A5C; /* liens : l'accent clair du thème sombre (#8FB4D9) était illisible sur cette page claire */
  background: var(--c-fond); color: var(--c-encre); font-variant-numeric: tabular-nums; color-scheme: light; overflow-x: clip; /* le bandeau pleine largeur (100vw) dépassait de la barre de défilement */
}
.page-commune main, .page-guide main { max-width: 1040px; }
.page-commune .fil, .page-guide .fil { color: var(--c-gris); }

/* ── Le bandeau : le nom, le constat, six chiffres ── */
.rapport-tete { width: 100vw; margin-left: calc(50% - 50vw); background: #0B0C0E; color: #F1F1EF; }
.rt-in { max-width: 1040px; margin: 0 auto; padding: 28px 24px 34px; }
.rapport-tete .fil, .rapport-tete .fil a { color: #9EA3AA; }
.rt-sur { margin: 28px 0 10px; color: #9EA3AA; font-size: .8125rem; }
.rapport-tete h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; color: #fff; }
.rt-message { max-width: 760px; margin: 14px 0 0; font-size: clamp(1.1rem, 2vw, 1.375rem); font-weight: 300; line-height: 1.35; color: #D9DCDF; }
.rt-chiffres { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 30px; border-top: 1px solid #2A2E33; }
.hk { padding: 16px 14px 0 0; }
.hk + .hk { padding-left: 14px; border-left: 1px solid #2A2E33; }
.hk-v { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -0.02em; color: #fff; }
.hk-l { margin: 4px 0 0; font-size: .8125rem; color: #C3C7CC; }
.hk-n { margin: 2px 0 0; font-size: .75rem; color: #868C94; }
.rt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.rapport-tete .bouton { border-radius: 2px; background: transparent; color: #F1F1EF; box-shadow: inset 0 0 0 1px #3A3F45; }
.rapport-tete .bouton-primaire { background: #F1F1EF; color: #0B0C0E; box-shadow: none; }

/* ── Les chapitres ── */
.chap, .chap-urba > section { margin-top: 64px; padding-top: 18px; border-top: 2px solid var(--c-encre); }
.chap h2, .chap-urba h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; }
.chap-n { color: var(--c-lagon-2); font-size: .875rem; font-weight: 600; letter-spacing: .02em; }
.chap-chapo, .page-commune .intro { max-width: 760px; margin: 0 0 20px; color: var(--c-encre-2); font-size: 1rem; line-height: 1.6; }
.chap-urba h3 { margin: 26px 0 10px; font-size: .9375rem; font-weight: 600; }

/* ── Les pièces ── */
.piece { margin: 28px 0 0; }
.piece figcaption { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.piece-n { color: var(--c-lagon-2); font-size: .75rem; font-weight: 600; }
.piece-t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; max-width: 820px; }
.piece-src { margin: 10px 0 0; max-width: 820px; color: var(--c-gris); font-size: .75rem; line-height: 1.5; }
.graph { display: block; width: 100%; max-width: 820px; height: auto; overflow: visible; }
.graph .ax { fill: var(--c-gris); font-size: 11px; }
.graph .lb { fill: var(--c-encre); font-size: 13px; font-weight: 600; }
.graph .val { fill: var(--c-encre); font-size: 12px; font-weight: 600; }
.legende-g { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; color: var(--c-encre-2); font-size: .8125rem; }
.legende-g span { display: inline-flex; align-items: center; gap: 7px; }
.legende-g i { display: inline-block; width: 12px; height: 12px; }
.legende-g i.pt { width: 10px; height: 10px; border-radius: 50%; background: var(--c-lagon); }
.legende-g i.bd { width: 16px; height: 10px; background: var(--c-lagon); opacity: .25; }
.legende-g i.tr { width: 0; height: 14px; border-left: 1.5px dashed var(--c-encre); }

/* barres à 100 % */
.b100 { display: grid; gap: 14px; max-width: 820px; }
.b100-t { display: flex; justify-content: space-between; margin: 0 0 5px; font-size: .875rem; font-weight: 500; }
.b100-t span { color: var(--c-gris); font-weight: 400; }
.b100-b { display: flex; height: 24px; background: var(--c-filet); }
.b100-b span { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.b100-b span[style*="#C8A96A"], .b100-b span[style*="#A7AEB6"] { color: var(--c-encre); }

/* tableaux d'étude : un filet d'encre en tête, des filets fins, rien d'autre */
.t-pro { width: 100%; border-collapse: collapse; font-size: .875rem; }
.t-pro thead th { padding: 8px 10px 8px 0; border-top: 2px solid var(--c-encre); border-bottom: 1px solid var(--c-encre); color: var(--c-gris); font-size: .75rem; font-weight: 500; text-align: left; }
.t-pro tbody :is(th, td) { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--c-filet); vertical-align: top; text-align: left; font-weight: 400; line-height: 1.5; }
.t-pro tbody th { font-weight: 600; }
.t-pro small { display: block; margin-top: 2px; color: var(--c-gris); font-size: .75rem; font-weight: 400; }
.t-pro .num { text-align: right; white-space: nowrap; }
.t-avis td:last-child { color: var(--c-encre-2); max-width: 520px; }
.t-croise td:last-child { color: var(--c-encre-2); }

/* les quartiers : carte neutre et numérotée, tableau à côté */
.q-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
.carte-neutre { display: block; width: 100%; height: auto; }
.carte-neutre path { fill: #E4E7EA; stroke: var(--c-fond); stroke-width: 1.5; }
.carte-neutre path:hover { fill: #D3D8DC; }
.carte-neutre circle { fill: var(--c-encre); }
.carte-neutre text { fill: #fff; font-size: 11px; font-weight: 600; text-anchor: middle; }
.qn { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--c-encre); color: #fff; font-size: .6875rem; font-weight: 600; vertical-align: 1px; }
.t-quartiers th[scope="row"] { font-weight: 500; }
.t-quartiers tr.faible :is(th, td) { color: var(--c-gris); }
.t-quartiers tr.faible .qn { background: #A7AEB6; }
.mini100 { display: flex; width: 100%; min-width: 90px; height: 10px; background: var(--c-filet); }
.mini100 i { display: block; height: 10px; }

/* carte du PLU */
.carte-plu { display: block; width: 100%; max-height: 520px; margin: 4px 0 12px; }
.carte-plu path { stroke: var(--c-fond); stroke-width: .5; fill-opacity: .85; }
.carte-plu path:hover { fill-opacity: 1; stroke: var(--c-encre); }
.mix-barre { display: flex; height: 22px; overflow: hidden; background: var(--c-filet); }
.mix-barre span { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--c-encre); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.mix-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; color: var(--c-encre-2); font-size: .8125rem; }
.mix-legende span { display: inline-flex; align-items: center; gap: 7px; }
.mix-legende i { display: inline-block; width: 12px; height: 12px; }
.chap-urba .table-defile, .page-commune .table-defile { border: 0; border-radius: 0; background: none; }
.chap-urba .table { border-collapse: collapse; }
.chap-urba .table thead th { border-top: 2px solid var(--c-encre); border-bottom: 1px solid var(--c-encre); background: none; }
.table-texte :is(th, td) { white-space: normal; }

/* sélecteur segmenté (pas de menu déroulant natif) */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--c-encre); }
.seg button { padding: 7px 12px; border: 0; border-left: 1px solid var(--c-filet); background: transparent; color: var(--c-encre); font: inherit; font-size: .8125rem; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--c-encre); color: #fff; }
.page-commune .ventes-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.page-commune .ventes-tete h2 { margin: 0; }
.page-commune .filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.page-commune .filtres input { height: 34px; border: 1px solid var(--c-filet); border-radius: 0; background: #fff; }

/* FAQ et appel */
.faq details { border-top: 1px solid var(--c-filet); }
.faq details:last-of-type { border-bottom: 1px solid var(--c-filet); }
.faq summary { padding: 14px 0; font-weight: 500; cursor: pointer; }
.faq details p { margin: 0 0 16px; max-width: 760px; color: var(--c-encre-2); line-height: 1.6; }
.appel .bouton, .page-guide .bouton, .page-commune .bouton { border-radius: 2px; }

/* ── Index /commune/ ── */
.page-commune .entete h1, .page-guide .entete h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.025em; }
.page-commune .chapo { max-width: 760px; line-height: 1.6; font-size: 1.0625rem; }
.page-commune .table thead th { border-top: 2px solid var(--c-encre); border-bottom: 1px solid var(--c-encre); background: none; }
.table-communes th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.table-communes th button[aria-sort="descending"]::after { content: ' ↓'; }
.table-communes th button[aria-sort="ascending"]::after { content: ' ↑'; }
.table-communes th[scope="row"] a { font-weight: 500; }
.mix-mini { display: inline-flex; width: 56px; height: 8px; margin-right: 8px; overflow: hidden; vertical-align: middle; background: var(--c-filet); }
.mix-mini i { display: inline-block; height: 8px; }
.mix { margin: 10px 0; max-width: 820px; }
.mix-titre { display: flex; justify-content: space-between; margin: 0 0 5px; font-size: .875rem; font-weight: 500; }
.mix-titre span { color: var(--c-gris); font-weight: 400; }
.note-h { margin-left: 6px; color: var(--c-gris); font-size: .8125rem; font-weight: 400; }

/* carte de l'index */
.carte-index { display: block; width: 100%; height: auto; }
.carte-index path { stroke: var(--c-fond); stroke-width: 1; }
.carte-index a:hover path { stroke: var(--c-encre); stroke-width: 1.5; }
.ci-noms text { fill: var(--c-encre); font-size: 10px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.ci-noms text.clair { fill: #fff; }

/* ── Guides ── */
.page-guide .surtitre { margin: 0 0 6px; color: var(--c-gris); font-size: .8125rem; }
.page-guide .chapo { max-width: 760px; line-height: 1.55; }
.guide-corps { max-width: 820px; }
.guide-corps h2 { margin-top: 48px; padding-top: 16px; border-top: 2px solid var(--c-encre); font-size: 1.375rem; letter-spacing: -0.015em; }
.guide-corps p, .guide-corps li { line-height: 1.65; color: var(--c-encre-2); }
.liste { padding-left: 1.2em; }
.liste li { margin: 6px 0; }
.page-guide .table :is(th, td) { white-space: normal; }
.page-guide .table-defile { border: 0; border-radius: 0; background: none; }
.page-guide .table thead th { border-top: 2px solid var(--c-encre); border-bottom: 1px solid var(--c-encre); background: none; }
.page-guide .table th[scope="row"] { min-width: 120px; }
.table-decision th[scope="row"] { font-weight: 500; min-width: 180px; }
a.src { margin-left: 4px; color: var(--c-gris); font-size: .75rem; }
.pastille-plu { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: baseline; }
.guide-sources ul, .liens-guides { padding-left: 1.2em; }
.guide-sources li { margin: 4px 0; font-size: .875rem; }
.cartes-guides { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 28px; margin: 0; padding: 0; border-top: 2px solid var(--c-encre); }
.cartes-guides li { border-bottom: 1px solid var(--c-filet); }
.cartes-guides a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 0; color: var(--c-encre); text-decoration: none; }
.cartes-guides a:hover b { text-decoration: underline; }
.cartes-guides b { font-size: 1rem; }
.cartes-guides span { color: var(--c-encre-2); font-size: .875rem; line-height: 1.5; }

@media (max-width: 760px) {
  .rt-chiffres { grid-template-columns: repeat(2, 1fr); }
  .hk, .hk + .hk { padding: 14px 10px 12px 0; border-left: 0; border-bottom: 1px solid #2A2E33; }
  .q-grille { grid-template-columns: 1fr; }
  .t-avis, .t-avis tbody, .t-avis tr, .t-avis th, .t-avis td { display: block; }
  .t-avis thead { display: none; }
  .t-avis tr { padding: 12px 0; border-bottom: 1px solid var(--c-filet); }
  .t-avis tbody :is(th, td) { border: 0; padding: 2px 0; text-align: left; }
  .t-avis .num { text-align: left; }
}

/* ══ Charte « Le Monde » (relevée le 06/10/2026 sur lemonde.fr, Les Décodeurs) : Henri retient les directions 1, 2 et 7 de la
   planche (note de conjoncture, pièce de cabinet, carte d'étude), « comme les graphiques du Monde, une ou deux couleurs et des
   cartes ». Titres en serif (Source Serif 4 ≈ The Antiqua), graphiques en sans (Libre Franklin ≈ Marr Sans), chiffres serrés
   (Barlow Semi Condensed ≈ Marr Sans Condensed). Encres #2A303C → #717B8E ; un bleu « sea » ; bloc graphique blanc, filet #E2E4E9. ══ */
.page-commune, .page-guide {
  --lm-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --lm-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; --lm-etroit: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --lm-1: #2A303C; --lm-2: #383F4E; --lm-3: #464F5F; --lm-4: #565E70; --lm-5: #717B8E; --lm-filet: #E2E4E9; --lm-encart: #F5F6F8; --lm-sea: #026B9C; --lm-nuit: #01364F;
  --c-fond: #FFFFFF; --fond: #FFFFFF; background: #FFFFFF; color: var(--lm-2); font-family: var(--lm-sans);
}
.page-commune main, .page-guide main { max-width: 1000px; }
.obs { padding-top: 8px; }
.obs .fil { margin-top: 18px; font-size: .8125rem; }
.obs-sur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 26px 0 12px; font: 500 .8125rem/1.4 var(--lm-sans); color: var(--lm-4); }
.obs-sur .maj { padding: 2px 8px; border-radius: 3px; background: #C72929; color: #fff; font-size: .75rem; font-weight: 600; }
.obs h1 { max-width: 30ch; margin: 0; font: 700 clamp(1.75rem, 3.6vw, 2.5rem)/1.12 var(--lm-serif); letter-spacing: -0.01em; color: var(--lm-1); text-wrap: balance; }
.obs-chapo { max-width: 66ch; margin: 18px 0 0; font: 400 clamp(1.05rem, 1.6vw, 1.1875rem)/1.6 var(--lm-serif); color: var(--lm-2); }
.obs-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; margin-top: 32px; }
.t-cles { width: 100%; border-collapse: collapse; font: 400 .875rem/1.4 var(--lm-sans); color: var(--lm-2); }
.t-cles thead th { padding: 0 8px 8px 0; border-bottom: 2px solid var(--lm-1); font-size: .75rem; font-weight: 600; color: var(--lm-4); text-align: left; }
.t-cles tbody :is(th, td) { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--lm-filet); text-align: left; font-weight: 400; vertical-align: baseline; }
.t-cles tbody th { color: var(--lm-1); }
.t-cles .num { text-align: right; white-space: nowrap; font-family: var(--lm-etroit); font-size: 1rem; font-weight: 500; }
.t-cles td.num:nth-child(2) { color: var(--lm-1); font-weight: 600; }
.t-cles .ecart { color: var(--lm-sea); }
.src { margin: 10px 0 0; font: 400 .8125rem/1.45 var(--lm-sans); color: var(--lm-4); }
.src a { color: var(--lm-4); text-decoration: underline; }
/* le bloc graphique du Monde : blanc, filet, arrondi 6, marges 22 × 24 */
.bloc { margin: 0; padding: 22px 24px; border: 1px solid var(--lm-filet); border-radius: 6px; background: #fff; box-shadow: 0 8px 14px rgba(14, 39, 87, .06); }
.bloc-large { margin-top: 28px; }
.bloc-t { margin: 0; font: 600 1.25rem/1.35 var(--lm-sans); color: var(--lm-3); text-wrap: balance; }
.bloc-s { margin: 4px 0 16px; font: 400 .9375rem/1.45 var(--lm-sans); color: var(--lm-3); }
.carte-ld { display: block; width: 100%; height: auto; overflow: hidden; max-height: 460px; }
.carte-ld path { stroke: #fff; stroke-width: .8; }
.carte-ld path:hover { stroke: var(--lm-1); stroke-width: 1.4; }
.ld-noms text { fill: var(--lm-1); font: 600 10.5px var(--lm-sans); text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 3px; pointer-events: none; }
.leg-classes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font: 400 .8125rem var(--lm-sans); color: var(--lm-3); }
.leg-classes span { display: inline-flex; align-items: center; gap: 6px; }
.leg-classes i { display: inline-block; width: 14px; height: 10px; }
.obs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.page-commune .bouton { border-radius: 3px; font-family: var(--lm-sans); }
/* chapitres : intertitre-constat en serif, sans numéro */
.chap, .chap-urba > section { margin-top: 56px; padding-top: 0; border-top: 0; }
.chap h2, .chap-urba h2 { display: block; margin: 0 0 14px; font: 700 clamp(1.4rem, 2.6vw, 1.75rem)/1.2 var(--lm-serif); letter-spacing: -0.005em; color: var(--lm-1); }
.chap-chapo, .page-commune .intro { font: 400 1.0625rem/1.6 var(--lm-serif); color: var(--lm-2); max-width: 66ch; }
/* les pièces deviennent des blocs du Monde */
.piece { margin: 24px 0 0; padding: 22px 24px; border: 1px solid var(--lm-filet); border-radius: 6px; background: #fff; box-shadow: 0 8px 14px rgba(14, 39, 87, .06); }
.piece-n { display: none; }
.piece-t { font: 600 1.25rem/1.35 var(--lm-sans); color: var(--lm-3); letter-spacing: 0; }
.piece-src { font: 400 .8125rem/1.45 var(--lm-sans); color: var(--lm-4); }
.graph .ax { fill: #808080; font: 400 12px var(--lm-sans); }
.graph .lb { fill: var(--lm-1); font: 600 13px var(--lm-sans); }
.graph .val { fill: var(--lm-1); font: 600 13px var(--lm-etroit); }
.graph .ann { fill: var(--lm-1); font: 600 13px var(--lm-serif); }
.legende-g { font: 400 .8125rem var(--lm-sans); color: var(--lm-3); }
.legende-g i { border-radius: 50%; width: 10px; height: 10px; }
.legende-g i.bd { border-radius: 0; }
/* tableaux */
.t-pro { font: 400 .9rem/1.5 var(--lm-sans); color: var(--lm-2); }
.t-pro thead th { border-top: 0; border-bottom: 2px solid var(--lm-1); color: var(--lm-4); }
.t-pro tbody :is(th, td) { border-bottom: 1px solid var(--lm-filet); }
.t-pro .num { font-family: var(--lm-etroit); font-size: .98rem; }
.b100-b span { font-family: var(--lm-etroit); font-size: .8125rem; }
.b100-b span[style*="#82C8E8"], .b100-b span[style*="#FFB000"], .b100-b span[style*="#A4A9B4"] { color: var(--lm-1); }
.mini100 { height: 9px; }
.seg { border-color: var(--lm-1); border-radius: 3px; overflow: hidden; }
.seg button { font-family: var(--lm-sans); }
.seg button[aria-pressed="true"] { background: var(--lm-1); }
.faq summary { font-family: var(--lm-sans); color: var(--lm-1); }
.faq details p { font-family: var(--lm-serif); }
.page-guide h1, .page-commune .entete h1 { font-family: var(--lm-serif); font-weight: 700; color: var(--lm-1); letter-spacing: -0.01em; }
.guide-corps h2 { border-top: 0; padding-top: 0; font-family: var(--lm-serif); color: var(--lm-1); }
.guide-corps p, .guide-corps li { font-family: var(--lm-serif); font-size: 1.0625rem; color: var(--lm-2); }
@media (max-width: 760px) {
  .obs-grille { grid-template-columns: 1fr; }
  .bloc, .piece { padding: 20px 16px; }
}

/* ── Interactivité (src/commune-interactif.js), façon Datawrapper ── */
.tab-outils { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.tab-outils input, .ld-outils input { width: min(260px, 100%); height: 34px; padding: 0 12px; border: 1px solid var(--lm-filet); border-radius: 17px; background: var(--lm-encart); color: var(--lm-1); font: 400 .875rem var(--lm-sans); }
.tab-outils input:focus, .ld-outils input:focus { outline: 2px solid var(--lm-sea); outline-offset: 1px; background: #fff; }
.tri-tete { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.tri-tete::after { content: ' ↕'; color: #B5BAC3; font-size: .85em; }
.tri-tete[aria-sort="descending"]::after { content: ' ↓'; color: var(--lm-1); }
.tri-tete[aria-sort="ascending"]::after { content: ' ↑'; color: var(--lm-1); }
th.num .tri-tete { text-align: right; }
.tab-plus { margin-top: 10px; }
.ld-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.ld-outils .seg button { padding: 6px 10px; font-size: .8125rem; }
.ld-cadre { position: relative; }
.ld-recherche .carte-ld path { opacity: .35; }
.ld-recherche .carte-ld path.ld-trouve { opacity: 1; stroke: var(--lm-1); stroke-width: 2; }
.ld-bulle { position: absolute; z-index: 3; width: 210px; padding: 10px 12px; border: 1px solid var(--lm-filet); border-radius: 4px; background: #fff; box-shadow: 0 6px 16px rgba(14, 39, 87, .14); pointer-events: none; font-family: var(--lm-sans); }
.ld-bulle p { margin: 0; }
.lb-nom { font-weight: 600; color: var(--lm-1); font-size: .9375rem; }
.lb-v { margin-top: 4px !important; font: 600 1.25rem var(--lm-etroit); color: var(--lm-sea); }
.lb-v span { font: 400 .875rem var(--lm-sans); color: var(--lm-4); }
.lb-n { font-size: .75rem; color: var(--lm-4); }
.lb-mix { display: flex; height: 8px; margin: 8px 0 3px; background: var(--lm-filet); }
.lb-mix i { display: block; height: 8px; }

.tab-plus[hidden] { display: none !important; }
.cles-t { margin: 0; font: 600 1.25rem/1.35 var(--lm-sans); color: var(--lm-3); }
.cles-s { margin: 4px 0 12px; font: 400 .9375rem var(--lm-sans); color: var(--lm-3); }
.t-cles { table-layout: fixed; }
.t-cles thead th:first-child { width: 44%; }
.t-cles tr.grp th { padding: 16px 0 6px; border-bottom: 1px solid var(--lm-1); font: 600 .75rem var(--lm-sans); color: var(--lm-1); letter-spacing: .02em; }
.t-cles tbody:first-of-type tr.grp th { padding-top: 6px; }
.t-cles tbody th small { display: block; color: var(--lm-5); font-size: .75rem; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) {
  .t-cles thead th:first-child { width: 40%; }
  .t-cles .num { font-size: .9375rem; }
  .t-cles tbody :is(th, td) { padding: 8px 6px 8px 0; }
  .ld-outils .seg { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .ld-outils .seg button { padding: 8px 2px; min-height: 40px; }
  .ld-outils input, .tab-outils input { width: 100%; }
  .obs-actions .bouton { flex: 1 1 100%; justify-content: center; }
  .ld-bulle { width: 180px; }
}

@media (max-width: 760px) {
  .t-ld th:nth-child(3), .t-ld td:nth-child(3) { display: none; }
  .t-ld .large { display: none; }
  .t-ld tbody :is(th, td) { padding-right: 6px; }
}

.carte-index path { stroke: #fff; stroke-width: .8; }
.carte-index path.vide { stroke: #A4A9B4; stroke-width: 1; }
.carte-index a:hover path { stroke: var(--lm-1); stroke-width: 1.6; }
.ci-noms text { fill: var(--lm-1); font: 600 11px var(--lm-sans); text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; pointer-events: none; }
.ci-noms text.clair { fill: #fff; stroke: rgba(1,54,79,.6); }

.piece-s { display: block; margin-top: 4px; font: 400 .9375rem var(--lm-sans); color: var(--lm-3); }
.ci-noms text { font-size: 10px; }

.carte-lien { position: relative; display: block; text-decoration: none; }
.carte-ouvrir { position: absolute; right: 8px; bottom: 8px; padding: 6px 10px; border-radius: 3px; background: rgba(42,48,60,.88); color: #fff; font: 600 .8125rem var(--lm-sans); opacity: 0; transition: opacity .2s; }
.carte-lien:hover .carte-ouvrir, .carte-lien:focus .carte-ouvrir { opacity: 1; }
@media (hover: none) { .carte-ouvrir { opacity: 1; } }
@media (max-width: 760px) {
  .t-croise, .t-croise tbody, .t-croise tr, .t-croise th, .t-croise td { display: block; }
  .t-croise thead { display: none; }
  .t-croise tr { padding: 12px 0; border-bottom: 1px solid var(--lm-filet); }
  .t-croise tbody :is(th, td) { border: 0; padding: 2px 0; text-align: left; white-space: normal; }
  .t-croise td.num:nth-of-type(1)::before { content: 'Commune : '; color: var(--lm-5); font-family: var(--lm-sans); font-size: .8125rem; }
  .t-croise td.num:nth-of-type(2)::before { content: 'Référence : '; color: var(--lm-5); font-family: var(--lm-sans); font-size: .8125rem; }
  .t-croise td.num:empty { display: none; }
}

/* Les noms de communes sont des liens de navigation, visibles aussi après consultation. */
.page-commune .table-communes tbody a,
.page-commune .table-communes tbody a:visited { color: #026B9C; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.page-commune .table-communes tbody a:hover { color: #01364F; text-decoration-thickness: 2px; }
.page-commune .table-communes tbody a:focus-visible { outline: 2px solid #026B9C; outline-offset: 3px; }
