/* ============================================================
   Carnet de bord — direction visuelle (2026-08, refonte)
   Surfaces en couches, accent pétrole conservé mais approfondi en
   dégradé, mouvement mesuré (transitions, entrée en fondu-glissé),
   mode sombre natif. Toujours zéro JavaScript, zéro CDN : le
   "dynamique" vient du CSS (transitions, :checked, View Transitions),
   pas d'un framework client. Chiffres toujours en chasse fixe
   tabulaire — c'est ce qui rend un tableau de bord lisible d'un
   coup d'œil, refonte ou pas.
   ============================================================ */

:root {
  --ink:        #161B22;
  --ink-soft:   #4B5563;
  --ink-faint:  #8A93A0;
  --paper:      #F1F3F6;
  --surface:    #FFFFFF;
  --surface-2:  #F7F8FA;
  --rule:       #E2E5EA;
  --rule-soft:  #EEF0F3;

  --petrol:      #0E7C74;
  --petrol-600:  #0B655F;
  --petrol-700:  #0A544F;
  --petrol-dim:  #E1F3F1;
  --petrol-glow: rgba(14, 124, 116, .22);

  --amber:      #B4700F;
  --amber-dim:  #FCF0DC;
  --red:        #C0392B;
  --red-dim:    #FBEAE7;

  /* Palette des graphiques et des types de véhicule : le pétrole en tête,
     puis des tons désaturés qui restent distinguables en niveaux de gris
     et pour un daltonisme courant. */
  --c1: #0E7C74;
  --c2: #C07A1B;
  --c3: #3E6FA6;
  --c4: #A15C8C;
  --c5: #5B8A4A;
  --c6: #A65A4E;

  /* Types de véhicule : chacun sa teinte, réutilisée pour l'icône, le
     liseré de carte et le filtre segmenté. */
  --t-voiture:     var(--c3);
  --t-voiture-dim: #E7EFF8;
  --t-moto:        var(--c6);
  --t-moto-dim:    #F7EAE7;
  --t-utilitaire:  var(--c5);
  --t-utilitaire-dim: #EAF1E6;
  --t-autre:       var(--ink-faint);
  --t-autre-dim:   var(--rule-soft);

  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);

  --gap: 1rem;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(20, 25, 35, .05), 0 1px 1px rgba(20, 25, 35, .04);
  --shadow-md: 0 6px 16px -4px rgba(20, 25, 35, .10), 0 2px 6px -2px rgba(20, 25, 35, .06);
  --shadow-lg: 0 16px 40px -12px rgba(20, 25, 35, .22);

  --ease: cubic-bezier(.22, .8, .36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  /* Habillage de l'en-tête : délibérément FIXE, ne s'inverse pas avec le
     thème (contrairement à --ink/--paper, qui portent le texte et doivent
     s'inverser). C'est un bandeau de chrome, pas du contenu. */
  --chrome-bg: #12181F;
  --chrome-fg: #F1F3F6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #E7EAEE;
    --ink-soft:   #A6ADB8;
    --ink-faint:  #6B7280;
    --paper:      #0E1116;
    --surface:    #171B22;
    --surface-2:  #1D222B;
    --rule:       #2A303B;
    --rule-soft:  #232833;

    --petrol:      #35B0A4;
    --petrol-600:  #2C948A;
    --petrol-700:  #1F6C64;
    --petrol-dim:  #123531;
    --petrol-glow: rgba(53, 176, 164, .28);

    --amber:      #E0A342;
    --amber-dim:  #3A2E17;
    --red:        #E2695B;
    --red-dim:    #3A211D;

    --c1: #35B0A4; --c2: #E0A342; --c3: #7AA7DD; --c4: #D089B8; --c5: #8FC177; --c6: #DB8C7E;
    --t-voiture: var(--c3); --t-voiture-dim: #1C2733;
    --t-moto: var(--c6);    --t-moto-dim: #2C201D;
    --t-utilitaire: var(--c5); --t-utilitaire-dim: #1E2A1B;
    --t-autre: var(--ink-faint); --t-autre-dim: var(--rule-soft);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 10px 24px -8px rgba(0,0,0,.5), 0 2px 8px -2px rgba(0,0,0,.4);
    --shadow-lg: 0 24px 56px -16px rgba(0,0,0,.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 480px at 15% -10%, var(--petrol-glow), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.mono, table td.n, .metric-value, .badge {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  font-variant-numeric: tabular-nums;
}

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--petrol-700); }

/* --- Ossature --- */

.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-top: 0;
  padding-bottom: 5rem;
  /* max() plutôt que d'additionner : en paysage sur iPhone à encoche, le
     safe-area-inset peut dépasser 1.25rem, sinon il ne fait jamais moins. */
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}

header.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--chrome-bg) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--chrome-fg);
  /* La bande reste collée à top:0 (sticky) ; c'est son PADDING qui pousse
     le contenu sous l'île dynamique / l'encoche en PWA plein écran sur
     iPhone. Sans viewport-fit=cover (voir base.html), env() vaut 0 et ça
     ne change rien sur les appareils sans encoche ou en navigateur normal. */
  padding-top: calc(0.875rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.875rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
header.top .wrap { display: flex; align-items: baseline; gap: 0.75rem; padding-bottom: 0; }
header.top a { color: var(--chrome-fg); text-decoration: none; }
header.top .title {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #fff, var(--petrol) 140%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
header.top .nav {
  margin-left: auto;
  font-size: 0.875rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
header.top .nav:hover { border-bottom-color: var(--chrome-fg); }
header.top button.nav {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  font: inherit;
  font-size: 0.875rem;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 0.75rem;
}
header.top .sub {
  font-size: 0.75rem;
  color: #9AA7AF;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}
h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.lede { color: var(--ink-soft); margin: 0 0 1.5rem; }

/* Entrée en douceur des blocs principaux, désactivée si l'utilisateur
   préfère moins de mouvement (règle plus bas). .fleet est exclu : ses
   cartes s'animent individuellement, en cascade (voir plus bas). */
main.wrap > :not(.fleet) { animation: rise var(--dur) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Filtre segmenté (type de véhicule) — 100% CSS, aucun JS --- */

.type-filter { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1.25rem; }
.type-filter input { position: absolute; opacity: 0; pointer-events: none; }
.type-filter label {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  font-size: .8125rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.type-filter label:hover { border-color: var(--petrol); color: var(--ink); }
.type-filter input:checked + label {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-sm);
}
.type-filter .count { opacity: .65; font-variant-numeric: tabular-nums; }

/* :has() plutôt que le combinateur ~ : les radios sont imbriquées dans
   .type-filter, pas sœurs directes de .fleet, donc ~ ne les verrait
   jamais. .vehicles-section enveloppe les deux, :has() regarde n'importe
   quel descendant. */
.vehicles-section:has(#tf-voiture:checked) .fleet .card:not([data-type="VOITURE"]),
.vehicles-section:has(#tf-moto:checked) .fleet .card:not([data-type="MOTO"]),
.vehicles-section:has(#tf-utilitaire:checked) .fleet .card:not([data-type="UTILITAIRE"]),
.vehicles-section:has(#tf-autre:checked) .fleet .card:not([data-type="AUTRE"]) {
  display: none;
}

/* --- Cartes véhicule --- */

.fleet { display: grid; gap: 0.875rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fleet { grid-template-columns: 1fr 1fr; } }
/* Entrée échelonnée carte par carte (animation-delay posé en ligne par
   vehicles.html) — remplace l'entrée de groupe de la règle générale. */
.fleet .card { animation: rise var(--dur) var(--ease) both; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem 1.125rem 1.5rem;
  text-decoration: none;
  color: inherit;
  display: block;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--type-color, var(--petrol));
}
.card:hover, .card:focus-visible { border-color: var(--type-color, var(--petrol)); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card.retired { opacity: 0.6; }

/* --type-color / --type-dim posés une fois sur la carte, héritent
   naturellement jusqu'à .type-icon et .gauge-fill (pas besoin de les
   redéclarer à chaque niveau). */
.card[data-type="VOITURE"]    { --type-color: var(--t-voiture); --type-dim: var(--t-voiture-dim); }
.card[data-type="MOTO"]       { --type-color: var(--t-moto); --type-dim: var(--t-moto-dim); }
.card[data-type="UTILITAIRE"] { --type-color: var(--t-utilitaire); --type-dim: var(--t-utilitaire-dim); }
.card[data-type="AUTRE"]      { --type-color: var(--t-autre); --type-dim: var(--t-autre-dim); }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.card-id { display: flex; align-items: center; gap: .625rem; }
.type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--radius-sm);
  background: var(--type-dim, var(--petrol-dim)); color: var(--type-color, var(--petrol));
}

.card-name { font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: .4rem; }
.card-model { color: var(--ink-faint); font-size: 0.8125rem; margin-top: 0.1rem; }
.power-icon { display: inline-flex; color: var(--ink-faint); }

/* Signature : la jauge. Une réglette de 0 à 15 L/100 (ou 0-30 kWh),
   avec un curseur à la valeur moyenne. Lisible d'un coup d'œil,
   comparable d'un véhicule à l'autre puisque l'échelle est commune. */
.gauge { margin-top: 1rem; }
.gauge-track {
  position: relative;
  height: 6px;
  background: var(--rule-soft);
  border-radius: 999px;
  overflow: hidden;
}
.gauge-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--type-color, var(--petrol)), color-mix(in srgb, var(--type-color, var(--petrol)) 70%, white));
  border-radius: 999px;
  transition: width var(--dur) var(--ease);
}
.gauge-scale {
  display: flex; justify-content: space-between;
  font-size: 0.6875rem; color: var(--ink-faint);
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.gauge-empty { font-size: 0.8125rem; color: var(--ink-faint); font-style: italic; margin-top: .75rem; }

/* --- Bandeau de métriques --- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.metric { background: var(--surface); padding: 1rem 1.125rem; transition: background var(--dur-fast) var(--ease); }
.metric:hover { background: var(--surface-2); }
.metric-label {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
/* La métrique "vedette" (premier chiffre, celui qui répond d'emblée à
   « comment ça consomme ? ») se distingue du reste plutôt que de peser
   pareil que les trois autres — hiérarchie visuelle, pas juste des tuiles
   égales. */
.metric.hero {
  background: linear-gradient(155deg, var(--petrol-dim), var(--surface) 65%);
  position: relative;
}
.metric.hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(var(--petrol), var(--petrol-600));
}
.metric.hero .metric-value {
  background: linear-gradient(120deg, var(--petrol-700), var(--petrol));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .metric.hero .metric-value {
    background: linear-gradient(120deg, var(--petrol), color-mix(in srgb, var(--petrol) 60%, white));
    -webkit-background-clip: text; background-clip: text;
  }
}
.metric-value { font-size: var(--step-2); font-weight: 600; margin-top: 0.2rem; letter-spacing: -.01em; }
.metric-value small { font-size: 0.75rem; color: var(--ink-faint); font-weight: 400; }

/* --- Tableau --- */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th {
  text-align: left;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
  padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.n { text-align: right; }
tbody tr.flagged { background: var(--amber-dim); }
tbody tr.flagged:hover { background: color-mix(in srgb, var(--amber-dim), var(--ink-faint) 8%); }
tbody tr.partial td:first-child { border-left: 3px solid var(--ink-faint); }

.badge {
  display: inline-block; font-size: 0.6875rem; padding: 0.15rem 0.5rem;
  border-radius: 999px; letter-spacing: 0.03em; font-weight: 600;
}
.badge.full { background: var(--petrol-dim); color: var(--petrol-700); }
.badge.part { background: var(--rule-soft); color: var(--ink-soft); }
.badge.warn { background: var(--amber-dim); color: var(--amber); }

.muted { color: var(--ink-faint); }

/* --- Formulaire --- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.375rem;
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 0.875rem; }
.field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.3rem; }
.grid-2 { display: grid; gap: 0.875rem; grid-template-columns: 1fr 1fr; }

input[type="text"], input[type="number"], input[type="datetime-local"], input[type="date"],
input[type="password"], select, textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 1rem;              /* 16px : empêche le zoom automatique sur iOS */
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--petrol); background: var(--surface);
  box-shadow: 0 0 0 3px var(--petrol-glow);
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.check { display: flex; align-items: flex-start; gap: 0.55rem; margin-bottom: 0.75rem; }
.check input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--petrol); }
.check span { font-size: 0.875rem; }
.check .hint { display: block; color: var(--ink-faint); font-size: 0.78rem; }

button.primary {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--petrol), var(--petrol-600));
  border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
button.primary:hover { filter: brightness(1.06); box-shadow: var(--shadow-md); transform: translateY(-1px); }
button.primary:active { transform: translateY(0); }

/* En-tête de page : titre à gauche, action principale à droite.
   Sur mobile l'action passe dessous plutôt que de comprimer le titre. */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
}

.btn {
  display: inline-block;
  padding: .55rem .9rem;
  font-size: .875rem; font-weight: 500;
  color: var(--petrol); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.btn:hover { border-color: var(--petrol); background: var(--petrol-dim); transform: translateY(-1px); }

button.danger {
  padding: .65rem 1.1rem;
  font: inherit; font-weight: 500;
  color: var(--red); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--rule)); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
button.danger:hover { background: var(--red-dim); border-color: var(--red); }

.empty {
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface-2);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Transition douce entre les pages (Chrome/Edge ; voir meta view-transition
   dans base.html). Ignoré sans effet ailleurs — pure amélioration progressive. */
@media not (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: fade-out var(--dur-fast) var(--ease) both; }
  ::view-transition-new(root) { animation: fade-in var(--dur) var(--ease) both; }
}
@keyframes fade-out { to { opacity: 0; } }
/* "to" explicite : sans lui, un élément dont l'opacité de base vaut 0
   (comme svg.chart .area) interpole vers CETTE valeur de base plutôt que
   vers 1 — l'animation tourne mais rien ne devient jamais visible. Bug
   réel rencontré en testant .area dans un vrai navigateur. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Graphiques --- */

.chart-box {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 0.875rem 0.625rem;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chart-box:hover { box-shadow: var(--shadow-md); border-color: var(--rule); }
svg.chart { width: 100%; height: auto; display: block; min-width: 460px; }

svg.chart .grid { stroke: var(--rule-soft); stroke-width: 1; }
svg.chart .grid-v { stroke-dasharray: 2 4; }
svg.chart .tick {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; fill: var(--ink-faint);
}
svg.chart .tick.val { fill: var(--ink-soft); }
svg.chart .axis-unit {
  font-size: 10px; fill: var(--ink-faint);
  letter-spacing: 0.06em; text-transform: uppercase;
}
svg.chart .dot { transition: r var(--dur-fast) var(--ease); }
svg.chart .dot:hover { r: 5; }
svg.chart .bar { transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); }
svg.chart .bar:hover { opacity: 0.85; filter: brightness(1.12); }

/* Entrée : le trait se dessine (pathLength="1" posé par charts.py rend le
   dashoffset indépendant de la géométrie réelle), la zone sous la courbe
   et les points arrivent juste après, les barres montent depuis leur
   base. Tout est déclenché à l'affichage, une seule fois — pas de boucle,
   pas de rejeu au survol : ça resterait un tableau de bord, pas une
   démo. */
@media not (prefers-reduced-motion: reduce) {
  svg.chart .line {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw-line 900ms var(--ease) forwards;
  }
  svg.chart .area { opacity: 0; animation: fade-in 500ms var(--ease) 500ms forwards; }
  svg.chart .dot { opacity: 0; animation: rise 300ms var(--ease) 550ms forwards; }
  svg.chart .bar {
    transform-box: fill-box; transform-origin: bottom;
    animation: grow-bar 480ms var(--ease) backwards;
  }
  svg.chart .bar:nth-of-type(2)  { animation-delay: 30ms; }
  svg.chart .bar:nth-of-type(3)  { animation-delay: 60ms; }
  svg.chart .bar:nth-of-type(4)  { animation-delay: 90ms; }
  svg.chart .bar:nth-of-type(5)  { animation-delay: 120ms; }
  svg.chart .bar:nth-of-type(6)  { animation-delay: 150ms; }
  svg.chart .bar:nth-of-type(n+7) { animation-delay: 175ms; }
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.legend {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
  margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-soft);
}
.legend .key { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend .key i { width: 11px; height: 3px; border-radius: 2px; display: inline-block; }

.note {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  margin: 0.6rem 0 0;
  max-width: 62ch;
}

.split { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .split svg.chart { min-width: 0; } }

/* --- Navigation locale --- */

.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }