/* ================================================================
   trajectoires_mobpro_shared.css — Style partagé Trajectoires
   ================================================================
   Chargé après global.css (via partial SSI head-css.html) et AVANT
   le CSS spécifique (trajectoires_mobpro_theater/editorial/dept.css).

   Contient :
   1. Variables data-colors (--cv-*) — source unique de vérité
   2. Hooks body (.cv-page, .cv-theater)
   3. Bandeau contextuel (.cv-context-bar) — 5/5 pages
   4. Sommaire dynamique latéral droit (.cv-toc) — page theater
   5. Toggle Perspective FAB bas-droite (.cv-perspective-toggle)
      discret, replié par défaut, se déploie au survol/focus,
      se replie auto après sélection (géré via .open + JS)
   6. Scatter plot explorer (.cv-scatter-*) — 3/5 pages
   7. Badge unité (.cv-page .badge) dans <h3> de cartes
   8. Légende carte (.cv-legend-*, .thr-legend-*, .ed-legend-*)
      générée dynamiquement par trajectoires_mobpro.js pour toutes les pages
   9. Tooltip carte (.cv-map-tooltip, .thr-map-tooltip, .ed-map-tooltip)
   10. Responsive commun

   Convention ?v= : bump dans chaque template qui l'inclut (cf. AGENTS.md).
   ================================================================ */

/* ── 1. VARIABLES DATA-COLORS ────────────────────────────────── */
/* Source unique — supprimer les :root dupliqués de theater/editorial/dept.
   Palette modes de transport alignée sur la charte MOBPRO/SIRENE
   (TRANS_COLORS de 4a_indicateurs.py) pour uniformité graphique. */
/* Variables --primary, --secondary, --accent-data, --accent-territory, --bg-main
   viennent de global.css (ne pas redéfinir ici). */
:root {
    --cv-car: #0a5d79;        /* Voiture        — TRANS 5 */
    --cv-tc: #387d95;         /* TC             — TRANS 6 */
    --cv-foot: #649283;       /* Marche         — TRANS 2 */
    --cv-bike: #347770;       /* Vélo           — TRANS 3 */
    --cv-moto: #e69c7a;       /* 2RM            — TRANS 4 */
    --cv-notrans: #cfc5b1;    /* Pas de transport — TRANS 1 */
    --cv-co2: #FF6E40;
    --cv-dist: #5C6BC0;
    --cv-pop: #BA68C8;
}

/* ── 2. HOOKS BODY ───────────────────────────────────────────── */
/* .cv-page : hook minimal pour toute page Trajectoires. */
.cv-page {
    /* Hérite de global.css body. Pas de reset supplémentaire nécessaire. */
}

/* .cv-theater : variant dark pour pages immersives (theater, licence). */
.cv-theater {
    background: var(--primary);
    color: rgba(255, 255, 255, 0.85);
}

/* ── 3. BANDEAU CONTEXTUEL ───────────────────────────────────── */
/* Sous-nav Trajectoires, structurée comme la nav principale (global.css) :
   .cv-context-bar = pleine largeur (background full-width), in-flow
   via position:sticky (pas de trou de hauteur). Le contenu est centré
   par .cv-context-bar-inner (max-width + margin auto), comme
   .nav-container inside <nav>.
   top: 80px → se sticky-colle sous la nav fixe.
   margin-top: 80px → pousse la bar sous la nav dans le flux initial
   (sinon elle est masquée derrière la nav fixed au chargement). */
.cv-context-bar {
    position: sticky;
    top: 80px;
    z-index: 800;
    margin-top: 80px;
    background: rgba(14, 62, 73, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(53, 152, 192, 0.12);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
}
.cv-context-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.7rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    box-sizing: border-box;
}
.cv-context-label {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-data);
}
.cv-context-sep {
    color: rgba(255, 255, 255, 0.25);
    user-select: none;
}
.cv-context-bar a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s;
}
.cv-context-bar a:hover {
    color: var(--accent-data);
}
.cv-context-bar a.current {
    color: white;
    font-weight: 500;
}

/* ── 4. SOMMAIRE DYNAMIQUE LATÉRAL DROIT (TOC) ───────────────── */
/* Sticky à droite, vertical, discret. Actif via scroll-spy (trajectoires_mobpro.js).
   Caché sur mobile (pas de place). */
.cv-toc {
    position: fixed;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 700;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 0.8rem;
    background: rgba(14, 62, 73, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(53, 152, 192, 0.12);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.72rem;
    list-style: none;
    margin: 0;
}
.cv-toc a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
    padding: 0.2rem 0;
}
.cv-toc a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.2s, transform 0.2s;
}
.cv-toc a:hover {
    color: rgba(255, 255, 255, 0.8);
    transform: translateX(-2px);
}
.cv-toc a:hover::before {
    background: var(--accent-data);
}
.cv-toc a.active {
    color: white;
    font-weight: 500;
}
.cv-toc a.active::before {
    background: var(--accent-data);
    transform: scale(1.4);
}

/* ── 5. TOGGLE PERSPECTIVE FAB (bas-droite, repliable) ───────── */
/* Discret, fixed en bas à droite. Replié par défaut (juste le label
   court visible). Se déploie au survol/focus-within OU via .open (JS).
   Se replie auto après clic sur un bouton (géré par trajectoires_mobpro.js). */
.cv-perspective-toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    background: rgba(14, 62, 73, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(53, 152, 192, 0.18);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    transition: border-radius 0.25s, padding 0.25s, background 0.2s;
    font-family: 'Orbitron', sans-serif;
    cursor: default;
}
/* État replié : masquer boutons + hint, ne montrer que le label court. */
.cv-perspective-btn,
.cv-perspective-hint {
    display: none;
}
.cv-perspective-fab-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    user-select: none;
}
.cv-perspective-fab-label::before {
    content: '⊕';
    font-size: 0.85rem;
    color: var(--accent-data);
    line-height: 1;
}
/* État déployé : au survol, au focus-within, ou via .open (JS après clic label). */
.cv-perspective-toggle:hover,
.cv-perspective-toggle:focus-within,
.cv-perspective-toggle.open {
    border-radius: 14px;
    padding: 0.75rem 1rem;
    background: rgba(14, 62, 73, 0.96);
}
.cv-perspective-toggle:hover .cv-perspective-btn,
.cv-perspective-toggle:focus-within .cv-perspective-btn,
.cv-perspective-toggle.open .cv-perspective-btn {
    display: inline-flex;
}
.cv-perspective-toggle:hover .cv-perspective-hint,
.cv-perspective-toggle:focus-within .cv-perspective-hint,
.cv-perspective-toggle.open .cv-perspective-hint {
    display: block;
}
.cv-perspective-toggle:hover .cv-perspective-fab-label,
.cv-perspective-toggle:focus-within .cv-perspective-fab-label,
.cv-perspective-toggle.open .cv-perspective-fab-label {
    display: none;
}
/* Boutons (Résidence / Travail). */
.cv-perspective-btn {
    padding: 0.4rem 1rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: transparent;
    border: 1px solid rgba(53, 152, 192, 0.25);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    border-radius: 999px;
    transition: all 0.2s;
    align-items: center;
}
.cv-perspective-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cv-perspective-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
.cv-perspective-btn.active {
    background: var(--accent-data);
    color: var(--primary);
    border-color: var(--accent-data);
}
.cv-perspective-btn:hover:not(.active) {
    color: white;
    background: rgba(53, 152, 192, 0.14);
}
.cv-perspective-hint {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 300;
    font-family: 'IBM Plex Sans', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Variante light : pour pages à fond clair (editorial, dept).
   Override le fond dark par défaut. */
.cv-perspective-toggle-light {
    background: rgba(228, 218, 191, 0.94);
    border-color: rgba(14, 62, 73, 0.12);
    box-shadow: 0 6px 20px rgba(14, 62, 73, 0.08);
}
.cv-perspective-toggle-light .cv-perspective-fab-label {
    color: var(--secondary);
}
.cv-perspective-toggle-light .cv-perspective-fab-label::before {
    color: var(--accent-data);
}
.cv-perspective-toggle-light .cv-perspective-btn {
    border-color: rgba(14, 62, 73, 0.2);
    color: var(--secondary);
}
.cv-perspective-toggle-light .cv-perspective-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.cv-perspective-toggle-light .cv-perspective-btn:hover:not(.active) {
    background: rgba(14, 62, 73, 0.08);
    color: var(--primary);
}
.cv-perspective-toggle-light .cv-perspective-hint {
    color: var(--secondary);
}
.cv-perspective-toggle-light:hover,
.cv-perspective-toggle-light:focus-within,
.cv-perspective-toggle-light.open {
    background: rgba(228, 218, 191, 0.98);
}

/* ── 6. SCATTER PLOT EXPLORATEUR ─────────────────────────────── */
/* Présent sur theater, editorial, index des départements. */
.cv-scatter-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background: white;
    border: 1px solid rgba(14, 62, 73, 0.08);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(14, 62, 73, 0.05);
}
.cv-scatter-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.cv-scatter-search,
.cv-scatter-select {
    padding: 0.6rem 0.9rem;
    border: 1px solid rgba(14, 62, 73, 0.15);
    border-radius: 8px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.88rem;
    outline: none;
    background: white;
    color: var(--primary);
}
.cv-scatter-search { flex: 1; min-width: 200px; }
.cv-scatter-select { cursor: pointer; }
.cv-scatter-search:focus,
.cv-scatter-select:focus {
    border-color: var(--accent-data);
    box-shadow: 0 0 0 3px rgba(53, 152, 192, 0.1);
}
.cv-scatter-canvas-wrap {
    width: 100%;
    height: 520px;
    position: relative;
}
.cv-scatter-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(14, 62, 73, 0.08);
    justify-content: center;
}
.cv-scatter-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--secondary);
    font-family: 'IBM Plex Sans', sans-serif;
}
.cv-scatter-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.cv-scatter-hint {
    text-align: center;
    font-size: 0.78rem;
    color: var(--secondary);
    font-style: italic;
    margin-top: 0.75rem;
}

/* ── 7. BADGE UNITÉ (dans <h3> des cartes de graphiques) ─────── */
/* Scoped à .cv-page pour ne pas leak hors Trajectoires (dashboard_sirene.css
   et dashboard_mobpro.css définissent aussi un .badge, différent). */
.cv-page .badge {
    display: inline-block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--accent-data);
    color: var(--primary);
}

/* ── 8. LÉGENDE CARTE ────────────────────────────────────────── */
/* Générée dynamiquement par trajectoires_mobpro.js pour theater/editorial/dept.
   Sélecteurs unifiés .cv-legend-* + alias .thr-legend-* / .ed-legend-*
   pour compatibilité avec le HTML généré (qui utilise selon le template
   l'un ou l'autre préfixe). */
.cv-map-legend,
.thr-map-legend,
.ed-map-legend {
    max-width: 480px;
    margin: 0.75rem auto 0;
    text-align: center;
}
.cv-map-legend { color: rgba(255, 255, 255, 0.7); }
.thr-map-legend { color: rgba(255, 255, 255, 0.7); }
.ed-map-legend { color: var(--secondary); }

.cv-legend-title,
.thr-legend-title,
.ed-legend-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-family: 'IBM Plex Sans', sans-serif;
}

.cv-legend-bar,
.thr-legend-bar,
.ed-legend-bar {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    margin-bottom: 0.4rem;
}

.cv-legend-bar-drc,
.thr-legend-bar-drc,
.ed-legend-bar-drc {
    background: linear-gradient(to right, rgb(250, 225, 130), rgb(245, 160, 70), rgb(235, 60, 25));
}
.cv-legend-bar-evo,
.thr-legend-bar-evo,
.ed-legend-bar-evo {
    background: linear-gradient(to right, rgb(55, 195, 90), rgb(250, 220, 120), rgb(250, 45, 15));
}
.cv-legend-bar-flux,
.thr-legend-bar-flux,
.ed-legend-bar-flux {
    background: linear-gradient(to right, #ffffcc, #a1dab4, #41b6c4, #2c7fb8, #253494);
}

.cv-legend-ends,
.thr-legend-ends,
.ed-legend-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-family: 'IBM Plex Mono', monospace;
}

/* ── 9. TOOLTIP CARTE ────────────────────────────────────────── */
/* Suit la souris, affiché quand .visible est ajouté par trajectoires_mobpro.js. */
.cv-map-tooltip,
.thr-map-tooltip,
.ed-map-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--primary);
    color: white;
    padding: 0.7rem 1.1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(53, 152, 192, 0.2);
}
.cv-map-tooltip.visible,
.thr-map-tooltip.visible,
.ed-map-tooltip.visible {
    opacity: 1;
}
.cv-map-tooltip strong,
.thr-map-tooltip strong,
.ed-map-tooltip strong {
    color: var(--accent-data);
}

/* ── 10. RESPONSIVE COMMUN ───────────────────────────────────── */
@media (max-width: 1100px) {
    /* TOC : décaler à droite sur écrans medium pour ne pas chevaucher le contenu. */
    .cv-toc {
        right: 0.75rem;
        padding: 0.75rem 0.6rem;
        font-size: 0.68rem;
    }
}

@media (max-width: 768px) {
    /* Scatter : canvas plus court, contrôles empilés. */
    .cv-scatter-canvas-wrap { height: 380px; }
    .cv-scatter-controls { flex-direction: column; }
    .cv-scatter-search { min-width: 0; }

    /* TOC : masqué sur tablette/mobile (pas de place). */
    .cv-toc { display: none; }
}

@media (max-width: 600px) {
    /* Toggle FAB : hint masqué, boutons plus compacts. */
    .cv-perspective-hint { display: none !important; }
    .cv-perspective-btn { padding: 0.4rem 0.85rem; font-size: 0.62rem; }
}