/* ==========================================================================
   Unéo — tokens.css
   Implémentation stricte de DESIGN.md v4.0 « Diptyque, découpé »
   Aucune valeur visuelle ne doit exister ailleurs que dans ce fichier.
   ========================================================================== */

:root {
  /* --- Surfaces & couleurs (six valeurs + états dérivés) ---------------- */
  --c-creme:        #F6ECDF;
  --c-vert:         #42695B;   /* = logo Uneo_LogoSeul_Vert, valeur intouchable */
  --c-vert-deep:    #2E4F43;   /* surface éditoriale, même teinte 158° */
  --c-charbon:      #1C1A15;
  --c-gres:         #E6D4C1;
  --c-taupe:        #6E6455;

  --c-vert-press:   #375A4D;
  --c-vert-filet:   #4E7D6C;
  --c-creme-input:  #FDF7EC;

  /* Rôles sémantiques — utiliser ceux-ci dans les composants */
  --surface:        var(--c-creme);
  --surface-alt:    var(--c-gres);
  --surface-edito:  var(--c-vert-deep);
  --surface-preuve: var(--c-charbon);

  --text:           var(--c-charbon);
  --text-muted:     var(--c-taupe);
  --text-invert:    var(--c-creme);
  --text-accent:    var(--c-vert);

  --line:           var(--c-gres);
  --focus-ring:     var(--c-vert);

  /* --- Typographie ----------------------------------------------------- */
  --f-poids:  "Geist", "Instrument Sans", system-ui, sans-serif;
  --f-souffle: "Playfair Display", serif;   /* italique seulement — Georgia est une famille bannie */
  --f-voix:   "IBM Plex Mono", ui-monospace, monospace;

  --fs-d1:     clamp(2.5rem, 4.4vw, 4rem);      /* 40 → 64 */
  --fs-d2:     clamp(1.875rem, 3vw, 2.75rem);   /* 30 → 44 */
  --fs-d3:     clamp(1.5rem, 2.2vw, 2rem);      /* 24 → 32 */
  --fs-body-l: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-body:   clamp(1rem, 1.1vw, 1.0625rem);
  --fs-label:  0.8125rem;                        /* 13 — plancher lisibilité 55+ */

  --lh-tight:  0.95;
  --lh-snug:   1.15;
  --lh-body:   1.6;

  --tr-d1:     -0.02em;
  --tr-d2:     -0.015em;
  --tr-label:   0.06em;

  --measure:   62ch;

  /* --- Espacement (multiples de 4) ------------------------------------- */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-6:  1.5rem;   /* 24 */
  --s-8:  2rem;     /* 32 */
  --s-12: 3rem;     /* 48 */
  --s-16: 4rem;     /* 64 */
  --s-24: 6rem;     /* 96 */
  --s-32: 8rem;     /* 128 */

  --rythme-section: var(--s-32);
  --page-margin:    2.5rem;
  --grid-max:       1320px;
  --grid-gutter:    var(--s-6);

  /* --- Rayons ---------------------------------------------------------- */
  --r-panneau: 18px;
  --r-media:   12px;
  --r-pill:    999px;
  --r-none:    0;

  /* --- Cibles tactiles (DESIGN.md v4.0 §5) ------------------------------ */
  --cible-mobile:  56px;
  --cible-desktop: 48px;
  --cible-ecart:   12px;
  --fs-stat: clamp(1.875rem, 3.4vw, 2.625rem); /* 30 → 42 */

  /* --- Exception bornée : voile de lisibilité du hero (DESIGN.md §1) ---
     Autorisée uniquement dans le hero et la nav quand elle flotte sur sa
     photo. Interdite partout ailleurs — ce n'est pas une ombre générale. */
  --scrim-hero-rgb: 28,26,21;
  /* Renforcée le 2026-08-19 : la nav flottante s'étend maintenant plus loin
     du logo (voir site-header.css), donc potentiellement sur des zones plus
     claires de la photo (ciel, façade) où l'ancienne ombre à 30% d'opacité
     ne suffisait plus. Double couche : contour serré + halo large. */
  --ombre-texte-photo: 0 1px 3px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.35);

  /* --- Opacités de crème (remplace 5 valeurs ad hoc par 2, +1 le 2026-08-18
     pour les filets sur fond vert profond — bloc « méthode » de l'accueil) -- */
  --creme-bordure:  rgba(246,236,223,.5);
  --creme-attenuee: rgba(246,236,223,.8);
  --creme-filet:    rgba(246,236,223,.24);

  /* --- Rayon des cartes cliquables (parcours, témoignages) --------------
     Distinct de --r-panneau (18px, panneaux non cliquables) et --r-media
     (12px, cadre photo) : valeur du handoff « Accueil réorganisée »
     2026-08-18, réservée aux cartes de ce handoff. */
  --r-carte: 16px;

  /* --- Mouvement ------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-in:    420ms;
  --dur-hover: 600ms;
  --dur-nav:   200ms;
  --stagger:   60ms;
}

@media (max-width: 640px) {
  :root {
    --rythme-section: 4.5rem;  /* 72 */
    --page-margin:    1.25rem; /* 20 */
  }
}

/* --- Interdits explicites -------------------------------------------------
   PAS de --shadow-*  : la hiérarchie vient de la surface et du vide.
   PAS de --gradient-*: aucun dégradé entre deux teintes.
   PAS de --c-accent-2: un seul accent, Vert Unéo.
   Bordeaux #6B2333 = impression seulement, volontairement absent d'ici.
   ------------------------------------------------------------------------- */

/* --- Socle --------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--f-poids);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 600; margin: 0; }
h1 { font-size: var(--fs-d1); line-height: var(--lh-tight); letter-spacing: var(--tr-d1); }
h2 { font-size: var(--fs-d2); line-height: var(--lh-snug); letter-spacing: var(--tr-d2); }
h3 { font-size: var(--fs-d3); line-height: var(--lh-snug); }

p { max-width: var(--measure); margin: 0; }

/* L'italique porte le bénéfice, jamais le service — aucune limite de longueur
   (BRANDGUIDE.md §5 : l'ancienne limite de 1 à 3 mots est retirée du système). */
.souffle {
  font-family: var(--f-souffle);
  font-style: italic;
  font-weight: 500;
  color: var(--text-accent);
}

.label {
  font-family: var(--f-voix);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Surfaces inversées : le focus passe en crème */
.surface-edito, .surface-preuve {
  color: var(--text-invert);
  --focus-ring: var(--c-creme);
  --text-accent: var(--c-creme);
}
.surface-edito  { background: var(--surface-edito); }
.surface-preuve { background: var(--surface-preuve); }

/* Les six composants qui vivaient ici (.diptyque__parole, .capsule, .pill,
   .logo, .filet, .reveal) sont retirés le 2026-08-18 : une seconde
   implémentation morte des mêmes composants, sous une autre convention de
   nommage que celle réellement utilisée dans v3-home.css (.diptyque/.parole/
   .image, .v3-capsule, .v3-pill, .logo-solid/.logo-floating/.wm, .v3-filet,
   [data-reveal]). tokens.css ne garde que :root et le socle typographique
   (CLAUDE.md, étape 8) ; les composants vivent dans la feuille qui les sert
   réellement. Le seul comportement qui servait encore ici (le poids 500 du
   `.label`) a été déplacé dans `.liste-filet-item .label` (v3-home.css). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}