/* ============================================================
   OSSAB — Thèmes de la direction graphique (2026-08-05)
   4 variantes « ultra pro » commutables + le thème Papier (actuel).
   Chaque thème est une classe sur <html> (ex. class="theme-blueprint"),
   pilotée par le sélecteur « Thème ▾ » de la nav (localStorage).
   Les sélecteurs html.theme-* (spécificité 0,1,1) écrasent :root ET
   le media query prefers-color-scheme: dark de style.css.
   ============================================================ */

/* Palette + typos par thème (tokens sémantiques de style.css) */

html.theme-ardoise-chene {
    --paper: #F5F1E8;
    --paper-raised: #FFFFFF;
    --ink: #1B1712;
    --ink-soft: #5C554A;
    --line: rgba(27, 23, 18, 0.12);
    --line-strong: rgba(27, 23, 18, 0.22);
    --blueprint: #9C6B3F;      /* chêne — liens & boutons */
    --blueprint-hover: #83572F;
    --blueprint-soft: #9C6B3F1A;
    --timber: #2E4B3A;         /* vert sapin — accents secondaires */
    --timber-soft: #2E4B3A1A;
    --ok: #2E4B3A;
    --danger: #B3261E;
    --danger-hover: #9A1F18;
    --danger-bg: #FDE8E6;
    --radius-sm: 6px;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(27, 23, 18, 0.05);
    --shadow: 0 14px 40px rgba(27, 23, 18, 0.10);
    --font-display: "Fraunces", ui-serif, Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html.theme-blueprint {
    --paper: #0B1220;
    --paper-raised: #121C30;
    --ink: #E6EDF7;
    --ink-soft: #8CA3C7;
    --line: rgba(230, 237, 247, 0.10);
    --line-strong: rgba(230, 237, 247, 0.18);
    --blueprint: #3E7BFA;
    --blueprint-hover: #5C8FFF;
    --blueprint-soft: #3E7BFA26;
    --timber: #38BDF8;
    --timber-soft: #38BDF826;
    --ok: #34D399;
    --danger: #F87171;
    --danger-hover: #FCA5A5;
    --danger-bg: #F871711A;
    --radius-sm: 8px;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html.theme-chantier {
    --paper: #FAFAF7;
    --paper-raised: #FFFFFF;
    --ink: #191919;
    --ink-soft: #57534E;
    --line: rgba(25, 25, 25, 0.12);
    --line-strong: rgba(25, 25, 25, 0.22);
    --blueprint: #EA580C;      /* orange signal — CTA & liens */
    --blueprint-hover: #C2410C;
    --blueprint-soft: #EA580C1A;
    --timber: #191919;         /* encre — tags & sections */
    --timber-soft: rgba(25, 25, 25, 0.08);
    --ok: #1A7F37;
    --danger: #C2410C;
    --danger-hover: #9A3412;
    --danger-bg: #FFEDD5;
    --radius-sm: 4px;          /* angles francs = outillage */
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(25, 25, 25, 0.05);
    --shadow: 0 14px 40px rgba(25, 25, 25, 0.08);
    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html.theme-epicea {
    --paper: #FBFCFA;
    --paper-raised: #FFFFFF;
    --ink: #101828;
    --ink-soft: #667085;
    --line: rgba(16, 24, 40, 0.10);
    --line-strong: rgba(16, 24, 40, 0.18);
    --blueprint: #0F766E;      /* pétrol — signature */
    --blueprint-hover: #134E4A;
    --blueprint-soft: #0F766E1A;
    --timber: #134E4A;
    --timber-soft: #134E4A1A;
    --ok: #15803D;
    --danger: #B42318;
    --danger-hover: #912018;
    --danger-bg: #FEF3F2;
    --radius-sm: 8px;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
    --font-display: "Manrope", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* --- Typo display sur les titres & wordmark (sans toucher au thème Papier) --- */

html.theme-ardoise-chene h1, html.theme-ardoise-chene h2, html.theme-ardoise-chene h3,
html.theme-blueprint h1, html.theme-blueprint h2, html.theme-blueprint h3,
html.theme-chantier h1, html.theme-chantier h2, html.theme-chantier h3,
html.theme-epicea h1, html.theme-epicea h2, html.theme-epicea h3 {
    font-family: var(--font-display);
}

html.theme-ardoise-chene .brand,
html.theme-blueprint .brand,
html.theme-chantier .brand,
html.theme-epicea .brand {
    font-family: var(--font-display);
}

/* --- Ajustements composants par thème --- */

/* Bordure de nav : le trait 2px plein du thème Papier devient un liseré subtil */
html.theme-ardoise-chene nav,
html.theme-blueprint nav,
html.theme-chantier nav,
html.theme-epicea nav {
    border-bottom-color: var(--line-strong);
}

/* Blueprint (sombre) : badges pastel clairs inadaptés → variantes sombres */
html.theme-blueprint .badge-ok { background: #134E4A; color: #6EE7B7; }
html.theme-blueprint .badge-danger { background: #7F1D1D; color: #FECACA; }
html.theme-blueprint .badge-neutral { background: rgba(230, 237, 247, 0.12); color: #8CA3C7; }

/* Chantier : boutons encre, hover orange signal (CTA industriel) */
html.theme-chantier button[type="submit"],
html.theme-chantier .btn-primary {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.02em;
}
html.theme-chantier button[type="submit"]:hover,
html.theme-chantier .btn-primary:hover {
    background: var(--blueprint);
    border-color: var(--blueprint);
}

/* Pastille de couleur du sélecteur de thème */
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
html.theme-blueprint .dot { border-color: rgba(255, 255, 255, 0.25); }