/* =====================================================
   OPS IMPERIUM - THEMES.CSS (v2 - Complet)
   # 2025-12-04 | themes-unified | WHY: single-source-of-truth

   USAGE:
   <link rel="stylesheet" href="../../3_charte/themes.css">
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&family=Space+Mono:wght@0,400;0,700&display=swap" rel="stylesheet">
   ===================================================== */

/* =====================================================
   1. PALETTE - Variables CSS
   ===================================================== */
:root {
    /* Couleurs primaires (Brand Guidelines Teana Studio) */
    --oi-vert-empire: #00561B;      /* Primaire - signature */
    --oi-empire: #00561B;           /* Alias court */
    --oi-chartreuse: #D6F74E;       /* Secondaire - CTA, accent */
    --oi-celadon: #7FA68B;          /* Neutre vert doux */
    --oi-bleu-marine: #1B222C;      /* Sombre - texte, fond impact */
    --oi-marine: #1B222C;           /* Alias court */
    --oi-albatre: #FFF7EE;          /* Clair - fond doux */
    --oi-bleu-dragee: #BCE4FE;      /* Accent bleu - variété */
    --oi-dragee: #BCE4FE;           /* Alias court */

    /* Couleur technique */
    --oi-rouge-douleur: #D32F2F;    /* Slides douleur/problème UNIQUEMENT */
    --oi-rouge: #D32F2F;            /* Alias court */

    /* Fonts */
    --font-h1: 'The Seasons', serif;
    --font-h2: 'Space Mono', monospace;
    --font-body: 'Outfit', sans-serif;
}

/* =====================================================
   2. FONTS (The Seasons)
   ===================================================== */
@font-face {
    font-family: 'The Seasons';
    src: url('../fonts/the-seasons-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'The Seasons';
    src: url('../fonts/the-seasons-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* =====================================================
   3. TYPOGRAPHIE DE BASE
   ===================================================== */
.t-giant {
    font-family: var(--font-h1);
    font-size: 5rem;
    line-height: 1;
    font-weight: 700;
}

.t-h1 {
    font-family: var(--font-h1);
    font-weight: 700;
    line-height: 1;
    font-size: 1.5rem;
}

.t-h2 {
    font-family: var(--font-h2);
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.t-body {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.5;
}

.t-small {
    font-family: var(--font-h2);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
}

/* =====================================================
   4. THÈMES SÉMANTIQUES (9 thèmes)

   MAPPING INTENTION → THÈME:
   ┌─────────────────────┬─────────────┐
   │ INTENTION           │ THÈME       │
   ├─────────────────────┼─────────────┤
   │ Premium/Tech        │ var-deep    │
   │ Accessible/Clair    │ var-clear   │
   │ Confiance/Prestige  │ var-growth  │
   │ Doux/Humain         │ var-soft    │
   │ Apaisant/Naturel    │ var-nature  │
   │ Technique/Code      │ var-tech    │
   │ Urgence/Problème    │ var-alert   │
   │ Impact/Accent (petite dose) │ var-impact │
   └─────────────────────┴─────────────┘
   ===================================================== */

/* ----- var-deep : Marine (Premium/Tech) ----- */
.var-deep {
    background: var(--oi-marine);
    color: var(--oi-albatre);
}
.var-deep .t-h1 { color: var(--oi-albatre); }
.var-deep .t-h2 { color: var(--oi-chartreuse); }
.var-deep .t-giant { color: var(--oi-chartreuse); }
.var-deep .t-body { color: rgba(255, 247, 238, 0.9); }
.var-deep .t-small { color: rgba(255, 247, 238, 0.6); }
.var-deep .highlight { color: var(--oi-chartreuse); }
.var-deep .accent { background: var(--oi-chartreuse); color: var(--oi-marine); }
.var-deep .badge { background: var(--oi-chartreuse); color: var(--oi-marine); }

/* ----- var-clear : Albâtre (Accessible/Clair) ----- */
.var-clear {
    background: var(--oi-albatre);
    color: var(--oi-marine);
}
.var-clear .t-h1 { color: var(--oi-marine); }
.var-clear .t-h2 { color: var(--oi-empire); }
.var-clear .t-giant { color: var(--oi-empire); }
.var-clear .t-body { color: var(--oi-marine); opacity: 0.85; }
.var-clear .t-small { color: rgba(27, 34, 44, 0.5); }
.var-clear .highlight { color: var(--oi-empire); }
.var-clear .accent { background: var(--oi-empire); color: white; }
.var-clear .badge { background: var(--oi-empire); color: white; }

/* ----- var-growth : Empire (Confiance/Nature) ----- */
.var-growth {
    background: var(--oi-empire);
    color: var(--oi-albatre);
}
.var-growth .t-h1 { color: var(--oi-albatre); }
.var-growth .t-h2 { color: var(--oi-chartreuse); }
.var-growth .t-giant { color: var(--oi-chartreuse); }
.var-growth .t-body { color: rgba(255, 247, 238, 0.9); }
.var-growth .t-small { color: rgba(255, 247, 238, 0.6); }
.var-growth .highlight { color: var(--oi-chartreuse); }
.var-growth .accent { background: var(--oi-chartreuse); color: var(--oi-marine); }
.var-growth .badge { background: var(--oi-chartreuse); color: var(--oi-empire); }

/* ----- var-soft : Dragée (Doux/Humain) ----- */
.var-soft {
    background: var(--oi-dragee);
    color: var(--oi-marine);
}
.var-soft .t-h1 { color: var(--oi-marine); }
.var-soft .t-h2 { color: var(--oi-empire); }
.var-soft .t-giant { color: var(--oi-empire); }
.var-soft .t-body { color: var(--oi-marine); opacity: 0.85; }
.var-soft .t-small { color: rgba(27, 34, 44, 0.5); }
.var-soft .highlight { color: var(--oi-empire); }
.var-soft .accent { background: var(--oi-empire); color: white; }
.var-soft .badge { background: var(--oi-marine); color: var(--oi-albatre); }

/* ----- var-nature : Céladon (Apaisant/Naturel) ----- */
.var-nature {
    background: var(--oi-celadon);
    color: var(--oi-marine);
}
.var-nature .t-h1 { color: var(--oi-marine); }
.var-nature .t-h2 { color: var(--oi-empire); }
.var-nature .t-giant { color: var(--oi-empire); }
.var-nature .t-body { color: var(--oi-marine); opacity: 0.9; }
.var-nature .t-small { color: rgba(27, 34, 44, 0.5); }
.var-nature .highlight { color: var(--oi-empire); }
.var-nature .accent { background: var(--oi-empire); color: white; }
.var-nature .badge { background: var(--oi-marine); color: var(--oi-albatre); }

/* ----- var-tech : Dragée + Pill (Technique/Code) ----- */
.var-tech {
    background: var(--oi-dragee);
    color: var(--oi-marine);
}
.var-tech .t-h1 { color: var(--oi-marine); }
.var-tech .t-h2 {
    background: var(--oi-marine);
    color: var(--oi-chartreuse);
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-block;
}
.var-tech .t-giant { color: var(--oi-marine); }
.var-tech .t-body { color: var(--oi-marine); opacity: 0.85; }
.var-tech .t-small { color: rgba(27, 34, 44, 0.5); }
.var-tech .highlight { color: var(--oi-chartreuse); }
.var-tech .accent { background: var(--oi-marine); color: var(--oi-chartreuse); }
.var-tech .badge { background: var(--oi-marine); color: var(--oi-chartreuse); }

/* ----- var-alert : Albâtre + Rouge (Urgence/Problème) ----- */
.var-alert {
    background: var(--oi-albatre);
    color: var(--oi-marine);
}
.var-alert .t-h1 { color: var(--oi-rouge); }
.var-alert .t-h2 { color: var(--oi-rouge); }
.var-alert .t-giant { color: var(--oi-rouge); }
.var-alert .t-body { color: var(--oi-marine); opacity: 0.85; }
.var-alert .t-small { color: rgba(27, 34, 44, 0.5); }
.var-alert .highlight { color: var(--oi-rouge); }
.var-alert .accent { background: var(--oi-rouge); color: white; }
.var-alert .badge { background: var(--oi-rouge); color: white; }

/* ----- var-impact : Chartreuse (Accent/Impact) ----- */
.var-impact {
    background: var(--oi-chartreuse);
    color: var(--oi-marine);
}
.var-impact .t-h1 { color: var(--oi-marine); }
.var-impact .t-h2 { color: var(--oi-empire); }
.var-impact .t-giant { color: var(--oi-marine); }
.var-impact .t-body { color: var(--oi-marine); opacity: 0.85; }
.var-impact .t-small { color: rgba(27, 34, 44, 0.5); }
.var-impact .highlight { color: var(--oi-empire); }
.var-impact .accent { background: var(--oi-marine); color: var(--oi-chartreuse); }
.var-impact .badge { background: var(--oi-marine); color: var(--oi-chartreuse); }

/* =====================================================
   5. THÈME SPÉCIAL : var-b (Unique)
   Albâtre + Titre Empire + Label pill Dragée
   ===================================================== */
.var-b {
    background: var(--oi-albatre);
    color: var(--oi-marine);
}
.var-b .t-h1 { color: var(--oi-empire); }
.var-b .t-h2 {
    background: var(--oi-dragee);
    color: var(--oi-marine);
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-block;
}
.var-b .t-giant { color: var(--oi-empire); }
.var-b .t-body { color: var(--oi-marine); opacity: 0.85; }
.var-b .highlight { color: var(--oi-empire); }
.var-b .accent { background: var(--oi-dragee); color: var(--oi-marine); }
.var-b .badge { background: var(--oi-dragee); color: var(--oi-marine); }

/* =====================================================
   6. ALIAS DE COMPATIBILITÉ
   ===================================================== */

/* var-a = var-deep */
.var-a { background: var(--oi-marine); color: var(--oi-albatre); }
.var-a .t-h1 { color: var(--oi-albatre); }
.var-a .t-h2 { color: var(--oi-chartreuse); }
.var-a .t-giant { color: var(--oi-chartreuse); }

/* var-c = var-growth */
.var-c { background: var(--oi-empire); color: var(--oi-albatre); }
.var-c .t-h1 { color: var(--oi-albatre); }
.var-c .t-h2 { color: var(--oi-chartreuse); }
.var-c .t-giant { color: var(--oi-chartreuse); }

/* bg-* direct */
.bg-marine { background: var(--oi-marine); color: var(--oi-albatre); }
.bg-marine .t-h1 { color: var(--oi-albatre); }
.bg-marine .t-h2 { color: var(--oi-chartreuse); }

.bg-albatre { background: var(--oi-albatre); color: var(--oi-marine); }
.bg-albatre .t-h1 { color: var(--oi-marine); }
.bg-albatre .t-h2 { color: var(--oi-empire); }

.bg-empire { background: var(--oi-empire); color: var(--oi-albatre); }
.bg-empire .t-h1 { color: var(--oi-albatre); }
.bg-empire .t-h2 { color: var(--oi-chartreuse); }

.bg-dragee { background: var(--oi-dragee); color: var(--oi-marine); }
.bg-dragee .t-h1 { color: var(--oi-marine); }
.bg-dragee .t-h2 { color: var(--oi-empire); }

.bg-chartreuse { background: var(--oi-chartreuse); color: var(--oi-marine); }
.bg-chartreuse .t-h1 { color: var(--oi-marine); }
.bg-chartreuse .t-h2 { color: var(--oi-empire); }

/* theme-* card (pour layouts multi-composants) */
.theme-marine { background: var(--oi-marine); color: var(--oi-albatre); }
.theme-marine .t-h1 { color: var(--oi-albatre); }
.theme-marine .t-h2 { color: var(--oi-chartreuse); }

.theme-albatre { background: var(--oi-albatre); color: var(--oi-marine); }
.theme-albatre .t-h1 { color: var(--oi-marine); }
.theme-albatre .t-h2 { color: var(--oi-empire); }

.theme-empire { background: var(--oi-empire); color: var(--oi-albatre); }
.theme-empire .t-h1 { color: var(--oi-albatre); }
.theme-empire .t-h2 { color: var(--oi-chartreuse); }

.theme-dragee { background: var(--oi-dragee); color: var(--oi-marine); }
.theme-dragee .t-h1 { color: var(--oi-marine); }
.theme-dragee .t-h2 { color: var(--oi-empire); }

.theme-celadon { background: var(--oi-celadon); color: var(--oi-marine); }
.theme-celadon .t-h1 { color: var(--oi-marine); }
.theme-celadon .t-h2 { color: var(--oi-empire); }

.theme-clear { background: var(--oi-albatre); color: var(--oi-marine); }
.theme-clear .t-h1 { color: var(--oi-marine); }
.theme-clear .t-h2 { color: var(--oi-empire); }

.theme-deep { background: var(--oi-marine); color: var(--oi-albatre); }
.theme-deep .t-h1 { color: var(--oi-albatre); }
.theme-deep .t-h2 { color: var(--oi-chartreuse); }

/* =====================================================
   7. GUIDE RAPIDE
   =====================================================

   BRIEF → THÈME:
   "Je veux du premium/tech"      → var-deep
   "Je veux du clair/accessible"  → var-clear
   "Je veux du confiance/prestige"→ var-growth
   "Je veux du doux/humain"       → var-soft
   "Je veux de l'apaisant/naturel"→ var-nature
   "Je veux du technique/code"    → var-tech
   "Je veux de l'urgence/alerte"  → var-alert
   "Je veux un accent fort (petite dose)" → var-impact
   "Je veux ce style unique"      → var-b

   BLOC NARRATIF → THÈME SUGGÉRÉ:
   Accroche (01)      → var-deep, var-impact
   Promesse (02)      → var-clear, var-growth
   Histoire (03)      → var-growth, var-soft
   Crédibilité (04)   → var-deep
   Douleur (05)       → var-alert
   Fausses sol. (06)  → var-alert, var-clear
   Recadrage (07)     → var-clear
   Vision (08)        → var-growth
   Mécanisme (09)     → var-deep, var-tech
   Caract. (10)       → var-clear
   Bénéfices (11)     → var-growth
   Prix (12)          → var-clear
   Répulsif (13)      → var-alert
   Témoignage (14)    → var-soft, var-deep
   Preuve (15)        → var-deep
   Bonus (16)         → var-growth
   Urgence (17)       → var-alert
   Garantie (18)      → var-growth
   FAQ (19)           → var-soft
   CTA (20)           → var-deep (+ accent chartreuse)
   PS (21)            → var-soft

   ===================================================== */