/* JB4WOOD — charte UNIFIÉE (identique au site jb4wood.com + JB4WOOD - Stock)
   Vert #14544A · Or #AA8966 · Marron #493828 · Béton #e8e4e0
   (ex-Academy #1a4a2e/#b8954a aligné sur la marque publique le 2026-05-27) */

/* ═══════════════════════════════════════════════════════════════
   PALETTE DE MARQUE — immuable, identique en clair et en sombre.
   Ces couleurs ne s'adaptent JAMAIS au thème (décision client).
   ═══════════════════════════════════════════════════════════════ */
:root {
  --vert:        #14544A;
  --vert-clair:  #1d6e5f;
  --vert-fonce:  #0e3a33;
  --or:          #AA8966;
  --or-clair:    #c4a986;
  --marron:      #493828;
  --beton:       #e8e4e0;
  --beton-clair: #f4f1ec;
  --ok:          #2e8b57;
  --erreur:      #c0392b;

  --radius:    14px;
  --radius-sm: 9px;

  --titre: 'ErasBold', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --corps: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   TOKENS SÉMANTIQUES — thème CLAIR (défaut)
   bg          : fond de page
   bg-elevated : cartes, panneaux posés sur le fond
   bg-inset    : zones encadrées, inputs, code
   texte       : texte principal
   texte-soft  : texte secondaire / meta
   bord        : séparateurs / bordures légères
   ombre       : ombres portées
   ombre-sm    : ombres légères
   blanc       : toujours blanc (logos, icônes sur fond vert)
   ═══════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg:          #f4f1ec;   /* béton-clair : fond de page */
  --bg-elevated: #ffffff;   /* cartes, sidebar, panneaux */
  --bg-inset:    #e8e4e0;   /* zones grisées, inputs, code */
  --texte:       #20211f;   /* encre */
  --texte-soft:  #6b6f6a;   /* gris */
  --bord:        #b8bcb5;   /* gris-clair */
  --ombre:       0 4px 24px rgba(14, 58, 51, 0.12);
  --ombre-sm:    0 2px 8px  rgba(14, 58, 51, 0.10);
  --blanc:       #ffffff;
  /* encre / gris pour la rétro-compat (ancien usage direct dans app.css) */
  --encre:       #20211f;
  --gris:        #6b6f6a;
  --gris-clair:  #b8bcb5;
}

/* ═══════════════════════════════════════════════════════════════
   TOKENS SÉMANTIQUES — thème SOMBRE
   Règles blueprint :
   · Jamais de noir pur : fond = #1d1c22 (anthracite chaud)
   · Texte = off-white #f5f5f0 (jamais #ffffff pur)
   · Couleurs de marque inchangées (vert/or/marron/béton)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #1d1c22;   /* anthracite chaud, jamais #000 */
  --bg-elevated: #28272f;   /* cartes, sidebar */
  --bg-inset:    #211f27;   /* zones incrustées, inputs */
  --texte:       #f5f5f0;   /* off-white, jamais #fff pur */
  --texte-soft:  #a0a8a2;   /* gris clair adouci */
  --bord:        #3a3940;   /* séparateurs discrets */
  --ombre:       0 4px 24px rgba(0, 0, 0, 0.45);
  --ombre-sm:    0 2px 8px  rgba(0, 0, 0, 0.35);
  --blanc:       #ffffff;   /* reste blanc (logos sur fond vert) */
  /* rétro-compat */
  --encre:       #f5f5f0;
  --gris:        #a0a8a2;
  --gris-clair:  #3a3940;
}

/* ═══════════════════════════════════════════════════════════════
   FALLBACK SYSTÈME — activé si aucun data-theme posé
   Même variables que dark, appliquées via @media.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:          #1d1c22;
    --bg-elevated: #28272f;
    --bg-inset:    #211f27;
    --texte:       #f5f5f0;
    --texte-soft:  #a0a8a2;
    --bord:        #3a3940;
    --ombre:       0 4px 24px rgba(0, 0, 0, 0.45);
    --ombre-sm:    0 2px 8px  rgba(0, 0, 0, 0.35);
    --blanc:       #ffffff;
    --encre:       #f5f5f0;
    --gris:        #a0a8a2;
    --gris-clair:  #3a3940;
  }
}

/* Accessibilité : réduit toutes les transitions si demandé */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'ErasBold';
  src: url('../fonts/eras-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--corps);
  color: var(--texte);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Transition douce lors d'un changement de thème */
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, .titre { font-family: var(--titre); letter-spacing: .2px; }

a { color: var(--vert); text-decoration: none; }
a:hover { color: var(--or); }

button {
  font-family: var(--corps);
  cursor: pointer;
  border: none;
}

::selection { background: var(--or-clair); color: var(--vert-fonce); }