/* ================================================================
   trajectoires/themes/sirene.css — Surcharges spécifiques SIRENE
   ================================================================
   Thématique SIRENE (tissu économique). Chargé APRÈS
   trajectoires/{shared,theater,dept,licence,epci}.css.
    Contient les deltas SIRENE extraits des diffs (phase 4.1) :
    - Depuis shared.css SIRENE : §9b timeline événementielle (53l),
      §11 mini-tableau taux employeurs (73l).
    - Depuis theater.css SIRENE : hero dual (25l), timeline-wrap (15l),
      légende carte SIRENE (25l), .thr-narration-chart max-width 1000px.
    - Depuis dept.css SIRENE : .cv-delta-badge.sm, .kpi-dual-note (19l),
      + §8-9 (20260922) : grille juridique thr-kpi fond clair + note chart.

   Note : à ce jour (phase 4), MOBPRO est un sous-ensemble strict de
   SIRENE — ce fichier ne contient que des ajouts SIRENE absents du
   commun. Les overrides theater sont scopés à .cv-theater pour ne pas
   leak sur l'EPCI (fond clair, .cv-epci) qui a sa propre légende.
   ================================================================ */

/* ── 1. TIMELINE ÉVÉNEMENTIELLE — overlay dots/cards ─────────── */
/* Styles partagés entre la landing theater (.thr-timeline-wrap, fond
   sombre) et la page départementale (.cv-chart-canvas, fond clair).
   L'overlay DOM se positionne par dessus le canvas ; les dots sont
   interactifs (hover → card visible). Couleurs compatibles avec les
   deux fonds (card sombre #0E3E49, dot orange #FF6E40). */
.thr-timeline-wrap,
.cv-chart-canvas.has-timeline-events,
.thr-narration-chart.has-timeline-events {
    position: relative;
}
.thr-timeline-events {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.thr-timeline-event {
    position: absolute; top: 0; bottom: 0;
    width: 2px; transform: translateX(-50%);
    pointer-events: none;
}
.thr-timeline-dot {
    position: absolute; top: -4px; left: 1px; transform: translateX(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: #FF6E40; border: 2px solid #0E3E49;
    pointer-events: auto; cursor: help;
}
.thr-timeline-card {
    position: absolute; top: 14px; left: 1px;
    transform: translateX(-50%);
    width: 220px; padding: 0.6rem 0.8rem;
    background: rgba(14, 62, 73, 0.95);
    border: 1px solid rgba(255,110,64,0.4);
    border-radius: 6px;
    opacity: 0; transition: opacity 0.15s ease;
    pointer-events: none; z-index: 5;
}
.thr-timeline-dot:hover + .thr-timeline-card { opacity: 1; }
.thr-timeline-year {
    display: block; font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem; font-weight: 700; color: #FF6E40;
}
.thr-timeline-title {
    display: block; font-size: 0.82rem; font-weight: 600;
    color: rgba(255,255,255,0.95); margin: 0.2rem 0 0.3rem;
}
.thr-timeline-desc {
    display: block; font-size: 0.75rem; font-weight: 300;
    color: rgba(255,255,255,0.65); line-height: 1.4;
}
@media (max-width: 640px) {
    .thr-timeline-card { width: 160px; }
}

/* ── 2. MINI-TABLEAU "TAUX EMPLOYEURS PAR FORME JURIDIQUE" ───── */
/* Densification dashboards (INVESTIGATION_SEUIL_EMPLOYEUR.md §4).
   Présent sur les 3 rendus SIRENE (theater, département, EPCI).
   Style aligné sur .card (global.css — souci 3a plan 20260909) : le wrap
   porte fond/bord/radius, la table devient transparente. Overrides
   .thr-narration-dark (theater) conservés pour le fond sombre. */
.thr-mini-table-wrap {
    margin: 2rem auto 0;
    max-width: 720px;
    overflow-x: auto;
    background: white;
    border: 1.5px solid rgba(53, 152, 192, 0.12);
    border-radius: 14px;
    padding: 0.25rem 1rem 0.5rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.thr-mini-table-wrap:hover {
    border-color: rgba(53, 152, 192, 0.3);
    box-shadow: 0 4px 16px rgba(53, 152, 192, 0.08);
}
.thr-narration-dark .thr-mini-table-wrap {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
}
.thr-narration-dark .thr-mini-table-wrap:hover {
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.thr-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    background: transparent;
    border: none;
}
.thr-narration-dark .thr-mini-table {
    background: transparent;
    border: none;
}
.thr-mini-table thead th {
    padding: 0.6rem 0.8rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    text-align: right;
}
.thr-narration-dark .thr-mini-table thead th {
    color: rgba(255,255,255,0.55);
    border-bottom-color: rgba(255,255,255,0.18);
}
.thr-mini-table thead th:first-child {
    text-align: left;
}
.thr-mini-table tbody td {
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-align: right;
}
.thr-narration-dark .thr-mini-table tbody td {
    border-bottom-color: rgba(255,255,255,0.08);
}
.thr-mini-table tbody td.label {
    text-align: left;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    color: var(--primary);
}
.thr-narration-dark .thr-mini-table tbody td.label {
    color: white;
}
.thr-mini-table tbody td.num {
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.thr-narration-dark .thr-mini-table tbody td.num {
    color: white;
}
.thr-mini-table tbody td.delta {
    color: var(--secondary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.thr-mini-table tbody tr:last-child td {
    border-bottom: none;
}
@media (max-width: 640px) {
    .thr-mini-table { font-size: 0.75rem; }
    .thr-mini-table thead th,
    .thr-mini-table tbody td { padding: 0.4rem 0.5rem; }
}

/* ── 3. THEATER : HERO DUAL (parc total / structurant) ───────── */
/* Scopé à .cv-theater pour ne pas leak sur l'EPCI (fond clair). */
.cv-theater .thr-dual-figures {
    display: flex; align-items: stretch; justify-content: center;
    gap: 0; max-width: 900px; margin: 0 auto 1.5rem;
}
.cv-theater .thr-dual-fig { flex: 1; padding: 1.5rem 1rem; text-align: center; }
.cv-theater .thr-dual-sep { width: 1px; background: rgba(255,255,255,0.18); margin: 0.5rem 0; }
.cv-theater .thr-dual-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.75); margin: 0 0 0.6rem;
}
.cv-theater .thr-dual-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700; line-height: 1; margin: 0 0 0.6rem;
}
.cv-theater .thr-dual-sub {
    font-size: 0.95rem; font-weight: 300;
    color: rgba(255,255,255,0.5); margin: 0;
}
@media (max-width: 640px) {
    .cv-theater .thr-dual-figures { flex-direction: column; gap: 0.5rem; }
    .cv-theater .thr-dual-sep { width: auto; height: 1px; margin: 0 1.5rem; }
}

/* ── 4. THEATER : NARRATION #parc élargie — hauteur du chart ─── */
/* La règle « chart élargi » (.thr-narration-inner 1400px, chart
   width 100% max-width none) vit désormais dans le commun
   theater.css (mutualisée avec l'IRVE 25/09 — même wrapper, même
   largeur). Ne reste ici que le delta SIRENE : hauteur 200px du
   chart base 100 (le commun ne pose pas de hauteur sur le cas
   élargi — c'est au thème de choisir selon son chart).
   L'overlay timeline se repositionne en % du wrapper au resize
   (sirene-theater.js), rien à adapter. Sur les autres pages (dept,
   epci), le commun (900px) s'applique. */
.cv-theater .thr-narration-inner .thr-narration-chart {
    height: 200px;
}

/* ── 4b. THEATER : notes & titre de tableau sur narration claire ── */
/* .thr-chart-note / .thr-phrase sont stylés pour fond sombre dans
   trajectoires/theater.css (rgba(255,255,255,…)) — quasi invisibles
   sur .thr-narration-light (fond --bg-main). Même correction que
   celle documentée dans trajectoires/epci.css §.thr-chart-note. */
.cv-theater .thr-narration-light .thr-chart-note {
    color: rgba(14, 62, 73, 0.55);
}
/* Variante bloc centré sous un chart (note d'aide légende). */
.cv-theater .thr-chart-note--block {
    margin: 1.25rem auto 0;
    text-align: center;
    max-width: 640px;
}
/* Titre du mini-tableau taux employeurs (section dé-salarisation). */
.cv-theater .thr-table-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--secondary);
    text-align: center;
    max-width: 720px;
    margin: 1.5rem auto 0.75rem;
}
/* Note sous le mini-tableau, centrée (définition « employeur »). */
.cv-theater .thr-chart-note--table {
    margin: 1.5rem auto 0;
    text-align: center;
    max-width: 640px;
}

/* ── 5. THEATER : TIMELINE-WRAP (étape 3) ────────────────────── */
/* Wrapper + hauteur canvas spécifiques theater (fond sombre). Les
   styles des dots/cards/events sont dans la section 1 ci-dessus
   (partagés avec la page départementale qui ajoute un overlay similaire
   sur chart-parc). Scopé à .cv-theater pour ne pas impacter l'EPCI. */
.cv-theater .thr-timeline-wrap {
    position: relative;
    width: 100%; max-width: 1000px;
    margin: 2.5rem auto 0;
    height: 240px;
}
.cv-theater .thr-timeline-wrap canvas { height: 240px !important; }

/* ── 6. THEATER : LÉGENDE CARTE SIRENE ───────────────────────── */
/* Le JS de la landing SIRENE injecte .thr-legend-bar (barre dégradé),
   .thr-legend-labels (bornes min/max) et .thr-legend-hint (légende sous
   la barre). .thr-legend-bar de base (sans suffixe -drc/-evo/-flux) n'a
   pas de background dans trajectoires/shared.css — on en ajoute un ici,
   calé sur la fonction colorFor() du JS (échelle log froid→chaud
   rgb(20,80,120) → rgb(220,150,70)). Scopé à .cv-theater pour ne pas
   écraser les valeurs fond clair de trajectoires/epci.css. */
.cv-theater .thr-map-section .thr-legend-bar {
    background: linear-gradient(to right, rgb(20,80,120), rgb(120,115,95), rgb(220,150,70));
}
.cv-theater .thr-legend-labels {
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.4rem;
}
.cv-theater .thr-legend-hint {
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.6rem;
}

/* ── 7. DEPT : DELTA-BADGE.SM + KPI-DUAL-NOTE (hero "parc structurant") ── */
/* Additions spécifiques aux pages départementales SIRENE (absentes du
   commun trajectoires/dept.css). */
.cv-delta-badge.sm {
    font-size: 0.7rem; padding: 0.15rem 0.45rem; margin-top: 0;
}

/* Hero dual : sous-chiffre « parc structurant » sous le KPI. */
.kpi-dual-note {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
    margin-top: 0.65rem; padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.18);
    font-size: 0.78rem;
}
.kpi-dual-label {
    color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.kpi-dual-val {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    color: rgba(255,255,255,0.85);
}

/* ── 8. DEPT : GRILLE SECTORIELLE thr-kpi-card (fond clair) ──── */
/* Variante fond clair des .thr-kpi-* de trajectoires/theater.css
    (§14, fond sombre : rgba(255,255,255,…) sur cartes translucides).
    Remplace l'ex-chart-juridique 100 % stacked (ADR-016) : outillage
    partagé avec la landing via build_secteurs_cards(dept_code=…) —
    mêmes cartes (parc employeur référence + 7 secteurs), mêmes
    métriques, même ordre. 4 colonnes comme la landing. */
.cv-dept .thr-kpi-grid--dept {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0.5rem 0 0;
}
.cv-dept .thr-kpi-card--dept {
    background: white;
    border: 1px solid rgba(14, 62, 73, 0.1);
    border-radius: 10px;
    padding: 1.1rem 1.1rem 0.9rem;
    position: relative;
    overflow: hidden;
}
.cv-dept .thr-kpi-card--dept::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--card-accent, #3598C0);
    opacity: 0.85;
}
/* Pas d'effet hover (mainteneur 22/09, transversal avec theater.css) :
    la carte n'est pas cliquable — le mouvement suggérerait une
    interaction qui n'existe pas. */
.cv-dept .thr-kpi-card--dept .thr-kpi-label {
    color: var(--secondary);
    margin-bottom: 0.5rem;
    min-height: 2.2em;
}
.cv-dept .thr-kpi-card--dept .thr-kpi-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
}
/* Même sémantique que la landing : vert = croissance, rouge = recul. */
.cv-dept .thr-kpi-card--dept .thr-kpi-value.pos { color: #27ae60; }
.cv-dept .thr-kpi-card--dept .thr-kpi-value.neg { color: #c0392b; }
.cv-dept .thr-kpi-card--dept .thr-kpi-caption {
    font-size: 0.72rem;
    color: rgba(14, 62, 73, 0.55);
    margin-top: 0.15rem;
}
.cv-dept .thr-kpi-card--dept .thr-kpi-second {
    font-size: 0.78rem;
    color: var(--secondary);
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(14, 62, 73, 0.1);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.cv-dept .thr-kpi-card--dept .thr-kpi-delta.pos { color: #27ae60; font-weight: 600; }
.cv-dept .thr-kpi-card--dept .thr-kpi-delta.neg { color: #c0392b; font-weight: 600; }
.cv-dept .thr-kpi-card--dept .thr-kpi-sub {
    font-size: 0.65rem;
    color: rgba(14, 62, 73, 0.5);
    margin-top: 0.3rem;
    font-family: 'IBM Plex Mono', monospace;
}

/* ── 9. DEPT : NOTE DE CHART (.thr-chart-note) ────────────────── */
/* .thr-chart-note est stylée pour fond sombre dans theater.css
    (rgba(255,255,255,0.5)) — invisible sur la card fond clair de la
    page dept. Même correction que §4b (narration claire). */
.cv-dept .thr-chart-note {
    color: rgba(14, 62, 73, 0.55);
}

@media (max-width: 768px) {
    .cv-dept .thr-kpi-grid--dept { grid-template-columns: 1fr; }
}