/*! Vauban — Couche de tokens sémantiques UNIFIÉE (source of truth du mode sombre)
 * =====================================================================
 * Objectif : UNE seule palette sombre canonique pour les 3 espaces
 * (Conciergerie, Propriétaire, Équipe Ménage). Les namespaces existants
 * (`--v-*`, `--vad-*`, `--vpct-*`, `--color-*`) deviennent des ALIAS de
 * cette couche (`--v-bg: var(--vt-bg-page)` …) → palette harmonisée sans
 * réécrire les milliers de règles.
 *
 * RÈGLES :
 *  - Ce fichier ne définit QUE des variables `--vt-*` (aucune règle de
 *    surface) → il est inerte tant qu'un namespace ne l'aliase pas.
 *  - Les `--vt-*` ne sont définis QUE dans les états SOMBRES → le mode
 *    clair n'est jamais affecté (les blocs clairs des namespaces gardent
 *    leurs valeurs littérales, non aliasées).
 *  - Bloc « dark explicite » + copie « auto (OS sombre) » à garder
 *    STRICTEMENT identiques.
 *  - Charger ce fichier EN PREMIER (les feuilles de thème en dépendent).
 *
 * Palette canonique = palette front consensuelle (#0F172A / #1E293B /
 * #334155 …), déjà partagée Propriétaire + Ménage ; la Conciergerie s'y
 * aligne. Contrastes visés WCAG AA (texte ≥ 4.5:1 sur surfaces sombres).
 * ===================================================================== */

/* ===================== Variables canoniques (dark explicite) =====================
 * Couvre tous les déclencheurs sombres actuels des 3 espaces + le futur
 * attribut unifié [data-theme="dark"] (Phase 1). `html.vauban-dark` sert
 * d'ancêtre pour les descendants `.vauban-dark .vauban-dashboard-wrapper`. */
.vpc-app[data-vpc-theme="dark"],
.vauban-dashboard-wrapper.v-dark,
html.vauban-dark,
[data-theme="dark"] {
    /* Fonds & élévation (pas de noir pur ; surfaces de plus en plus claires) */
    --vt-bg-page: #0F172A;
    --vt-inset: #182234;
    --vt-surface-1: #1E293B;
    --vt-surface-2: #334155;
    --vt-elevated: #3B4A60;

    /* Texte */
    --vt-text: #F1F5F9;
    --vt-text-soft: #CBD5E1;
    --vt-muted: #94A3B8;

    /* Bordures */
    --vt-border: #334155;
    --vt-border-strong: #475569;

    /* Marque / primaire */
    --vt-primary: #818CF8;
    --vt-primary-strong: #6366F1;
    --vt-primary-bg: rgba(99, 102, 241, 0.18);
    --vt-primary-action: #4F46E5;   /* fond bouton CTA — indigo sombre : WCAG AA avec texte blanc (7.5:1) */

    /* Sémantique (texte + fond translucide) */
    --vt-success: #34D399;
    --vt-success-bg: rgba(16, 185, 129, 0.15);
    --vt-warning: #FBBF24;
    --vt-warning-bg: rgba(245, 158, 11, 0.15);
    --vt-danger: #F87171;
    --vt-danger-bg: rgba(248, 113, 113, 0.15);
    --vt-info: #818CF8;
    --vt-info-bg: rgba(99, 102, 241, 0.18);

    /* Badges de notification (pastilles sidebar) — couleurs claires sur fond sombre */
    --vt-badge-danger: #F87171;
    --vt-badge-success: #34D399;
    --vt-badge-warning: #FBBF24;
    --vt-badge-neutral-bg: rgba(255, 255, 255, 0.18);
    --vt-badge-neutral-fg: rgba(255, 255, 255, 0.80);
    /* Texte foncé pour les pastilles vives success/warning (sinon blanc sur vert/jaune vif = illisible en sombre) */
    --vt-badge-success-fg: #052E16;
    --vt-badge-warning-fg: #451A03;

    /* Neutre / pilule */
    --vt-neutral-bg: rgba(100, 116, 139, 0.20);
    --vt-neutral-fg: #94A3B8;

    /* Filets fins (hairlines) — surfaces SOMBRES : blanc très translucide
       (un filet slate serait invisible sur fond sombre). Cf. copie auto + clair (:root). */
    --vt-hairline: rgba(255, 255, 255, 0.10);
    --vt-hairline-soft: rgba(255, 255, 255, 0.06);

    /* Ombres & focus */
    --vt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --vt-shadow: 0 14px 30px rgba(0, 0, 0, 0.40);
    --vt-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
    --vt-focus-ring: 0 0 0 3px rgba(148, 163, 184, 0.35);

    /* Sidebar / topbar / shell (dark) — look indigo nuit (charte v8.4.0).
       Header dark = gradient indigo (identique au clair) ; menu latéral en
       dégradé bleu nuit. Référencés par les 3 espaces via leurs namespaces. */
    --vt-sidebar-bg: linear-gradient(181deg, #152036 0%, #132a4f 100%);
    --vt-topbar-grad: radial-gradient(circle at 85% 15%, rgba(139, 92, 246, 0.10) 0%, transparent 55%), linear-gradient(160deg, rgba(49, 46, 129, 0.97) 0%, rgba(79, 70, 229, 0.95) 100%);
    --vt-layout-bg: #152037;
    --vt-main-bg: #141F37CF;
    --vt-breadcrumb-bg: #2A336B;

    /* Onboarding (tunnel) — accents sombres « IA sobre » : dégradés indigo/violet
       (page, cartes, halo de focus). La palette onboarding complète (plus claire +
       étagée) est surchargée scopée sur la page dans onboarding-redesign.css. */
    --vt-onb-page-grad:
        radial-gradient(1200px 720px at 86% -12%, rgba(124, 58, 237, 0.20) 0%, transparent 60%),
        radial-gradient(1100px 600px at 2% 2%, rgba(79, 70, 229, 0.16) 0%, transparent 58%),
        #121A30;
    --vt-onb-card-grad: linear-gradient(180deg, #2A3760 0%, #212C4D 100%);
    --vt-onb-elev: #36446C;
    --vt-onb-focus-glow:
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 0 0 3px rgba(129, 140, 248, 0.32);

    /* Native UI (scrollbars, inputs, autofill, caret) suit le thème */
    color-scheme: dark;
}

/* ===================== Copie « auto » (OS sombre) — IDENTIQUE =====================
 * Pour les mécanismes qui résolvent « auto » en CSS (Conciergerie ; tous
 * après la Phase 1). Le front/Ménage en « auto » ajoutent aujourd'hui la
 * classe `.v-dark` via JS → déjà couverts par le bloc ci-dessus. */
@media (prefers-color-scheme: dark) {
    .vpc-app[data-vpc-theme="auto"],
    [data-theme="auto"] {
        --vt-bg-page: #0F172A;
        --vt-inset: #182234;
        --vt-surface-1: #1E293B;
        --vt-surface-2: #334155;
        --vt-elevated: #3B4A60;

        --vt-text: #F1F5F9;
        --vt-text-soft: #CBD5E1;
        --vt-muted: #94A3B8;

        --vt-border: #334155;
        --vt-border-strong: #475569;

        --vt-primary: #818CF8;
        --vt-primary-strong: #6366F1;
        --vt-primary-bg: rgba(99, 102, 241, 0.18);

        --vt-success: #34D399;
        --vt-success-bg: rgba(16, 185, 129, 0.15);
        --vt-warning: #FBBF24;
        --vt-warning-bg: rgba(245, 158, 11, 0.15);
        --vt-danger: #F87171;
        --vt-danger-bg: rgba(248, 113, 113, 0.15);
        --vt-info: #818CF8;
        --vt-info-bg: rgba(99, 102, 241, 0.18);

        --vt-badge-danger: #F87171;
        --vt-badge-success: #34D399;
        --vt-badge-warning: #FBBF24;
        --vt-badge-neutral-bg: rgba(255, 255, 255, 0.18);
        --vt-badge-neutral-fg: rgba(255, 255, 255, 0.80);
        /* Texte foncé pour les pastilles vives success/warning (sinon blanc sur vert/jaune vif = illisible en sombre) */
        --vt-badge-success-fg: #052E16;
        --vt-badge-warning-fg: #451A03;

        --vt-neutral-bg: rgba(100, 116, 139, 0.20);
        --vt-neutral-fg: #94A3B8;

        /* Filets fins (hairlines) — sombre auto (OS) : IDENTIQUE au bloc dark explicite. */
        --vt-hairline: rgba(255, 255, 255, 0.10);
        --vt-hairline-soft: rgba(255, 255, 255, 0.06);

        --vt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
        --vt-shadow: 0 14px 30px rgba(0, 0, 0, 0.40);
        --vt-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
        --vt-focus-ring: 0 0 0 3px rgba(148, 163, 184, 0.35);

        --vt-sidebar-bg: linear-gradient(181deg, #152036 0%, #132a4f 100%);
        --vt-topbar-grad: radial-gradient(circle at 85% 15%, rgba(139, 92, 246, 0.10) 0%, transparent 55%), linear-gradient(160deg, rgba(49, 46, 129, 0.97) 0%, rgba(79, 70, 229, 0.95) 100%);
        --vt-layout-bg: #152037;
        --vt-main-bg: #141F37CF;
        --vt-breadcrumb-bg: #2A336B;

        --vt-onb-page-grad:
            radial-gradient(1200px 720px at 86% -12%, rgba(124, 58, 237, 0.20) 0%, transparent 60%),
            radial-gradient(1100px 600px at 2% 2%, rgba(79, 70, 229, 0.16) 0%, transparent 58%),
            #121A30;
        --vt-onb-card-grad: linear-gradient(180deg, #2A3760 0%, #212C4D 100%);
        --vt-onb-elev: #36446C;
        --vt-onb-focus-glow:
            0 1px 2px rgba(0, 0, 0, 0.30),
            0 0 0 3px rgba(129, 140, 248, 0.32);

        color-scheme: dark;
    }
}

/* ===================== Tokens de marque invariants (clair ET sombre) =====================
 * Ces valeurs sont identiques quelque soit le thème : elles représentent la signature
 * visuelle du gradient de marque indigo/violet (breadcrumb, strips de navigation).
 * Définies sur :root pour être disponibles dans les deux modes sans duplication. */
:root {
    /* Fil d'Ariane front (espaces Propriétaire et Ménage) — fond aplat en mode clair.
       Valeur distincte du sombre (--vt-breadcrumb-bg : #2A336B défini dans le bloc dark). */
    --vt-breadcrumb-light-bg: #2e3993;

    /* Texte sur aplat de couleur saturée (badges, pills, boutons primaires) — blanc
       dans les deux modes (le blanc-sur-aplat ne change pas en sombre). */
    --vt-on-accent: #FFFFFF;

    /* Menu latéral (sidebar) des 3 espaces — fond mode clair : blanc légèrement
       teinté indigo (harmonie avec le header indigo saturé, sans surcharge).
       Les tokens --vt-sidebar-light-item-* permettent aux composants de
       tokeniser les couleurs hardcodées sur fond sombre (Propriétaire, Ménage,
       Conciergerie) sans dupliquer les overrides dark. */
    --vt-sidebar-light-bg: #F5F4FF;
    --vt-sidebar-light-border: #E8EAFE;
    --vt-sidebar-light-divider: #C7CBF8;
    --vt-sidebar-light-item-text: #374151;
    --vt-sidebar-light-label-text: #94A3B8;
    --vt-sidebar-light-item-hover-bg: rgba(79, 70, 229, 0.06);
    --vt-sidebar-light-item-hover-text: #111827;
    --vt-sidebar-light-item-active-bg: rgba(79, 70, 229, 0.10);
    --vt-sidebar-light-item-active-text: #4F46E5;
    --vt-sidebar-light-item-active-bar: #4F46E5;
    --vt-sidebar-light-orb: rgba(79, 70, 229, 0.04);

    /* Bande de marque du fil d'Ariane Panel — valeurs canoniques alignées sur l'espace
       Équipe Ménage (.v-breadcrumb) : dégradé indigo translucide posé sur un aplat
       opaque #2A336B, pour rendre la même bande sombre quel que soit le fond derrière
       (indispensable au thème clair du Panel Conciergerie). */
    --vt-brand-grad:
        radial-gradient(circle at 85% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 55%),
        linear-gradient(160deg, rgba(49, 46, 129, 0.75) 0%, rgba(42, 74, 195, 0.70) 100%),
        #2A336B;
    --vt-brand-border-inner: rgba(255, 255, 255, 0.10);
    --vt-brand-border-top: rgba(255, 255, 255, 0.18);
    --vt-brand-text-on-grad: rgba(255, 255, 255, 1);
    --vt-brand-text-muted-on-grad: rgba(255, 255, 255, 0.65);
    --vt-brand-sep-on-grad: rgba(255, 255, 255, 0.30);

    /* Éléments sur fond sombre invariant (sidebar, topbar) — white-alpha. */
    --vt-on-dark-text: rgba(255, 255, 255, 0.72);
    --vt-on-dark-text-muted: rgba(255, 255, 255, 0.45);
    --vt-on-dark-text-full: rgba(255, 255, 255, 1);
    --vt-on-dark-hover-bg: rgba(255, 255, 255, 0.13);
    --vt-on-dark-active-bg: rgba(255, 255, 255, 0.20);
    --vt-on-dark-active-bar: rgba(255, 255, 255, 0.90);

    /* Bandeau (header / topbar) — « peau » unique consommée par les 3 espaces
       (.v-topbar-* du Propriétaire & Ménage, .vpc-header-* de la Conciergerie).
       White-alpha invariant : même rendu sur l'aplat de marque (clair) et sur le
       dégradé indigo nuit (sombre). Source de vérité unique : modifier ici se
       répercute sur les 3 espaces, sans dupliquer ni désynchroniser. */
    --vt-topbar-highlight: rgba(255, 255, 255, 0.10);   /* halo radial du fond */
    --vt-topbar-orb-1: rgba(255, 255, 255, 0.15);       /* orbe flottant principal */
    --vt-topbar-orb-2: rgba(255, 255, 255, 0.11);       /* orbe flottant secondaire */
    --vt-topbar-logo-bg: rgba(255, 255, 255, 0.15);     /* pastille logo */
    --vt-topbar-logo-bg-hover: rgba(255, 255, 255, 0.28);
    --vt-topbar-chip-bg: rgba(255, 255, 255, 0.12);     /* blocs stat / user / contact */
    --vt-topbar-chip-bg-hover: rgba(255, 255, 255, 0.22);
    --vt-topbar-chip-border: rgba(255, 255, 255, 0.25);
    --vt-topbar-chip-border-hover: rgba(255, 255, 255, 0.45);

    /* Aplat de fond du bandeau en thème clair : indigo Vauban fixe, volontairement
       décorrélé de la couleur de marque `--v-brand-primary` (laquelle ne pilote
       plus que les PWA, emails et accents). Le thème sombre garde `--vt-topbar-grad`.
       (2026-06-10) */
    --vt-topbar-base: #4F46E5;

    /* Fonds clairs — 3 espaces en mode clair.
       Source de vérité unique : modifier ici se répercute sur Panel, Propriétaire et Ménage.
       Les namespaces --v-* (front) et --vad-* (admin) aliasent ces tokens via var(--vt-*). */
    --vt-bg-lavender:             #ffffff;
    --vt-surface-lavender:        rgba(255, 255, 255, 0.85);
    --vt-surface-lavender-soft:   rgba(255, 255, 255, 0.70);
    --vt-surface-lavender-panel:  rgba(255, 255, 255, 0.75);

    /* Cartes & champs — look unifié des 4 espaces en mode CLAIR.
       Source de vérité unique ; les namespaces --v-* / --vad-* / --vo-* aliasent.
       - card-grad   : fond de pancarte (dégradé lavande très léger)
       - card-shadow : ombre de contour douce
       - field-halo  : ombre fine + halo bicolore « IA » indigo->violet sous les champs
       En mode SOMBRE, chaque namespace neutralise ces tokens (surface pleine, pas de halo clair). */
    --vt-card-grad:        linear-gradient(180deg, #FFFFFF 0%, #F1F2FA 100%);
    --vt-card-shadow:      0 1px 3px rgba(17, 24, 39, 0.07), 0 8px 22px rgba(17, 24, 39, 0.10);
    --vt-field-halo:
        0 1px 2px rgba(17, 24, 39, 0.06),
        -3px 4px 10px -6px rgba(79, 70, 229, 0.20),
        3px 4px 10px -6px rgba(124, 58, 237, 0.20);
    --vt-field-halo-focus:
        0 1px 2px rgba(17, 24, 39, 0.08),
        -5px 7px 17px -6px rgba(79, 70, 229, 0.38),
        5px 7px 17px -6px rgba(124, 58, 237, 0.38);

    /* Filets fins (hairlines) — mode CLAIR : encre slate très translucide.
       Surchargés en sombre (blanc translucide) dans les deux blocs dark ci-dessus.
       Servent à hiérarchiser « par le vide » (séparateurs, bords de carte discrets). */
    --vt-hairline: rgba(15, 23, 42, 0.08);
    --vt-hairline-soft: rgba(15, 23, 42, 0.05);

    /* Halo « produit IA » — voile dégradé indigo→violet très discret, posé derrière
       les blocs phares (cockpit du parcours, en-tête de fiche). Translucide → rendu
       cohérent en clair ET en sombre sans variante dédiée. */
    --vt-glow: radial-gradient(120% 120% at 85% 0%, rgba(124, 58, 237, 0.10) 0%, rgba(79, 70, 229, 0.045) 42%, transparent 72%);
}

/* ===================== Info-bulle unifiée (composant .vauban-tip) — CLAIR =====================
 * Tokens du composant infobulle (assets/css/components/vauban-tooltip.css + .js).
 * La pastille « ? / i » est inline → elle hérite naturellement du thème de son
 * conteneur. La bulle est rendue dans un portail unique sur <body> (position:fixed,
 * hors des conteneurs thémés) → son mode sombre est posé par JS via [data-theme="dark"]
 * (sonde du token --vt-surface-1 au point d'affichage). Valeurs claires ci-dessous,
 * surcharges sombres dans les deux blocs « dark » ci-après (à garder identiques). */
:root {
    /* Pastille déclencheur (inline) */
    --vt-tip-pill-bg:        #EEF2F7;
    --vt-tip-pill-fg:        #5A6B85;
    --vt-tip-pill-border:    #CBD5E1;
    --vt-tip-pill-bg-hover:  #1F2937;
    --vt-tip-pill-fg-hover:  #FFFFFF;
    /* Bulle (portail) — page claire : bulle slate foncée + texte clair (classique, net) */
    --vt-tip-bg:      rgba(17, 24, 39, 0.82);
    --vt-tip-text:    #F1F5F9;
    --vt-tip-title:   #FFFFFF;
    --vt-tip-muted:   rgba(241, 245, 249, 0.72);
    --vt-tip-border:  rgba(255, 255, 255, 0.14);
    --vt-tip-shadow:  0 14px 44px -12px rgba(15, 23, 42, 0.55), 0 0 26px -8px rgba(99, 102, 241, 0.28);
    /* Voile de fond (léger flou du site quand une infobulle est ouverte) — teinte très discrète, le flou fait l'essentiel. */
    --vt-tip-scrim-bg: rgba(15, 23, 42, 0.06);
}

/* ===================== Info-bulle unifiée — SOMBRE (explicite) =====================
 * Le portail (#vauban-tip-portal) matche [data-theme="dark"] quand JS le pose ;
 * la pastille hérite via .vpc-app / .vauban-dashboard-wrapper / html.vauban-dark. */
.vpc-app[data-vpc-theme="dark"],
.vauban-dashboard-wrapper.v-dark,
html.vauban-dark,
[data-theme="dark"] {
    --vt-tip-pill-bg:        rgba(148, 163, 184, 0.16);
    --vt-tip-pill-fg:        #94A3B8;
    --vt-tip-pill-border:    #475569;
    --vt-tip-pill-bg-hover:  #475569;
    --vt-tip-pill-fg-hover:  #F1F5F9;
    --vt-tip-bg:      rgba(30, 41, 59, 0.80);
    --vt-tip-text:    #F1F5F9;
    --vt-tip-title:   #FFFFFF;
    --vt-tip-muted:   #CBD5E1;
    --vt-tip-border:  rgba(255, 255, 255, 0.16);
    --vt-tip-shadow:  0 16px 48px -12px rgba(0, 0, 0, 0.70), 0 0 28px -8px rgba(129, 140, 248, 0.30);
}

/* ===================== Info-bulle unifiée — SOMBRE (auto / OS) — IDENTIQUE ===================== */
@media (prefers-color-scheme: dark) {
    .vpc-app[data-vpc-theme="auto"],
    [data-theme="auto"] {
        --vt-tip-pill-bg:        rgba(148, 163, 184, 0.16);
        --vt-tip-pill-fg:        #94A3B8;
        --vt-tip-pill-border:    #475569;
        --vt-tip-pill-bg-hover:  #475569;
        --vt-tip-pill-fg-hover:  #F1F5F9;
        --vt-tip-bg:      rgba(30, 41, 59, 0.80);
        --vt-tip-text:    #F1F5F9;
        --vt-tip-title:   #FFFFFF;
        --vt-tip-muted:   #CBD5E1;
        --vt-tip-border:  rgba(255, 255, 255, 0.16);
        --vt-tip-shadow:  0 16px 48px -12px rgba(0, 0, 0, 0.70), 0 0 28px -8px rgba(129, 140, 248, 0.30);
    }
}

/* ===================== Onboarding — voile assombrissant du header de site =====================
 * La page /onboarding/ utilise un template standalone, mais le header Astra du site
 * (.site-header / .ast-primary-header-bar) reste rendu en haut et garde son fond clair.
 * En thème sombre, un calque ::after assombrit toute la barre (voir onboarding-redesign.css).
 * Clair = transparent (aucun voile, mode clair strictement inchangé) ; sombre = scrim slate.
 * Les deux blocs « dark » (explicite + auto/OS) doivent rester IDENTIQUES. */
:root {
    --vt-onboarding-header-scrim: transparent;
}

.vpc-app[data-vpc-theme="dark"],
.vauban-dashboard-wrapper.v-dark,
html.vauban-dark,
[data-theme="dark"] {
    --vt-onboarding-header-scrim: rgba(15, 23, 42, 0.62);
}

@media (prefers-color-scheme: dark) {
    .vpc-app[data-vpc-theme="auto"],
    [data-theme="auto"] {
        --vt-onboarding-header-scrim: rgba(15, 23, 42, 0.62);
    }
}