/* ============================================================================
   ERATO — DESIGN TOKENS (source de vérité unique)
   Identité : logo arbre + motif cercles, base crème/encre stable,
   accent SAISONNIER en gradient sur un axe de température (frais été → chaud hiver).
   Tous les contrastes texte sont validés WCAG AAA (≥ 7:1 sur crème).
   Les variables historiques (--couleur-*, --pub-*) DÉRIVENT de ces tokens
   (cf. bas de fichier) pour recolorer sans casser les composants existants.
   ============================================================================ */

/* ---------- Polices self-hosted (zéro CDN) ---------- */

/* Display / titres / wordmark / répertoire — Fraunces (serif chaleureux, OFL) */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-400-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-700-normal.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-900-normal.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* Corps — Atkinson Hyperlegible (humaniste, distinction inter-lettres, AAA) */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* Titres Kopar — charte bronze (chargée uniquement si le thème l'utilise) */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/BricolageGrotesque-800.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

/* Alternates accessibilité (activées via html[data-font=...]) */
@font-face {
    font-family: 'Luciole';
    src: url('../fonts/Luciole-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Luciole';
    src: url('../fonts/Luciole-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================================
   :root — TOKENS DE MARQUE
   ============================================================================ */
:root {
    /* ---------- Familles typographiques ---------- */
    --font-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-corps: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---------- Neutres (constantes de marque, stables toute l'année) ---------- */
    --creme:        #f5f0e8;  /* fond principal — papier chaud */
    --creme-ombre:  #ebe3d6;  /* fond alterné / creux */
    --papier:       #fdfbf7;  /* cartes, surfaces hautes */
    --encre:        #1a1410;  /* texte principal — 16.1:1 sur crème */
    --encre-douce:  #4a4038;  /* texte secondaire — ~8.6:1 sur crème */
    --ligne:        #d9cfbf;  /* bordures, filets */
    --ligne-forte:  #93856E;  /* bordures accentuées — 3,49:1 sur carte */

    /* ---------- Sémantiques (conservées, AAA) ---------- */
    --succes:       #0f5132;
    --succes-fond:  #e3f0e8;
    --erreur:       #842029;
    --erreur-fond:  #f7e1e1;
    --info:         #14506b;
    --info-fond:    #dfeef5;

    /* ---------- Accent SAISONNIER — défaut : HIVER (chaud, signature) ----------
       Redéfini par [data-saison="..."] plus bas. Quatre rôles :
       --accent       ton médian (icônes, filets, puces)
       --accent-2     fin de gradient (jamais support de texte)
       --accent-deep  TEXTE sur crème — toujours ≥ 7:1
       --accent-soft  teinte très claire — fond de bulle
       --accent-grad  gradient deux-tons (aplats, bulles, hero)               */
    --accent:       #b83055;
    --accent-2:     #c0395a;
    --accent-deep:  #871E3B;
    --accent-soft:  #f7dce3;
    --accent-grad:  linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    --accent-contraste: #ffffff; /* texte sur aplat d'accent — blanc, ≥ 4.5:1 */
    /* Fond d'accent STABLE pour les surfaces porteuses de texte (boutons,
       pastilles, CTA) : reste sombre en clair ET en sombre → blanc ≥ 7:1
       toujours. N'est PAS redéfini dans le bloc dark (donc ne s'inverse pas). */
    --accent-profond: #871E3B;

    /* ---------- Échelle typographique (clamp responsive) ---------- */
    --t-xs:   0.78rem;
    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-md:   1.125rem;
    --t-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --t-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
    --t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem);
    --t-3xl:  clamp(2.6rem, 1.8rem + 3.8vw, 4.5rem);
    --lh-titre: 1.12;
    --lh-corps: 1.6;

    /* ---------- Espacements (baseline 8pt) ---------- */
    --esp-1: 0.25rem;  /* 4  */
    --esp-2: 0.5rem;   /* 8  */
    --esp-3: 0.75rem;  /* 12 */
    --esp-4: 1rem;     /* 16 */
    --esp-5: 1.5rem;   /* 24 */
    --esp-6: 2rem;     /* 32 */
    --esp-7: 3rem;     /* 48 */
    --esp-8: 4rem;     /* 64 */
    --esp-9: 6rem;     /* 96 */
    --esp-10: 8rem;    /* 128 */

    /* ---------- Rayons ---------- */
    --rayon-sm:   6px;
    --rayon-md:   12px;
    --rayon-lg:   24px;
    --rayon-full: 999px;

    /* ---------- Ombres (teintées encre chaude) ---------- */
    --ombre-sm: 0 1px 3px rgba(26, 20, 16, 0.10);
    --ombre-md: 0 6px 18px -6px rgba(26, 20, 16, 0.16);
    --ombre-lg: 0 24px 48px -20px rgba(26, 20, 16, 0.28);

    /* ---------- Bulles (motif signature — diamètres de référence) ---------- */
    --bulle-xs: 2.5rem;   /* 40px  — pastille date, badge */
    --bulle-sm: 6rem;     /* 96px  — avatar, vignette */
    --bulle-md: 16rem;    /* 256px — carte secondaire */
    --bulle-lg: 30rem;    /* 480px — hero, photo principale */
    --bulle-xl: 50rem;    /* 800px — décor de fond */

    /* ---------- Panneau « salle de concert » (toujours profond, ne s'inverse pas) ---------- */
    --panneau:        #1a1410;
    --panneau-texte:  #f3ece1;
    --panneau-texte-doux: #d0c8bc;

    /* ---------- Layout ---------- */
    --largeur-max: 1180px;
    --largeur-texte: 46rem;

    /* Texte et anneau de focus poses SUR --accent-profond. Token plutot
       qu'un #fff en dur, pour pouvoir inverser la surface si besoin. */
    --sur-accent-profond: #ffffff;

    /* ---------- Focus (AAA) ---------- */
    --focus: var(--accent-deep);
}

/* ============================================================================
   SAISONS — axe de température. Poser data-saison sur <html> (défaut global)
   ou sur un conteneur (page, carte, gabarit d'affiche) pour une saison locale.
   Contrastes : deep/crème ≥ 7:1 (AAA). Pour le texte sur aplat d'accent,
   utiliser --accent-profond (blanc ≥ 7:1, AAA) ; --accent-deep + blanc reste
   au niveau AA (~4.5:1) — réservé au grand texte ou au non-textuel.
   ============================================================================ */

/* HIVER — chaud, framboise → rouge (= valeurs :root par défaut, rappel ici) */
[data-saison="hiver"] {
    --accent:      #b83055;
    --accent-2:    #c0395a;
    --accent-deep: #871E3B;
    --accent-soft: #f7dce3;
    --accent-profond: #871E3B;
}

/* AUTOMNE — chaud, ambre → terracotta */
[data-saison="automne"] {
    --accent:      #b5611a;
    --accent-2:    #a8472a;
    --accent-deep: #763405;
    --accent-soft: #f8e4ce;
    --accent-profond: #763405;
}

/* PRINTEMPS — tempéré, corail → prune */
[data-saison="printemps"] {
    --accent:      #b24a78;
    --accent-2:    #9b5a93;
    --accent-deep: #7A2449;
    --accent-soft: #f4dce9;
    --accent-profond: #7A2449;
}

/* ÉTÉ — frais, bleu → turquoise/mousse */
[data-saison="ete"] {
    --accent:      #1f7c8c;
    --accent-2:    #247d6a;
    --accent-deep: #13535f;
    --accent-soft: #d7ebef;
    --accent-profond: #13535f;
}

/* ============================================================================
   PALETTES D'ENSEMBLE — choisies par chaque orchestre (App\Enums\ThemeEnsemble),
   posées via [data-theme-ensemble] sur <html>. Priment sur l'accent saisonnier
   (déclarées après). Toutes AAA + CUD-safe : --accent-deep/--accent-profond
   sombres → texte AAA sur crème ET blanc AAA dessus. --accent-grad et --focus
   se recalculent automatiquement (ils référencent ces variables).
   ============================================================================ */
[data-theme-ensemble="cuivre"]   { --accent:#8A6200; --accent-2:#A8841E; --accent-deep:#5F4400; --accent-profond:#5F4400; --accent-soft:#F5ECD6; }
[data-theme-ensemble="nuit"]     { --accent:#1E3A8A; --accent-2:#2C4FB0; --accent-deep:#16306E; --accent-profond:#16306E; --accent-soft:#E4E9F5; }
[data-theme-ensemble="bordeaux"] { --accent:#7A1F2B; --accent-2:#9B3340; --accent-deep:#641722; --accent-profond:#641722; --accent-soft:#F3E2E4; }
[data-theme-ensemble="foret"]    { --accent:#1F5132; --accent-2:#2E6B45; --accent-deep:#17402A; --accent-profond:#17402A; --accent-soft:#E0EBE2; }
[data-theme-ensemble="prune"]    { --accent:#5B2A86; --accent-2:#743BA3; --accent-deep:#48206B; --accent-profond:#48206B; --accent-soft:#ECE3F3; }
[data-theme-ensemble="ardoise"]  { --accent:#37474F; --accent-2:#4E626B; --accent-deep:#28353B; --accent-profond:#28353B; --accent-soft:#E6EAEC; }
[data-theme-ensemble="brique"]   { --accent:#9A3115; --accent-2:#B5481F; --accent-deep:#7C2711; --accent-profond:#7C2711; --accent-soft:#F6E5DD; }
[data-theme-ensemble="sauge"]    { --accent:#2F6B4F; --accent-2:#3F8262; --accent-deep:#24533D; --accent-profond:#24533D; --accent-soft:#E2EDE7; }
/* bronze : charte Kopar, derivee du DS PostHack (or decor, bronze AAA en texte).
   deep #614802 : 7.6:1 sur creme, 7.85:1 sur soft ; blanc sur profond 8.6:1.
   Tokens charte : --laiton (decor pur, JAMAIS en texte sur fond clair, 1.7:1),
   --outremer (contrepoint pop : liens, focus — 11:1 sur creme), titres en
   Bricolage Grotesque (les alternates a11y html[data-font] gardent la main). */
[data-theme-ensemble="bronze"]   { --accent:#8C5A1E; --accent-2:#C0912E; --accent-deep:#614802; --accent-profond:#614802; --accent-soft:#FEF4D6;
    --laiton:#F2C200; --outremer:#16306E; --outremer-2:#2C4FB0;
    --focus:var(--outremer);
    --font-titre:'Bricolage Grotesque', 'Atkinson Hyperlegible', system-ui, sans-serif; }

/* ============================================================================
   MODE SOMBRE — neutres inversés, accent éclairci. Les accents saisonniers
   restent identifiables ; le texte d'accent passe sur une version claire.
   ============================================================================ */
/* Activé via [data-theme="dark"] posé par le script de thème (choix mémorisé
   OU préférence système par défaut). --accent-profond N'est PAS redéfini ici :
   il reste sombre dans les deux thèmes (surfaces porteuses de texte). */
:root[data-theme="dark"] {
    --creme:       #16130f;
    --creme-ombre: #100d0a;
    --papier:      #211c17;
    --encre:       #f3ece1;  /* ~15:1 sur fond sombre */
    --encre-douce: #c9bfb1;  /* ~9:1 */
    --ligne:       #3a322a;
    --ligne-forte: #77695A;  /* 3,18:1 sur carte — seuil 1.4.11 */
    --accent-contraste: #16130f;
    /* le panneau profond est légèrement relevé en mode sombre, jamais inversé */
    --panneau:       #241d17;
    --panneau-texte: #f3ece1;
    --panneau-texte-doux: #cabfb0;

    /* défaut hiver — version claire pour fonds sombres */
    --accent:      #e98aa3;
    --accent-2:    #e0738f;
    --accent-deep: #f3b6c4;  /* texte d'accent sur sombre */
    --accent-soft: #3a2129;
}
:root[data-theme="dark"][data-saison="automne"] {
    --accent: #e0a35f; --accent-2: #d98863; --accent-deep: #f0cda0; --accent-soft: #3a2a16;
}
:root[data-theme="dark"][data-saison="printemps"] {
    --accent: #e08bb4; --accent-2: #cf9ec8; --accent-deep: #f2c4dc; --accent-soft: #34202c;
}
:root[data-theme="dark"][data-saison="ete"] {
    --accent: #66c2d2; --accent-2: #6fc9b4; --accent-deep: #aee0e9; --accent-soft: #143038;
}

/* Mode sombre des thèmes d'ensemble : sans ce bloc, :root[data-theme="dark"]
   (plus spécifique que [data-theme-ensemble]) rend la main à l'accent
   SAISONNIER éclairci — l'ensemble perdait sa charte en sombre.
   Les neuf thèmes sont désormais déclinés. Ratios mesurés (formule WCAG) sur
   fond #16130f et carte #211c17 : --accent-deep tient de 8,57:1 à 10,07:1, et
   de 7,21:1 à 7,99:1 sur son propre --accent-soft. Tous AAA. */
:root[data-theme="dark"][data-theme-ensemble="bronze"] {
    --accent: #C0912E;
    --accent-2: #8C5A1E;
    --accent-deep: #E5B84D;
    --accent-soft: #3A2B10;
    --outremer: #93A8E8;
}

/* Les huit thèmes restants, mêmes règles : --accent-deep porte le texte sur
   fond sombre, --accent-soft lui sert de fond, --accent et --accent-2 restent
   décoratifs. --accent-profond n'est pas redéfini : il reste la surface
   profonde du thème clair, qui porte déjà du blanc à plus de 7:1. */
:root[data-theme="dark"][data-theme-ensemble="cuivre"] {
    --accent: #B98A22; --accent-2: #8A6200; --accent-deep: #E0B84A; --accent-soft: #3A2C08;
}
:root[data-theme="dark"][data-theme-ensemble="nuit"] {
    --accent: #4C6FD0; --accent-2: #2C4FB0; --accent-deep: #9DB4F0; --accent-soft: #16233F;
}
:root[data-theme="dark"][data-theme-ensemble="bordeaux"] {
    --accent: #C05464; --accent-2: #9B3340; --accent-deep: #EFA0AA; --accent-soft: #3A1A20;
}
:root[data-theme="dark"][data-theme-ensemble="foret"] {
    --accent: #4F9C6D; --accent-2: #2E6B45; --accent-deep: #86C79C; --accent-soft: #12301F;
}
:root[data-theme="dark"][data-theme-ensemble="prune"] {
    --accent: #9366C4; --accent-2: #743BA3; --accent-deep: #C4A3E5; --accent-soft: #2C1840;
}
:root[data-theme="dark"][data-theme-ensemble="ardoise"] {
    --accent: #7B939F; --accent-2: #4E626B; --accent-deep: #B0C2CB; --accent-soft: #1E2A30;
}
:root[data-theme="dark"][data-theme-ensemble="brique"] {
    --accent: #CC6A45; --accent-2: #B5481F; --accent-deep: #F0A183; --accent-soft: #3B1A0E;
}
:root[data-theme="dark"][data-theme-ensemble="sauge"] {
    --accent: #5AA37E; --accent-2: #3F8262; --accent-deep: #90CBAE; --accent-soft: #16301F;
}

/* ============================================================================
   CONTRASTE RENFORCÉ — noir/blanc pur, focus épais.
   ============================================================================ */
@media (prefers-contrast: more) {
    :root {
        --creme: #ffffff; --papier: #ffffff; --creme-ombre: #ffffff;
        --encre: #000000; --encre-douce: #000000;
        --ligne: #000000; --ligne-forte: #000000;
        --accent: #000000; --accent-2: #000000; --accent-deep: #000000;
        --accent-soft: #ffffff; --accent-contraste: #ffffff;
        --accent-profond: #000000; --sur-accent-profond: #ffffff;
        --focus: #000000;
    }
    :root[data-theme="dark"] {
        --creme: #000000; --papier: #000000;
        --encre: #ffffff; --encre-douce: #ffffff;
        --accent: #ffffff; --accent-2: #ffffff; --accent-deep: #ffffff;
        --accent-soft: #000000; --accent-contraste: #000000; --focus: #ffffff;
        --accent-profond: #ffffff; --sur-accent-profond: #000000;
    }
}

/* ============================================================================
   PONTS DE COMPATIBILITÉ — les variables historiques dérivent des tokens.
   Évite de réécrire tous les composants : ils héritent de la nouvelle identité.
   ============================================================================ */
:root {
    /* Espace membre / admin (app.css) */
    --couleur-primaire:    var(--encre);
    --couleur-secondaire:  var(--accent-deep);
    --couleur-accent:      var(--accent-deep);
    --couleur-texte:       var(--encre);
    --couleur-texte-clair: var(--encre-douce);
    --couleur-fond:        var(--creme);
    --couleur-carte:       var(--papier);
    --couleur-bordure:     var(--ligne);
    --couleur-succes:      var(--succes);
    --couleur-erreur:      var(--erreur);
    --couleur-focus:       var(--focus);
    --rayon:               var(--rayon-sm);
    --ombre:               var(--ombre-sm);

    /* Site public (.public-site dans app.css) */
    --pub-noir:    var(--encre);
    --pub-nuit:    var(--encre);
    --pub-ardoise: var(--encre-douce);
    --pub-or:        var(--accent-deep);
    --pub-or-clair:  var(--accent);
    --pub-or-sombre: var(--accent-deep);
    --pub-creme:   var(--creme);
    --pub-blanc:   var(--papier);
    --pub-texte:       var(--encre);
    --pub-texte-doux:  var(--encre-douce);
    --pub-texte-clair-sur-sombre: #f3ece1;
    --pub-gris:    var(--encre-douce);
}

/* ============================================================================
   TUTTI — identité de la PLATEFORME appliquée aux espaces d'administration.
   Portée : la classe .espace-admin posée sur le <body> de layouts/app.
   Décision du 2026-08-15 : l'outil de travail porte l'identité de la
   plateforme, quel que soit l'ensemble, tandis que les vitrines gardent la
   charte de leur ensemble. Le nom, le logo et le favicon de l'ensemble
   courant restent affichés : ils deviennent une information de contexte, pas
   une peau. Cela supprime aussi l'accent saisonnier dans l'administration,
   qui virait de couleur au fil de l'année.
   Tous les ratios ci-dessous sont mesurés (formule WCAG), cible AAA.
   ============================================================================ */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

.espace-admin {
    --creme:       #FBFAF6;
    --creme-ombre: #F2F0E8;
    --papier:      #FFFFFF;
    --encre:       #14161F;  /* 17,27:1 sur fond, 18,04:1 sur carte */
    --encre-douce: #41454F;  /* 9,19:1 sur fond */
    --ligne:       #E7E3D8;
    --ligne-forte: #8A8371;  /* 3,77:1 sur carte — seuil des bordures */
    --accent:         #2E36C0;
    --accent-2:       #A52D14;  /* corail : décor et gradients, jamais du texte */
    --accent-deep:    #1B2080;  /* 12,85:1 sur fond */
    --accent-soft:    #E7E8F8;
    --accent-profond: #1B2080;  /* blanc dessus : 13,42:1 */
    --accent-contraste: #FFFFFF;
    --focus: #1B2080;

    --font-titre: 'Space Grotesk', 'Arial Black', system-ui, sans-serif;
}

/* Tutti n'avait pas de déclinaison sombre : sans ce bloc, l'administration
   resterait claire pour qui a choisi le thème sombre. */
:root[data-theme="dark"] .espace-admin {
    --creme:       #12141C;
    --creme-ombre: #0D0F16;
    --papier:      #1B1E29;
    --encre:       #F1F2F7;  /* 16,44:1 sur fond */
    --encre-douce: #C3C7D4;  /* 10,89:1 sur fond */
    --ligne:       #2E3345;
    --ligne-forte: #7C849E;  /* 4,47:1 sur carte */
    --accent:         #8E96F0;
    --accent-2:       #E8836A;
    --accent-deep:    #B3B9F7;  /* 9,80:1 sur fond */
    --accent-soft:    #232842;
    --accent-profond: #2E36C0;  /* blanc dessus : 8,73:1 */
    --accent-contraste: #12141C;
    --focus: #B3B9F7;
}