/* D.A.T.A (historique électoral), design v4 « inspiration Apple » et passe v5 « détails qui s'additionnent » (docs/design-v4.md).
   1. Base partagée : mêmes noms de classes que la v3 (contrat des écrans et de l'outil de comptes), nouvelle peau :
      fond groupé gris très clair, cartes blanches sans bordure à grands rayons et ombre diffuse, matériaux translucides
      (en-tête, barre d'onglets flottante, contrôles de carte, infobulles), remplissages gris système pour les contrôles,
      grands titres serrés, chiffres arrondis, retours tactiles (léger rétrécissement à l'appui), apparitions en cascade.
   2. Chrome de la fiche : barre d'onglets flottante (téléphone) et rail (720 px et plus), barre de scrutin, candidats,
      bureaux, carte.
   3. Impression.
   Les couleurs politiques ne servent que sur des marques (var(--bloc-*), jetons de tokens.css). L'interface est neutre,
   avec une seule teinte d'accent (sarcelle), qui n'est la couleur d'aucun bloc. */

/* ================================================================ 1. base partagée */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-15); line-height: 1.45; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.has-sheet { overflow: hidden; }
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
code, .mono { font-family: var(--mono); font-size: .92em; }
small { font-size: var(--fs-12); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 60%, transparent); outline-offset: 2px; }
svg { display: block; }
img { max-width: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.num, .figure-value, table, .readout, .chart .axis text, .list-row-value, .den { font-variant-numeric: tabular-nums; }
.den small { font-size: var(--fs-12); color: var(--muted); font-weight: 500; font-family: var(--font); letter-spacing: 0; }
.den.is-na { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 100; border-radius: var(--r-8); }
.skip:focus { left: 8px; top: 8px; }
.svg-defs { position: absolute; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.meta { color: var(--muted); font-size: var(--fs-13); }

/* mise en page : colonne de contenu au plus 720 px, rail à gauche dès 720 px */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: var(--s4) var(--s4) calc(108px + env(safe-area-inset-bottom)); position: relative; }
.top-sentinel { position: absolute; top: 40px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.screen { display: flex; flex-direction: column; gap: var(--s4); }
/* changement d'onglet : l'écran apparaît en fondu, ses blocs montent en cascade (ressort doux) */
.screen.is-entering-right, .screen.is-entering-left { animation: screen-enter 320ms linear both; }
.screen.is-entering-right > *, .screen.is-entering-left > * { animation: rise-in 320ms var(--ease-out) both; }
.screen.is-entering-right > *:nth-child(2), .screen.is-entering-left > *:nth-child(2) { animation-delay: 40ms; }
.screen.is-entering-right > *:nth-child(3), .screen.is-entering-left > *:nth-child(3) { animation-delay: 80ms; }
.screen.is-entering-right > *:nth-child(4), .screen.is-entering-left > *:nth-child(4) { animation-delay: 120ms; }
.screen.is-entering-right > *:nth-child(5), .screen.is-entering-left > *:nth-child(5) { animation-delay: 160ms; }
.screen.is-entering-right > *:nth-child(n+6), .screen.is-entering-left > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes screen-enter { from { opacity: .5; } 40% { opacity: 1; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.section-title { font-size: 22px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; color: var(--ink); margin: var(--s3) 0 0; text-wrap: balance; }
.screen-title { font-size: 26px; font-weight: 750; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.status { padding: var(--s8) 0; text-align: center; color: var(--muted); font-size: var(--fs-13); }
.status.is-error { color: var(--danger); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .55s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* analyses branchées sous chaque écran (web/js/analyses/index.js) : même pile, même écart ; un emplacement en attente
   ne prend pas de place tant que son analyse n'est pas construite */
.analyses { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.analyses-place { min-height: 1px; }
.analyses-title { margin-top: var(--s4); }

/* cartes (niveau 1) : blanches, sans bordure, grands rayons, ombre diffuse */
.card { background: var(--surface); border: 0; border-radius: var(--r-12); padding: var(--s5); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.card-head { display: flex; flex-direction: column; gap: 6px; }
.card-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.card-lead { font-size: var(--fs-15); color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }
.card-context { font-size: var(--fs-13); color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.card-hint { font-size: var(--fs-13); color: var(--muted); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* boutons et champs : remplissage gris système, accent plein pour l'action principale, rétrécissement à l'appui */
/* WebKit prend un min-height sur un bouton pour une hauteur fixe (le texte sur deux lignes débordait) : la hauteur vient
   du rembourrage, jamais d'un min-height, sur tous les boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px var(--s4); line-height: 1.45; border: 0; border-radius: 14px; background: var(--fill); color: var(--ink); font-size: var(--fs-15); font-weight: 600; letter-spacing: -.01em; transition: background-color var(--d-fast), transform 160ms var(--ease-out), opacity var(--d-fast); text-decoration: none; }
.btn:active { background: var(--fill-2); transform: scale(.97); }
.btn:disabled { opacity: .4; transform: none; }
.btn.primary { padding-top: 14px; padding-bottom: 14px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn.primary:active { opacity: .9; }
.btn.text { background: transparent; color: var(--accent); padding: 12px var(--s2); font-size: var(--fs-13); font-weight: 600; }
.btn.text:active { background: var(--fill); }
.btn.block { width: 100%; }
.btn.danger { color: var(--danger); background: var(--danger-soft); }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); transition: background-color var(--d-fast), transform 160ms var(--ease-out); }
.icon-btn:active { background: var(--fill-2); transform: scale(.96); }
.icon-btn svg { width: 22px; height: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); color: var(--ink-2); }
.field > span:first-child, .field-label { font-weight: 600; }
.field input, .field select, .field textarea, .field-input { width: 100%; min-height: 48px; padding: 0 var(--s4); border: 1px solid transparent; border-radius: 14px; background: var(--fill); color: var(--ink); font-size: var(--fs-15); -webkit-appearance: none; appearance: none; transition: background-color var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast); }
.field textarea { padding: var(--s3) var(--s4); min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--fs-13); }
.field-help { color: var(--muted); font-size: var(--fs-13); }
.field input::placeholder { color: var(--muted); }
.check-row { display: flex; align-items: center; gap: var(--s3); min-height: 48px; font-size: var(--fs-15); }
.check-row input { width: 22px; height: 22px; accent-color: var(--accent); }

/* en-tête (AppHeader) : grand titre, matériau translucide */
/* verre de la teinte du fond : invisible en haut de page (grand titre posé sur le fond), dépoli dès qu'un contenu passe dessous */
/* ---- verre liquide. Recette en trois couches derrière le contenu (docs/design-v4.md) : ::before = le fond vu à
   travers le verre, flouté et saturé ; ::after = le même fond légèrement déformé par un filtre SVG (#lg-distortion
   dans index.html, comme les cartes « liquid glass » de snipzy.dev ; ignoré par les navigateurs qui ne l'acceptent pas
   en backdrop-filter), voile teinté, reflet clair sur l'arête haut-gauche, reflet discret en bas à droite, liseré ;
   l'élément lui-même n'a pas de fond. Posé sur l'en-tête (transparent tout en haut de
   page, verre dès qu'on a défilé), ses boutons ronds, la barre d'onglets et le rail, les puces flottantes, les boutons
   de carte, les infobulles, les résultats de recherche, le toast et les feuilles. Le fond de page (body::before) porte
   des nappes de couleur douces qui bougent lentement : c'est ce que le verre réfracte. */
.lg, .app-header, .app-header .icon-btn, .bottom-nav, .chip.chip-floating, .map-ctl .btn, .map-ctl button, .tooltip, .map-tip, .results, .toast, .sheet { isolation: isolate; overflow: hidden; background: transparent; }
.lg, .app-header .icon-btn, .chip.chip-floating, .map-ctl .btn, .map-ctl button, .results { position: relative; }
.lg::before, .app-header::before, .app-header .icon-btn::before, .bottom-nav::before, .chip.chip-floating::before, .map-ctl .btn::before, .map-ctl button::before, .tooltip::before, .map-tip::before, .results::before, .toast::before, .sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%) brightness(1.04); backdrop-filter: blur(var(--lg-blur)) saturate(180%) brightness(1.04); }
.lg::after, .app-header::after, .app-header .icon-btn::after, .bottom-nav::after, .chip.chip-floating::after, .map-ctl .btn::after, .map-ctl button::after, .tooltip::after, .map-tip::after, .results::after, .toast::after, .sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--lg-sheen), var(--lg-tint); box-shadow: inset 1px 1px 1px var(--lg-rim), inset -1px -1px 1px var(--lg-rim-2), inset 0 0 0 1px var(--lg-edge); -webkit-backdrop-filter: url(#lg-distortion); backdrop-filter: url(#lg-distortion); }
.app-header::before, .sheet::before { -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(170%) brightness(1.04); backdrop-filter: blur(var(--lg-blur-strong)) saturate(170%) brightness(1.04); }
.app-header::after, .sheet::after, .app-header .icon-btn::after { background: var(--lg-sheen), var(--lg-tint-strong); }
.sheet::after { border-radius: var(--r-16) var(--r-16) 0 0; }
.app-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; padding: calc(8px + env(safe-area-inset-top)) var(--s2) var(--s2); transition: box-shadow var(--d-base); }
.app-header::before, .app-header::after { opacity: 0; transition: opacity var(--d-base); }
.app-header.is-scrolled::before, .app-header.is-scrolled::after, .app-header.is-compact::before, .app-header.is-compact::after { opacity: 1; }
.app-header.is-scrolled, .app-header.is-compact { box-shadow: 0 1px 0 var(--lg-edge-dark); }
.app-header .icon-btn { box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.app-header-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
/* fond de page : nappes de couleur douces derrière tout, en mouvement très lent */
body::before { content: ""; position: fixed; inset: -12vmax; z-index: -1; pointer-events: none; background: radial-gradient(42vmax 42vmax at 16% 10%, var(--blob-1), transparent 62%), radial-gradient(36vmax 36vmax at 88% 16%, var(--blob-2), transparent 62%), radial-gradient(44vmax 44vmax at 72% 90%, var(--blob-3), transparent 62%), radial-gradient(34vmax 34vmax at 10% 80%, var(--blob-4), transparent 62%); animation: blobs 52s ease-in-out infinite alternate; will-change: transform; }
@keyframes blobs { to { transform: translate3d(2.5%, -2%, 0) rotate(2.5deg) scale(1.05); } }
.chip.chip-floating, .map-ctl .btn, .map-ctl button, .tooltip, .map-tip, .results, .toast { border: 0; box-shadow: var(--lg-shadow); }
.app-header-row { display: flex; align-items: center; gap: var(--s1); min-height: 44px; }
.app-header-back { flex: none; color: var(--accent); }
.app-header-title { flex: 1; min-width: 0; padding: 0 var(--s1); display: flex; flex-direction: column; }
/* sans bouton retour (accueil), le titre s'aligne sur le bord des cartes (16 px) */
.app-header:not(.has-back) .app-header-title { padding-left: var(--s2); }
.app-header-kw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--d-base) var(--ease-sheet), opacity var(--d-base) var(--ease); }
.app-header-kw > span { min-height: 0; overflow: hidden; }
.app-header-kicker { font-size: var(--fs-13); font-weight: 600; letter-spacing: -.005em; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* le kicker nomme le territoire du niveau au-dessus : ce segment est un lien vers sa fiche */
.app-header-up { color: var(--accent); text-decoration: none; }
.app-header-up:focus-visible { text-decoration: underline; }
.app-header-name { font-size: clamp(26px, 7.6vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: font-size var(--d-base) var(--ease-sheet); }
.app-header-name.is-loading { display: inline-block; width: 120px; height: 20px; }
/* marque D.A.T.A (accueil) : interlettrage neutre pour que les points respirent, points en couleur d'accent */
.app-header-name.is-brand, .app-header.is-compact .app-header-name.is-brand { letter-spacing: .01em; }
.app-header-name.is-brand .brand-dot { color: var(--accent); }
/* signature à côté de la marque, en petit et en gris */
.app-header-name.is-brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; -webkit-line-clamp: unset; }
.brand-word { white-space: nowrap; }
.brand-by { font-family: var(--font); font-size: var(--fs-13); font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.app-header.is-compact .app-header-name.is-brand { display: flex; }
.app-header-section { display: none; flex: none; font-size: var(--fs-13); color: var(--muted); white-space: nowrap; }
.app-header-facts { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--d-base) var(--ease-sheet), opacity var(--d-base) var(--ease); }
.app-header-facts > div { min-height: 0; overflow: hidden; display: flex; gap: var(--s3); white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: var(--fs-13); color: var(--ink-2); padding: 3px var(--s1) 0; }
.app-header-facts > div::-webkit-scrollbar { display: none; }
.app-header.has-back .app-header-facts > div { padding-left: 52px; }
.app-header-facts span + span::before { content: "·"; color: var(--muted); margin-right: var(--s3); }
.app-header.is-compact .app-header-kw, .app-header.is-compact .app-header-facts { grid-template-rows: 0fr; opacity: 0; }
.app-header.is-compact .app-header-title { position: relative; flex-direction: row; justify-content: center; align-items: baseline; gap: var(--s2); }
.app-header.is-compact .app-header-kw { position: absolute; left: 0; top: 0; pointer-events: none; }
.app-header.has-back.is-compact .app-header-title { padding-left: 44px; }
.app-header.is-compact .app-header-name { font-size: var(--fs-17); font-weight: 700; letter-spacing: -.015em; display: block; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.app-header.is-compact .app-header-section { display: inline; }

/* repères (Figure) : tuiles centrées. Les lignes (libellé, valeur, contexte, écart, sources) sont partagées entre
   les tuiles d'une même rangée (subgrid) : valeurs et boutons s'alignent même quand un libellé passe sur deux lignes.
   La taille de la valeur suit la largeur de la tuile (unités de conteneur), un nombre ne déborde ni ne se coupe.
   Le dénominateur est toujours sous la valeur, jamais tantôt à côté, tantôt dessous. */
.figures { --cols: 2; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 var(--s4); margin-bottom: calc(-1 * var(--s4)); }
.figures > .figure:first-child:nth-last-child(3) { grid-column: 1 / -1; --cols: 1; }
.figures-4 > .figure:first-child:nth-last-child(4) { grid-column: auto; }
.figures:has(> .figure:only-child) { --cols: 1; }
.figures > .figure:only-child { grid-column: 1 / -1; }
.figure { position: relative; background: var(--surface); border: 0; border-radius: var(--r-12); padding: var(--s4) var(--s4) var(--s4); box-shadow: var(--shadow-1); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; justify-items: center; text-align: center; min-width: 0; overflow: hidden; margin-bottom: var(--s4); }
.figure > * { min-width: 0; max-width: 100%; }
.figure-label { grid-row: 1; font-size: var(--fs-13); font-weight: 600; letter-spacing: -.005em; color: var(--muted); line-height: 1.3; align-self: end; text-wrap: balance; }
.figure-value { grid-row: 2; margin-top: 6px; font-family: var(--font-num); font-size: var(--fs-28); font-size: clamp(20px, calc(((100cqi - (var(--cols, 1) - 1) * 16px) / var(--cols, 1) - 32px) * .2), var(--fs-28)); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: opacity 200ms var(--ease), transform 200ms var(--ease), filter 200ms var(--ease); }
.figure-value.is-changing { opacity: 0; transform: translateY(4px); filter: blur(2px); }
.figure-value .den { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.figure-value .den small, .figure-denom { display: block; font-family: var(--font); font-size: var(--fs-13); font-weight: 500; color: var(--muted); letter-spacing: 0; line-height: 1.3; }
.figure-unit { font-size: .62em; font-weight: 650; letter-spacing: -.01em; margin-left: 3px; }
.figure-empty { font-family: var(--font); font-size: var(--fs-15); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.figure.is-error .figure-empty { color: var(--danger); }
.figure-context { grid-row: 3; margin-top: var(--s2); font-size: var(--fs-13); color: var(--ink-2); line-height: 1.4; display: block; text-wrap: balance; }
.figure-context .sw { display: inline-block; margin: 0 6px 0 0; vertical-align: -1px; }
.figure-delta { margin-top: 4px; font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.figure-delta.is-neg.is-money { color: var(--danger); }
/* détails du repère (précision, écart, sources) sous le petit « + », calé en bas de la tuile : les « + » d'une rangée s'alignent */
.figure-more { grid-row: 4; align-self: end; justify-self: stretch; margin-top: var(--s2); }
.figure-more .more-btn { align-self: center; margin: 0; }
.figure-more .more-inner { align-items: center; text-align: center; gap: var(--s1); }
.figure-more .more-inner > :first-child { margin-top: var(--s1); }
.figure-detail { font-size: var(--fs-13); color: var(--ink-2); line-height: 1.4; text-wrap: balance; }
.figure-sources { font-size: var(--fs-13); text-align: left; align-self: stretch; }
.figure-sources .source { margin: 0; }
.figure-value .num, .figure-value .den small { white-space: nowrap; }
/* repères posés dans une carte ou un dépliant : aplat gris, pas de carte dans la carte */
.card .figure, .expander .figure, .resultats-body .figure, .sheet .figure { background: var(--surface-2); box-shadow: none; }

/* puce (Chip) */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; max-width: 100%; padding: 0 var(--s2) 0 var(--s3); border: 0; border-radius: var(--r-8); background: var(--fill); color: var(--ink); font-size: var(--fs-13); font-weight: 600; text-align: left; transition: background-color var(--d-fast), transform 160ms var(--ease-out); }
.chip:active { transform: scale(.97); }
/* changement de libellé : fondu avec un léger flou, les deux états ne se voient pas l'un sur l'autre */
.chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity var(--d-fast), filter var(--d-fast); }
.chip.is-updating .chip-label { opacity: 0; filter: blur(2px); }
.chip-seg { cursor: pointer; }
.chip-sep { color: var(--muted); }
.chip svg { flex: none; color: var(--muted); }
.chip[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.chip.is-active { background: var(--accent-soft); color: var(--accent); }
.chip.chip-floating { color: var(--ink); }
.chip:disabled { opacity: .4; }
.chip-hint { font-size: var(--fs-12); color: var(--muted); margin: 4px 0 0; }
.chip-slot { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* feuille (Sheet) : grand rayon, poignée, courbe iOS, fond flouté */
.sheet-overlay { position: fixed; inset: 0; z-index: 40; background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--d-base) var(--ease); }
.sheet-overlay.is-open { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 90dvh; display: flex; flex-direction: column; border-radius: var(--r-16) var(--r-16) 0 0; box-shadow: var(--shadow-2); transform: translateY(100%); transition: transform var(--d-sheet) var(--ease-sheet); padding-bottom: env(safe-area-inset-bottom); }
.sheet.is-open { transform: none; }
.sheet:not(.is-open):not(.is-dragging) { transition-duration: 300ms; }
.sheet.is-dragging { transition: none; }
.sheet-handle { width: 38px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 0; flex: none; touch-action: none; }
.sheet-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s5); flex: none; touch-action: none; }
.sheet-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.sheet-close { width: 32px; height: 32px; margin: 6px; flex: none; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink-2); display: grid; place-items: center; transition: background-color var(--d-fast), transform 160ms var(--ease-out); }
.sheet-close svg { width: 16px; height: 16px; }
.sheet-close:active { background: var(--fill-2); transform: scale(.95); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s3); -webkit-overflow-scrolling: touch; }
.sheet-foot { position: sticky; bottom: 0; flex: none; padding: var(--s3) var(--s5) var(--s3); background: color-mix(in srgb, var(--surface) 80%, transparent); border-top: 1px solid var(--line); display: flex; gap: var(--s2); }
.sheet-foot .btn { flex: 1; }
.sheet.is-fullscreen { top: 0; max-height: none; height: 100dvh; border-radius: 0; }
.sheet.is-fullscreen .sheet-handle { display: none; }
.sheet.is-fullscreen .sheet-body { flex: 1; padding: 0; gap: 0; }
.sheet-group { display: flex; flex-direction: column; gap: var(--s2); }
.sheet-group-title { font-size: var(--fs-13); font-weight: 600; color: var(--muted); padding: 0 var(--s1); }
@media (min-width: 1080px) {
  .sheet.is-panel { left: auto; top: 12px; bottom: 12px; right: 12px; width: 380px; max-height: none; border-radius: var(--r-16); transform: translateX(calc(100% + 24px)); transition: transform 360ms var(--ease-sheet); box-shadow: var(--shadow-float); padding-top: env(safe-area-inset-top); }
  .sheet.is-panel.is-open { transform: none; }
  .sheet.is-panel .sheet-handle { display: none; }
  .sheet.is-panel .sheet-head { padding-top: var(--s3); }
}

/* dépliant (Expander) */
.expander { background: var(--surface); border: 0; border-radius: var(--r-12); box-shadow: var(--shadow-1); min-width: 0; overflow: hidden; }
.expander-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2); min-height: 60px; padding: var(--s3) var(--s4) var(--s3) var(--s5); transition: background-color var(--d-fast); }
.expander-summary::-webkit-details-marker { display: none; }
.expander-summary:active { background: var(--fill); }
.expander-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.expander-title { font-size: var(--fs-17); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }
.expander-count { color: var(--muted); font-weight: 500; }
.expander-preview { font-size: var(--fs-13); color: var(--muted); line-height: 1.4; }
.expander.is-open .expander-preview { display: none; }
.expander.is-error .expander-preview { color: var(--danger); }
.expander-chevron { flex: none; color: var(--muted); transition: transform 220ms var(--ease-out); display: grid; place-items: center; }
.expander.is-open .expander-chevron { transform: rotate(90deg); }
.expander.is-empty .expander-summary { cursor: default; }
.expander.is-empty .expander-summary:active { background: transparent; }
.expander-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-in-out); }
.expander.is-open .expander-body { grid-template-rows: 1fr; }
.expander-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--s5); opacity: 0; transition: opacity var(--d-base) var(--ease); }
.expander.is-open .expander-inner { padding-bottom: var(--s5); opacity: 1; }
.expander-inner > .card { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
/* dépliant posé dans une carte : aplat gris, pas de carte dans la carte (même règle que les repères) */
.card .expander, .resultats-body .expander { background: var(--surface-2); box-shadow: none; border-radius: 18px; }
.card .expander .figure, .resultats-body .expander .figure, .card .expander .mini, .resultats-body .expander .mini { background: var(--surface); }

/* détails repliés (More) : petit « + » bleu qui tourne en « × », contenu déroulé en 240 ms (même courbe que les dépliants) */
.more { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.more-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 -4px; padding: 6px 8px 6px 4px; border: 0; background: transparent; color: var(--accent); font-size: var(--fs-13); font-weight: 600; border-radius: var(--r-8); transition: background-color var(--d-fast), transform 160ms var(--ease-out); }
.more-btn:active { background: var(--fill); transform: scale(.97); }
.more-plus { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); transition: transform 200ms var(--ease-in-out); }
.more-plus::before, .more-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: var(--accent); }
.more-plus::after { transform: rotate(90deg); }
.more.is-open .more-plus { transform: rotate(45deg); }
.more-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-in-out); }
.more.is-open .more-body { grid-template-rows: 1fr; }
.more-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--s3); }
.more-inner > .card-context, .more-inner > .card-hint { margin: 0; }
.more-inner > .figures { margin-top: var(--s2); }
.card-more { margin-top: calc(-1 * var(--s2)); }

/* pied de carte (CardFooter) */
.card-footer { display: flex; flex-direction: column; gap: 0; }
.card-footer-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); }
.card-footer:last-child { margin-bottom: calc(-1 * var(--s3)); }
/* un libellé plus large que sa colonne (« Comment lire » sur un petit écran) passe sur deux lignes au lieu de déborder */
.card-footer-btn { border: 0; background: transparent; color: var(--accent); font-size: var(--fs-13); font-weight: 600; padding: 10px var(--s1); border-radius: var(--r-8); text-align: center; white-space: normal; line-height: 1.25; overflow-wrap: normal; transition: background-color var(--d-fast), transform 160ms var(--ease-out); }
.card-footer-btn:active { background: var(--fill-2); transform: scale(.97); }
.card-footer-btn.is-open { background: var(--accent-soft); }
.card-footer-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-in-out); }
.card-footer-panel.is-open { grid-template-rows: 1fr; }
.card-footer-inner { min-height: 0; overflow: hidden; }
.card-footer-lecture .lecture, .lecture { background: var(--surface-2); border-radius: 16px; padding: var(--s4); margin-top: var(--s2); font-size: var(--fs-15); color: var(--ink); display: flex; flex-direction: column; gap: var(--s2); line-height: 1.5; text-wrap: pretty; }
.card-footer-sources .source { margin: var(--s2) 0 0; }
.table-wrap { overflow-x: auto; max-width: 100%; margin-top: var(--s2); border: 1px solid var(--line); border-radius: 16px; }
.data-table { border-collapse: collapse; width: 100%; font-size: var(--fs-13); }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.data-table thead th { font-weight: 600; color: var(--ink-2); background: var(--surface-2); position: sticky; top: 0; }
.data-table tbody th { font-weight: 500; }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table tr:last-child td, .data-table tr:last-child th { border-bottom: 0; }
.data-table tr.is-highlight { background: var(--accent-soft); }
.source { margin: var(--s2) 0 0; font-size: var(--fs-13); color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.source a { color: var(--ink-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.source details { display: inline; }
.source summary { display: inline; cursor: pointer; color: var(--ink-2); text-decoration: underline dotted; }
.source .files { display: inline; }

/* légende en grille */
.legend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); align-items: start; }
.legend-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: var(--s2); align-items: start; align-content: start; min-width: 0; font-size: var(--fs-13); color: var(--ink-2); line-height: 1.35; border: 0; background: transparent; padding: 5px 0; margin: 0; text-align: left; border-radius: 10px; transition: opacity 260ms var(--ease), background-color var(--d-fast); }
button.legend-item { cursor: pointer; }
button.legend-item { padding: 5px 6px; }
button.legend-item { transition: opacity 260ms var(--ease), background-color var(--d-fast), transform 160ms var(--ease-out); }
button.legend-item:active { transform: scale(.98); }
.legend-item.is-dim { opacity: .3; }
.legend-item[aria-pressed="true"] { background: var(--fill); }
.legend-name { grid-column: 2; font-weight: 600; color: var(--ink); }
.legend-partis { grid-column: 2; display: block; font-size: var(--fs-12); color: var(--muted); line-height: 1.35; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; flex: none; }
.legend-item .sw { margin: 0; position: relative; top: 4px; }
.sw-na { background: repeating-linear-gradient(45deg, var(--na) 0 2px, var(--na-2) 2px 4px); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-13); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; }
.legend small { color: var(--muted); margin-left: 4px; }

/* lecture au doigt (ChartReadout) : la valeur lue s'affiche en grand, comme dans Bourse ou Santé */
.readout { min-height: 44px; display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 4px var(--s4); font-size: var(--fs-13); color: var(--ink-2); line-height: 1.4; padding: 2px 0 4px; }
.readout-title { font-weight: 700; font-size: var(--fs-15); letter-spacing: -.01em; color: var(--ink); width: 100%; }
.readout-item { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.readout-item .num { font-family: var(--font-num); font-weight: 650; color: var(--ink); }
.readout-item .sw { margin: 0 1px 0 0; }
.readout-denom { color: var(--muted); }
.readout-detail { display: block; width: 100%; color: var(--muted); margin-top: 2px; }
.readout.is-empty { color: var(--muted); }

/* contrôle segmenté */
.segmented { position: relative; display: inline-flex; gap: 2px; padding: 3px; background: var(--fill); border-radius: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; vertical-align: middle; }
.segmented::-webkit-scrollbar { display: none; }
.segmented-btn { position: relative; z-index: 1; flex: none; height: 36px; padding: 0 var(--s4); border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; transition: color var(--d-fast), transform 160ms var(--ease-out); }
.segmented-btn:active { transform: scale(.96); }
.segmented-btn[aria-pressed="true"] { color: var(--ink); }
.segmented-btn:disabled { opacity: .45; }
/* libellé actif : une copie des libellés en encre pleine, découpée à la forme de la pastille (clip-path) et animée avec
   elle, pour que la couleur du texte suive la pastille au lieu de basculer d'un coup (ui.js pose .has-clone et le rectangle) */
.segmented-clone { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(100% - 6px); min-width: max-content; display: flex; gap: 2px; pointer-events: none; z-index: 2; clip-path: inset(0 100% 0 0 round 9px); transition: clip-path 220ms var(--ease-in-out); }
.segmented-clone .segmented-btn { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink); transition: none; }
.segmented.has-clone .segmented-btn[aria-pressed="true"] { color: var(--ink-2); }
.segmented-indicator { position: absolute; top: 3px; left: 0; height: 36px; width: 0; border-radius: 9px; background: var(--seg); box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .12), inset 0 1px 0 var(--lg-rim); transition: transform 220ms var(--ease-in-out), width 220ms var(--ease-in-out), height 220ms var(--ease-in-out), opacity var(--d-fast); z-index: 0; opacity: 0; }
.segmented.block { display: flex; }
/* en bloc, un libellé long passe sur deux lignes au lieu de chevaucher son voisin ; l'indicateur suit la hauteur */
.segmented.block .segmented-btn { flex: 1 1 0; min-width: min-content; padding: 10px 6px; height: auto; white-space: normal; line-height: 1.2; overflow-wrap: normal; }
.segmented.block .segmented-indicator { height: auto; bottom: 3px; }

/* ligne de liste : séparateur en retrait, surbrillance à l'appui */
.list-row { position: relative; display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border: 0; background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; transition: background-color var(--d-fast); border-radius: 0; }
.list-row:not(:last-child)::after { content: ""; position: absolute; left: var(--s4); right: 0; bottom: 0; height: 1px; background: var(--line); }
.list-row:active { background: var(--fill); }
.list-row.is-selected { background: var(--accent-soft); }
.list-row:disabled { opacity: .5; }
.list-row-leading { flex: none; display: grid; place-items: center; }
.list-row-square { width: 36px; height: 36px; border-radius: 10px; background: var(--fill); display: grid; place-items: center; font-family: var(--font-num); font-size: var(--fs-13); font-weight: 700; }
.list-row-text { flex: 1; min-width: 0; min-height: 34px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.list-row-title { font-size: var(--fs-15); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.list-row-subtitle { font-size: var(--fs-13); color: var(--muted); line-height: 1.35; }
.list-row-value { flex: none; font-size: var(--fs-15); text-align: right; color: var(--ink-2); display: flex; flex-direction: column; align-items: flex-end; }
.list-row-value small { font-size: var(--fs-12); color: var(--muted); }
.list-row-chevron { flex: none; color: var(--line-2); transition: transform 160ms var(--ease-out), color var(--d-fast); }
.list { display: flex; flex-direction: column; background: var(--surface); border: 0; border-radius: var(--r-12); overflow: hidden; box-shadow: var(--shadow-1); }
.list .list-row { border-radius: 0; }
.list-row.compact { padding: var(--s2) var(--s4); border: 0; border-radius: 16px; width: auto; box-shadow: none; transition: transform 160ms var(--ease-out), background-color var(--d-fast); }
.list-row.compact::after { display: none; }
.list-row.compact .list-row-text { min-height: 32px; }
.list-row.compact:active { transform: scale(.97); }

/* note, toast, squelette, état vide */
.note { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--fill); border-radius: 16px; font-size: var(--fs-13); color: var(--ink-2); line-height: 1.45; }
.note-text { flex: 1; min-width: 0; }
.note.is-warn { background: var(--warn-soft); color: var(--ink); }
.note.is-danger { background: var(--danger-soft); color: var(--ink); }
.note .btn { flex: none; padding-top: 8px; padding-bottom: 8px; font-size: var(--fs-13); }
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 50; display: flex; justify-content: center; pointer-events: none; padding: 0 var(--s4); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s3); min-height: 48px; max-width: 480px; width: 100%; padding: 0 var(--s4); color: var(--ink); font-size: var(--fs-13); font-weight: 500; border-radius: 18px; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
.toast.is-open { opacity: 1; transform: none; }
.toast:not(.is-open) { transition-duration: 200ms; }
.toast-text { flex: 1; min-width: 0; }
.toast-action { border: 0; background: transparent; color: var(--accent); font-weight: 700; padding: 11px var(--s2); }
.skeleton { position: relative; overflow: hidden; background: var(--fill); border-radius: 14px; min-height: 12px; display: flex; flex-direction: column; gap: var(--s2); padding: 0; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 55%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 1100ms linear infinite; }
.skeleton-line { height: 12px; border-radius: 6px; background: var(--fill); }
.skeleton:has(.skeleton-line) { background: transparent; }
.skeleton:has(.skeleton-line)::after { display: none; }
@keyframes shimmer { to { transform: translateX(100%); } }
.empty { color: var(--muted); font-size: var(--fs-13); text-align: center; padding: var(--s6) var(--s3); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.empty.is-error { color: var(--danger); }
.empty .btn { color: var(--ink); }

/* graphiques : grille discrète en pointillé, marques arrondies, infobulle en verre */
.chart { position: relative; width: 100%; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; font-family: var(--font); overflow: visible; touch-action: pan-y; }
.chart svg:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 60%, transparent); outline-offset: 6px; border-radius: 12px; }
.chart .grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .grid line.is-base { stroke: var(--line-2); stroke-dasharray: none; }
.chart .axis text { fill: var(--muted); font-size: 12px; font-weight: 500; }
.chart .endlabel { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.chart .guide { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.chart .empty { padding: var(--s5) 0; }
.chart.is-line { min-height: 200px; }
.chart.is-bars { min-height: 190px; }
.chart.is-histogram { min-height: 180px; }
.chart .is-leaving { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 240ms var(--ease); }
.chart .mark { transition: opacity var(--d-base) var(--ease); }
.chart .dot { cursor: pointer; transition: r var(--d-fast) var(--ease), opacity var(--d-fast); }
.chart .dot.is-me { stroke: var(--ink); stroke-width: 2.5; }
.chart .trend { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.chart .zero-line { stroke: var(--line-2); stroke-width: 1; }
.tooltip { position: absolute; pointer-events: none; z-index: 25; color: var(--ink); font-size: var(--fs-12); padding: 8px 10px; border-radius: 12px; white-space: nowrap; transform-origin: 0 0; }
.tooltip.is-new { animation: pop-in 140ms var(--ease-out); }
.tooltip .t { font-weight: 700; margin-bottom: 3px; letter-spacing: -.01em; }
.tooltip .row { display: flex; gap: 12px; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tooltip .row b, .tooltip .row span:last-child { color: var(--ink); font-weight: 600; }
.donut-v { font-family: var(--font-num); font-size: 24px; font-weight: 750; letter-spacing: -.03em; fill: var(--ink); }
.donut-l { font-size: 10px; font-weight: 500; fill: var(--muted); }
.donut-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: center; justify-items: center; }
.donut-row .chart { width: 100%; max-width: 176px; }
.donut-list { width: 100%; display: flex; flex-direction: column; font-size: var(--fs-13); }
.donut-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.donut-list > div:first-child { border-top: 0; }
.donut-list b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.donut-list .meta, .donut-list small { display: inline; font-size: var(--fs-12); color: var(--muted); }
.gbars { display: flex; flex-direction: column; gap: var(--s3); }
.gbar-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s3); align-items: center; font-size: var(--fs-13); }
.gbar-label { color: var(--ink-2); line-height: 1.2; font-weight: 500; }
.gbar-bars { display: flex; flex-direction: column; gap: 3px; }
.gbar { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; gap: var(--s2); height: 14px; }
.gbar i { display: block; height: 100%; border-radius: 6px; min-width: 3px; transform-origin: left center; animation: grow-x 520ms var(--ease-sheet) both; }
.gbar span { font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.compo { display: flex; flex-direction: column; gap: var(--s3); }
.compo-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s2); align-items: center; font-size: var(--fs-13); }
.compo-label b { font-weight: 650; display: block; letter-spacing: -.01em; }
.compo-label small { color: var(--muted); font-size: var(--fs-12); }
.compo-bar { display: flex; gap: 2px; height: 16px; border-radius: 8px; overflow: hidden; transform-origin: left center; animation: grow-x 520ms var(--ease-sheet) both; }
.compo-seg { height: 100%; border-radius: 3px; min-width: 2px; }
.compo-seg.na { background: repeating-linear-gradient(45deg, var(--na) 0 3px, var(--na-2) 3px 6px); }
.compo-note { color: var(--muted); font-style: italic; font-size: var(--fs-12); }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; gap: var(--s2); height: 14px; }
.hbar i { display: block; height: 100%; border-radius: 6px; min-width: 3px; background: var(--accent); transform-origin: left center; animation: grow-x 520ms var(--ease-sheet) both; }
.hbar span { font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* nouveaux graphiques de la v4 : anneaux, haltères, frise, nuage de points, bandes de bureaux, mini-courbes */
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.ring svg { width: 100%; max-width: 116px; height: auto; overflow: visible; }
.ring-track { fill: none; stroke: var(--fill); }
.ring-arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset 800ms var(--ease-out); }
.ring-v { font-family: var(--font-num); font-size: 22px; font-weight: 750; letter-spacing: -.03em; fill: var(--ink); }
.ring-u { font-size: 9.5px; font-weight: 500; fill: var(--muted); }
.ring-label { font-size: var(--fs-13); font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }
.ring-sub { font-size: var(--fs-12); color: var(--muted); line-height: 1.3; }
.dumbbells { display: flex; flex-direction: column; gap: 2px; }
.dumbbell-row { display: grid; grid-template-columns: minmax(0, 116px) minmax(0, 1fr) auto; gap: var(--s2); align-items: center; min-height: 44px; font-size: var(--fs-13); }
.dumbbell-label { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); min-width: 0; }
.dumbbell-label span { overflow-wrap: anywhere; line-height: 1.2; }
.dumbbell-track { position: relative; height: 24px; }
.dumbbell-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; border-radius: 1px; background: var(--fill); }
.dumbbell-line { position: absolute; top: 9px; height: 6px; border-radius: 3px; opacity: .35; transform-origin: left center; animation: grow-x 520ms var(--ease-sheet) both; }
.dumbbell-dot { position: absolute; top: 5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2.5px solid var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); animation: pop-in 320ms var(--ease-out) both; animation-delay: 300ms; }
.dumbbell-dot.is-from { background: var(--surface) !important; border-width: 3px; border-style: solid; box-shadow: none; }
.dumbbell-delta { text-align: right; font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dumbbell-delta small { display: block; font-family: var(--font); font-weight: 500; font-size: var(--fs-11); color: var(--muted); }
.heat { display: flex; flex-direction: column; gap: 5px; }
.heat-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s2); align-items: center; font-size: var(--fs-12); }
.heat-label { color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.heat-cell { height: 26px; border-radius: 7px; background: var(--fill); border: 0; padding: 0; position: relative; transition: transform 160ms var(--ease-out), box-shadow var(--d-fast); animation: pop-in 280ms var(--ease-out) both; }
.heat-cell.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.heat-cell.is-na { background: repeating-linear-gradient(45deg, var(--na) 0 3px, var(--na-2) 3px 6px); }
button.heat-cell:focus-visible { transform: scale(1.12); box-shadow: var(--shadow-float); z-index: 2; }
button.heat-cell:active { transform: scale(.94); }
.heat-years { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.heat-years span { display: flex; justify-content: center; white-space: nowrap; visibility: hidden; }
.heat-years span:nth-child(4n+1) { visibility: visible; }
/* première et dernière années calées sur les bords de la frise (comme les axes des courbes) : rien ne dépasse de la carte */
.heat-years span:first-child { justify-content: flex-start; }
.heat-years span:last-child { justify-content: flex-end; }
.spark { display: block; width: 100%; height: 34px; overflow: visible; }
.spark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: stretch; }
.mini { background: var(--surface-2); border-radius: 16px; padding: var(--s4) var(--s3); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; min-width: 0; }
.mini > * { max-width: 100%; }
.mini .spark { margin: 2px 0; }
.mini-head { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-13); font-weight: 650; letter-spacing: -.005em; }
.mini-head .sw { margin: 0; }
.mini-value { font-family: var(--font-num); font-size: 20px; font-weight: 750; letter-spacing: -.025em; line-height: 1.1; }
.mini-value small { display: block; margin-top: 2px; font-family: var(--font); font-size: var(--fs-11); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.mini-sub { font-size: var(--fs-11); color: var(--muted); line-height: 1.3; }
.scatter-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.scatter-controls .select, .scatter-controls .select select { width: 100%; }
.scatter-controls .segmented { display: flex; }
.scatter-controls .segmented-btn { flex: 1 1 0; min-width: min-content; padding: 10px 6px; height: auto; white-space: normal; line-height: 1.2; overflow-wrap: normal; }
.scatter-controls .segmented-indicator { height: auto; bottom: 3px; }
.scatter-stat { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: var(--s1) var(--s4); font-size: var(--fs-13); color: var(--ink-2); }
.scatter-stat b { font-family: var(--font-num); font-weight: 700; color: var(--ink); }
.select { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.select select { -webkit-appearance: none; appearance: none; height: 44px; max-width: 100%; padding: 0 34px 0 var(--s3); border: 0; border-radius: var(--r-8); background: var(--fill); color: var(--ink); font-size: var(--fs-13); font-weight: 600; text-overflow: ellipsis; cursor: pointer; transition: background-color var(--d-fast); }
.select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* écrans très étroits (moins de 360 px) : les libellés du contrôle segmenté en bloc passent en 12 px pour tenir sans défiler */
@media (max-width: 359px) { .segmented.block .segmented-btn, .scatter-controls .segmented-btn { font-size: var(--fs-12); padding-left: 4px; padding-right: 4px; } }

/* ================================================================ 2. chrome de la fiche */
/* barre d'onglets flottante (téléphone) et rail (720 px et plus) : verre, entrée sélectionnée teintée */
.bottom-nav { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 35; display: flex; gap: 2px; border: 0; border-radius: 26px; box-shadow: var(--lg-shadow); padding: 6px; transition: transform 420ms var(--ease-sheet), opacity var(--d-base); }
/* bulle de verre derrière l'entrée choisie : glisse d'une entrée à l'autre avec un léger étirement (app.js la place) */
.nav-bubble { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 20px; background: var(--lg-bubble); box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 0 0 1px var(--lg-edge), 0 4px 14px rgba(0, 0, 0, .06); opacity: 0; pointer-events: none; z-index: 0; transition: transform 360ms var(--ease-spring), width 240ms var(--ease-in-out), height 240ms var(--ease-in-out), opacity var(--d-base); }
.nav-bubble.is-on { opacity: 1; }
.nav-bubble.is-jumping { transition-duration: 0ms; }
/* pendant une transition de page, la bulle glisse par le morphing de l'API (l'en-tête et la barre, eux, restent fixes) */
html.is-vt .nav-bubble { view-transition-name: nav-bubble; }
::view-transition-group(nav-bubble) { animation-duration: 360ms; animation-timing-function: cubic-bezier(.34, 1.36, .64, 1); }
::view-transition-old(nav-bubble), ::view-transition-new(nav-bubble) { animation: none; mix-blend-mode: normal; }
.nav-set { display: contents; }
.bottom-nav .nav-home { display: none; }
.bottom-nav.is-home .nav-home { display: contents; }
.bottom-nav.is-home .nav-fiche { display: none; }
.nav-item { flex: 1 1 0; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; min-width: 0; border: 0; border-radius: 20px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color var(--d-base) var(--ease), color var(--d-base) var(--ease), transform 160ms var(--ease-out); }
.nav-item svg { width: 23px; height: 23px; transition: transform 420ms var(--ease-spring); }
.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: -.02em; padding: 0 1px; }
.nav-item:active { transform: scale(.96); }
.nav-item[aria-selected="true"], .nav-item.is-active { color: var(--accent); background: var(--accent-soft); }
html.has-bubble .nav-item[aria-selected="true"], html.has-bubble .nav-item.is-active { background: transparent; }
.nav-item[aria-selected="true"] svg, .nav-item.is-active svg { transform: scale(1.08); }
.nav-item[data-nav="infos"], .nav-item[data-nav="comptes"], .nav-item[data-nav="emargement"], .nav-sep { display: none; }
body.has-sheet .bottom-nav { transform: translateY(160%); opacity: 0; }
.nav-item:focus-visible { outline-offset: -2px; }

/* barre de scrutin (Résultats) */
.scrutin-bar { position: sticky; top: var(--header-h, 48px); z-index: 20; display: flex; align-items: center; gap: var(--s1); min-height: 52px; margin: 0 calc(-1 * var(--s4)); padding: 6px var(--s2); background: var(--nav-bg); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border-bottom: 1px solid var(--line); }
.scrutin-bar .chip { flex: 1; justify-content: center; min-width: 0; }
.scrutin-bar .icon-btn { color: var(--accent); }
.scrutin-bar .icon-btn:disabled { opacity: .3; }

/* candidats */
.cand-row { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 6px var(--s3); align-items: center; width: 100%; padding: var(--s3) var(--s1); margin: 0 calc(-1 * var(--s1)); border: 0; position: relative; background: transparent; color: var(--ink); text-align: left; transition: background-color var(--d-fast); border-radius: 12px; }
.cand-row:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--s1) + 5px + var(--s3)); right: var(--s1); bottom: 0; height: 1px; background: var(--line); }
.cand-row:active { background: var(--fill); }
.cand-mark { grid-column: 1; grid-row: 1 / 4; width: 5px; align-self: stretch; border-radius: 3px; background: var(--na); }
.cand-who { grid-column: 2; grid-row: 1; min-width: 0; }
.cand-name { display: block; font-size: var(--fs-15); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-sub { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-sub code { font-family: var(--mono); font-size: var(--fs-12); background: var(--fill); padding: 0 5px; border-radius: 5px; }
.cand-num { display: contents; font-variant-numeric: tabular-nums; }
.cand-num b { grid-column: 3; grid-row: 1; display: block; text-align: right; font-family: var(--font-num); font-size: var(--fs-17); font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.cand-num b .den small { display: block; margin-top: 2px; font-family: var(--font); font-size: var(--fs-12); font-weight: 500; letter-spacing: 0; }
.cand-num > small { grid-column: 2 / 4; grid-row: 3; display: block; font-size: var(--fs-12); color: var(--muted); line-height: 1.3; }
.cand-num > small .den small { font-size: inherit; }
.cand-bar { grid-column: 2 / 4; grid-row: 2; height: 6px; background: var(--fill); border-radius: 3px; overflow: hidden; }
.cand-bar i { display: block; height: 100%; border-radius: 3px; background: var(--na); transform-origin: left center; animation: grow-x 520ms var(--ease-sheet) both; transition: width var(--d-base) var(--ease); }
.badge { display: inline-block; font-size: var(--fs-12); font-weight: 600; line-height: 1.4; border-radius: 7px; padding: 1px 7px; background: var(--fill); color: var(--ink-2); border: 0; vertical-align: middle; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
.totals div { font-size: var(--fs-12); color: var(--muted); line-height: 1.3; text-align: center; }
.totals div b { display: block; color: var(--ink); font-family: var(--font-num); font-size: var(--fs-17); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.02em; }
.totals div i { font-style: normal; font-size: var(--fs-12); }

/* bureaux de vote */
.bureau-list { display: flex; flex-direction: column; }
.bureau-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px var(--s3); align-items: center; min-height: 60px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13); }
.bureau-row:last-child { border-bottom: 0; }
.bureau-num { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-num); font-weight: 700; font-size: var(--fs-12); background: var(--fill); color: var(--ink); }
.bureau-who { min-width: 0; }
.bureau-who b { font-weight: 650; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.bureau-who small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bureau-val { text-align: right; font-variant-numeric: tabular-nums; }
.bureau-val b { display: block; font-family: var(--font-num); font-size: var(--fs-15); font-weight: 700; }
.bureau-val small { display: block; color: var(--muted); font-size: var(--fs-12); }
.bureau-bar { grid-column: 2 / 4; height: 5px; background: var(--fill); border-radius: 3px; overflow: hidden; }
.bureau-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left center; animation: grow-x 520ms var(--ease-sheet) both; }
.bureau-link { font-size: var(--fs-13); white-space: nowrap; }

/* carte */
.map-view { position: relative; margin: 0 calc(-1 * var(--s4)); background: var(--surface); }
.map-wrap { position: relative; overflow: hidden; background: var(--surface); touch-action: none; height: 62dvh; min-height: 320px; }
.map-view.is-preview .map-wrap { height: 240px; min-height: 0; touch-action: pan-y; }
.map { display: block; width: 100%; height: 100%; }
.map .commune { stroke: var(--surface); stroke-width: .6; cursor: pointer; transition: opacity var(--d-fast), filter var(--d-fast); }
.map .commune.selected { stroke: var(--ink); stroke-width: 2; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28)); }
.map .commune.nodata { fill: var(--na-2); }
.map .map-inset { fill: transparent; stroke: var(--line-2); stroke-width: .6; pointer-events: none; }
.map .commune:focus-visible { outline: none; stroke: var(--focus); stroke-width: 2; }
.map .bv { cursor: default; }
.map .bv.approx { fill-opacity: .45; stroke-dasharray: 2 1; }
.map-name { fill: var(--ink); stroke: var(--surface); stroke-linejoin: round; font-family: var(--font); font-weight: 600; pointer-events: none; opacity: .92; }
.map-name.big { font-weight: 700; }
.map-tip { position: absolute; z-index: 6; pointer-events: none; color: var(--ink); padding: 8px 10px; border-radius: 12px; font-size: var(--fs-12); white-space: nowrap; }
.map-tip b { display: block; font-weight: 700; letter-spacing: -.01em; }
.map-tip span { color: var(--ink-2); }
.map-ctl { position: absolute; right: var(--s3); top: var(--s3); display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.map-ctl .btn, .map-ctl button { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; display: grid; place-items: center; font-size: var(--fs-13); font-weight: 600; color: var(--ink); transition: transform 160ms var(--ease-out); }
.map-ctl .btn:active, .map-ctl button:active { transform: scale(.95); }
.map-ctl svg { width: 20px; height: 20px; }
.map-chip { position: absolute; left: var(--s3); top: var(--s3); z-index: 5; max-width: calc(100% - 76px); }
/* la règle de verre liquide (.chip.chip-floating { position: relative }) ne doit pas sortir la puce de la carte de son
   coin : elle reste absolue (une position absolue porte aussi les pseudo-éléments du verre) */
.map-chip.chip-floating { position: absolute; }
.map-selection { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s3) var(--s4); background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-13); min-height: 60px; animation: rise 260ms var(--ease-out); }
.map-selection b { display: block; font-size: var(--fs-17); font-weight: 700; letter-spacing: -.015em; }
.map-selection small { display: block; color: var(--ink-2); }
.map-selection .btn { white-space: nowrap; padding-top: 9px; padding-bottom: 9px; }
.map-selection .meta { white-space: nowrap; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.map-scale { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-12); color: var(--muted); }
.map-scale i { display: block; height: 10px; flex: 1; border-radius: 5px; }
.map-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s3); background: var(--surface-2); border-radius: 14px; font-size: var(--fs-13); }
.map-info b { display: block; font-weight: 700; }
.map-info small { color: var(--ink-2); display: block; font-size: var(--fs-12); }
.map-hint { font-size: var(--fs-12); color: var(--muted); }

/* glossaire, contrôles (Infos) */
.term { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1) var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--fs-13); }
.term:first-child { border-top: 0; padding-top: 0; }
.term b { font-weight: 700; line-height: 1.3; }
.term p { color: var(--ink-2); }
.check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); align-items: start; font-size: var(--fs-13); padding: var(--s1) 0; }
.check-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); padding: 5px; }
/* incohérence venue de la source du ministère (voir infos.js) : même gabarit que la coche, couleur d'alerte */
.warn-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); padding: 5px; }
.check b { display: block; font-weight: 650; }
.check small { color: var(--muted); }

/* recherche (accueil) */
.search { position: relative; }
.search input { width: 100%; height: 48px; padding: 0 var(--s4) 0 42px; border: 1px solid transparent; border-radius: 14px; background: var(--fill); color: var(--ink); font-size: var(--fs-17); -webkit-appearance: none; appearance: none; transition: background-color var(--d-fast), box-shadow var(--d-fast), border-color var(--d-fast); }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--focus); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
.search-ico { position: absolute; left: 14px; top: 24px; transform: translateY(-50%); color: var(--muted); pointer-events: none; width: 18px; height: 18px; }
.results { margin: var(--s2) 0 0; padding: 6px; list-style: none; border-radius: 18px; overflow: hidden; animation: pop-in 180ms var(--ease-out); transform-origin: top center; }
.results li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); min-height: 48px; padding: var(--s3) var(--s3); cursor: pointer; border-radius: 12px; transition: background-color var(--d-fast); }
.results li.active { background: var(--fill); }
.results .name { font-weight: 600; letter-spacing: -.01em; }
.results .code { color: var(--muted); font-family: var(--mono); font-size: var(--fs-12); margin-left: 6px; }
.results .dep { color: var(--muted); font-size: var(--fs-13); margin-left: 6px; }
.results .pop { color: var(--muted); font-size: var(--fs-13); white-space: nowrap; }
.results .none { color: var(--muted); cursor: default; }
.row-scroll { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4); }
.row-scroll::-webkit-scrollbar { display: none; }
.row-scroll > * { flex: none; }

/* page « mentions » (en-tête simple et prose) */
.topbar { position: sticky; top: 0; z-index: 10; padding: calc(8px + env(safe-area-inset-top)) var(--s4) var(--s2); border-bottom: 1px solid var(--line); background: var(--nav-bg); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.topbar-inner { max-width: 720px; margin: 0 auto; min-height: 44px; display: flex; align-items: center; }
.brand { font-weight: 700; letter-spacing: -.015em; color: var(--ink); text-decoration: none; }
.prose { max-width: 720px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); display: flex; flex-direction: column; gap: var(--s3); }
.prose h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.prose h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: var(--s4); }
.prose p, .prose li { color: var(--ink-2); line-height: 1.55; }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.prose th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.prose code { font-size: .92em; }
@media (max-width: 600px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .prose td { padding: 1px 0; border: 0; }
  .prose td + td { color: var(--muted); font-size: 13px; }
}

/* ================================================================ 720 px et plus : rail, grilles */
@media (min-width: 720px) {
  .app { padding-left: 112px; }
  main { padding: var(--s5) var(--s5) var(--s8); }
  .app-header { padding-left: var(--s3); padding-right: var(--s3); }
  .app-header.is-compact .app-header-kw, .app-header.is-compact .app-header-facts { grid-template-rows: 1fr; opacity: 1; }
  .app-header.is-compact .app-header-title { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding-left: var(--s1); }
  .app-header.is-compact .app-header-kw { position: static; pointer-events: auto; }
  .app-header.has-back.is-compact .app-header-title { padding-left: var(--s1); }
  .app-header.is-compact .app-header-name { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
  .app-header.is-compact .app-header-section { display: none; }
  .bottom-nav, .side-rail { top: 12px; bottom: 12px; left: 12px; right: auto; width: 92px; flex-direction: column; justify-content: flex-start; border-radius: 28px; padding: 8px 6px; }
  .nav-item span { overflow: visible; text-overflow: clip; font-size: 10.5px; }
  .nav-item { flex: none; width: 100%; height: 62px; }
  .nav-item[data-nav="infos"], .nav-item[data-nav="comptes"], .nav-item[data-nav="emargement"] { display: flex; }
  .nav-sep { display: block; height: 1px; background: var(--line); margin: var(--s2) var(--s3); }
  body.has-sheet .bottom-nav { transform: none; opacity: 1; }
  .figures { --cols: 3; }
  .figures > .figure:first-child:nth-last-child(3) { grid-column: auto; --cols: 3; }
  .figures-4, .figures:has(> .figure:first-child:nth-last-child(4)) { --cols: 4; }
  .figures-2, .figures:has(> .figure:first-child:nth-last-child(2)) { --cols: 2; }
  .figure-value { font-size: var(--fs-34); font-size: clamp(20px, calc(((100cqi - (var(--cols, 1) - 1) * 16px) / var(--cols, 1) - 32px) * .2), var(--fs-34)); }
  .legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .donut-row { grid-template-columns: 176px minmax(0, 1fr); gap: var(--s5); }
  .gbar-row { grid-template-columns: 130px minmax(0, 1fr); }
  .compo-row { grid-template-columns: 96px minmax(0, 1fr); }
  .term { grid-template-columns: 148px minmax(0, 1fr); }
  .heat-years span { visibility: visible; }
  .scrutin-bar { margin: 0 calc(-1 * var(--s5)); padding: 6px var(--s3); border-radius: 0 0 18px 18px; }
  .map-view { margin: 0 calc(-1 * var(--s5)); }
  .map-wrap { height: 520px; }
  .map-view.is-preview .map-wrap { height: 320px; }
  .chart.is-line { min-height: 240px; }
  .chart.is-bars { min-height: 220px; }
  .chart.is-histogram { min-height: 210px; }
  .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dumbbell-row { grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto; }
  .heat-row { grid-template-columns: 120px minmax(0, 1fr); }
  #toast-root { left: 112px; bottom: var(--s5); }
}

/* ================================================================ ordinateur (1080 px et plus) : contenu large, deux colonnes */
/* La colonne de contenu passe à 1120 px. Les écrans de fiche (sauf la Carte, qui a sa disposition) deviennent une grille
   de deux colonnes rangée par rangée : app.js (setupGrid) mesure chaque bloc et lui donne sa hauteur en rangées de 4 px,
   ce qui remplit les deux colonnes sans trou (maçonnerie) en gardant l'ordre de lecture. La barre de scrutin, les
   rangées de repères, les titres de section, les deux tours côte à côte et les blocs .is-wide prennent les deux colonnes. */
@media (min-width: 1080px) {
  main, .app-header-inner { max-width: 1400px; }
  .screen.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: var(--s4); row-gap: 0; align-items: start; }
  .screen.is-grid > .analyses, .screen.is-grid > .resultats-tours { display: contents; }   /* leurs enfants sont les éléments de la grille (gridItems, app.js) */
  .screen.is-grid > *, .screen.is-grid > .analyses > * { min-width: 0; }
  /* un bloc qui prend les deux colonnes au milieu du flux attend que les deux colonnes soient libres et laisse un trou sous
     la plus courte : les emplacements d'analyses en attente et le titre « Analyses » n'en prennent donc qu'une (le titre
     est masqué : sur ordinateur, les cartes d'analyse suivent simplement les autres) */
  .screen.is-grid .analyses-place { grid-column: auto; min-height: 1px; }
  .screen.is-grid .analyses-title { display: none; }
  .screen.is-grid > :is(.scrutin-bar, .resultats-circo-note, .figures, .section-title, .analyses-title, .status, .empty, .is-wide, .habitants-figures, .habitants-sources-wrap, .infos-sources, .note), .screen.is-grid > .analyses > :is(.figures, .section-title, .is-wide) { grid-column: 1 / -1; }
}

/* ================================================================ transitions de page et apparitions */
/* Transitions de page (API View Transitions, Chrome, Safari 18, Firefox 144) : app.js pose data-vt sur <html> le temps de
   la transition. L'en-tête et la barre d'onglets restent en place ; le contenu glisse vers la gauche ou la droite entre
   deux onglets, s'enfonce et revient entre l'accueil et une fiche. Sans l'API, les blocs montent en cascade (rise-in). */
/* Les noms de transition ne sont posés que pendant une transition (html.is-vt, app.js) : un élément nommé est rendu à part
   par Chrome et son verre n'y voit plus le fond (backdrop-filter sans effet). Pendant ces 440 ms, le voile du verre est
   presque opaque pour que l'instantané reste lisible ; il redevient translucide en fondu à la fin. */
html.is-vt .app-header { view-transition-name: app-header; }
html.is-vt .bottom-nav { view-transition-name: bottom-nav; }
html.is-vt .app-header::after, html.is-vt .bottom-nav::after { background: var(--lg-sheen), var(--lg-tint-opaque); }
.app-header::after, .bottom-nav::after { transition: background-color var(--d-base), opacity var(--d-base); }
::view-transition-old(app-header), ::view-transition-new(app-header), ::view-transition-old(bottom-nav), ::view-transition-new(bottom-nav) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); mix-blend-mode: normal; }
html[data-vt="right"]::view-transition-old(root) { animation-name: vt-out-left; }
html[data-vt="right"]::view-transition-new(root) { animation-name: vt-in-right; }
html[data-vt="left"]::view-transition-old(root) { animation-name: vt-out-right; }
html[data-vt="left"]::view-transition-new(root) { animation-name: vt-in-left; }
html[data-vt="push"]::view-transition-old(root) { animation-name: vt-sink; }
html[data-vt="push"]::view-transition-new(root) { animation-name: vt-in-right; }
html[data-vt="pop"]::view-transition-old(root) { animation-name: vt-out-right; }
html[data-vt="pop"]::view-transition-new(root) { animation-name: vt-rise; }
@keyframes vt-out-left { to { transform: translateX(-28%); opacity: 0; } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-right { from { transform: translateX(100%); } }
@keyframes vt-in-left { from { transform: translateX(-28%); opacity: 0; } }
@keyframes vt-sink { to { transform: scale(.94); opacity: .5; } }
@keyframes vt-rise { from { transform: scale(.94); opacity: .5; } }

/* Apparition au défilement (app.js pose has-reveal sur <html> et .is-seen sur chaque bloc quand il entre dans la
   fenêtre) : un bloc monte en fondu, ses barres et ses courbes ne se dessinent qu'à ce moment-là, en cascade. */
html.has-reveal #main :is(.card, .expander, .figures, .resultats-card, .list, .section-title):not(.is-seen) { opacity: 0; transform: translateY(10px); }
html.has-reveal #main :is(.card, .expander, .figures, .resultats-card, .list, .section-title).is-seen { transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html.has-reveal #main :is(.card, .expander, .figures, .resultats-card, .list):not(.is-seen) :is(.gbar i, .hbar i, .compo-bar, .dumbbell-line, .dumbbell-dot, .heat-cell, .cand-bar i, .bureau-bar i, .sondage-bar-fill, .sondage-bar-marge, .an-candidat-bar i, .an-circo-carte-bar i, .an-bureaux-bar, .an-contexte-bar, .an-portrait-bar, .an-electeur-bar) { animation-play-state: paused; }
html.has-reveal #main .is-seen :is(.gbar i, .hbar i, .compo-bar, .dumbbell-line, .cand-bar i, .bureau-bar i, .sondage-bar-fill, .an-candidat-bar i, .an-circo-carte-bar i, .an-bureaux-bar, .an-contexte-bar, .an-portrait-bar, .an-electeur-bar) { animation-delay: calc(var(--reveal-delay, 0ms) + 120ms); }

/* Dans un bloc qui apparaît, les lignes de liste et les tuiles de repères se suivent de 35 ms (les six premières, les
   suivantes avec la sixième) : une cascade courte, qui ne bloque rien. */
html.has-reveal #main .list:not(.is-seen) > .list-row, html.has-reveal #main .figures:not(.is-seen) > .figure { opacity: 0; transform: translateY(6px); }
html.has-reveal #main .list.is-seen > .list-row, html.has-reveal #main .figures.is-seen > .figure { transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(var(--reveal-delay, 0ms) + 210ms); }
html.has-reveal #main :is(.list.is-seen > .list-row, .figures.is-seen > .figure):nth-child(1) { transition-delay: calc(var(--reveal-delay, 0ms) + 35ms); }
html.has-reveal #main :is(.list.is-seen > .list-row, .figures.is-seen > .figure):nth-child(2) { transition-delay: calc(var(--reveal-delay, 0ms) + 70ms); }
html.has-reveal #main :is(.list.is-seen > .list-row, .figures.is-seen > .figure):nth-child(3) { transition-delay: calc(var(--reveal-delay, 0ms) + 105ms); }
html.has-reveal #main :is(.list.is-seen > .list-row, .figures.is-seen > .figure):nth-child(4) { transition-delay: calc(var(--reveal-delay, 0ms) + 140ms); }
html.has-reveal #main :is(.list.is-seen > .list-row, .figures.is-seen > .figure):nth-child(5) { transition-delay: calc(var(--reveal-delay, 0ms) + 175ms); }

/* ================================================================ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen.is-entering-right, .screen.is-entering-left { animation: fade-only 100ms linear; }
  .screen.is-entering-right > *, .screen.is-entering-left > * { animation: none; }
  html.has-reveal #main :is(.card, .expander, .figures, .resultats-card, .list, .section-title):not(.is-seen) { opacity: 1; transform: none; }
  html.has-reveal #main :is(.list:not(.is-seen) > .list-row, .figures:not(.is-seen) > .figure) { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .nav-bubble { transition: none; }
  body::before { animation: none; }
  @keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
  .sheet, .sheet.is-panel { transition: none; }
  .sheet-overlay { transition: opacity 100ms linear; }
  .figure-value, .chip-label, .toast, .chart .is-leaving { transition-duration: 100ms; }
  .skeleton::after { animation: none; }
  .map-selection, .results, .tooltip, .heat-cell, .dumbbell-dot, .dumbbell-line, .gbar i, .hbar i, .compo-bar, .cand-bar i, .bureau-bar i { animation: none; }
  .segmented-indicator, .segmented-clone, .expander-chevron, .expander-body, .card-footer-panel, .cand-bar i, .ring-arc, .nav-item svg, .bottom-nav, .list-row-chevron, .more-body, .more-plus { transition: none; }
  .btn:active, .chip:active, .icon-btn:active, .nav-item:active, .segmented-btn:active, .list-row.compact:active { transform: none; }
}

/* ================================================================ 3. impression */
@media print {
  .app-header .icon-btn, .bottom-nav, .side-rail, .skip, .chip, .chip-hint, .map-ctl, .scrutin-bar .icon-btn, .sheet, .sheet-overlay, #toast-root, .card-footer-row, .figure-sources-btn, .top-sentinel, .select { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .app-header::before, .app-header::after, .sheet::before, .sheet::after { display: none; }
  .app { padding-left: 0; }
  main { max-width: none; padding: 0; }
  .app-header { position: static; background: none; border: 0; }
  #fiche .screen[hidden], .card-footer-panel[hidden], .figure-sources[hidden] { display: block !important; }
  #fiche .screen { margin-bottom: 24px; }
  .card-footer-panel, .expander-body { grid-template-rows: 1fr !important; }
  .expander-inner { opacity: 1 !important; }
  html.has-reveal #main :is(.card, .expander, .figures, .resultats-card, .list, .section-title, .list > .list-row, .figures > .figure) { opacity: 1 !important; transform: none !important; }
  .expander-preview { display: none; }
  .more-body { grid-template-rows: 1fr !important; }
  .more-btn { display: none !important; }
  .card, .figure, .expander, .scrutin-card { box-shadow: none; break-inside: avoid; border: 1px solid #bbb; }
  .card-footer-panel::before { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #666; margin: 8px 0 4px; }
  .card-footer-lecture::before { content: "Comment lire"; }
  .card-footer-table::before { content: "Tableau"; }
  .card-footer-sources::before { content: "Sources"; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
  .map-wrap { height: 400px; }
  * { animation: none !important; transition: none !important; }
}

/* Téléphone : cinq entrées dans la barre d'onglets ; Infos reste accessible par l'icône « i » et le menu, et dans le rail à partir de 720 px */
.bottom-nav:not(.side-rail) .nav-item[data-nav="infos"] { display: none; }
.bottom-nav:not(.side-rail) .nav-item { padding: 0 2px; letter-spacing: -.02em; }
.bottom-nav:not(.side-rail) .nav-item .nav-label { max-width: 100%; overflow: visible; text-overflow: clip; }
@media (min-width: 720px) { .bottom-nav:not(.side-rail) .nav-item[data-nav="infos"] { display: flex; } }

/* ================================================================ intentions de vote 2027 (web/js/sondages.js) */
.sondage-list { display: flex; flex-direction: column; }
.sondage-row { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 6px var(--s3); align-items: center; min-height: 64px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.sondage-row:last-child { border-bottom: 0; }
.sondage-row .cand-mark { grid-row: 1 / 4; }
.sondage-bar { grid-column: 2 / 4; position: relative; height: 10px; border-radius: 5px; background: var(--fill); }
.sondage-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transform-origin: left center; animation: grow-x 520ms var(--ease-sheet) both; }
.sondage-bar-marge { position: absolute; top: -2px; bottom: -2px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 22%, transparent); border-left: 1.5px solid var(--ink-2); border-right: 1.5px solid var(--ink-2); animation: pop-in 320ms var(--ease-out) both; animation-delay: 420ms; }
.sondage-bar-ref { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.sondage-ref-sw { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: var(--ink); margin-right: 8px; vertical-align: -2px; }
.sondage-home-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px var(--s3); align-items: baseline; padding: 6px 0; font-size: var(--fs-13); }
.sondage-home-row b { font-family: var(--font-num); font-weight: 700; }
.sondage-home-row .sondage-bar { grid-column: 1 / 3; height: 8px; }
.tendances-vue { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .sondage-bar-fill, .sondage-bar-marge { animation: none; } }

/* survol : seulement à la souris (un doigt qui touche ne doit pas laisser un état de survol collé) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fill-2); }
  .btn.primary:hover { background: color-mix(in srgb, var(--accent) 90%, #000); }
  .btn.text:hover { background: var(--fill); }
  .icon-btn:hover { background: var(--fill); }
  .app-header .icon-btn:hover { background: transparent; }
  .app-header .icon-btn:hover::after { background: var(--lg-sheen), var(--lg-rim-2); }
  .app-header-up:hover { text-decoration: underline; }
  .chip:hover { background: var(--fill-2); }
  .card-footer-btn:hover { background: var(--fill); }
  .source a:hover { color: var(--accent); text-decoration-color: currentColor; }
  button.legend-item:hover { background: var(--fill); }
  button.heat-cell:hover { transform: scale(1.12); box-shadow: var(--shadow-float); z-index: 2; }
  .select select:hover { background: var(--fill-2); }
  .map .commune:hover { opacity: .82; }
  .results li:hover { background: var(--fill); }
  .list-row:not(.is-selected):hover { background: var(--fill); }
  .list-row:hover .list-row-chevron { transform: translateX(2px); color: var(--muted); }
  .expander:not(.is-empty) .expander-summary:hover { background: var(--fill); }
  .cand-row:hover { background: var(--fill); }
  .nav-item:not([aria-selected="true"]):not(.is-active):hover { color: var(--ink-2); }
}