/* ═══════════════════════════════════════════════════════════════════
   Analyse de mobilité d'un territoire — charte « bleu élégant »
   (structure reprise du module Limours, palette transposée en bleu)
   ═══════════════════════════════════════════════════════════════════ */
/* Note méthodologique (avertissement ambre) */
.callout--warn { background: #fff8ec; border-left-color: var(--color-accent); }
.callout--warn .callout-icon { background: var(--color-accent); }
.callout--warn .callout-text strong { color: #b26a00; }
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --topbar-h: 60px;

  /* Bleu élégant */
  --color-primary: #1e3a6e;
  --color-primary-dark: #14284d;
  --color-primary-light: #eef3fb;
  --grad-header: linear-gradient(120deg, #16305f 0%, #2b5cad 100%);

  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-border: #e2e6ec;
  --color-text: #16213a;
  --color-muted: #6b7685;
  --color-accent: #f0a500;
  --color-success: #16a34a;
  --color-danger:  #dc2626;

  /* Palette zones (dégradé bleu → gris) */
  --z1: #16305f;
  --z2: #2b5cad;
  --z3: #3b82f6;
  --z4: #79a8ef;
  --z5: #94a3b8;

  /* Palette modes (sémantique conservée) */
  --m-domicile: #6b7685;
  --m-marche:   #4CAF50;
  --m-velo:     #8bc34a;
  --m-voiture:  #dc2626;
  --m-deux_roues_moto: #f0a500;
  --m-tc:       #2b5cad;
  --m-autre:    #94a3b8;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 40px rgba(20,40,77,.16);
  --font: 'DM Sans', system-ui, sans-serif;
}

html, body {
  min-height: 100%;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ─── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  background: var(--grad-header);
  box-shadow: 0 2px 12px rgba(20,40,77,.25);
}
.topbar-inner {
  display: flex; align-items: center; gap: 16px;
  height: 100%; padding: 0 20px;
  max-width: 1200px; margin: 0 auto;
}
.topbar-logo { display: flex; align-items: center; flex-shrink: 0; gap: 10px; }
.topbar-logo-img { height: 34px; width: auto; display: block; }
.topbar-divider { width: 1px; height: 32px; background: rgba(255,255,255,.25); flex-shrink: 0; }

/* Bouton de retour vers le site hôte, posé par le profil de déploiement
   (js/deploiement.js → champ `retour`). Absent de l'outil mère, qui n'a pas de
   site hôte : la règle ne s'applique donc à rien tant qu'aucun profil ne crée
   l'élément. Elle vit ici, et non dans charte.css, parce que c'est de la mise
   en page commune à tous les déploiements — charte.css ne porte que des couleurs. */
.topbar-back {
  flex-shrink: 0; display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: #fff; text-decoration: none;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; transition: background .15s;
}
.topbar-back:hover { background: rgba(255,255,255,.24); }
.topbar-titles { flex: 1; min-width: 0; }
.topbar-titles h1 {
  font-size: 15px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.topbar-titles p {
  font-size: 11.5px; color: rgba(255,255,255,.82);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.topbar-badge {
  flex-shrink: 0; background: rgba(255,255,255,.18); border-radius: 20px;
  padding: 5px 13px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap;
}
.topbar-newbtn {
  appearance: none; border: 1px solid rgba(255,255,255,.4); cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; transition: background .15s;
  flex-shrink: 0;
}
.topbar-newbtn:hover { background: rgba(255,255,255,.24); }

/* ─── Écran de saisie (setup) ─────────────────────────────────────── */
.setup {
  min-height: calc(100vh - var(--topbar-h));
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 22px;
}
.setup[hidden] { display: none; }
.setup-card {
  width: 100%; max-width: 620px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 38px 40px;
}
.setup-hero {
  display: flex; align-items: center; gap: 14px; margin-bottom: 6px;
}
.setup-hero .badge {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--grad-header); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.setup h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.setup .lead { font-size: 14px; color: var(--color-muted); line-height: 1.55; margin: 14px 0 24px; }
.setup label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.setup textarea {
  width: 100%; min-height: 120px; resize: vertical;
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  color: var(--color-text); letter-spacing: .03em;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 14px 16px; background: #fbfcfe;
}
.setup textarea:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.setup .field-hint { font-size: 12px; color: var(--color-muted); margin-top: 8px; line-height: 1.5; }
.setup .row { display: flex; gap: 14px; margin-top: 20px; }
.setup input[type=text] {
  flex: 1; font-family: var(--font); font-size: 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 12px 14px; background: #fbfcfe; color: var(--color-text);
}
.setup input[type=text]:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.setup-actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; }
.btn-primary {
  appearance: none; border: none; cursor: pointer;
  background: var(--grad-header); color: #fff;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  padding: 14px 28px; border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(30,58,110,.3); transition: transform .12s, box-shadow .12s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30,58,110,.38); }
.btn-primary:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.setup-error { color: var(--color-danger); font-size: 13px; font-weight: 600; }
.setup-examples { margin-top: 22px; font-size: 12px; color: var(--color-muted); }
.setup-examples a { color: var(--color-primary); font-weight: 600; cursor: pointer; text-decoration: none; }
.setup-examples a:hover { text-decoration: underline; }

/* ─── Overlay de chargement ───────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(244,246,249,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.loader[hidden] { display: none; }
.loader .spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid var(--color-border); border-top-color: var(--color-primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader .msg { font-size: 14px; font-weight: 600; color: var(--color-primary-dark); }

/* ─── Layout rapport ──────────────────────────────────────────────── */
.report[hidden] { display: none; }
.page {
  max-width: 1080px; margin: 0 auto;
  padding: 28px 22px 60px;
  display: flex; flex-direction: column; gap: 22px;
}

/* ─── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
.card-title { font-size: 17px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.card-sub { font-size: 12.5px; color: var(--color-muted); margin-bottom: 18px; }
/* Ligne de sources en pied de carte, écrite par sources.js::poser() depuis
   data-sources. Discrète mais toujours là — dans le PDF aussi, puisqu'elle
   fait partie de la carte capturée. */
.card-source {
  margin-top: 14px; padding-top: 8px; border-top: 1px solid #e6eaf0;
  font-size: 10.5px; line-height: 1.45; color: #7c8796;
}
.card-source::before { content: ""; }
.card-context {
  margin-top: 14px; padding: 10px 14px;
  background: var(--color-bg); border-radius: 8px;
  font-size: 12.5px; color: var(--color-text); line-height: 1.5;
}
.card-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 720px) { .card-split { grid-template-columns: 1fr; gap: 20px; } }
.subhead { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; }

/* Gouvernance de la mobilité (chapitre 1) : une phrase qui porte le constat, des
   tuiles, puis les plans et le bassin. Pas de tableau : l'information tient en
   trois lignes sur la plupart des territoires, et un tableau d'une ligne ment sur
   la richesse de ce qu'on a. */
.gouv-intro p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--color-text); }
.gouv-intro .gouv-sans { color: var(--color-muted); }
.gouv-plans { margin: 0 0 4px; padding-left: 18px; }
.gouv-plans li { margin: 0 0 6px; line-height: 1.55; }
#gouvListe .subhead { margin-top: 18px; }
#gouvListe p { margin: 0 0 6px; line-height: 1.6; }

/* La fiche : intitulé à gauche, valeur à droite. En dessous de 720 px la paire
   s'empile, sinon l'intitulé mangerait la moitié de l'écran d'un téléphone. */
.gouv-dl { display: grid; grid-template-columns: 190px 1fr; gap: 6px 18px; margin: 0 0 4px; }
.gouv-dl dt { font-size: 12.5px; color: var(--color-muted); line-height: 1.5; }
.gouv-dl dd { margin: 0; font-size: 13.5px; color: var(--color-text); line-height: 1.55; }
.gouv-dl dd a { color: var(--color-primary); }
@media (max-width: 720px) {
  .gouv-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .gouv-dl dt { margin-top: 8px; }
}

/* Services de mobilité recensés : une liste par famille, le compte à droite du
   titre. Pas de tableau — le nombre de lignes va de un à quinze selon le
   territoire, et un tableau d'une ligne ne dit rien de plus qu'une puce. */
.serv-liste { margin: 0 0 14px; padding-left: 18px; }
.serv-liste li { margin: 0 0 7px; line-height: 1.55; font-size: 13.5px; }
.serv-liste a { color: var(--color-primary); }
.serv-n { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
          background: var(--color-bg-alt, #eef1f6); color: var(--color-muted);
          font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.serv-quoi { margin: -6px 0 8px; font-size: 12.5px; color: var(--color-muted); font-style: italic; }
.serv-note { color: var(--color-muted); font-size: 12.5px; }
#servListe .subhead { margin-top: 16px; }

/* ─── Bandeau métriques ───────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
}
.metric::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--color-primary);
}
.metric-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-muted); font-weight: 600;
}
.metric-value {
  font-size: 30px; font-weight: 800; color: var(--color-primary);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.metric-hint { font-size: 12px; color: var(--color-muted); }
.metric-cmp {
  font-size: 11px; color: var(--color-muted); line-height: 1.4;
  margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--color-border);
}
.metric--accent::before { background: var(--color-accent); }
.metric--accent .metric-value { color: var(--color-accent); }
.metric--danger::before { background: var(--color-danger); }
.metric--danger .metric-value { color: var(--color-danger); }
.metric--success::before { background: var(--color-success); }
.metric--success .metric-value { color: var(--color-success); }

/* ─── Callout ─────────────────────────────────────────────────────── */
.callout {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md); padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 12px;
}
.callout-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
}
.callout-text { font-size: 14.5px; line-height: 1.5; color: var(--color-text); font-weight: 500; }
.callout-text strong { color: var(--color-primary-dark); font-weight: 700; }

/* ─── Barres horizontales ─────────────────────────────────────────── */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid; grid-template-columns: 190px 1fr 88px;
  align-items: center; gap: 12px; font-size: 12.5px;
}
.bar-label { color: var(--color-text); font-weight: 500; }
.bar-track {
  position: relative; height: 22px; background: #eef1f5;
  border-radius: 4px; overflow: hidden;
}
.bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0;
  border-radius: 4px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); }
.bar-value small { color: var(--color-muted); font-weight: 400; font-size: 11px; }

/* ─── Barres modes (avec pastille) ────────────────────────────────── */
.modes { display: flex; flex-direction: column; gap: 10px; }
.mode-row {
  display: grid; grid-template-columns: 32px 180px 1fr 84px;
  align-items: center; gap: 12px; font-size: 12.5px;
}
.mode-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.mode-icon svg { width: 16px; height: 16px; }
.mode-label { color: var(--color-text); font-weight: 500; }

/* ─── CSP ─────────────────────────────────────────────────────────── */
.csp { display: flex; flex-direction: column; gap: 10px; }
.csp-row {
  display: grid; grid-template-columns: 12px 220px 1fr 120px;
  align-items: center; gap: 12px; font-size: 12.5px;
}
.csp-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.csp-label { color: var(--color-text); font-weight: 500; }
.csp-row .bar-track { height: 20px; }
.csp-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); }
.csp-value small { color: var(--color-muted); font-weight: 400; font-size: 11px; }

/* ─── Deltas d'évolution ──────────────────────────────────────────── */
.deltas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.delta {
  background: #fbfcfd; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.delta-label { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.delta-value { display: flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.delta-value .arrow { font-size: 18px; font-weight: 700; }
.delta-good { color: var(--color-success); }
.delta-bad  { color: var(--color-danger); }
.delta-neutral { color: var(--color-muted); }
.delta-hint { font-size: 11.5px; color: var(--color-muted); line-height: 1.35; }
.delta-cmp {
  font-size: 11px; color: var(--color-muted); line-height: 1.4;
  margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--color-border);
}

/* ─── Comparatif 2011 vs 2021 ─────────────────────────────────────── */
.compare { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.compare-note {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; padding: 11px 13px;
  background: var(--color-primary-light); border-left: 3px solid var(--color-primary);
  border-radius: 8px; font-size: 12px; line-height: 1.5; color: var(--color-text);
}
.compare-note-icon { flex-shrink: 0; font-size: 13px; line-height: 1.4; }
.compare-note strong { color: var(--color-primary-dark); }
.compare-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--color-muted); margin-bottom: 4px; }
.compare-legend span { display: inline-flex; align-items: center; gap: 6px; }
.compare-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.compare-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; font-size: 12.5px; }
.compare-name { color: var(--color-text); font-weight: 500; }
.compare-bars { display: flex; flex-direction: column; gap: 4px; }
.compare-bar { display: grid; grid-template-columns: 40px 1fr 112px; gap: 8px; align-items: center; font-size: 11.5px; }
.compare-bar .year { color: var(--color-muted); font-weight: 500; }
.compare-bar .track { height: 12px; background: #eef1f5; border-radius: 3px; overflow: hidden; position: relative; }
.compare-bar .fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; }
.compare-bar .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 600; }
.compare-bar .val i { color: var(--color-muted); font-weight: 400; font-style: italic; margin-left: 2px; }
.compare-bar.year-2011 .fill { opacity: 0.45; }

/* ─── Top destinations ────────────────────────────────────────────── */
.bars--dest .bar-row { grid-template-columns: 200px 1fr 88px; }
.bars--dest .bar-fill { transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }

/* ─── Séries (parc auto, population) : mini sparkbars ──────────────── */
.spark { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 4px; }
.spark .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; height: 100%; }
.spark .col .bar {
  width: 100%; max-width: 42px; border-radius: 4px 4px 0 0;
  background: var(--color-primary); transition: height 1s cubic-bezier(0.4,0,0.2,1); height: 0;
}
.spark .col .yr { font-size: 10.5px; color: var(--color-muted); font-weight: 600; }
.spark .col .n { font-size: 10.5px; color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Donut simple (répartition carburant / crit'air / âge) ───────── */
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.donut-legend .lg { display: flex; align-items: center; gap: 8px; }
.donut-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .lg .v { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-muted); padding-left: 14px; }

/* ─── Bascule Indicateurs / Carte ─────────────────────────────────── */
/* ─── Barre de rubriques ──────────────────────────────────────────────────
   Une seule pastille, cinq entrées aux libellés longs. Elle doit tenir de 375 px
   à 1400 px sans jamais tronquer ni casser un libellé en morceaux.
   Principe : le libellé ne se coupe JAMAIS (`nowrap`) ; c'est la barre qui change
   de comportement — pastille centrée sur grand écran, bande défilante sur petit.
   Aucun texte n'est masqué ni raccourci : les rubriques gardent le nom qu'Alexandre
   leur a donné, sur tous les supports. */
/* GOUTTIÈRE (24) > DÉGRADÉ (20) : c'est toute l'astuce de cette barre, et elle rend
   inutile le moindre état en JavaScript.
   — Tant que la pastille tient, ses extrémités arrondies sont à 24 px des bords du
     conteneur : le dégradé de 20 px ne mord que du vide, donc il est invisible.
   — Quand elle déborde, à scrollLeft 0 la gouttière de gauche occupe toujours ces
     24 px : le bord reste net. Le dégradé n'apparaît qu'à mesure que du contenu passe
     réellement dessous, et disparaît de même en fin de course à droite.
   Le dégradé est donc DIRECTIONNEL par construction : chaque extrémité ne s'estompe
   que si elle cache vraiment quelque chose, sans classe, sans mesure, sans
   observateur. Ne jamais descendre la gouttière sous la largeur du dégradé, sinon les
   bouts arrondis de la pastille se mettent à passer en fondu à l'arrêt. */
.viewtoggle-wrap {
  max-width: 1180px; margin: 22px auto 0; padding: 0 24px;
  display: flex;
  /* Le défilement est disponible à TOUTE largeur : aucun seuil en pixels à deviner.
     Un seuil fixe laissait une zone morte (vers 1100 px : les onglets débordaient
     déjà la pastille alors que le mode défilant n'était pas encore actif). */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px,
                      #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px,
                      #000 calc(100% - 20px), transparent 100%);
}
.viewtoggle-wrap::-webkit-scrollbar { display: none; }
.viewtoggle {
  display: flex; align-items: stretch;
  /* Jamais bridée à la largeur de l'écran : c'est le conteneur qui défile, sinon le
     fond blanc et la bordure s'arrêteraient net au milieu des libellés.
     `margin: 0 auto` centre quand il reste de la place et retombe à 0 quand il n'y en
     a plus — contrairement à `justify-content: center`, qui rendrait le début de la
     bande inatteignable au défilement. */
  width: max-content; margin: 0 auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 5px; box-shadow: var(--shadow-sm); gap: 2px;
}
.viewtoggle-btn { scroll-snap-align: center; }
.viewtoggle-btn {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--color-muted);
  /* 13 px de respiration latérale et non 16 : avec SIX rubriques, 16 px faisaient
     déborder la pastille de 41 px même sur un écran large — elle aurait défilé en
     permanence. Resserrer le figuré plutôt que raccourcir les libellés : les noms
     des rubriques sont ceux qu'Alexandre a choisis. */
  background: transparent; border-radius: 999px; padding: 9px 13px;
  /* `nowrap` est LA règle de cette barre : c'est l'absence de cette contrainte qui
     laissait les libellés se disloquer sur plusieurs lignes. */
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .16s, color .16s;
}
.viewtoggle-btn:hover { color: var(--color-text); }
.viewtoggle-btn.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 1px 4px rgba(30,58,110,.35); }

/* ─── Vue Carte des flux (oursin) ─────────────────────────────────── */
.mapview { max-width: 1080px; margin: 18px auto 40px; padding: 0 22px; display: flex; flex-direction: column; gap: 22px; }
.mapview[hidden] { display: none; }
.mapview-section { display: flex; flex-direction: column; gap: 12px; }
.mapview-section-head h3 { margin: 0; font-size: 16px; color: var(--color-primary-dark); }
.mapview-section-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-muted); max-width: 760px; }
.mapview-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.mapview-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.mapview-filter select {
  font-family: var(--font); font-size: 12.5px; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; min-width: 200px;
}
.mapview-kind { box-shadow: var(--shadow-sm); }
.mapview-kind .viewtoggle-btn { font-size: 12.5px; padding: 6px 14px; }
.mapview-hint { font-size: 12px; color: var(--color-muted); flex: 1 1 100%; }
.mapview-checks { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.flux-road-status { font-size: 11.5px; color: var(--color-muted); }
.mapview-canvas {
  height: 640px; width: 100%; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; background: #eef1f4;
}
/* Fond du conteneur Leaflet = EXACTEMENT celui de l'export PNG (mapexport.js passe
   backgroundColor "#eef1f4" à html2canvas). Leaflet impose sinon son propre #ddd, qui
   se glisse SOUS les tuiles semi-transparentes (opacity 0.85) et grisait toute la carte
   à l'écran : le maillage communal et les petits flux y perdaient le contraste qu'ils
   avaient dans le PNG. Le fond du parent .mapview-canvas ne suffit pas — c'est bien le
   .leaflet-container qui peint par-dessus. Sélecteur volontairement DÉDOUBLÉ : leaflet.css
   est chargé APRÈS app.css dans index.html, donc à spécificité égale c'est son
   `.leaflet-container{background:#ddd}` qui l'emporterait. */
.leaflet-container.leaflet-container { background: #eef1f4; }

/* Légende flottante */
.flux-legend {
  background: rgba(255,255,255,.72); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 10px 12px; font-size: 11.5px; line-height: 1.4; color: var(--color-text);
  /* La légende s'allonge à chaque couche cochée : mesurée à 610 px de haut pour
     une carte de 638 px, elle mangeait la carte. Le plafond est posé EN PIXELS
     par oursins.js::refreshLegend (un pourcentage ne vaut rien ici : le
     conteneur de contrôles Leaflet n'a pas de hauteur propre) ; elle défile
     au-delà. */
  overflow-y: auto; overscroll-behavior: contain;
}
.flux-legend .legend-title { font-weight: 700; font-size: 12px; margin-bottom: 6px; color: var(--color-text); }
.flux-legend .legend-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.flux-legend .legend-swatch { width: 26px; height: 5px; border-radius: 2px; flex-shrink: 0; }
.flux-legend .legend-swatch-svg, .flux-legend .legend-hub-svg { display: block; flex-shrink: 0; }
.flux-legend .legend-sep { border-top: 1px solid var(--color-border); margin: 7px 0 5px; }
.flux-legend .legend-node { display: flex; align-items: center; gap: 8px; color: var(--color-muted); }
.flux-legend .legend-node .dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--color-primary); flex-shrink: 0; }
.leaflet-popup-content .flux-pop { font-family: var(--font); font-size: 12.5px; }
.leaflet-popup-content .flux-pop strong { color: var(--color-primary-dark); }
.leaflet-popup-content .flux-pop .vol { font-weight: 700; }
.leaflet-popup-content .flux-pop .flux-pop-contribs {
  margin: 6px 0 0; padding: 6px 0 0 16px; border-top: 1px solid var(--color-border);
  font-size: 11.5px; line-height: 1.5; color: var(--color-text); max-height: 160px; overflow-y: auto;
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.page-footer {
  text-align: center; padding: 20px 0 4px; font-size: 11.5px; color: var(--color-muted);
  border-top: 1px solid var(--color-border); margin-top: 8px;
}
.page-footer strong { color: var(--color-text); font-weight: 600; }

/* ─── Portail mot de passe ────────────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 300;
  background: var(--grad-header);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gate[hidden] { display: none; }
.gate-card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 36px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.gate-logo {
  margin: 0 auto 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-header); border-radius: 14px; padding: 14px 20px;
  box-shadow: 0 4px 14px rgba(30,58,110,.28);
}
.gate-logo img { height: 30px; width: auto; display: block; }
.gate-card h2 { font-size: 18px; font-weight: 800; }
.gate-card p { font-size: 12.5px; color: var(--color-muted); margin-bottom: 6px; }
.gate-card input {
  font-family: var(--font); font-size: 15px; text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 12px 14px; background: #fbfcfe;
}
.gate-card input:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.gate-card .btn-primary { width: 100%; justify-content: center; }
.gate-err { color: var(--color-danger); font-size: 12.5px; font-weight: 600; min-height: 16px; }

/* ─── Bouton + menu export ────────────────────────────────────────── */
.export-wrap { position: relative; flex-shrink: 0; }
.export-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  min-width: 230px; overflow: hidden; padding: 6px;
}
.export-menu[hidden] { display: none; }
.export-menu-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-muted); padding: 8px 10px 6px; }
.export-menu button {
  display: block; width: 100%; text-align: left; appearance: none; border: none; cursor: pointer;
  background: transparent; font-family: var(--font); font-size: 13px; color: var(--color-text);
  padding: 10px 10px; border-radius: 7px;
}
.export-menu button:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ─── Navigation par chapitre ─────────────────────────────────────── */
.chapnav {
  position: sticky; top: var(--topbar-h); z-index: 90;
  max-width: 1080px; margin: 14px auto 0; padding: 8px 22px;
  display: flex; gap: 8px; overflow-x: auto;
  background: rgba(244,246,249,.9); backdrop-filter: blur(6px);
}
.chapnav[hidden] { display: none; }
.chapnav a {
  flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--color-muted);
  text-decoration: none; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface); transition: all .15s;
}
.chapnav a:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }

/* ─── Rapport en deux colonnes : sommaire latéral + contenu ──────── */
.report-layout {
  max-width: 1200px; margin: 16px auto 0; padding: 0 22px;
  display: grid; grid-template-columns: 246px 1fr; gap: 28px; align-items: start;
}
.report-layout .page { max-width: none; margin: 0; padding: 0 0 60px; }
.sommaire { position: sticky; top: calc(var(--topbar-h) + 14px); align-self: start; }
.sommaire-inner {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 12px 10px;
  max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto;
}
.sommaire-part { margin-bottom: 10px; }
.sommaire-part + .sommaire-part { border-top: 1px solid var(--color-border); padding-top: 8px; }
.sommaire-part-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-primary); padding: 4px 10px 5px; display: flex; gap: 7px; align-items: baseline;
}
.sommaire-part-title .pn { color: var(--color-muted); font-size: 10px; }
.sommaire a {
  display: flex; gap: 9px; align-items: baseline; padding: 7px 10px; border-radius: 7px;
  text-decoration: none; color: var(--color-text); font-size: 12.5px; font-weight: 500;
  border-left: 2px solid transparent; transition: background .12s;
}
.sommaire a .num { color: var(--color-muted); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11px; min-width: 15px; }
.sommaire a:hover { background: var(--color-primary-light); }
.sommaire a.active { background: var(--color-primary-light); color: var(--color-primary-dark); border-left-color: var(--color-primary); font-weight: 700; }
.sommaire-toggle {
  display: none; width: 100%; appearance: none; cursor: pointer; font-family: var(--font);
  font-size: 13px; font-weight: 700; color: var(--color-primary-dark);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 10px 14px; text-align: left;
}
@media (max-width: 880px) {
  .report-layout { grid-template-columns: 1fr; gap: 0; padding: 0 14px; }
  .sommaire { position: sticky; top: var(--topbar-h); z-index: 80; margin-bottom: 12px; }
  .sommaire-toggle { display: block; }
  .sommaire-inner { display: none; margin-top: 8px; }
  .sommaire.open .sommaire-inner { display: block; }
}

/* ─── Comparaison territoriale : ligne compacte sous chaque bloc + petit
   sélecteur de territoire comparable ancré à la topbar (pas de panneau
   dédié). Préfixe ct- délibérément distinct de .compare-* (qui signifie
   « évolution 2011↔2021 » ailleurs dans ce fichier). ──────────────────── */
.ct-control { position: relative; }
.ct-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 14px 16px; width: 280px; max-width: calc(100vw - 24px);
}
.ct-popover-label { font-size: 12px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
@media (max-width: 480px) {
  .ct-popover { position: fixed; top: var(--topbar-h); left: 12px; right: 12px; width: auto; }
}

/* ─── Chapitres ───────────────────────────────────────────────────── */
.chapter { display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 120px; }
.chapter[hidden] { display: none; }
.chapter-head { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.chapter-num {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--grad-header); color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.chapter-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--color-text); }

/* ─── Graphiques (courbes) ────────────────────────────────────────── */
.chartbox { width: 100%; max-width: 560px; }
.chartbox--large { max-width: 720px; }
/* Trajectoire 2006 → 2022 (serie.js) : le sélecteur du millésime de comparaison
   vit dans le sous-titre de la carte d'évolution, à côté de l'année qu'il remplace. */
.serie-choix { margin-left: 10px; font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }
.serie-choix select { font: inherit; font-size: 11.5px; color: var(--color-text); border: 1px solid #d5dbe4; border-radius: 6px; padding: 2px 6px; background: #fff; }
#serieCard .cats-legend, #serieCspCard .cats-legend { margin-top: 6px; }
.serie-rang + .serie-rang { margin-top: 22px; }
.serie-legtxt { margin-top: 6px; }
.serie-notecol { align-self: end; }

/* ─── Pôles générateurs de flux (pgf.js, cartes de flux) ──────────────────
   FIGURÉ REPRIS DE L'OUTIL DU PAYS DE LIMOURS (demande du 23/09/2026).
   L'icône Leaflet fait 0 × 0 et son ancre est en (0,0) : le coin supérieur
   gauche du .pgf-marker EST le point géographique. Le point est centré dessus
   par transform, le nom posé à côté par left/right/top/bottom — jamais en
   pourcentage, qui vaudrait 50 % d'une largeur nulle. Les quatre directions
   (lbl-R/L/B/T) sont choisies à l'écran par MobPgf.replacer(). */
.pgf-icon { background: none; border: none; }
.pgf-marker { position: relative; width: 0; height: 0; pointer-events: none; }
.pgf-dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: auto; }
.pgf-name {
  position: absolute; font-family: var(--font-sans, inherit); line-height: 1.3;
  text-shadow: -1px -1px 0 rgba(255,255,255,.9), 1px -1px 0 rgba(255,255,255,.9),
               -1px 1px 0 rgba(255,255,255,.9), 1px 1px 0 rgba(255,255,255,.9),
               0 0 3px rgba(255,255,255,.8);
}
.pgf-marker.lbl-R .pgf-name { left: 8px; top: 0; transform: translateY(-50%); white-space: nowrap; text-align: left; }
.pgf-marker.lbl-L .pgf-name { right: 8px; top: 0; transform: translateY(-50%); white-space: nowrap; text-align: right; }
.pgf-marker.lbl-B .pgf-name { top: 8px; left: 0; transform: translateX(-50%); white-space: normal; max-width: 92px; text-align: center; }
.pgf-marker.lbl-T .pgf-name { bottom: 8px; left: 0; transform: translateX(-50%); white-space: normal; max-width: 92px; text-align: center; }

/* Destination principale — point ø9, nom toujours visible */
.pgf-principale .pgf-dot { width: 9px; height: 9px; background: #374151; border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pgf-principale .pgf-name { font-size: 9.5px; font-weight: 600; color: #374151; }
/* Destination intermédiaire — point ø7, nom à partir du zoom 13 */
.pgf-intermediaire .pgf-dot { width: 7px; height: 7px; background: #6b7280; border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.pgf-intermediaire .pgf-name { display: none; font-size: 9px; font-weight: 500; color: #4b5563; }
/* Destination de proximité — point ø5, nom à partir du zoom 15 */
.pgf-proximite .pgf-dot { width: 5px; height: 5px; background: #9ca3af; border: 1px solid rgba(255,255,255,.8); }
.pgf-proximite .pgf-name { display: none; font-size: 8.5px; font-weight: 400; color: #6b7280; }
.pgf-zoom-med .pgf-intermediaire .pgf-name { display: block; }
.pgf-zoom-high .pgf-intermediaire .pgf-name,
.pgf-zoom-high .pgf-proximite .pgf-name { display: block; }

/* Pastilles de la légende : les trois rangs, aux mêmes gris que la carte */
.legend-row .pgf-leg { border-radius: 50%; flex-shrink: 0; display: inline-block; }
.pgf-leg--principale { width: 9px; height: 9px; background: #374151; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(20,40,77,.18); }
.pgf-leg--intermediaire { width: 7px; height: 7px; background: #6b7280; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(20,40,77,.15); }
.pgf-leg--proximite { width: 5px; height: 5px; background: #9ca3af; border: 1px solid #fff; }
/* Pastille de la couche « centres commerçants et de services » : l'aplat et le
   trait du chapitre 9, en petit. */
.legend-row .legend-eco { width: 13px; height: 10px; border-radius: 2px; border: 1px solid; flex-shrink: 0; display: inline-block; opacity: .85; }
/* Pastilles de la tache bâtie (trois densités réelles) et de la zone de polarité */
.legend-row .legend-bati { display: inline-flex; gap: 2px; flex-shrink: 0; }
.legend-row .legend-bati i { width: 9px; height: 10px; border-radius: 1px; display: block; }
/* ─── Carte de synthèse des échanges internes (echanges.js) ───────────────
   Un SCHÉMA, pas une photographie : fond blanc, pas de tuiles. Les étiquettes
   reprennent le modèle de la planche — nom encadré pour un pôle, texte simple
   pour les autres communes. */
/* Le fond blanc du schéma a vécu (23/09/2026) : la carte porte désormais le
   même fond que celles du dessus. La classe reste, elle sert de repère. */
.mapview-canvas--schema { background: #eef1f4; }
.ech-pole-label .cnl-in {
  background: #fff; color: #14284d; border: 1.4px solid #14284d; border-radius: 3px;
  padding: 1px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-shadow: none;
}
.ech-commune-label .cnl-in {
  background: transparent; color: #46505f; border: 0; padding: 0;
  font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
/* Le volume d'une liaison, posé sur son trait : petite pastille blanche, chiffre
   à la couleur de sa classe — l'étiquette et le trait doivent se répondre sans
   que l'œil ait à chercher. Quatre classes seulement, la plus fine n'en porte pas. */
/* La pastille est posée SUR son trait : fond blanc pour trancher, contour à la
   COULEUR DE LA CLASSE (posée en ligne par echanges.js, une classe CSS de plus
   par classe serait une seconde vérité à tenir), chiffre dans un ton assorti. */
.ech-flux-label { display: flex; align-items: center; justify-content: center; }
.ech-flux-label .cnl-in {
  background: rgba(255,255,255,.95); border: 1.4px solid #dfe3ea; border-radius: 3px;
  padding: 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 1.35;
  text-shadow: none; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(16,24,40,.12);
  white-space: nowrap;
}
.ech-flux-c1 .cnl-in { color: #2f7a33; }
.ech-flux-c2 .cnl-in { color: #a06a00; }
.ech-flux-c3 .cnl-in { color: #b23a17; }
.ech-flux-c4 .cnl-in { color: #7a1a0c; }

.legend-row .ech-leg-pole {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  background: #9aa3ae; border: 1.6px solid #2c3647;
}
/* Encart « vers l'étranger » : un chiffre qu'aucun trait ne peut porter. */
.ech-encart {
  background: rgba(255,255,255,.92); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 8px 11px; max-width: 210px; color: var(--color-text);
  border-left: 4px solid #8f1d0e;
}
.ech-encart-titre { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.ech-encart-val { font-size: 20px; font-weight: 800; line-height: 1.15; color: #8f1d0e; font-variant-numeric: tabular-nums; }
.ech-encart-sub { font-size: 10.5px; line-height: 1.35; color: var(--color-muted); margin-top: 2px; }
.legend-row .ech-leg-ext {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  background: #fff; border: 1.8px solid #1d6fb8; margin: 0 2px;
}
.legend-row .ech-leg-com {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  background: #fff; border: 1px solid #2c3647; margin: 0 3px;
}

.legend-row .legend-pol {
  width: 16px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  border: 1.8px solid #dc2626; background: rgba(220,38,38,.05);
}
.leaflet-tooltip.pgf-tip { font-size: 11.5px; line-height: 1.4; }
.linechart { display: block; }

/* ─── Barres empilées 100 % (évolution d'une répartition) ─────────── */
.stackrows { display: flex; flex-direction: column; gap: 8px; }
.stackrow { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; }
.stackrow .yr { font-size: 11.5px; font-weight: 600; color: var(--color-muted); }
.stackbar { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: #eef1f5; }
/* Publics cibles (profil.js) : barres 100 % à libellé long, sept blocs en grille */
.stackrows--large .stackrow { grid-template-columns: 200px 1fr; }
.stackrows--large .yr small { font-weight: 400; font-style: italic; color: #94a3b8; margin-left: 3px; }
.profil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; margin-top: 14px; }
.profil-card { margin-top: 22px; }
@media (max-width: 880px) { .profil-grid { grid-template-columns: 1fr; } .stackrows--large .stackrow { grid-template-columns: 150px 1fr; } }
.stackbar .seg { height: 100%; transition: width .8s cubic-bezier(0.4,0,0.2,1); }

/* Légende de catégories */
.cats-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11.5px; color: var(--color-muted); }
.cats-legend .cl { display: inline-flex; align-items: center; gap: 6px; }
.cats-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* Lignes d'information (chapitre logement) */
.inforow { display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.inforow:last-child { border-bottom: none; }
.inforow .lbl { color: var(--color-text); }
.inforow .val {
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary-dark);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.inforow .val-cmp { font-size: 11px; font-weight: 400; color: var(--color-muted); }

/* ─── Recherche de commune (autocomplétion) ──────────────────────── */
.commune-search { position: relative; }
.commune-search input {
  width: 100%; font-family: var(--font); font-size: 15px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 12px 14px; background: #fbfcfe; color: var(--color-text);
}
.commune-search input:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.commune-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); max-height: 262px; overflow-y: auto;
}
.commune-suggest[hidden] { display: none; }
.commune-suggest .opt {
  padding: 9px 13px; cursor: pointer; font-size: 13.5px;
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.commune-suggest .opt:hover, .commune-suggest .opt.active { background: var(--color-primary-light); }
.commune-suggest .opt .meta { color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; white-space: nowrap; }
.commune-suggest .none { padding: 11px 13px; color: var(--color-muted); font-size: 13px; }
.commune-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.commune-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  border: 1px solid #cfe0f6; border-radius: 999px; padding: 5px 7px 5px 12px;
  font-size: 12.5px; font-weight: 600;
}
.commune-chip button {
  appearance: none; border: none; cursor: pointer; background: var(--color-primary); color: #fff;
  width: 16px; height: 16px; border-radius: 50%; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

/* ─── Cartes IRIS (choroplèthes, chapitre motorisation) ──────────── */
.iris-themes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.iris-theme-btn {
  appearance: none; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--color-muted);
  border-radius: 999px; padding: 7px 14px; transition: all .15s;
}
.iris-theme-btn:hover { color: var(--color-text); border-color: var(--color-primary); }
.iris-theme-btn.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.iris-canvas {
  height: 520px; width: 100%; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden; background: #eef1f4;
}
.iris-legend { max-width: 230px; }
.iris-legend .legend-box { width: 20px; height: 12px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
.iris-legend .legend-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 11px; }
/* Étiquette de carte à 2 lignes : nom de l'entité + valeur (IRIS et carte communale).
   La translation de centrage est portée par .mvl-box (élément INTERNE) car Leaflet
   pose son propre transform de positionnement sur la racine .map-vlabel. */
.map-vlabel .mvl-box {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.08;
  white-space: nowrap; transform: translate(-50%, -50%);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
.map-vlabel .mvl-nm {
  display: block; font-size: 9px; font-weight: 600; color: #46505f;
  max-width: 96px; overflow: hidden; text-overflow: ellipsis;
}
.map-vlabel .mvl-v { font-size: 11.5px; font-weight: 800; color: #14284d; }
.map-vlabel.is-center .mvl-nm { color: #14284d; }
.map-vlabel.is-center .mvl-v { color: #0f2547; }

/* ─── Charte cartographique commune (logo, légende, étiquettes) ────── */
.map-logo {
  background: rgba(255,255,255,.95); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 6px 9px; line-height: 0;
}

/* Encart « vers l'étranger » (coin sup. gauche de la carte des flux) */
.flux-foreign {
  background: rgba(255,255,255,.96); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  border-left: 4px solid var(--color-accent); padding: 7px 11px 7px 9px;
  font-size: 11.5px; line-height: 1.3; color: var(--color-text);
  display: flex; align-items: center; gap: 8px; max-width: 210px;
}
.flux-foreign .ff-ico { font-size: 17px; line-height: 1; }
.flux-foreign .ff-txt b { color: var(--color-primary-dark); }
.map-logo img { height: 26px; width: auto; display: block; }

/* Beau bloc de légende (harmonisé sur toutes les cartes) */
.flux-legend {
  border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); max-width: 250px;
}
.flux-legend .legend-title {
  border-bottom: 1px solid var(--color-border); padding-bottom: 5px; margin-bottom: 7px; color: var(--color-primary-dark);
}
.flux-legend .legend-foot { margin-top: 7px; font-size: 10px; color: var(--color-muted); font-style: italic; line-height: 1.35; }
.flux-legend .legend-outline {
  width: 20px; height: 12px; border-radius: 2px; flex-shrink: 0;
  background: rgba(63,126,192,.18); border: 2px solid #0f2547;
}

/* Étiquettes des communes voisines (carte des flux) */
.commune-name-label .cnl-in {
  display: inline-block; font-size: 10px; font-weight: 600; color: #5b6577; white-space: nowrap; letter-spacing: .01em;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; transform: translate(-50%, -50%);
}

/* Infobulles cartes : sous-ligne + étiquette « étudiée » */
.leaflet-tooltip .flux-pop .sub { color: var(--color-muted); font-size: 11px; }
.leaflet-tooltip .flux-pop .tag {
  display: inline-block; background: var(--color-primary); color: #fff; font-size: 9.5px;
  font-weight: 700; border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}

/* ─── Bouton export PNG des cartes (contrôle Leaflet) ─────────────── */
.map-export-ctrl a {
  width: auto !important; padding: 0 9px; font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--color-primary-dark); white-space: nowrap; line-height: 28px; text-decoration: none;
}
.map-export-ctrl a:hover { color: var(--color-primary); background: #f4f7fc; }
/* Pendant la capture : masque les contrôles non désirés + infobulles ouvertes */
.map-exporting .leaflet-control-zoom,
.map-exporting .leaflet-control-attribution,
.map-exporting .leaflet-tooltip,
.map-exporting .leaflet-popup,
.map-exporting .map-export-ctrl,
.map-exporting .fond-ctrl { display: none !important; }

/* Sélecteur de fond de carte (carto.js::controleFond) : trois boutons serrés,
   même gabarit que « Image PNG ». L'état actif porte la couleur de la charte. */
.fond-ctrl { display: flex; }
/* `!important` sur width/height/line-height : Leaflet impose 30 × 30 px aux
   boutons de barre par `.leaflet-touch .leaflet-bar a` (trois classes), que
   rien de plus faible ne bat — « Image PNG » fait déjà pareil juste au-dessus. */
.fond-ctrl a, .fond-ctrl a:hover {
  width: auto !important; height: 28px !important; line-height: 28px !important;
  padding: 0 9px; font-family: var(--font); font-size: 11.5px; font-weight: 700;
  color: var(--color-primary-dark); background: #fff; text-decoration: none; white-space: nowrap;
}
.fond-ctrl a + a { border-left: 1px solid #d8dde6; }
.fond-ctrl a:hover { background: #eef1f6; }
.fond-ctrl a.actif, .fond-ctrl a.actif:hover { background: var(--color-primary); color: #fff; }

/* Pendant la capture : étiquettes réduites (~70 %) — pleine taille = trop gros sur les exports.
   max-width levé + overflow visible : l'ellipse CSS n'est pas rendue par html2canvas
   (noms tronqués en largeur) et l'overflow:hidden lui fait DÉCAPITER le haut des lettres
   (ses métriques de texte diffèrent légèrement du navigateur). */
.map-exporting .map-vlabel .mvl-nm { font-size: 6.5px; max-width: none; overflow: visible; }
.map-exporting .map-vlabel .mvl-box { line-height: 1.4; }
.map-exporting .map-vlabel .mvl-v { font-size: 8px; }
.map-exporting .commune-name-label:not(.pole-label) .cnl-in { font-size: 9.5px; }

/* ─── Chapitre bassins de vie ─────────────────────────────────────── */
.bassins-load { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.bassins-load .btn-primary { padding: 11px 20px; font-size: 13.5px; }
.bassins-load .field-hint { margin: 0; }
.flux-legend .legend-sub { font-size: 10px; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .02em; margin: 2px 0 4px; }
.gare-losange {
  display: block; width: 11px; height: 11px; margin: 2px;
  background: #f49619; border: 2.5px solid #222;
  transform: rotate(45deg); box-shadow: 0 0 0 1.5px #fff;
}
/* Étiquettes placées par le moteur anti-chevauchement : la boîte est calculée
   en pixels (iconSize/iconAnchor), on neutralise le centrage générique. */
/* overflow VISIBLE, et non hidden. La boîte est désormais mesurée sur le texte
   réel (bassins.js::mesurerEtiquette), elle ne devrait donc jamais être trop
   petite. Mais `hidden` transformait la moindre erreur d'estimation en texte
   TRANCHÉ, sans rien pour l'expliquer — le défaut du 08/09/2026 sur les badges
   de la carte des flux. Une étiquette qui déborde de deux pixels se lit ;
   une étiquette coupée en deux, non. En cas de doute, on déborde. */
.pole-label { display: flex; align-items: center; justify-content: center; overflow: visible; }
.pole-label .cnl-in {
  transform: none; font-size: 10.5px; line-height: 1.25; color: #42506b;
  text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 1px 3px #fff, 0 -1px 3px #fff, 1px 0 3px #fff, -1px 0 3px #fff;
}
/* Les étiquettes du moteur anti-chevauchement gardent leur taille d'écran à
   l'export PNG (le :not(.pole-label) ci-dessus les exclut du rétrécissement). */
/* Noms de communes posés par le moteur (fond de carte sans toponymes) */
/* Trebuchet MS + un cran plus petit (demande d'Alexandre) : sur une carte de flux
   déjà dense, ces noms sont du repère, pas du titre. La fonte est reprise telle
   quelle par l'export PNG (mapexport.js lit cs.fontFamily). */
.pole-label.commune-label .cnl-in {
  font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
  text-transform: uppercase; font-size: 8px; font-weight: 700;
  color: #5d6472; letter-spacing: .05em;
}
/* Communes HORS périmètre d'étude : plus claires et translucides */
.pole-label.hors-label .cnl-in {
  color: rgba(96, 104, 118, 0.55); font-weight: 600;
  text-shadow: 0 0 2px rgba(255,255,255,.8), 0 0 3px rgba(255,255,255,.8);
}
/* Taille des étiquettes adaptée à l'échelle (classes posées selon le zoom) */
.pole-label.lbl-s .cnl-in { font-size: 9.5px; }
.pole-label.lbl-xs .cnl-in { font-size: 8.5px; }
.pole-label.commune-label.lbl-s .cnl-in { font-size: 7.4px; }
.pole-label.commune-label.lbl-xs .cnl-in { font-size: 6.9px; }
/* Badges de pôles de destination (carte des flux) : rang le plus prioritaire du
   moteur, texte plus affirmé mais toujours en encre neutre (jamais la couleur du
   flux — cf. règle « le texte ne porte pas la couleur de la donnée »). */
.pole-label.flux-pole-label .cnl-in { font-size: 11.5px; font-weight: 700; }
.pole-label.flux-pole-label.lbl-s .cnl-in { font-size: 10.2px; }
.pole-label.flux-pole-label.lbl-xs .cnl-in { font-size: 9px; }

/* ─── Vue « Étude d'accessibilité » ───────────────────────────────── */
.accessview { padding: 20px 22px 48px; }
.access-inner { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.access-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.access-toolbar label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.access-toolbar select {
  padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--color-text); cursor: pointer;
}
.access-toolbar .field-hint { margin: 0; }
.access-check {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--color-text); cursor: pointer; user-select: none;
}
.access-check input { accent-color: #16305f; cursor: pointer; }
/* Cases isochrones (cartes de flux) — couleur d'accent alignée sur le remplissage tracé */
.iso-check--walk input { accent-color: #0e9488; }
.iso-check--bike input { accent-color: #7c5cd0; }
/* Carte « La France en train » (anamorphose, canvas) */
.train-canvas-wrap { position: relative; margin: 4px 0 10px; }
.train-canvas-wrap canvas {
  display: block; width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: #fbfcfe;
}
.train-tip { position: absolute; z-index: 10; pointer-events: none;
  background: rgba(255,255,255,.97); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; box-shadow: var(--shadow-md); }
.train-png { background: #2b5cad; border-color: #2b5cad; }
.train-png:hover { background: #16305f; }

/* ─── Vue « Analyse publics cibles » (portraits d'usagers) ─────────── */
.targets-head h2 { font-size: 21px; font-weight: 800; color: #16305f; margin-bottom: 6px; }
.targets-head { margin-bottom: 6px; }
.pub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}
.pub-card {
  border-radius: 22px; padding: 20px 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-md);
}
.pub-navy { background: #16305f; color: #eaf1fa; }
.pub-cyan { background: #cfe7ea; color: #172033; }
.pub-head { display: flex; align-items: center; gap: 12px; }
.pub-head h3 { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.pub-navy .pub-head h3 { color: #fff; }
.pub-picto {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(10,20,40,.18);
}
.pub-picto img, .pub-picto svg { width: 44px; height: 44px; object-fit: contain; display: block; }
/* Le glyphe prend la couleur du fond de sa carte (SVG en ligne, fill hérité) */
.pub-picto svg, .pub-picto svg * { fill: currentColor; }
.pub-navy .pub-picto { color: #16305f; }
.pub-cyan .pub-picto { color: #cfe7ea; }
.pub-tuiles { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-tuile {
  border-radius: 10px; padding: 7px 11px; font-size: 11.5px; line-height: 1.35;
  display: flex; flex-direction: column; min-width: 118px; flex: 1;
}
.pub-navy .pub-tuile { background: rgba(255,255,255,.1); }
.pub-cyan .pub-tuile { background: rgba(255,255,255,.62); }
.pub-tuile strong { font-size: 16.5px; font-weight: 800; }
.pub-navy .pub-tuile strong { color: #ffd489; }
.pub-cyan .pub-tuile strong { color: #16305f; }
.pub-txt { font-size: 13px; line-height: 1.55; }
.pub-navy .pub-txt { color: #dbe6f5; }
.flux-legend .dot-origin {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  background: #fff; border: 2.4px solid #16305f;
}
.acc-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; }
.acc-stat {
  background: #f4f7fb; border: 1px solid var(--color-border); border-radius: 10px;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.45; color: var(--color-text);
}
.acc-stat strong { font-size: 17px; color: #16305f; }
.acc-stat-t { font-size: 11.5px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .02em; }
.acc-key { font-weight: 700; font-size: 14.5px; color: #16305f; margin: 4px 0 6px; }
.acc-note { font-size: 12px; color: var(--color-muted); }
.flux-legend .legend-diamond {
  display: inline-block; width: 10px; height: 10px; flex-shrink: 0; margin: 0 3px;
  background: #f49619; border: 2px solid #222; transform: rotate(45deg);
}

/* ─── Carte précarité énergétique ─────────────────────────────────── */
.preca-legend { max-width: 250px; }
.preca-legend .legend-sub { font-size: 10px; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .02em; margin: 2px 0 4px; }
.preca-legend .legend-foot { margin-top: 6px; font-size: 11px; color: var(--color-text); font-style: normal; }
.preca-legend .legend-foot strong { color: var(--color-primary-dark); }
.preca-sizes { display: flex; align-items: flex-end; gap: 16px; margin-top: 4px; }
.preca-size { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--color-muted); }
.preca-size svg { display: block; }

/* ─── Histogrammes tous motifs (modes/motifs × nombre/km) ─────────── */
.tm-histo { margin-top: 6px; }
.tm-histo svg { display: block; width: 100%; height: auto; max-width: 940px; margin: 0 auto; }

/* ─── Bouton export PNG (sur chaque graphique de la page Indicateurs) ─ */
.png-btn {
  appearance: none; cursor: pointer; font-family: var(--font); font-size: 11px; font-weight: 700;
  color: var(--color-primary-dark); background: rgba(255,255,255,.92); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 5px; transition: all .15s;
  box-shadow: var(--shadow-sm);
}
.png-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: #fff; }
.png-btn span { font-size: 12px; line-height: 1; }
.card.has-png { position: relative; }
.card.has-png > .png-btn { position: absolute; top: 12px; right: 12px; z-index: 4; opacity: .55; }
.card.has-png:hover > .png-btn { opacity: 1; }
.metrics.has-png-block { position: relative; }
.metrics.has-png-block > .png-btn { position: absolute; top: 6px; right: 6px; z-index: 4; opacity: .7; }
.metrics.has-png-block:hover > .png-btn { opacity: 1; }
@media print { .png-btn { display: none !important; } }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) {
  .deltas { grid-template-columns: repeat(2, 1fr); }
  .bar-row { grid-template-columns: 140px 1fr 78px; font-size: 12px; }
  .bars--dest .bar-row { grid-template-columns: 140px 1fr 78px; }
  .csp-row { grid-template-columns: 12px 140px 1fr 100px; }
  .mode-row { grid-template-columns: 28px 140px 1fr 74px; }
  .mapview-canvas { height: 520px; }
  .compare-row { grid-template-columns: 1fr; }
  .topbar-titles p { display: none; }
  .topbar-badge { display: none; }
}
@media (max-width: 640px) {
  /* Topbar compacte : logo + boutons tiennent sur la largeur d'un téléphone.
     Sans cela, le contenu (flex-shrink:0) débordait du viewport et toute
     l'application était « coupée » à droite (bouton Nouvelle analyse tronqué). */
  .topbar-inner { gap: 8px; padding: 0 10px; }
  .topbar-divider, .topbar-titles { display: none; }
  .topbar-logo { margin-right: auto; }
  .topbar-logo-img { height: 26px; }
  .topbar-newbtn { padding: 6px 10px; font-size: 10.5px; }
}
@media (max-width: 380px) {
  .tb-long { display: none; }          /* « + Nouvelle analyse » → « + Nouvelle » */
  .topbar-newbtn { padding: 6px 8px; }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .deltas { grid-template-columns: 1fr; }
  .setup-card { padding: 26px 22px; }
  .card { padding: 18px 16px; }
  .page { padding: 18px 14px 40px; }
}
/* Filet de sécurité : aucun débordement horizontal ne doit décaler l'application.
   « clip » (et non « hidden ») : hidden transformerait html en conteneur de
   défilement et casserait la topbar sticky. */
html, body { overflow-x: clip; }

/* Cases à cocher des tranches de flux (légende de la carte des flux) : permettent
   de masquer une tranche pour désencombrer la carte. La ligne devient un <label>
   cliquable en entier — cible bien plus confortable qu'une case de 13 px. */
.legend-row-check { cursor: pointer; user-select: none; }
.legend-row-check input.legend-cls {
  width: 13px; height: 13px; margin: 0 7px 0 0; flex: 0 0 auto;
  accent-color: #8f2814;   /* teinte de la palette des flux */
  cursor: pointer;
}
/* Tranche décochée : la ligne s'efface sans disparaître, pour qu'on voie tout de
   suite ce qui a été masqué et qu'on puisse le rétablir. */
.legend-row-check.is-off { opacity: .42; }

/* Glossaire : liste de définitions, lisible d'un coup d'œil sans être un pavé. */
.glo-list { margin: 4px 0 0; padding: 0; }
.glo-item { padding: 12px 0; border-top: 1px solid var(--color-border); }
.glo-item:first-child { border-top: 0; padding-top: 4px; }
.glo-item dt { font-weight: 700; color: var(--color-ink); margin: 0 0 3px; }
.glo-item dd { margin: 0; color: var(--color-muted); line-height: 1.55; }
@media (min-width: 760px) {
  /* Terme à gauche, définition à droite : on balaie la colonne des termes du regard. */
  .glo-item { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
}

/* Glossaire : panneau ouvert depuis la barre du haut (et non plus chapitre du
   rapport). Même gabarit que les cartes du rapport pour rester dans la charte. */
.glo-panel { max-width: 1180px; margin: 22px auto 0; padding: 0 22px; }
.glo-panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.glo-panel-head h2 { margin: 0; font-size: 24px; color: var(--color-ink); }
.glo-close {
  border: 1px solid var(--color-border); background: #fff; color: var(--color-muted);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer;
}
.glo-close:hover { color: var(--color-ink); border-color: #c9d2de; }

/* ─── Rubrique « Offres de transports » ──────────────────────────────────
   La vue réutilise .accessview / .access-inner : rien de neuf côté gabarit.
   Seuls manquaient deux symboles de légende. Ils doublent ce que peint
   offres.js — changer une couleur ici sans la changer là ferait mentir la
   légende. */

/* Gare : rond orange cerclé de marine, comme les cercles de la carte ferroviaire. */
.flux-legend .legend-gare {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  background: #f49619; border: 2px solid #16305f;
}
/* Lieu de covoiturage : pastille pleine cerclée de blanc, la couleur vient du JS. */
.flux-legend .legend-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  border: 1.6px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}

/* Losanges de gare en légende : la boîte est de largeur fixe pour que les losanges
   de tailles différentes restent alignés à gauche et que les libellés forment une
   colonne lisible (mode « fréquentation proportionnelle »). */
.flux-legend .legend-row-gare { align-items: center; }
.flux-legend .legend-gare-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; flex-shrink: 0;
}
/* Le losange lui-même reste .gare-losange : même figuré que le chapitre « Pôles de
   vie », marge neutralisée ici car la boîte ci-dessus assure déjà l'espacement. */
.flux-legend .legend-gare-box .gare-losange { margin: 0; }

/* Étiquettes de la rubrique « Offres de transports ».
   UNE COULEUR DOMINANTE PAR MODE (idée retenue par Alexandre) : le nom porte la
   teinte de son propre figuré, donc on relie le texte à l'objet sans le chercher —
   ambre pour le train, bleu pour le covoiturage.
   Elles sont NETTEMENT plus grandes que les noms de communes (12 px contre 8) et
   posées sur un halo blanc épais : sur une orthophoto, un texte fin sans halo se
   dissout dans le fond, c'est le défaut qu'Alexandre a relevé. Le halo est composé
   de plusieurs ombres décalées, pas d'un simple flou : un flou seul reste gris. */
.pole-label.off-label .cnl-in,
.pole-label.gare-label .cnl-in,
.pole-label.covoit-label .cnl-in,
.pole-label.vve-label .cnl-in {
  font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  text-shadow:
    -1.5px -1.5px 0 #fff,  1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff,  1.5px  1.5px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff,
     0 0 4px #fff, 0 0 6px #fff;
}
/* Train : ambre sombre, accordé au losange orange. */
.pole-label.gare-label .cnl-in { color: #8a5200; }
/* Covoiturage : bleu sombre, accordé aux pastilles bleues. */
.pole-label.covoit-label .cnl-in { color: #17537a; }
/* TAILLE PILOTÉE PAR LE ZOOM, classe posée par offres.js.
   Les paliers du moteur partagé (lbl-s pour z 10-11, lbl-xs pour z <= 9) sont trop
   grossiers ici : ils traitent pareil le zoom 10 et le zoom 11, or c'est exactement
   là que se joue la lisibilité. On garde donc 12 px dès qu'on est près (z >= 11) et
   on réduit franchement aux échelles larges, où les noms doivent redevenir un repère
   discret et non un calque de texte posé sur le territoire.
   4 classes de spécificité : ces règles doivent battre .pole-label.lbl-s du moteur. */
.pole-label.gare-label.off-lbl-l .cnl-in,
.pole-label.covoit-label.off-lbl-l .cnl-in,
.pole-label.vve-label.off-lbl-l .cnl-in { font-size: 12px; }
.pole-label.gare-label.off-lbl-m .cnl-in,
.pole-label.covoit-label.off-lbl-m .cnl-in,
.pole-label.vve-label.off-lbl-m .cnl-in { font-size: 10px; letter-spacing: 0; }
.pole-label.gare-label.off-lbl-s .cnl-in,
.pole-label.covoit-label.off-lbl-s .cnl-in,
.pole-label.vve-label.off-lbl-s .cnl-in {
  font-size: 8.5px; letter-spacing: 0;
  /* halo allégé : à cette taille, huit ombres épaississent le texte au point de le
     rendre pâteux — quatre suffisent à le décoller du fond. */
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 3px #fff;
}
/* Export PNG : ne PAS appliquer le rétrécissement générique des étiquettes de
   commune, sinon les noms de gares repassent sous le seuil de lisibilité. */
.map-exporting .pole-label.gare-label .cnl-in,
.map-exporting .pole-label.covoit-label .cnl-in { font-size: 11px; }

/* Véloroutes : vert sombre, la couleur de l'axe magistral lui-même (cf. offres.js).
   Même famille que les autres étiquettes de la rubrique — une couleur par mode. */
.pole-label.vve-label .cnl-in { color: #14532d; }

/* ══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — deux défauts relevés par Alexandre sur ses captures :
   les légendes recouvraient la carte, et la barre des 5 onglets était
   coupée des deux côtés.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* LÉGENDES REPLIABLES. Une légende de 250 px sur un écran de 390 px mange les
     deux tiers de la carte. Plutôt que de la rétrécir jusqu'à l'illisible, on la
     replie sur son titre : une tape la déploie. Le comportement est posé par
     util.js (U.legendesRepliables), qui câble aussi les légendes créées après
     coup par Leaflet. Sur écran large, rien ne change. */
  .flux-legend {
    max-width: 66vw; font-size: 11px; padding: 8px 10px;
    max-height: 2.3em; overflow: hidden; cursor: pointer;
    position: relative; padding-right: 26px;
  }
  .flux-legend::after {
    content: "▾"; position: absolute; right: 9px; top: 7px;
    font-size: 11px; color: var(--color-muted);
  }
  .flux-legend.legend-open {
    max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .flux-legend.legend-open::after { content: "▴"; }
  .flux-legend .legend-title { margin-bottom: 5px; padding-bottom: 4px; }
  .flux-legend .legend-row { margin: 2px 0; gap: 6px; }
  /* Le pavé de contexte sous la carte reprend l'information : la légende repliée
     ne prive de rien, elle rend juste la carte lisible. */
}

/* ─── Popup de gare : la série de fréquentation 2015 → 2023 ──────────────
   Un histogramme minuscule plutôt que neuf chiffres alignés : c'est la FORME
   de la courbe qui parle — le creux 2020-2021 et le niveau de reprise. */
.gare-popup .leaflet-popup-content { margin: 12px 14px; }
.gare-pop strong { font-size: 13.5px; color: var(--color-primary-dark); }
.gare-pop-meta { font-size: 11.5px; color: var(--color-muted); margin-top: 2px; line-height: 1.4; }
.gare-pop-sub {
  font-size: 10px; font-weight: 700; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .02em; margin: 9px 0 4px;
}
.gare-pop-serie { display: flex; align-items: flex-end; gap: 3px; height: 50px; }
.gpb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
/* 2023 en orange, la couleur du losange : on relie le dernier point à la carte. */
.gpb-bar { width: 13px; background: #9fb4d4; border-radius: 2px 2px 0 0; display: block; }
.gpb-an { font-size: 8.5px; color: var(--color-muted); margin-top: 3px; }
.gare-pop-val { font-size: 13px; font-weight: 700; color: var(--color-text); margin-top: 7px; }

/* ─── Barre de rubriques : le comportement responsive ────────────────────
   En dessous de 1080 px, les 5 libellés ne tiennent plus côte à côte. Plutôt que
   de les couper, de les raccourcir ou de les empiler — trois façons de dégrader
   la navigation — la pastille devient une BANDE DÉFILANTE horizontale : le geste
   est celui qu'on attend sur un téléphone, et aucune rubrique ne disparaît.
   Le dégradé de bord (mask) dit qu'il y a quelque chose au-delà ; l'onglet actif
   est ramené dans la vue par util.js. */
@media (max-width: 640px) {
  /* La gouttière reste à 24 px : elle doit rester supérieure au dégradé de 20 px
     (voir le commentaire de .viewtoggle-wrap), sinon les bouts de la pastille
     s'estompent à tort. Seule la marge haute et la typographie se resserrent. */
  .viewtoggle-wrap { margin-top: 14px; }
  .viewtoggle { padding: 4px; }
  .viewtoggle-btn { font-size: 12.5px; padding: 8px 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANALYSE DU COVOITURAGE DÉCLARÉ (RPC) — bloc posé SOUS la carte des lieux
   de covoiturage, à l'intérieur de sa carte. L'offre au-dessus, l'usage en
   dessous : c'est la même question, on ne les sépare pas en deux panneaux.
   Palette validée (skill dataviz) : #2b7fb0 teinte unique, #c47f00 mise en
   évidence — l'orange de charte #f0a500 est REFUSÉ ici, contraste 2,03 pour
   un minimum de 3,0 sur fond clair. Gris #8a8f9a pour la mise en retrait.
   ══════════════════════════════════════════════════════════════════════ */
.rpc-bloc {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.rpc-bloc[hidden] { display: none; }
.rpc-h {
  font-size: 14px; font-weight: 700; color: var(--color-text);
  margin-bottom: 4px;
}
.rpc-sec { margin-top: 22px; }
.rpc-t {
  font-size: 12.5px; font-weight: 700; color: var(--color-text);
  margin-bottom: 2px;
}
.rpc-s { font-size: 11.5px; color: var(--color-muted); margin-bottom: 8px; line-height: 1.45; }
.rpc-chart { margin-top: 6px; }
.rpc-chart svg { display: block; overflow: visible; }
.rpc-note {
  font-size: 12px; line-height: 1.55; color: var(--color-muted);
  margin-top: 8px; max-width: 74ch;
}
.rpc-note strong { color: var(--color-text); }
.rpc-src { font-size: 10.5px; color: var(--color-muted); margin-top: 18px; font-style: italic; }
.rpc-regle { margin-top: 6px; }

/* Graphique et tableau CÔTE À CÔTE : le graphique donne l'ordre de grandeur,
   le tableau la valeur exacte. Les lire ensemble évite d'avoir à estimer une
   longueur de barre — c'est le reproche classique fait aux barres seules. */
.rpc-duo {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.rpc-tablewrap { overflow-x: auto; }
.rpc-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.rpc-table th {
  text-align: left; font-weight: 700; color: #fff; background: var(--color-primary);
  padding: 8px 10px; white-space: nowrap;
}
.rpc-table th:not(:first-child), .rpc-table td:not(:first-child) { text-align: right; }
.rpc-table td { padding: 7px 10px; border-bottom: 1px solid var(--color-border); }
.rpc-table tbody tr:nth-child(even) td { background: #f7f9fc; }
.rpc-table .rpc-fort td { font-weight: 600; }
.rpc-table .rpc-total td {
  font-weight: 700; background: var(--color-primary-light) !important;
  border-bottom: none;
}
.rpc-detail {
  display: block; font-size: 10.5px; font-weight: 400; color: var(--color-muted);
  margin-top: 1px;
}

@media (max-width: 860px) {
  /* Sous 860 px les deux colonnes deviennent illisibles : le tableau passe
     dessous, à pleine largeur, plutôt que d'être comprimé. */
  .rpc-duo { grid-template-columns: 1fr; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA MOBILITÉ DES MARCHANDISES
   Les cercles de livraisons et les zones d'activités partagent le même
   figuré (#a24cc8 / #6e2f8e), repris du chapitre « Les pôles de vie » —
   demande d'Alexandre. Le violet est celui déjà en place dans l'outil ;
   ce n'est pas un rose (proscrit sur les cartes).
   ══════════════════════════════════════════════════════════════════════ */
.fret-vide { font-size: 13px; color: var(--color-muted); padding: 18px 0; }
.fret-intro { font-size: 13px; line-height: 1.6; color: var(--color-text); max-width: 88ch; }
.fret-intro strong { font-weight: 700; }

/* Les quatre chiffres clés : une rangée de tuiles, pas un graphique — un nombre
   isolé se lit mieux en grand qu'en barre d'un seul segment. */
.fret-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin: 14px 0 20px;
}
.fret-kpi {
  background: var(--color-primary-light); border-radius: var(--radius-md);
  padding: 14px 16px;
}
.fret-kpi-v { font-size: 24px; font-weight: 800; color: var(--color-primary); letter-spacing: -.01em; }
.fret-kpi-l { font-size: 11px; color: var(--color-muted); line-height: 1.4; margin-top: 4px; }
/* La concentration est LE chiffre qui justifie une politique ciblée : il porte la
   couleur du thème pour se distinguer des trois volumes qui le précèdent. */
.fret-kpi-fort { background: #f5ecfa; }
.fret-kpi-fort .fret-kpi-v { color: #6e2f8e; }

.fret-trio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px; align-items: start;
}
.fret-tablewrap { overflow-x: auto; }
.fret-table { font-size: 11.5px; }
.fret-table td:nth-child(1) { width: 42px; color: var(--color-muted); }
.fret-table td:nth-child(2) { font-weight: 600; }
.fret-table td:last-child, .fret-table th:last-child { text-align: right; white-space: nowrap; }
.fret-table td:nth-child(3), .fret-table td:nth-child(4) { color: var(--color-muted); }

/* Pastille ronde de légende — les autres légendes de l'outil n'ont que des carrés
   et des traits ; un cercle proportionnel a besoin d'un cercle. */
.legend-circ {
  display: inline-block; border-radius: 50%; border: 1.2px solid;
  flex: 0 0 auto; margin-right: 2px;
}
.flux-legend .legend-row .legend-circ + span { margin-left: 2px; }

/* Groupe de cartes à l'intérieur d'une rubrique — « L'offre de mobilité routière »
   réunit l'avitaillement, la recharge et la sécurité routière. Un simple intertitre
   plutôt qu'un septième onglet : Alexandre avait signalé que la barre d'onglets
   devenait trop serrée, et ces trois cartes se lisent ensemble. Le filet à gauche
   dit l'appartenance sans ajouter de cadre, qui empilerait deux bordures autour de
   chaque carte. */
.offres-groupe { margin: 30px 0 0; }
.offres-groupe-t {
  font-size: 15px; font-weight: 700; color: var(--color-text);
  margin: 0 0 12px; padding-left: 11px;
  border-left: 4px solid var(--color-primary, #1e3a6e);
  line-height: 1.25;
}
.offres-groupe > .card { margin-top: 14px; }
/* Les cartes du réseau routier sont enveloppées dans #reseauBloc pour être
   propageables d'un bloc aux projets : la règle ci-dessus ne les atteint donc
   plus, il faut la leur reporter, sinon elles se collent les unes aux autres. */
.offres-groupe > #reseauBloc > .card { margin-top: 14px; }

/* Chapitre non renseigné (réseau de bus) — carte floutée et encart sobre.
   La première version posait une phrase géante en travers de la carte : lisible,
   mais criarde, et elle donnait au chapitre l'air d'un panneau de chantier plutôt
   que d'une rubrique en attente. Le flou dit la même chose sans hausser la voix —
   on voit qu'il y a une carte, on voit qu'elle n'est pas renseignée.

   Le flou porte sur `.leaflet-map-pane`, qui contient les tuiles ET les couches
   vectorielles ; le conteneur de contrôles en est frère, donc l'encart, l'échelle
   et le logo restent nets. Flouter les seules tuiles laissait le maillage communal
   parfaitement piqué au-dessus d'un fond vaporeux, ce qui se lisait comme un
   défaut d'affichage. */
.map-veiled .leaflet-map-pane {
  filter: grayscale(0.92) blur(3px) contrast(0.9);
  opacity: 0.72;
}
.map-veil {
  position: absolute; inset: 0; z-index: 800; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.map-veil-txt {
  max-width: 430px; text-align: left;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 58, 110, 0.14); border-radius: 10px;
  padding: 20px 24px; box-shadow: 0 1px 10px rgba(20, 32, 56, 0.07);
  font-size: 14px; line-height: 1.55; color: var(--color-muted);
}
.map-veil-txt strong {
  display: block; margin-bottom: 7px;
  font-size: 15.5px; font-weight: 700; color: var(--color-text);
}

/* Figuré SURFACIQUE de légende — pour les couches de zones (ZAE, centralités), à
   côté du figuré ponctuel `.legend-circ`. Il manquait : `fret.js` émettait bien les
   deux lignes avec leur `<span class="legend-box">`, mais aucune règle ne leur
   donnait de dimensions ni de `border-style`, et un span vide sans taille se rend
   en boîte de largeur nulle — les deux figurés étaient donc invisibles alors que
   leur libellé, lui, s'affichait. La pastille est un RECTANGLE, pas un cercle :
   c'est une surface qu'elle représente, la forme du figuré doit le dire. */
.legend-box {
  display: inline-block; width: 15px; height: 10px; border-radius: 2px;
  border: 1.2px solid; flex: 0 0 auto; margin-right: 2px;
}
.flux-legend .legend-row .legend-box + span { margin-left: 2px; }

/* Filet de séparation entre les figurés ponctuels et les figurés surfaciques. */
.legend-sep {
  height: 1px; margin: 6px 0 5px; background: var(--color-border, #d8dee8);
}

/* Bouton « Image PNG » sur les blocs marqués `data-png` — ceux qui ne sont pas des
   `.card` : les trois sections d'analyse du covoiturage vivent DANS la carte des
   lieux, laquelle contient un conteneur Leaflet et est donc écartée à juste titre
   par l'exportateur. Sans cette règle, leur bouton s'afficherait en flux, décalé. */
[data-png].has-png { position: relative; }
[data-png].has-png > .png-btn { position: absolute; top: 0; right: 0; z-index: 4; opacity: .55; }
[data-png].has-png:hover > .png-btn { opacity: 1; }

/* ── Panneau « Contenu du dossier » de l'aperçu PDF ─────────────────────
   Replié par défaut : le réglage courant convient presque toujours, on ne met
   pas un formulaire devant l'aperçu. Il ne s'imprime jamais (print.css masque
   la barre d'action, dont il fait partie). */
.pdf-toolbar .btn-opt {
  appearance: none; cursor: pointer; font-family: var(--font); font-size: 12.5px;
  font-weight: 600; color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 14px;
}
.pdf-toolbar .btn-opt:hover { background: rgba(255,255,255,.26); }
.pdf-optpanel {
  position: sticky; top: 52px; z-index: 60; margin: 0 auto 14px; max-width: 760px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 16px 18px;
}
.pdf-optpanel[hidden] { display: none; }
.pdf-optpanel-h { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.pdf-optline {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  font-size: 12.5px; cursor: pointer;
}
.pdf-optline input { cursor: pointer; }
.pdf-optaide { color: var(--color-muted); font-size: 11px; }
.pdf-optpanel .btn-print { margin-top: 12px; }

/* ── Rubrique Scénarios de mobilité ─────────────────────────────────── */
.scen-intro { margin-top: 14px; }
.scen-capt { display: block; margin-top: 10px; font-size: 14px; color: var(--color-ink, #24303f); }
.scen-capt input { width: 64px; padding: 4px 6px; border: 1px solid #b8c1cc; border-radius: 6px;
  font: inherit; text-align: right; }
.scen-capt-hint { display: block; margin-top: 4px; font-size: 12.5px; color: var(--color-muted, #5b6675); }
.scen-card .card-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.scen-fiab { font-size: 12.5px; font-weight: 700; color: #17537a; background: #e8f0f6;
  border: 1px solid #c4d6e4; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.scen-total { margin: 10px 0 2px; font-size: 14px; font-weight: 600; }
.scen-cout { margin: 6px 0 2px; font-size: 14px; }
.scen-e1 { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; margin-top: 4px; }
.scen-leviers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-top: 14px; }
.scen-levier { border: 1px solid #dde3ea; border-radius: 10px; padding: 10px 12px;
  background: #fafbfc; font-size: 13.5px; }
.scen-levier-txt { color: var(--color-muted, #5b6675); margin-top: 2px; }
.scen-note { margin-top: 6px; font-size: 12.5px; color: #5b6675; border-top: 1px dashed #dde3ea;
  padding-top: 6px; }
.scen-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px;
  vertical-align: 1px; margin-left: 6px; white-space: nowrap; }
.scen-badge-num { color: #14532d; background: #e4f3e9; border: 1px solid #bfe0cb; }
.scen-badge-hyp { color: #8a5200; background: #fdf2e0; border: 1px solid #ecd3a7; }
.scen-badge-qual { color: #444d5a; background: #eef1f4; border: 1px solid #d8dee6; }
.scen-vigil { margin-top: 14px; font-size: 13px; color: #5b6675; }

/* ── Scénarios v2 : mise en page « scénarios SCoT » ─────────────────── */
.scen-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 4px 0 12px;
}
.scen-kpi { background: var(--color-primary-light); border-radius: var(--radius-md); padding: 12px 14px; }
.scen-kpi-v { font-size: 22px; font-weight: 800; color: var(--color-primary); letter-spacing: -.01em; }
.scen-kpi-v small { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.scen-kpi-l { font-size: 11px; color: var(--color-muted); line-height: 1.4; margin-top: 4px; }
.scen-hyps { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

/* comparatif */
.scen-cmp-row {
  display: grid; grid-template-columns: 250px 90px 1fr; gap: 10px 14px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid #e6eaef;
}
.scen-cmp-row:last-of-type { border-bottom: none; }
.scen-cmp-name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; }
.scen-cmp-picto { width: 22px; height: 22px; flex: none; }
.scen-cmp-picto svg { width: 22px; height: 22px; display: block; }
.scen-cmp-fiab { font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }
.scen-cmp-bars { display: flex; flex-direction: column; gap: 4px; }
.scen-cmp-bar { display: grid; grid-template-columns: 150px 1fr 70px; gap: 8px; align-items: center; }
.scen-cmp-lbl { font-size: 11px; color: var(--color-muted); }
.scen-cmp-val { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.scen-cmp-none { font-size: 12.5px; color: var(--color-muted); font-style: italic; }
.scen-cmp-foot { font-size: 11.5px; color: var(--color-muted); margin-top: 10px; }

/* carte scénario : bloc pastel, picto débordant */
.scen-card { position: relative; margin-top: 26px; padding-top: 22px; overflow: visible; }
.scen-picto-tuile {
  position: absolute; top: -16px; left: -10px; width: 52px; height: 52px;
  border-radius: 12px; color: #fff; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 8px rgba(20, 30, 50, .25);
}
.scen-picto-tuile svg { width: 32px; height: 32px; }
.scen-head { margin-left: 42px; }
.scen-corps {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr);
  gap: 18px; margin-top: 14px; align-items: start;
}
@media (max-width: 760px) { .scen-corps { grid-template-columns: 1fr; } }
.scen-checks { display: flex; flex-direction: column; gap: 8px; }
.scen-check {
  position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45;
  background: rgba(255, 255, 255, .75); border-radius: 8px; padding: 8px 10px 8px 30px;
}
.scen-check::before {
  content: "✓"; position: absolute; left: 10px; top: 7px; font-weight: 800;
  color: var(--color-primary);
}
.scen-carte-bloc { background: #fff; border-radius: 10px; padding: 8px; }
.scen-carte { height: 250px; border-radius: 8px; background: #fff; }
.scen-carte .leaflet-container, .scen-carte.leaflet-container { background: #fff; }
.scen-carte-lecture { font-size: 11.5px; color: var(--color-muted); padding: 7px 4px 2px; }
.scen-synthese {
  margin-top: 14px; border-radius: 10px; color: #fff; padding: 12px 16px;
  font-size: 14px; line-height: 1.5;
}
.scen-synthese strong { color: #fff; }
.scen-card .scen-levier { background: rgba(255, 255, 255, .8); }

/* ── Avant / après des parts modales (grand indicateur de scénario) ──── */
.scen-avap { background: #fff; border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.scen-avap-titre { font-weight: 800; font-size: 14.5px; margin-bottom: 10px; }
.scen-avap-titre span { font-weight: 400; font-size: 12px; color: var(--color-muted); margin-left: 6px; }
.scen-avap-corps {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center;
}
@media (max-width: 700px) { .scen-avap-corps { grid-template-columns: 1fr; } }
.scen-avap-graph { display: flex; gap: 26px; justify-content: center; }
.scen-avap-une { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scen-avap-col {
  display: flex; flex-direction: column; width: 74px; height: 240px;
  border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(20,30,50,.08);
}
.scen-avap-seg {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11.5px; font-weight: 700; min-height: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.scen-avap-lbl { font-size: 12px; font-weight: 700; color: var(--color-text); }
.scen-avap-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.scen-avap-table th { text-align: right; font-size: 11px; color: var(--color-muted);
  font-weight: 600; padding: 3px 8px; border-bottom: 1px solid #e6eaef; }
.scen-avap-table th:first-child { text-align: left; }
.scen-avap-table td { padding: 4px 8px; border-bottom: 1px solid #eef1f4;
  text-align: right; font-variant-numeric: tabular-nums; }
.scen-avap-table td:first-child { text-align: left; }
.scen-avap-table .legend-dot { width: 10px; height: 10px; border-radius: 3px;
  display: inline-block; margin-right: 7px; vertical-align: -1px; }
.scen-avap-delta { font-weight: 800; color: var(--color-primary); }
.scen-avap-egal { color: var(--color-muted); }
.scen-avap-note { font-size: 11.5px; color: var(--color-muted); margin-top: 10px; }
.scen-avap-qual { font-weight: 700; color: #6b7686; white-space: nowrap; }
.scen-recit { font-size: 12.5px; color: #3c4655; font-style: italic; margin-top: 6px;
  border-left: 3px solid rgba(20,30,50,.15); padding-left: 10px; line-height: 1.5; }
.scen-porteurs { margin-top: 8px; font-size: 13px; color: #3c4655;
  background: rgba(255,255,255,.75); border-radius: 8px; padding: 8px 12px; }

/* ══ Ajouts du 05/09/2026 : familles de scénarios, frise de backcasting,
      lecture par quartile de niveau de vie, trajet type ══════════════════ */

/* Intertitre de famille : sépare les futurs SUBIS des futurs CHOISIS */
.scen-famille { margin: 26px 2px 10px; }
.scen-famille h3 { margin: 0 0 3px; font-size: 16px; color: var(--color-primary);
  letter-spacing: -.01em; }
.scen-famille p { margin: 0; font-size: 12.5px; color: var(--color-muted);
  max-width: 68ch; line-height: 1.5; }

/* Le volume total, sous les deux colonnes de parts modales */
.scen-avap-volume { margin-top: 10px; font-size: 12.5px; line-height: 1.5;
  color: #6a2a22; background: rgba(140,58,46,.09); border-left: 3px solid #8c3a2e;
  border-radius: 0 8px 8px 0; padding: 8px 12px; }

/* ── Le trajet type ── */
.scen-trajet { margin-top: 14px; background: rgba(255,255,255,.8);
  border-radius: 12px; padding: 12px 14px; }
.scen-trajet-titre { font-size: 13.5px; color: #2b3442; }
.scen-trajet-titre span { display: block; font-size: 11.5px; color: var(--color-muted);
  font-weight: 400; margin-top: 2px; }
.scen-trajet-duo { display: flex; align-items: stretch; gap: 10px; margin-top: 10px;
  flex-wrap: wrap; }
.scen-trajet-col { flex: 1 1 200px; border: 1px solid rgba(20,30,50,.14);
  border-radius: 10px; padding: 9px 12px; background: #fff; }
.scen-trajet-apres { border-width: 2px; }
.scen-trajet-lbl { font-size: 11.5px; color: var(--color-muted); text-transform: uppercase;
  letter-spacing: .04em; }
.scen-trajet-v { font-size: 24px; font-weight: 800; line-height: 1.15; margin-top: 2px;
  color: #2b3442; }
.scen-trajet-v2 { font-size: 12.5px; color: #3c4655; }
.scen-trajet-v3 { font-size: 11.5px; color: var(--color-muted); margin-top: 2px; }
.scen-trajet-fleche { align-self: center; font-size: 20px; color: var(--color-muted); }
.scen-trajet-note { margin-top: 9px; font-size: 11.5px; color: var(--color-muted);
  line-height: 1.5; }

/* ── Qui en profite : lecture par quartile de niveau de vie ── */
.scen-quart { margin-top: 14px; background: rgba(255,255,255,.8);
  border-radius: 12px; padding: 12px 14px; }
.scen-quart-titre { font-size: 13.5px; color: #2b3442; }
.scen-quart-titre span { display: block; font-size: 11.5px; color: var(--color-muted);
  font-weight: 400; margin-top: 2px; }
.scen-quart-lignes { margin-top: 10px; }
.scen-quart-l { display: grid; grid-template-columns: minmax(120px, 1.5fr) auto 3fr auto;
  gap: 10px; align-items: center; padding: 4px 0; }
.scen-quart-lbl { font-size: 12.5px; color: #2b3442; }
.scen-quart-nv { font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }
.scen-quart-track { position: relative; }
/* le repère des 25 % : la barre pleine va jusqu'à 50 %, le repère est donc à mi-course */
.scen-quart-ref { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: rgba(20,30,50,.45); }
.scen-quart-val { font-size: 12.5px; font-weight: 700; color: #2b3442;
  white-space: nowrap; text-align: right; }
.scen-quart-val em { font-style: normal; font-weight: 700; font-size: 11.5px; }
.scen-quart-plus { color: #4a7d2c; }
.scen-quart-moins { color: #9a4a3a; }
.scen-quart-msg { margin-top: 9px; font-size: 12.5px; color: #3c4655; line-height: 1.5; }
.scen-quart-vide { margin-top: 8px; font-size: 12.5px; color: var(--color-muted); }
.scen-quart-note { margin-top: 8px; font-size: 11px; color: var(--color-muted);
  line-height: 1.5; }

/* ── La frise : backcasting ── */
.scen-frise { margin-top: 14px; }
.scen-frise-titre { font-size: 13.5px; color: #2b3442; margin-bottom: 8px; }
.scen-frise-titre span { display: block; font-size: 11.5px; color: var(--color-muted);
  font-weight: 400; margin-top: 2px; }
.scen-frise-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; border-radius: 12px; padding: 14px 14px 12px; }
.scen-frise-etape { position: relative; padding-top: 12px; }
.scen-frise-pt { position: absolute; top: 0; left: 0; width: 9px; height: 9px;
  border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.scen-frise-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; }
.scen-frise-t { font-size: 13px; font-weight: 700; color: #2b3442; margin-top: 1px; }
.scen-frise-d { font-size: 12px; color: #3c4655; line-height: 1.5; margin-top: 3px; }
.scen-bascule { margin-top: 10px; font-size: 12.5px; color: #3c4655; line-height: 1.5;
  background: rgba(255,255,255,.8); border-radius: 8px; padding: 8px 12px; }

/* Un scénario contraint ne montre pas de barre de gain */
.scen-cmp-perte { color: #8c3a2e; }

/* Cases à cocher des isochrones dans la légende de l'accès aux TC */
.acces-check { cursor: pointer; align-items: center; }
.acces-check input { margin: 0 6px 0 0; vertical-align: middle; }

/* Étiquettes de la carte d'accès aux TC : bleu du figuré, pas l'ambre du train */
.pole-label.acces-label .cnl-in, .acces-label .cnl-in { color: #17537a; }

/* Accès aux TC : les deux chiffres clés (déjà fait / atteignable) + jauge */
.acces-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin: 2px 0 12px; }
.acces-duo-bloc { background: var(--color-primary-light); border-radius: var(--radius-md);
  padding: 12px 14px; }
.acces-duo-cible { background: #eaf3ea; }
.acces-duo-v { font-size: 26px; font-weight: 800; color: var(--color-primary);
  letter-spacing: -.01em; line-height: 1.1; }
.acces-duo-cible .acces-duo-v { color: #2f6b34; }
.acces-duo-l { font-size: 12px; color: var(--color-muted); line-height: 1.45; margin-top: 3px; }
.acces-jauge { margin-bottom: 12px; font-size: 12.5px; color: var(--color-muted); }
.acces-jauge-track { height: 12px; border-radius: 6px; background: #e3e8ee;
  overflow: hidden; margin-bottom: 6px; }
.acces-jauge-fill { height: 100%; background: var(--color-primary); border-radius: 6px; }

/* Étiquettes de liaison (accès aux TC) : petit encart translucide, deux lignes */
.pole-label.acces-label .cnl-in, .acces-label .cnl-in {
  color: #17537a; font-size: 9.5px; line-height: 1.3; white-space: pre-line;
  background: rgba(255, 255, 255, .84); padding: 2px 6px; border-radius: 5px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .12);
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

/* Les étiquettes de liaison tiennent sur deux lignes : le conteneur du moteur
   est en overflow:hidden et calibré pour une seule — on le laisse déborder
   ici, sans toucher aux autres cartes. */
.pole-label.acces-label { overflow: visible; }
.pole-label.acces-label .cnl-in { display: inline-block; text-align: center; }

/* Popup de liaison (accès aux TC) */
.acces-pop { font-size: 12.5px; line-height: 1.55; margin-top: 4px; }
.acces-pop > div { margin-bottom: 2px; }
.acces-pop-jauge { height: 8px; border-radius: 4px; background: #e3e8ee;
  overflow: hidden; margin: 6px 0 7px; }
.acces-pop-jauge > div { height: 100%; border-radius: 4px; }

/* Sélecteur de lecture fine — carte de la sécurité routière.
   Un vrai <select> et non la barre .viewtoggle des autres cartes : les lectures
   sont sept et s'allongeront, une barre déborderait. Posé entre le sous-titre et
   la carte, à la façon d'une légende de figure, jamais dans un panneau séparé. */
.acc-pick { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.acc-pick label { font-size: 12px; font-weight: 700; color: var(--color-muted); }
.acc-pick select {
  font: inherit; font-size: 12.5px; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 5px 9px; cursor: pointer; max-width: 340px;
}
.acc-pick select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ── Baromètre Vélo FUB (carte de perception) ────────────────────────────
   OUTIL INTERNE UNIQUEMENT — ne pas propager aux projets clients.
   Deux briques de légende que les autres cartes n'avaient pas : un aplat carré
   pour les classes de notes (les cartes existantes n'ont que `legend-swatch`,
   un TRAIT de 26×5 px, qui ne peut pas représenter une surface colorée), et
   une note fine sous la légende pour dire ce que code la taille des cercles. */
.flux-legend .legend-sw {
  width: 16px; height: 12px; border-radius: 2px; flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .18);
}
.flux-legend .legend-note {
  font-size: 10.5px; font-style: italic; color: var(--color-muted);
  margin: 4px 0 2px; line-height: 1.35;
}
/* La barre d'outils de cette carte porte deux sélecteurs et deux cases : sans
   retour à la ligne, elle déborde du cadre sur un portable. */
#offFubCard .access-toolbar { flex-wrap: wrap; row-gap: 4px; }
#offFubCard .acc-pick { margin-bottom: 0; }

/* ─── Chaînons manquants du réseau cyclable ──────────────────────────────
   Le numéro posé sur la coupure, repris à l'identique dans le tableau : c'est
   lui qui rend la carte utilisable en réunion — sans numéro, « le troisième
   chaînon » ne désigne rien. Pastille pleine et liseré blanc, pour tenir sur
   l'orthophoto comme sur le fond clair. */
.chn-num {
  background: #b23a2f; color: #fff; border: 1.5px solid #fff;
  border-radius: 50%; width: 20px; height: 20px; line-height: 17px;
  text-align: center; font-size: 11px; font-weight: 700;
  font-family: "Trebuchet MS", sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.chn-num-leg { display: inline-block; flex-shrink: 0; }

/* ─── Risque d'immobilité : légende à deux variables ─────────────────────
   Empilée, elle faisait 243 px de haut et recouvrait le plus gros cercle de la
   carte — celui de la ville-centre, qui porte 83 % des ménages sans voiture du
   territoire. Pliée en rampes horizontales, elle tient en 95 px. */
.immo-ramp { display: flex; gap: 0; margin: 4px 0 2px; }
.immo-ramp-c { flex: 1 1 0; height: 11px; }
.immo-ramp-c:first-child { border-radius: 2px 0 0 2px; }
.immo-ramp-c:last-child { border-radius: 0 2px 2px 0; }
.immo-ramp-l { display: flex; gap: 0; font-size: 9.5px; color: var(--color-muted); line-height: 1.25; }
.immo-ramp-l span { flex: 1 1 0; text-align: center; padding: 0 1px; }
.immo-taille { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; }
.immo-taille span:not([style]) { margin-right: 6px; }

/* ─── Rubriques externes (champ `rubriquesExternes` du profil, js/main.js) ──
   Inertes sur la mère : aucun élément ne porte ces classes sans profil.
   Hauteur fixe par défaut — une page de carte occupe l'écran et défile chez
   elle. `--contenu` : la hauteur est posée par main.js d'après la page. */
.ext-view .acc-pick { margin: 0; flex-wrap: wrap; }
.ext-view .acc-pick select { max-width: 100%; }
.ext-frame {
  display: block; width: 100%;
  height: calc(100vh - var(--topbar-h) - 110px); min-height: 520px;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface);
}
.ext-frame--contenu { height: auto; min-height: 240px; }
@media (max-width: 720px) {
  .ext-frame { height: calc(100svh - var(--topbar-h) - 90px); min-height: 420px; }
}

/* ─── Arrêts du réseau de transport collectif ────────────────────────────
   Sémiologie reprise du Temo'scope, sans retouche : l'ombre portée détache la
   pastille du tracé, et elle TOMBE en vue d'ensemble (classe `leger`) — à cette
   taille elle épaissit le point au lieu de le détacher. */
.dess-arret { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); transition: transform .12s; }
.dess-arret:hover { transform: scale(1.18); z-index: 900; }
.dess-arret.leger { filter: none; }