:root {
            --bg-page: #0a1520;
            --bg-card: #0f1d2c;
            --bg-card-hover: #12212f;
            --border-card: #1d2e42;
            --border-card-hover: #33475f;
            --bg-well: #16263a;
            --border-well: #24364d;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --text-sub: #64748b;
            --header-bg: rgba(10, 21, 32, 0.96);
            --pill-bg: #0f1d2c;
            --pill-active-bg: #ffffff;
            --pill-active-text: #0a1520;

            /* Charte Valora : bleu acier (#4A6785) + marine (#0D1B2A) + gris (#B7BEC7).
               Le bleu acier marque la SELECTION dans l'interface ; les donnees
               sont tracees en marine (voir getChartThemeColors dans app.js). */
            --brand: #7f9dbd;
            --brand-ink: #c3d2e2;
            --brand-soft: rgba(74, 103, 133, 0.28);
            --brand-line: rgba(127, 157, 189, 0.60);
            --navy: #8fb0d2;
            --navy-ink: #c3d2e2;
            --navy-soft: rgba(127, 163, 200, 0.14);
            --navy-line: rgba(127, 163, 200, 0.45);
            --gold: #d4a853;
            --gold-ink: #ead09a;
            --gold-soft: rgba(212, 168, 83, 0.16);
            --gold-line: rgba(212, 168, 83, 0.50);
            --teal: #5fb3ad;
            --teal-ink: #a3d8d3;
            --teal-soft: rgba(95, 179, 173, 0.16);
            --teal-line: rgba(95, 179, 173, 0.50);
        }

        html.light {
            --bg-page: #f8fafc;
            --bg-card: #ffffff;
            --bg-card-hover: #f1f5f9;
            --border-card: #e2e8f0;
            --border-card-hover: #cbd5e1;
            --bg-well: #f8fafc;
            --border-well: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #475569;
            --text-sub: #64748b;
            --header-bg: rgba(255, 255, 255, 0.96);
            --pill-bg: #f1f5f9;
            --pill-active-bg: #ffffff;
            --pill-active-text: #0f172a;

            /* Charte Valora (clair) */
            --brand: #4A6785;
            --brand-ink: #2f4a66;
            --brand-soft: #edf1f6;
            --brand-line: #4A6785;
            --navy: #0D1B2A;
            --navy-ink: #0D1B2A;
            --navy-soft: #eef2f7;
            --navy-line: #c9d3df;
            --gold: #a87a22;
            --gold-ink: #7a5600;
            --gold-soft: #fbf5e8;
            --gold-line: #c9a15a;
            --teal: #3e8a86;
            --teal-ink: #2c6965;
            --teal-soft: #ebf5f4;
            --teal-line: #3e8a86;
        }

        body {
            font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--bg-page);
            color: var(--text-main);
            transition: background-color 0.15s ease, color 0.15s ease;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Numerals tabulaires pour la précision comptable & RH */
        .tabular-nums, .v0-kpi-card p, .v0-kpi-card span, table td, table th {
            font-variant-numeric: tabular-nums;
        }

        ::selection {
            background-color: rgba(74, 103, 133, 0.28);
            color: inherit;
        }

        button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 2px solid var(--brand);
            outline-offset: 1px;
        }

        header {
            background-color: var(--header-bg) !important;
            border-color: var(--border-card) !important;
            transition: background-color 0.15s ease, border-color 0.15s ease;
        }

        /* V0 Executive Card Styles : élévation sobre à 1 seul niveau (bordure + ombre douce) */
        .v0-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 0.75rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }
        .v0-card:hover {
            border-color: var(--border-card-hover);
        }

        .scrollbar-none::-webkit-scrollbar { display: none; }
        .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

        .sticky-filter-bar {
            position: sticky;
            top: 57px;
            z-index: 40;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        @media (min-width: 768px) {
            .sticky-filter-bar {
                top: 61px;
            }
        }
        html:not(.light) .sticky-filter-bar {
            background-color: rgba(15, 29, 44, 0.96) !important;
            border-color: var(--border-card) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }
        html.light .sticky-filter-bar {
            background-color: rgba(255, 255, 255, 0.96) !important;
            border-color: var(--border-card) !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        }

        html.light #nav-paie-dropdown {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1) !important;
        }
        html.light #nav-paie-dropdown button:hover {
            background-color: #f1f5f9 !important;
        }
        html.light #nav-paie-dropdown .text-slate-100 {
            color: #0f172a !important;
        }
        html.light #nav-paie-dropdown .text-slate-400 {
            color: #475569 !important;
        }

        /* ==========================================================================
           Pastilles de selection (charte Valora : bleu acier)
           Le bleu acier signale ce qui est SELECTIONNE ; il ne sert jamais de couleur de
           donnee dans les graphiques de premier plan (marine en tete), de sorte que
           le filtre actif et la serie affichee ne se confondent pas.
           ========================================================================== */
        .filter-pill-selected,
        .company-pill.active,
        .timeline-year-btn.active,
        .timeline-quarter-btn.active,
        .timeline-month-btn.active,
        #timeline-btn-ytd.active {
            background-color: var(--brand-soft) !important;
            background-image: none !important;
            border: 1px solid var(--brand-line) !important;
            color: var(--brand-ink) !important;
            font-weight: 600 !important;
            box-shadow: none !important;
        }
        .filter-pill-selected span,
        .company-pill.active span,
        .timeline-year-btn.active span,
        .timeline-quarter-btn.active span,
        .timeline-month-btn.active span,
        #timeline-btn-ytd.active span {
            color: var(--brand-ink) !important;
        }
        .filter-pill-selected i,
        .company-pill.active i,
        .timeline-year-btn.active i,
        #timeline-btn-ytd.active i {
            color: var(--brand) !important;
        }
        html.light .filter-pill-selected,
        html.light .company-pill.active,
        html.light .timeline-year-btn.active,
        html.light .timeline-quarter-btn.active,
        html.light .timeline-month-btn.active,
        html.light #timeline-btn-ytd.active {
            box-shadow: 0 1px 2px rgba(74, 103, 133, 0.12) !important;
        }

        /* Badge N / N-1 dans les boutons d'annee */
        .timeline-year-tag.active {
            background-color: var(--navy-soft) !important;
            color: var(--navy-ink) !important;
            border: 1px solid var(--navy-line) !important;
        }
        /* Badge inactif : portait des classes sombres (bg-slate-800) meme en theme
           clair, d'ou un bloc noir illisible a cote de l'annee. */
        html.light .timeline-year-tag:not(.active) {
            background-color: #eef2f6 !important;
            color: #475569 !important;
            border: 1px solid #d9e0e8 !important;
        }

        /* Boutons inactifs en Mode Clair */
        html.light .company-pill:not(.active),
        html.light .timeline-year-btn:not(.active),
        html.light .timeline-quarter-btn:not(.active),
        html.light .timeline-month-btn:not(.active),
        html.light #timeline-btn-ytd:not(.active) {
            background-color: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            color: #475569 !important;
        }
        html.light .company-pill:not(.active) span,
        html.light .timeline-year-btn:not(.active) span,
        html.light .timeline-quarter-btn:not(.active) span,
        html.light .timeline-month-btn:not(.active) span,
        html.light #timeline-btn-ytd:not(.active) span {
            color: #475569 !important;
        }
        html.light .company-pill:not(.active):hover,
        html.light .timeline-year-btn:not(.active):hover,
        html.light .timeline-quarter-btn:not(.active):hover,
        html.light .timeline-month-btn:not(.active):hover,
        html.light #timeline-btn-ytd:not(.active):hover {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
        }
        html.light .company-pill:not(.active):hover span,
        html.light .timeline-year-btn:not(.active):hover span,
        html.light .timeline-quarter-btn:not(.active):hover span,
        html.light .timeline-month-btn:not(.active):hover span,
        html.light #timeline-btn-ytd:not(.active):hover span {
            color: #0f172a !important;
        }

        /* Bouton principal (Export Presentation) et pastilles de marque */
        .btn-brand {
            background-color: var(--brand) !important;
            border: 1px solid var(--brand) !important;
            color: #ffffff !important;
        }
        .btn-brand:hover { filter: brightness(1.08); }
        .brand-chip {
            background-color: var(--brand-soft);
            border: 1px solid var(--brand-line);
            color: var(--brand);
        }
        .brand-text { color: var(--brand) !important; }
        .brand-text-ink { color: var(--brand-ink) !important; }
        .navy-text { color: var(--navy) !important; }

        /* Tuiles de categorie de formation : memes trois couleurs que le graphique */
        .cat-tile { border: 1px solid; }
        .cat-tile-metier { background: var(--navy-soft); border-color: var(--navy-line); color: var(--navy-ink); }
        .cat-tile-metier:hover { border-color: var(--navy); }
        .cat-tile-soft { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
        .cat-tile-soft:hover { border-color: var(--gold); }
        .cat-tile-hsse { background: var(--teal-soft); border-color: var(--teal-line); color: var(--teal-ink); }
        .cat-tile-hsse:hover { border-color: var(--teal); }

        /* Controles d'analyse (curseurs X / Y) : une seule teinte. Chaque graphique
           portait la sienne (rose, ambre, violet, cyan) sans aucun sens. */
        input[type="range"] { accent-color: var(--navy) !important; }

        /* Icones de titre de graphique et pastilles d'icone des cartes KPI : couleur
           de la mesure principale. Ce sont des repères, pas des statuts. */
        .v0-card h3 > i:first-child,
        .v0-kpi-card .icon-box { color: var(--navy) !important; }

        /* Anneau et barre de progression : marine, pas cyan ni vert. Un trait vert
           sous une cible non atteinte annoncait un succes que le chiffre dement. */
        .ring-navy { stroke: var(--navy); }
        .bar-navy { background-color: var(--navy); }

        /* Teintes plus foncees (500 a 700) des memes familles decoratives : elles
           restaient violettes ou indigo, par exemple sur le bouton "Masquer" des
           tableaux deplies. Meme regle que pour les teintes claires : marine. */
        .text-indigo-500, .text-indigo-600, .text-indigo-700,
        .text-purple-500, .text-purple-600, .text-blue-500, .text-blue-600,
        .text-cyan-200, .text-sky-200, .text-blue-200, .text-purple-200, .text-teal-200,
        .text-cyan-500, .text-cyan-600, .text-sky-500, .text-sky-600, .text-teal-500, .text-teal-600,
        .dark\:text-indigo-300, .dark\:text-indigo-400, .dark\:text-purple-400, .dark\:text-cyan-300 { color: var(--navy-ink) !important; }
        .border-indigo-500\/30, .border-indigo-500\/40, .border-purple-500\/30, .border-cyan-500\/30 { border-color: var(--navy-line) !important; }
        .bg-cyan-500\/20 { background-color: var(--navy-soft) !important; }

        /* Interactive Category Filter Pills for Formation Thématiques */
        .thematique-cat-btn {
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 500;
            border-radius: 5px;
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: 1px solid transparent;
            user-select: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: transparent;
        }
        html:not(.light) .thematique-cat-btn {
            color: #94a3b8;
        }
        html:not(.light) .thematique-cat-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.06);
        }
        html.light .thematique-cat-btn {
            color: #64748b;
        }
        html.light .thematique-cat-btn:hover {
            color: #0f172a;
            background: rgba(0, 0, 0, 0.05);
        }

        .thematique-cat-btn.active-all {
            background: rgba(148, 163, 184, 0.10) !important;
            color: #cbd5e1 !important;
            border-color: rgba(148, 163, 184, 0.25) !important;
            font-weight: 600;
        }
        html.light .thematique-cat-btn.active-all {
            background: #f1f5f9 !important;
            color: #475569 !important;
            border-color: #cbd5e1 !important;
        }

        /* Metier = marine, Soft skills = or, HSSE = sarcelle : ce sont les memes
           trois couleurs que dans le graphique de repartition des categories. */
        .thematique-cat-btn.active-metier {
            background: var(--navy-soft) !important;
            color: var(--navy-ink) !important;
            border-color: var(--navy-line) !important;
            font-weight: 600;
        }
        html.light .thematique-cat-btn.active-metier { border-color: #2a5caa !important; }

        .thematique-cat-btn.active-soft {
            background: var(--gold-soft) !important;
            color: var(--gold-ink) !important;
            border-color: var(--gold-line) !important;
            font-weight: 600;
        }

        .thematique-cat-btn.active-hsse {
            background: var(--teal-soft) !important;
            color: var(--teal-ink) !important;
            border-color: var(--teal-line) !important;
            font-weight: 600;
        }

        html.light #thematiques-cat-filter-container {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
        }
        html.light #thematiques-cat-filter-container .separator-bar {
            color: #cbd5e1 !important;
        }

        .v0-kpi-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 0.75rem;
            padding: 1.25rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            transition: border-color 0.15s ease, background-color 0.15s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .v0-kpi-card:hover {
            border-color: var(--border-card-hover);
        }

        .icon-box {
            background-color: var(--bg-well);
            border: 1px solid var(--border-well);
            border-radius: 0.5rem;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 0.75rem;
        }

        .tab-btn {
            border-radius: 9999px;
            padding: 0.4rem 1.15rem;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-muted);
            transition: all 0.15s ease-in-out;
            cursor: pointer;
            border: none;
            outline: none;
        }
        .tab-btn:hover {
            color: var(--text-main);
            background-color: rgba(125, 125, 125, 0.08);
        }
        .tab-btn.active {
            background-color: var(--pill-active-bg) !important;
            color: var(--pill-active-text) !important;
            font-weight: 600 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: var(--bg-page);
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: var(--border-card);
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: var(--border-card-hover);
        }

        .ring-bg {
            stroke: rgba(125, 125, 125, 0.15);
        }

        .ring-circle {
            transition: stroke-dashoffset 0.8s ease-in-out;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }

        /* ==========================================================================
           Palette Harmonisée : Contrastes vérifiés WCAG AA (≥ 4.5:1)
           ========================================================================== */
        /* Textes secondaires calibrés en Mode Sombre */
        html:not(.light) .text-slate-400 { color: #94a3b8; }
        html:not(.light) .text-slate-500 { color: #8b95a8; }
        html:not(.light) .text-emerald-400 { color: #34d399; }
        html:not(.light) .text-amber-400 { color: #fbbf24; }
        html:not(.light) .text-rose-400 { color: #f43f5e; }

        /* Teintes decoratives (indigo, violet, cyan, bleu, ciel, sarcelle) : elles ne
           portent aucun sens metier et faisaient cohabiter une dizaine de teintes a
           l'ecran. Elles sont ramenees a la charte : bleu marine pour l'information,
           sans toucher au vert / ambre / rouge, reserves aux statuts. */
        html:not(.light) .text-indigo-200, html:not(.light) .text-indigo-300, html:not(.light) .text-indigo-400,
        html:not(.light) .text-purple-300, html:not(.light) .text-purple-400, html:not(.light) .text-purple-500,
        html:not(.light) .text-cyan-300, html:not(.light) .text-cyan-400,
        html:not(.light) .text-blue-300, html:not(.light) .text-blue-400,
        html:not(.light) .text-sky-300, html:not(.light) .text-sky-400,
        html:not(.light) .text-teal-300, html:not(.light) .text-teal-400 { color: var(--navy-ink); }

        /* Palette Mode Clair */
        html.light .bg-\[\#0a1520\] { background-color: var(--bg-page) !important; }
        html.light .bg-\[\#0f1d2c\] { background-color: var(--bg-card) !important; }
        html.light .bg-\[\#16263a\] { background-color: var(--bg-well) !important; }
        html.light .border-\[\#1d2e42\] { border-color: var(--border-card) !important; }
        html.light .border-\[\#24364d\] { border-color: var(--border-well) !important; }
        html.light .text-white { color: #0f172a !important; }
        html.light .text-slate-100 { color: #0f172a !important; }
        html.light .text-slate-200 { color: #1e293b !important; }
        html.light .text-slate-300 { color: #334155 !important; }
        html.light .text-slate-400 { color: #475569 !important; } /* Ratio 6.5:1 sur fond blanc */
        html.light .text-slate-500 { color: #64748b !important; } /* Ratio 4.6:1 sur fond blanc */
        html.light .hover\:bg-\[\#132436\]:hover { background-color: #f8fafc !important; }
        html.light .hover\:bg-slate-800\/40:hover { background-color: #f8fafc !important; }
        html.light .divide-\[\#1d2e42\]\/60 > * + * { border-color: #e2e8f0 !important; }
        html.light .ring-bg { stroke: #e2e8f0 !important; }
        html.light select, html.light input { color: #0f172a !important; background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
        html.light select option { background-color: #ffffff !important; color: #0f172a !important; }
        html.light nav { background-color: var(--pill-bg) !important; border-color: var(--border-card) !important; }
        
        /* Tableaux : en-têtes sobres, nets et lisibles */
        html.light th { color: #334155 !important; background-color: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; font-weight: 600 !important; }

        /* KPI Cards : chiffres principaux faisant autorité en Slate sombre, icônes feutrées */
        html.light .v0-kpi-card p { color: #0f172a !important; }
        /* Meme regle en sombre : les chiffres principaux des cartes KPI sont tous en
           encre claire, au lieu d'une couleur par carte (vert, bleu, ambre...) qui
           suggerait un statut que rien ne justifiait. */
        html:not(.light) .v0-kpi-card p { color: var(--text-main) !important; }
        html.light .icon-box { background-color: #f8fafc !important; border-color: #e2e8f0 !important; color: #475569 !important; }

        /* Couleurs typographiques feutrées et contrastées (WCAG AA ≥ 4.5:1) */
        html.light .text-indigo-200, html.light .text-indigo-300, html.light .text-indigo-400,
        html.light .text-purple-300, html.light .text-purple-400, html.light .text-purple-500,
        html.light .text-cyan-300, html.light .text-cyan-400,
        html.light .text-blue-300, html.light .text-blue-400,
        html.light .text-sky-300, html.light .text-sky-400,
        html.light .text-teal-300, html.light .text-teal-400 { color: var(--navy-ink) !important; }
        html.light .text-emerald-300, html.light .text-emerald-400 { color: #047857 !important; }
        html.light .text-amber-300, html.light .text-amber-400 { color: #b45309 !important; }
        html.light .text-rose-300, html.light .text-rose-400 { color: #be123c !important; }

        /* Badges & fonds pastels légers */
        html.light .bg-indigo-950\/80, html.light .bg-indigo-950\/60, html.light .bg-indigo-950\/40,
        html.light .bg-purple-950\/60, html.light .bg-purple-950\/40,
        html.light .bg-cyan-950\/80, html.light .bg-cyan-950\/60, html.light .bg-cyan-950\/40 { background-color: var(--navy-soft) !important; border-color: var(--navy-line) !important; color: var(--navy-ink) !important; }
        html.light .bg-emerald-950\/80, html.light .bg-emerald-950\/60, html.light .bg-emerald-950\/40 { background-color: #ecfdf5 !important; border-color: #d1fae5 !important; color: #047857 !important; }
        html.light .bg-rose-950\/80, html.light .bg-rose-950\/60, html.light .bg-rose-950\/40 { background-color: #fff1f2 !important; border-color: #ffe4e6 !important; color: #be123c !important; }
        html.light .bg-amber-950\/80, html.light .bg-amber-950\/60, html.light .bg-amber-950\/40 { background-color: #fffbeb !important; border-color: #fef3c7 !important; color: #b45309 !important; }
        html.light input[type="range"] { background-color: #cbd5e1 !important; }

        /* ==========================================================================
           Table Summary Rows & Action Buttons (Visites Médicales / Synthèses)
           ========================================================================== */

        /* Boutons d'action dans les tableaux (ex: Voir nominatif / Voir tout) */
        .btn-nominatif-action {
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.15s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        html:not(.light) .btn-nominatif-action {
            background-color: rgba(5, 150, 105, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #6ee7b7;
        }
        html:not(.light) .btn-nominatif-action:hover {
            background-color: rgba(5, 150, 105, 0.22);
            border-color: rgba(16, 185, 129, 0.5);
            color: #ffffff;
        }
        html.light .btn-nominatif-action {
            background-color: #ecfdf5;
            border: 1px solid #a7f3d0;
            color: #047857;
        }
        html.light .btn-nominatif-action:hover {
            background-color: #d1fae5;
            border-color: #6ee7b7;
            color: #064e3b;
        }

        /* Ligne de synthèse TOTAL GROUPE */
        html:not(.light) .table-total-row {
            background-color: rgba(25, 32, 51, 0.75) !important;
            border-top: 1px solid #334155 !important;
            color: #ffffff !important;
            font-weight: 600;
        }

        html.light .table-total-row {
            background-color: #f1f5f9 !important;
            border-top: 1px solid #cbd5e1 !important;
            color: #0f172a !important;
            font-weight: 600;
        }
        html.light .table-total-row td,
        html.light .table-total-row td.text-white {
            color: #0f172a !important;
        }

        /* Badges de taux & statut en mode clair */
        html.light .bg-emerald-500\/10 { background-color: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #047857 !important; }
        html.light .bg-emerald-500\/20 { background-color: #d1fae5 !important; border-color: #6ee7b7 !important; color: #065f46 !important; }
        html.light .bg-amber-500\/10 { background-color: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
        html.light .bg-amber-500\/20 { background-color: #fef3c7 !important; border-color: #f59e0b !important; color: #78350f !important; }
        html.light .bg-rose-500\/10 { background-color: #fff1f2 !important; border-color: #fecdd3 !important; color: #9f1239 !important; }
        html.light .bg-rose-500\/20 { background-color: #ffe4e6 !important; border-color: #f43f5e !important; color: #881337 !important; }

        /* =============================================================================
           TABLEAUX REPLIABLES SOUS GRAPHIQUES (ÉLÉGANTS, COMPACTS & AÉRÉS)
           ============================================================================= */
        .collapsible-table-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.38rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 0.5rem;
            border: 1px solid var(--border-well);
            background-color: rgba(25, 32, 51, 0.45);
            color: var(--text-muted);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .collapsible-table-btn:hover {
            background-color: var(--bg-well);
            color: var(--text-main);
            border-color: var(--border-card-hover);
        }
        .collapsible-table-btn.active-expanded {
            background-color: var(--navy-soft) !important;
            border-color: var(--navy-line) !important;
            color: var(--text-main) !important;
        }

        html.light .collapsible-table-btn {
            background-color: #f8fafc;
            border-color: #e2e8f0;
            color: #64748b;
        }
        html.light .collapsible-table-btn:hover {
            background-color: #f1f5f9;
            border-color: #cbd5e1;
            color: #0f172a;
        }
        html.light .collapsible-table-btn.active-expanded {
            background-color: var(--navy-soft) !important;
            border-color: var(--navy-line) !important;
            color: var(--navy-ink) !important;
        }

        .collapsible-table-wrapper {
            max-height: 290px;
            overflow-y: auto;
            overflow-x: auto;
            border-radius: 0.625rem;
            border: 1px solid var(--border-well);
            margin-top: 0.5rem;
            background-color: rgba(15, 29, 44, 0.4);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        html.light .collapsible-table-wrapper {
            background-color: #ffffff;
            border-color: #e2e8f0;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
        }

        .compact-subtle-table {
            width: 100%;
            text-align: left;
            font-size: 0.72rem;
            line-height: 1.35;
            border-collapse: separate;
            border-spacing: 0;
        }
        .compact-subtle-table thead th {
            position: sticky;
            top: 0;
            z-index: 10;
            padding: 0.45rem 0.65rem !important;
            font-size: 11px !important;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background-color: #132436 !important;
            border-bottom: 1px solid var(--border-well) !important;
            color: #94a3b8 !important;
        }
        html.light .compact-subtle-table thead th {
            background-color: #f8fafc !important;
            border-bottom: 1px solid #e2e8f0 !important;
            color: #64748b !important;
        }
        .compact-subtle-table tbody td {
            padding: 0.38rem 0.65rem !important;
            border-bottom: 1px solid rgba(29, 35, 55, 0.45);
        }
        html.light .compact-subtle-table tbody td {
            border-bottom: 1px solid #f1f5f9;
        }
        .compact-subtle-table tbody tr:hover td {
            background-color: var(--navy-soft);
        }
        html.light .compact-subtle-table tbody tr:hover td {
            background-color: #f8fafc;
        }

        /* =============================================================================
           TABLEAUX DE DETAIL ALLEGES
           ============================================================================= */
        /* La barre grise pleine largeur devient une simple ligne d'accordeon. */
        .collapsible-table-btn,
        .collapsible-table-btn:hover,
        .collapsible-table-btn.active-expanded,
        html.light .collapsible-table-btn,
        html.light .collapsible-table-btn:hover,
        html.light .collapsible-table-btn.active-expanded {
            background-color: transparent !important;
            border: none !important;
            border-top: 1px solid var(--border-well) !important;
            border-radius: 0 !important;
            padding: 0.55rem 0.15rem !important;
        }
        .collapsible-table-btn.active-expanded { border-top-color: var(--navy-line) !important; }

        /* Le cadre et l'ombre interieure du tableau deplie disparaissent. */
        .collapsible-table-wrapper {
            border: none !important;
            box-shadow: none !important;
            background-color: transparent !important;
            margin-top: 0.25rem;
        }

        /* ---- Habillage sobre des tableaux de detail : couleur seulement ou elle a un sens ---- */
        .collapsible-table-wrapper .pastille-serie {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
            vertical-align: middle;
        }

        /* Solde et ecart : une pastille, seule couleur du tableau */
        .collapsible-table-wrapper .pill-solde {
            display: inline-block;
            min-width: 2.4rem;
            padding: 1px 8px;
            border-radius: 999px;
            font-weight: 600;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .pill-solde.pos { background-color: #e9f6ee; color: #14693d; }
        .pill-solde.neg { background-color: #fdecec; color: #a32d2d; }
        .pill-solde.nul { color: var(--text-sub); font-weight: 500; }
        html:not(.light) .pill-solde.pos { background-color: rgba(42, 157, 92, 0.16); color: #86e0ae; }
        html:not(.light) .pill-solde.neg { background-color: rgba(208, 59, 59, 0.18); color: #f4a0a0; }

        /* En-tetes sans fond propre (celui de la carte), ligne de total : un filet et du gras */
        html .collapsible-table-wrapper .compact-subtle-table thead th {
            background-color: var(--bg-card) !important;
            border-bottom: 1px solid var(--border-strong) !important;
        }
        html .collapsible-table-wrapper .table-total-row {
            background-color: transparent !important;
            border-top: 1px solid var(--border-strong) !important;
        }
        .collapsible-table-wrapper .table-total-row td { font-weight: 600; }

        /* ---- Barre de filtres : etiquettes alignees, mois a venir en pointille ---- */
        .filter-label {
            display: inline-block;
            min-width: 3.6rem;
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-sub);
        }
        #sourcesBadge:empty { display: none; }
        html.light .timeline-month-btn.a-venir,
        html:not(.light) .timeline-month-btn.a-venir {
            background-color: transparent !important;
            border-style: dashed !important;
            opacity: 0.75;
        }
        html.light .timeline-month-btn.a-venir span { color: var(--text-sub) !important; }
        .timeline-month-btn.a-venir:hover { opacity: 1; }

        /* ---- Filtres d'etat des visites medicales : contrastes lisibles (theme clair) ---- */
        html.light .pill-visite-btn:not(.active) { background-color: #ffffff !important; color: #475569 !important; border-color: #d9e0ea !important; }
        html.light .pill-visite-btn:not(.active):hover { color: #0f172a !important; background-color: #f3f6fa !important; }
        html.light .pill-visite-btn:not(.active) [id^="pill-count-"] { background-color: #e6ebf2 !important; color: #334155 !important; }
        html.light .pill-visite-btn.active [id^="pill-count-"] { color: #ffffff !important; }
        html.light #pill-visites-retard-nonfait.active, html.light #pill-visites-retard.active { background-color: #fef3c7 !important; color: #7c2d12 !important; border-color: #d97706 !important; }
        html.light #pill-visites-retard-nonfait.active [id^="pill-count-"], html.light #pill-visites-retard.active [id^="pill-count-"] { background-color: #b45309 !important; }
        html.light #pill-visites-noneff.active { background-color: #ffe4e6 !important; color: #881337 !important; border-color: #e11d48 !important; }
        html.light #pill-visites-noneff.active [id^="pill-count-"] { background-color: #be123c !important; }
        html.light #pill-visites-ajour.active { background-color: #d1fae5 !important; color: #064e3b !important; border-color: #059669 !important; }
        html.light #pill-visites-ajour.active [id^="pill-count-"] { background-color: #047857 !important; }
        html.light #pill-visites-all.active { background-color: #e6edf8 !important; color: var(--navy) !important; border-color: var(--navy) !important; }
        html.light #pill-visites-all.active [id^="pill-count-"] { background-color: var(--navy) !important; }
        /* Theme sombre : pastille de compteur sur fond neutre plus clair, texte net */
        html:not(.light) .pill-visite-btn:not(.active) [id^="pill-count-"] { background-color: #2a3350 !important; color: #e2e8f0 !important; }


        /* =========================================================================
         *  ECHELLE TYPOGRAPHIQUE (une seule famille : Inter)
         *  Corps 12 px, libelles et en-tetes 11 px en majuscules, notes 10 px (plancher)
         *  Graisses : 400 texte, 500 secondaire, 600 libelles, 700 chiffres et titres
         * ====================================================================== */
        /* Une seule famille : plus de police a chasse fixe, les chiffres restent alignes */
        .font-mono, code, kbd, pre, samp {
            font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
            font-variant-numeric: tabular-nums;
        }
        /* Graisse maximale : 700 (pas de 800 ni 900) */
        .font-extrabold, .font-black { font-weight: 700 !important; }
        /* Plancher de lisibilite : rien en dessous de 10 px */
        .text-\[9px\], .text-\[8px\] { font-size: 10px !important; }
        /* Libelles en majuscules : meme espacement partout, meme taille pour les en-tetes */
        .uppercase, th { letter-spacing: 0.05em !important; }
        th { font-size: 11px; font-weight: 600; }
        .uppercase.text-\[10px\] { font-size: 11px !important; }
        /* Chiffres alignes verticalement dans les tableaux et les cartes */
        td, th, .v0-kpi-card p, .v0-kpi-card span { font-variant-numeric: tabular-nums; }
        /* Grands chiffres : meme serrage */
        .text-xl, .text-2xl, .text-3xl { letter-spacing: -0.02em; }


        /* =========================================================================
         *  MOUVEMENT : leger, composite GPU (opacity et transform uniquement),
         *  joue a l'apparition d'une vue, jamais en boucle.
         * ====================================================================== */
        @keyframes vue-entree {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes carte-entree {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: none; }
        }
        .tab-view:not(.hidden) { animation: vue-entree 220ms ease-out both; }
        .tab-view:not(.hidden) .v0-kpi-card,
        .tab-view:not(.hidden) .v0-card { animation: carte-entree 320ms ease-out both; }
        .tab-view:not(.hidden) .v0-kpi-card:nth-child(2), .tab-view:not(.hidden) > .v0-card:nth-child(2) { animation-delay: 40ms; }
        .tab-view:not(.hidden) .v0-kpi-card:nth-child(3), .tab-view:not(.hidden) > .v0-card:nth-child(3) { animation-delay: 80ms; }
        .tab-view:not(.hidden) .v0-kpi-card:nth-child(4), .tab-view:not(.hidden) > .v0-card:nth-child(4) { animation-delay: 120ms; }
        .tab-view:not(.hidden) .v0-kpi-card:nth-child(n+5), .tab-view:not(.hidden) > .v0-card:nth-child(n+5) { animation-delay: 160ms; }
        /* Cartes imbriquees : pas de seconde entree */
        .v0-card .v0-card, .v0-card .v0-kpi-card { animation: none !important; }

        /* Micro-interactions */
        .btn-brand, .company-pill, .timeline-month-btn, .timeline-year-btn, .timeline-quarter-btn, .pill-visite-btn { transition: transform 120ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
        .btn-brand:active, .company-pill:active, .timeline-month-btn:active, .timeline-year-btn:active, .timeline-quarter-btn:active, .pill-visite-btn:active { transform: scale(0.97); }

        /* Reglage d'accessibilite du systeme : aucun mouvement */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
        }

        /* Les points d'etat ne clignotent que 3 fois (pas de boucle permanente) */
        .animate-pulse { animation-iteration-count: 3 !important; }

        /* Interrupteur de secours : page ouverte avec ?sans-animation */
        html.sans-animation *, html.sans-animation *::before, html.sans-animation *::after { animation: none !important; transition: none !important; }


        /* ==========================================================================
           Marque Valora (version demonstration)
           ========================================================================== */
        .valora-mark {
            background-color: #F4F6F8;
            border: 1px solid #B7BEC7;
        }
        .demo-badge {
            background-color: var(--brand-soft);
            color: var(--brand-ink);
            border: 1px solid var(--brand-line);
        }
        #btnBackToDemo:not(.hidden) { display: inline-flex; }
        /* Police Jost plus large qu'Inter : l'en-tete ne doit jamais passer a la ligne */
        header .tab-btn, header button, header .valora-brand, #demoBadge { white-space: nowrap; }