/* ================================================================
   trajectoires/themes/irve.css — Surcharges spécifiques IRVE
   ================================================================
   Thématique bornes de recharge (Trajectoires IRVE). Chargé APRÈS
   trajectoires/{shared,theater,dept,licence}.css. Calqué sur
   themes/sirene.css : réutilise les classes communes (hero dual,
   légende carte, scatter) et n'ajoute que les deltas IRVE :
   - palette électrique (accent cyan/teal pour les valeurs) ;
   - légende choroplèthe discrète (5 classes quantiles pdc_10k_hab,
     issues/closed/010) sur la carte theater.
   ================================================================ */

/* ── 1. ACCENT THÉMATIQUE ÉLECTRIQUE ─────────────────────────── */
/* Le teal électrique remplace l'orange SIRENE comme accent des
   valeurs saillantes (.thr-accent), sans toucher aux variables
   globales (head-css.html). */
.cv-theater .thr-accent {
    color: #58D8C9;
}

/* ── 2. CARTE : LÉGENDE CHOROPLÈTHE DISCRÈTE (5 classes) ────── */
/* La carte IRVE colore par CLASSES (quantiles pdc_10k_hab), pas par
   dégradé continu : la légende affiche une ligne de swatches avec les
   bornes. Le JS (irve-theater.js) injecte le HTML. */
.cv-theater .thr-legend-classes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}
.cv-theater .thr-legend-swatch {
    display: inline-block;
    width: 34px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.25);
}
.cv-theater .thr-legend-class-label {
    margin: 0 0.15rem;
    white-space: nowrap;
}

/* ── 3. CALQUE AUTOROUTES (toggle indépendant) ────────────────── */
/* Calque SVG france-autoroutes.svg (générateur pipeline/ign/scripts/
   prepare_autoroutes_svg.py, affine calée sur france-departements.svg).
   Injecté dans le <svg> de la landing par irve-theater.js. Revue
   mainteneur 24/09 : le calque MASQUÉ PAR DÉFAUT, toggle indépendant.
   Revue 25/09 : le toggle n'apparaît qu'en vue « Part recharge
   rapide » (lecture d'ancrage autoroutier de la rapide — sans objet
   sur la densité PDC/10k), icône SVG du bouton retirée (demande
   mainteneur). Rose pâle : se détache de la rampe froide jaune→vert
   →bleu ET des classes de la vue « rapide », teinte non employée
   ailleurs sur la carte. */
.cv-theater .autoroute {
    fill: none;
    stroke: rgba(255, 143, 163, 0.75);
    stroke-width: 1.4;
    stroke-linecap: round;
    pointer-events: none;
}
.cv-theater .autoroute-layer {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.cv-theater .autoroute-layer.visible {
    opacity: 1;
}
.cv-theater .thr-map-roads-toggle {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 143, 163, 0.9);
    background: transparent;
    border: 1px solid rgba(255, 143, 163, 0.4);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s ease, color 0.2s ease;
}
/* Vue « Densité PDC/10k » : le toggle n'y a pas de sens (ancrage
   autoroutier = lecture de la recharge rapide). irve-theater.js pose
   la classe au chargement et à chaque bascule de mode. */
.cv-theater .thr-map-roads-toggle.hidden {
    display: none;
}
.cv-theater .thr-map-roads-toggle:hover,
.cv-theater .thr-map-roads-toggle[aria-pressed="true"] {
    background: rgba(255, 143, 163, 0.15);
    color: #FF8FA3;
}
.cv-theater .thr-legend-roads {
    display: inline-block;
    width: 34px;
    height: 0;
    border-top: 2px solid rgba(255, 143, 163, 0.85);
    margin: 0 0.25rem;
    vertical-align: middle;
}
.cv-theater .thr-legend-roads-label {
    color: rgba(255, 143, 163, 0.9);
    white-space: nowrap;
}

/* ── 4. NOTE SOUS LE CHART DÉPLOIEMENT ───────────────────────── */
/* Variante .thr-chart-note--block : définie dans themes/sirene.css
   (uniquement chargée par tissu-economique). Sans elle, la note IRVE
   héritait de .thr-chart-note (margin: -0.4rem, alignée gauche) et
   chevauchait le canvas. Mêmes valeurs que la variante SIRENE. */
.cv-theater .thr-chart-note--block {
    margin: 1.25rem auto 0;
    text-align: center;
    max-width: 640px;
}

/* ── 5. CHART DÉPLOIEMENT : NARRATION ÉLARGIE ────────────────── */
/* Le template pose .thr-narration-inner (règle « chart élargi » du
   commun theater.css, mutualisée avec le base 100 SIRENE 25/09 :
   wrapper 1400px centrés, chart width 100% max-width none). Ne
   reste ici que le delta IRVE : hauteur 320px — 200px était exigüe
   pour barres empilées + 2 lignes base 100 + double axe. */
.cv-theater .thr-narration-inner .thr-narration-chart {
    height: 320px;
}

/* ── 6. NARRATION 2 « AXES » : TAGS + NOTE ───────────────────── */
/* Le bloc #axes réutilise .thr-hero-tags / .thr-hero-tag (stylés
    pour le HERO fond sombre — teal sur --primary, AA OK) : le bloc
    est posé en thr-narration-dark pour hériter de la même palette.
    .thr-hero-tags n'a pas de margin-top (au hero, le counter-label
    porte l'espacement) : sans ça les tags collent au texte.
    La note .thr-chart-note--block (§4) est déjà recolorée pour le
    fond sombre par theater.css (.thr-chart-note, blanc 0.5). */
.cv-theater .thr-narration .thr-hero-tags {
    margin-top: 2.5rem;
}

/* ── 7. SECTION « LES TROIS FORMES DE RECHARGE » (#formes) ──── */
/* issues/015 close 27/09 : hiérarchie publique lente / rapide /
    très rapide en 3 thr-kpi-cards. Spécificité du bloc (revue
    mainteneur 27/09 soir) : les cartes s'EMPLENT verticalement
    (1 colonne, pas la grille 4 colonnes des 7 secteurs SIRENE)
    et leur contenu est centré — lecture séquentielle lente →
    rapide → très rapide, du stationnement vers l'axe, chaque
    classe occupant toute la largeur de narration.
    Couleurs des dots/accents : celles du chart déploiement
    (§ irve-theater.js — vert #5FCDAF < 150 kW, jaune #FFEB82
    ≥ 150 kW) + rose #FF8FA3 réservé au calque autoroutes, étendu
    à la classe « très rapide » pour la lecture géographique
    « la très rapide suit les axes » (mêmes teintes partout).
    .thr-kpi-label garde son alignement gauche (flex + dot en
    tête), les valeurs et captions seules passent au centre. */
.cv-theater .thr-kpi-grid--formes {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 640px;
    margin: 2.5rem auto 1rem;
}
.cv-theater .thr-kpi-grid--formes .thr-kpi-card {
    text-align: center;
    padding: 1.5rem 1.25rem 1.25rem;
}
.cv-theater .thr-kpi-grid--formes .thr-kpi-label {
    justify-content: center;
    min-height: 0;
    margin-bottom: 0.45rem;
}
.cv-theater .thr-kpi-grid--formes .thr-kpi-value {
    font-size: 2rem;
}
.cv-theater .thr-kpi-grid--formes .thr-kpi-caption {
    display: block;
    font-size: 0.78rem;
    line-height: 1.45;
    margin-top: 0.3rem;
}