/* ==========================================================================
   La Grange de L'Abille — Design tokens
   Version 1.0 — 14/08/2026
   À charger en premier, avant lgdla.css
   ========================================================================== */

:root {

  /* ---------- COULEURS ------------------------------------------------- */

  /* Validées au brief */
  --c-bg:          #F8F7F5;   /* arrière-plan   */
  --c-ink:         #221E1F;   /* titres         */
  --c-text:        #221E1F;   /* texte courant  (brief 13/10/2026 : identique aux titres) */
  --c-gold:        #E1B34C;   /* CTA principal  */
  --c-gold-dark:   #C89428;   /* hover CTA      */

  /* Neutres dérivés (recommandation — slots Surface/Border du brief §22) */
  --c-surface:     #EFECE7;   /* sections alternées, encadrés */
  --c-border:      #E2DDD5;   /* filets 1px, contours de champs */
  --c-muted:       #6E6663;   /* légendes, dates, méta */

  /* Footer (brief 13/10/2026 : « de couleur noir ») — un cran plus profond que l'encre des titres */
  --c-black:       #151213;

  /* États */
  --c-error:       #B3261E;   /* 5,9:1 sur --c-bg */

  /* Sur fond sombre */
  --c-on-dark:            #F8F7F5;
  --c-on-dark-70:         rgba(248, 247, 245, .70);
  --c-on-dark-55:         rgba(248, 247, 245, .55);  /* plancher AA */
  --c-on-dark-border:     rgba(248, 247, 245, .12);

  /* Voiles photo */
  --veil-strong:   rgba(34, 30, 31, .65);
  --veil-mid:      rgba(34, 30, 31, .55);
  --veil-soft:     rgba(34, 30, 31, .45);   /* minimum pour texte sur photo */

  /* ⛔ INTERDIT : --c-gold en couleur de texte sur --c-bg (ratio 1,82:1) */


  /* ---------- TYPOGRAPHIE ---------------------------------------------- */

  /* Brief 13/10/2026 : titres Nova Mono (une seule graisse, 400), texte Lora */
  --f-title: 'Nova Mono', ui-monospace, 'Courier New', monospace;
  --f-body:  'Lora', 'Georgia', 'Times New Roman', serif;

  /* Échelle fluide : 375px → 1440px */
  --fs-display:  clamp(2.5rem,    1.20rem + 5.60vw, 4.750rem);  /* 40 → 76 */
  --fs-h1:       clamp(2.125rem,  1.15rem + 4.20vw, 3.750rem);  /* 34 → 60 */
  --fs-h2:       clamp(1.6875rem, 1.00rem + 2.90vw, 2.750rem);  /* 27 → 44 */
  --fs-h3:       clamp(1.375rem,  1.00rem + 1.60vw, 1.875rem);  /* 22 → 30 */
  --fs-h4:       clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);  /* 19 → 22 */
  --fs-lead:     clamp(1.1875rem, 1.10rem + 0.35vw, 1.3125rem); /* 19 → 21 */
  --fs-body:     clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);  /* 17 → 18 */
  --fs-small:    0.9375rem;                                     /* 15      */
  --fs-caption:  clamp(0.75rem,   0.72rem + 0.10vw, 0.8125rem); /* 12 → 13 */
  --fs-eyebrow:  clamp(0.75rem,   0.72rem + 0.10vw, 0.8125rem); /* 12 → 13 */
  --fs-quote:    clamp(1.25rem,   0.85rem + 1.70vw, 1.625rem);  /* 20 → 26 */
  --fs-stat:     clamp(2.375rem,  1.40rem + 4.20vw, 3.500rem);  /* 38 → 56 */
  --fs-nav:      0.9375rem;                                     /* 15      */
  --fs-btn:      0.9375rem;                                     /* 15      */

  /* Interlignages — la « respiration inversée » est la signature du site */
  --lh-display: .98;
  --lh-h1:     1.02;
  --lh-h2:     1.08;
  --lh-h3:     1.20;
  --lh-h4:     1.30;
  --lh-lead:   1.70;
  --lh-body:   1.80;   /* ⚠️ NE PAS RÉDUIRE — c'est ce qui produit le calme */
  --lh-quote:  1.55;
  --lh-tight:  1.40;

  /* Espacement des lettres */
  /* Nova Mono est une chasse fixe large : on resserre moins que pour un sans-serif */
  --ls-display: -.04em;
  --ls-h1:      -.035em;
  --ls-h2:      -.03em;
  --ls-h3:      -.02em;
  --ls-h4:      -.01em;
  --ls-eyebrow:  .14em;
  --ls-caption:  .02em;
  --ls-btn:      .02em;
  --ls-badge:    .08em;

  /* Graisses */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* Mesures (longueur de ligne) */
  --measure-text: 68ch;
  --measure-lead: 56ch;


  /* ---------- ESPACEMENT ----------------------------------------------- */

  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   80px;
  --s-10:  96px;
  --s-11: 120px;
  --s-12: 160px;

  /* Padding vertical de section — valeurs nominales, pas des maximums */
  --sec-y:       120px;
  --sec-y-dense:  96px;
  --sec-y-air:   160px;


  /* ---------- LARGEURS ------------------------------------------------- */

  --w-wide:    1440px;
  --w-content: 1280px;
  --w-narrow:   900px;
  --w-text:     660px;

  --gutter: 40px;


  /* ---------- RAYONS --------------------------------------------------- */

  --r-xs:     2px;   /* boutons, champs */
  --r-sm:     4px;   /* photos, cartes  */
  --r-md:     8px;   /* grandes tuiles Bento uniquement */
  --r-full: 999px;


  /* ---------- OMBRES --------------------------------------------------- */
  /* Teintées d'encre, jamais de noir pur. Aucune au repos. */

  --sh-0: none;
  --sh-1: 0 1px 2px rgba(34,30,31,.04), 0 2px 8px rgba(34,30,31,.04);
  --sh-2: 0 4px 12px rgba(34,30,31,.06), 0 12px 32px rgba(34,30,31,.05);


  /* ---------- MOTION --------------------------------------------------- */

  --t-fast:   200ms;
  --t-mid:    300ms;
  --t-photo:  450ms;
  --t-reveal: 600ms;
  --t-menu:   280ms;

  --ease:        ease;
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-menu:   cubic-bezier(.40, 0,  .20, 1);

  --reveal-shift: 24px;   /* déplacement maximal — ne pas augmenter */


  /* ---------- DIVERS --------------------------------------------------- */

  --header-h:        88px;
  --header-h-stuck:  64px;
  --mobile-bar-h:    60px;
  --z-header:       100;
  --z-menu:         200;
  --z-mobile-bar:    90;
}


/* ---------- Adaptations aux breakpoints -------------------------------- */

@media (max-width: 1024px) {
  :root {
    --sec-y:       80px;
    --sec-y-dense: 64px;
    --sec-y-air:  112px;
    --gutter:      32px;
    --header-h:    76px;
  }
}

@media (max-width: 767px) {
  :root {
    --sec-y:       64px;
    --sec-y-dense: 48px;
    --sec-y-air:   88px;
    --gutter:      20px;
    --header-h:    64px;
    --header-h-stuck: 56px;
  }
}