/* ============================================================
   DOMAINE BÉTHANIA — DESIGN SYSTEM
   Tokens conformes à la charte graphique (Août 2025) :
   Bleu Atlantide, Blanc Ivoire, Vert Forêt, Beige Sable,
   Ocre Soleil, Terre de Sienne — Satoshi / Arima / Lobster.
   ============================================================ */

:root {
  /* ---- PALETTE OFFICIELLE ------------------------------------ */
  --ivoire:          #FCFCF0; /* fond principal — 40% */
  --ivoire-2:         #FDFDF4;
  --blanc:            #FFFFFB;
  --sable:            #E7D5B8; /* fond secondaire — 10% */
  --sable-2:          #ECDDC7;
  --parchment:        #F1E6D7; /* bande alternée (sable clair) */
  --parchment-2:      #F7F3EF;

  --atlantide:        #00618F; /* couleur identitaire — 25-30% */
  --atlantide-lit:    #4088AB;
  --atlantide-pale:   #80B0C7;
  --atlantide-pale-2: #BFD8E3;
  --atlantide-deep:   #0B2430; /* déclinaison sombre du bleu (fonds foncés) */

  --foret:            #2E6F4D; /* vert forêt — 10% */
  --foret-lit:        #6C9A82;
  --foret-pale:       #96B6A6;
  --foret-pale-2:     #C0D3CA;

  --ocre:             #CA8B3D; /* accent — 5% */
  --sienne:           #A74E2B; /* accent — 5% */
  --sienne-deep:      #7C3B1E;

  --ink:              #17262C; /* texte sur fond clair */

  /* ---- RÔLES SÉMANTIQUES ------------------------------------ */
  --bg:            var(--ivoire);
  --bg-alt:        var(--parchment);
  --surface:       var(--blanc);
  --bark:          var(--atlantide-deep); /* footer, menu plein écran */
  --canopy:        var(--atlantide-deep); /* alias historique */
  --canopy-700:    var(--blanc);
  --canopy-800:    var(--atlantide-deep);
  --linen:         var(--blanc);

  --on-dark:       #FBF8F0; /* texte clair sur fond sombre (footer, hero, cta) */
  --on-dark-soft:  #C7D4D8;
  --on-light:      var(--ink);
  --on-light-soft: #55666C;

  --accent:        var(--sienne);
  --accent-lit:    #AD5A31; /* accent lisible sur fond clair ET sombre */
  --sand:          #E3A75E; /* accent chaud sur photo sombre (ocre éclairci) */

  --heartwood:      var(--sienne);      /* CTA principal */
  --heartwood-lit:  var(--ocre);        /* lueur / hover, décoratif */
  /* L'ocre ne tient que 2,88:1 sur carte claire : suffisant pour une lueur
     décorative, pas pour une note en étoiles, qui est de l'information.
     Cet ambre plus profond atteint 4,89:1. Il bascule en mode sombre
     (voir prefs.css), où l'ocre d'origine repasse, lui, à 5,16:1. */
  --star:           #9A6614;
  --heartwood-deep: var(--sienne-deep); /* prix, liens sur carte claire */

  --foliage:       var(--foret);
  --foliage-lit:   var(--foret-lit);

  --line:          rgba(251,248,240,.16); /* filet clair — sur fond sombre */
  --line-dark:     rgba(23,38,44,.14);    /* filet sombre — sur fond clair */

  /* ---- ESSENCES : la couleur de chaque bois (dérivées de la charte) */
  --wood-acajou:   #A74E2B; /* terre de sienne */
  --wood-bosse:    #CA8B3D; /* ocre soleil */
  --wood-doussie:  #B8703A; /* sienne-ocre */
  --wood-ebene:    #241C16; /* bois noir, quasi neutre */
  --wood-iroko:    #DDA758; /* ocre clair */
  --wood-padouk:   #C15A34; /* sienne vif */
  --wood-tali:     #8B4226; /* sienne profond */
  --wood-oasis:    #2E6F4D; /* vert forêt */

  /* ---- TYPOGRAPHIE ------------------------------------------ */
  --font-display: 'Arima', Georgia, 'Times New Roman', serif;
  --font-body:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Lobster', cursive;

  /* échelle modulaire fluide (clamp) — ratio ~1.28 */
  --step--1: clamp(.78rem, .74rem + .18vw, .88rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:  clamp(1.18rem, 1.05rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.28rem + .95vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.7vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3vw, 4.6rem);
  --step-5:  clamp(3.1rem, 1.9rem + 5.2vw, 7rem);
  --step-6:  clamp(3.6rem, 1.7rem + 8vw, 10rem);

  /* ---- ESPACEMENT -------------------------------------------
     Fluide comme l'échelle typographique : les grands pas se
     resserrent sur petit écran (un padding de 8rem sur un
     téléphone de 375px mange un demi-écran de vide). Les valeurs
     maximales sont EXACTEMENT celles d'avant : au-delà de
     ~1310px de large, rien ne bouge. Seuls les petits écrans
     respirent mieux. Les trois premiers pas restent fixes : ce
     sont des espacements de détail (gouttières internes), les
     réduire abîmerait la lisibilité au lieu de l'aider. */
  --space-2xs: .5rem;
  --space-xs:  .875rem;
  --space-s:   1.25rem;
  --space-m:   clamp(1.5rem,  1.2rem + 1.2vw, 2rem);
  --space-l:   clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --space-xl:  clamp(3.25rem, 2.2rem + 4.2vw, 5.5rem);
  --space-2xl: clamp(4.5rem,  2.9rem + 6.4vw, 8rem);
  --space-3xl: clamp(6rem,    3.8rem + 8.8vw, 11rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw:   1360px;
  --maxw-narrow: 820px;
  /* La carte par chapitres : plus large que le texte courant (le
     sommaire mange 250px), plus étroite que les grilles pleines. */
  --maxw-carte:   1180px;

  /* ---- FORMES & PROFONDEUR ---------------------------------- */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 24px 60px -28px rgba(11,36,48,.35);
  --shadow-lift: 0 40px 90px -40px rgba(11,36,48,.45);

  /* ---- MOUVEMENT -------------------------------------------- */
  --ease-out:  cubic-bezier(.16, .8, .2, 1);
  --ease-inout: cubic-bezier(.65, 0, .12, 1);
  --dur-fast:  .55s;
  --dur:       .95s;
  --dur-slow:  1.7s;

  --z-nav: 100;
  --z-cursor: 9999;
  --z-overlay: 200;
}

/* respect du mode réduit */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; }
}