/* ============================================================================
   tokens-grid.css — Système de breakpoints & grille canonique — luxeaeternai.com
   Constitué le 27/06/2026 d'après KB-BREAKPOINTS.md
   (~/.claude/_chantier-breakpoints-2026-06-27/KB-BREAKPOINTS.md)

   PHILOSOPHIE — content-out, pas device-based :
   3 breakpoints de TOPOLOGIE maximum (600 / 900 / 1280), tout le reste FLUIDE
   en clamp(). Le grain fin vient du fluide continu, jamais d'empiler des media
   queries qui se battent. Plancher WCAG 320px, plafond luxe max-width 1440px.

   Échelle dérivée de la convergence Tailwind / Bootstrap / Material 3 / Apple
   (KB §1.5). Une seule échelle gravée en tokens — interdiction de mélanger.

   Chargé sur TOUTES les pages (après base.css, avant style.v4.min.css) afin que
   --pad-x / --gutter / type fluide soient une source de vérité unique et que la
   collision de paddings historique (.container 28/24/20 @900/600/380 vs
   --pad-x 40/32/24 @1279/1023/639) soit définitivement résorbée.
   ========================================================================== */

:root {
  /* ── Breakpoints de TOPOLOGIE (3 paliers, mobile-first) ──
     Référence pour le code et l'overlay « touche G ». Custom properties à but
     documentaire (les media queries CSS ne peuvent pas lire var()) : les media
     queries utilisent les valeurs littérales 600 / 900 / 1280, gravées ici. */
  --bp-s: 600px;   /* mobile large → tablette : marges s'ouvrent, footer 1→2 col */
  --bp-m: 900px;   /* tablette → desktop : footer 2→3/4 col, marge éditoriale active */
  --bp-l: 1280px;  /* desktop : grille 12 pleine, respiration maximale */

  /* ── Bornes fluides (slopes clamp calées sur Utopia 320 → 1440) ── */
  --vp-min: 320px;            /* plancher WCAG 1.4.10 Reflow (AA) */
  --vp-max: 1440px;           /* viewport de référence haut */
  --content-max: 1440px;      /* plafond luxe : max-width du contenu */
  --measure: 65ch;            /* mesure éditoriale (longueur de ligne lisible) */

  /* ── Marge latérale fluide unique : 20px @320 → 96px @1440 ──
     UN SEUL --pad-x. Remplace les deux ladders divergents historiques.
     slope = (96-20)/(1440-320) = 0.0679 → 6.79vw ; intercept = 20-0.0679*320
            = -1.73px ... on borne par clamp pour rester lisible.
     Valeur retenue (KB §8.2) : clamp(1.25rem, 0.527rem + 3.62vw, 6rem). */
  --pad-x: clamp(1.25rem, 0.527rem + 3.62vw, 6rem);   /* 20px → 96px */

  /* ── Grille 12 colonnes ── */
  --grid-cols: 12;
  --gutter: clamp(1rem, 0.78rem + 1.07vw, 1.5rem);    /* 16px → 24px */
  --grid-gutter: var(--gutter);                       /* alias rétro-compat style.v4 */
  --col: minmax(0, 1fr);                              /* colonnes fluides ; maths de vérif KB §3 */

  /* ── Échelle typographique fluide (ratio 1.2 / 1.25, base 16→18px) ──
     Tout en rem (zoom 200% / WCAG 1.4.4). Corps Inter quasi stable, titres
     Bodoni portent l'amplitude expressive, pente douce (pas de « danse »). */
  --step--1: clamp(0.9375rem, 0.90rem + 0.18vw, 1.0rem);   /* 15 → 16px légende */
  --step-0:  clamp(1.0rem,   0.96rem + 0.21vw, 1.125rem);  /* 16 → 18px corps */
  --step-1:  clamp(1.20rem,  1.12rem + 0.40vw, 1.50rem);   /* 19 → 24px */
  --step-2:  clamp(1.44rem,  1.30rem + 0.71vw, 2.00rem);   /* 23 → 32px */
  --step-3:  clamp(1.73rem,  1.49rem + 1.18vw, 2.66rem);   /* 28 → 43px */
  --step-4:  clamp(2.07rem,  1.69rem + 1.93vw, 3.55rem);   /* 33 → 57px titres Bodoni */

  /* ── Espacement fluide (mêmes bornes) ── */
  --space-s: clamp(0.75rem, 0.69rem + 0.27vw, 1rem);
  --space-m: clamp(1.5rem,  1.34rem + 0.71vw, 2rem);
  --space-l: clamp(2rem,    1.55rem + 2.23vw, 4rem);       /* respiration section */
}

/* ── Réflexe « Every Layout » : conteneur centré, un seul système de marge ──
   Classe utilitaire opt-in (.l-container). N'écrase PAS .container existant ;
   sert de socle propre pour la migration page par page (gated par validation).
   width: min(content-max, 100% - 2*pad-x) → jamais de double padding (KB §5.1). */
.l-container {
  width: min(var(--content-max), 100% - 2 * var(--pad-x));
  margin-inline: auto;
}

/* ── Corps éditorial : la mesure prime ── */
.l-prose {
  max-width: var(--measure);
}