/* ============================================================
   tokens.css — Savonnerie de la Lune · direction « Éditorial Magazine »
   Ossature issue de templates/skeleton/tokens.css (contrat no-js +
   reduced-motion intact). Palette 5 tokens matières (guardrail E4) :
   chaque couleur est extraite d'un ingrédient réel de l'atelier.
   TOUT hex vit ici, dans :root {} (lint L3).
   ============================================================ */

/* ── Polices self-host (perf : zéro CSS render-blocking Google Fonts) ──
   Fichiers variables latin : 1 fichier / famille (72 Ko au total). */
@font-face {
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/libre-bodoni-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/public-sans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/courier-prime-400.woff2') format('woff2');
}
/* Fallback métrique de la display : neutralise le saut de layout (CLS)
   pendant le swap de Libre Bodoni sur le h1 (gotcha E8 — CLS 0,175). */
@font-face {
  font-family: 'display-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 24%;
}

:root {
  /* ── Palette matières (STRICTE — guardrail E4, zéro interpolation) ── */
  --olive-primary:    #4A5D44;  /* huile d'olive AOP — primaire naturelle */
  --lavandin-accent:  #7A6E8F;  /* lavandin de Valensole — accent subtil (grands corps uniquement) */
  --argile-detail:    #6B8E6F;  /* argile verte — détails, filets */
  --miel-warm:        #C9A961;  /* miel — accents chauds décoratifs */
  --cendre-secondary: #6D6D6D;  /* gris cendre — typographie secondaire */
  --ivoire-bg:        #F5F3F0;  /* savon brut — fond principal */
  --encre:            #23281F;  /* encre olive profonde — texte courant (contraste ≥ 12:1) */
  --ivoire-pur:       #FDFCFA;  /* surfaces cartes, très légèrement au-dessus du fond */

  /* alias sémantiques consommés par style.css */
  --bg:      var(--ivoire-bg);
  --fg:      var(--encre);
  --primary: var(--olive-primary);
  --accent:  var(--lavandin-accent);
  --surface: var(--ivoire-pur);
  --line:    var(--argile-detail);
  --muted:   var(--cendre-secondary);

  /* ── Typo (guardrail E4 : Libre Bodoni · Public Sans · Courier Prime) ── */
  --font-display: 'Libre Bodoni', 'display-fallback', serif; /* h1 — fallback métrique anti-CLS */
  --font-body:    'Public Sans', 'Trebuchet MS', sans-serif; /* corps, h2/h3 */
  --font-mono:    'Courier Prime', 'Courier New', monospace; /* étiquettes, prix, index */

  /* échelle modulaire (espaces autour de + : lint L2) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.19rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 1.88rem);
  --step-3:  clamp(1.73rem, 1.4rem + 1.65vw, 2.36rem);
  --step-4:  clamp(2.07rem, 1.5rem + 2.85vw, 2.95rem);
  --step-hero: clamp(2rem, 1.2rem + 4.5vw, 4rem);

  /* ── Espacement (échelle 4/8) ── */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem; --sp-4: 1.5rem;
  --sp-5: 2.5rem;  --sp-6: 4rem;   --sp-7: 6rem; --sp-8: 9rem;

  /* ── Motion (guardrail E4 : dépliage 400ms, glissement 600ms, hover 150–200ms) ── */
  --dur-hover: 180ms; --dur-unfold: 400ms; --dur-slide: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Grille magazine asymétrique (guardrail : max-width 1120px, marges 8vw) ── */
  --container: 70rem;                        /* 1120px */
  --marge: 8vw;                              /* pivot margeSG ↔ margeDX */
  --gutter: clamp(1rem, 1rem + 1.5vw, 2.25rem); /* 16 → 36px */
}

/* Fallback no-js : le contenu existe SANS JavaScript (contrat fiche 07).
   motion.js retire .no-js ; tant qu'elle est là, aucun élément n'est masqué. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-js .k-tint { clip-path: none !important; }
.no-js .k-word { opacity: 1 !important; transform: none !important; }

/* Reduced motion : obligatoire (lint L4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}