/* ============================================================
   tokens.css — mariam-kamagate v2 · direction « BORD À BORD » (E4, 2026-07-29)

   TOUT hex vit ICI (lint L3). Palette EXTRAITE du terrain en E3 —
   ne jamais redéclarer un jeton ailleurs, et JAMAIS `--x: var(--x)`
   (gotcha « jeton CSS auto-référent », 2026-07-29 : rendu sans couleur,
   build vert et lint vert — seule une sonde runtime le voit).

   CE QUI EST VERROUILLÉ ET NE CHANGE PAS ENTRE v1 ET v2 :
     les 9 valeurs de palette, les 3 @font-face et les 3 replis à métriques
     ajustées (calculées à fontTools sur les fichiers réels — c'est ce qui
     donne le CLS 0, ne pas y toucher), le contrat .no-js.
   CE QUI A CHANGÉ :
     la DISTRIBUTION. La v1 posait la couleur en touches sur un fond écru
     dominant — le client l'a refusée pour ça. Ici l'écru est rétrogradé au
     rang de FIL : il ne subsiste qu'en coutures et en texte sur aplat.
     Les jetons de grille et de durée de « LE BORDEREAU » ont été retirés.
   ============================================================ */
:root {
  /* ── Palette (E3, ancrage terrain — voir design-system.md §Charte) ── */
  --fond:             #E7E5DF;  /* coton écru de la toile de Korhogo */
  --pierre:           #8A836F;  /* béton brut de La Pyramide, Plateau */
  --encre:            #170F0B;  /* pigment de boue ferrugineuse, noirci */
  --lagune:           #5C6B57;  /* lagune Ébrié réelle, trouble */
  --brume:            #D5D2C9;  /* harmattan */
  --lien:             #1B3A6B;  /* encre du stylo Bic Cristal */
  --accent-plein:     #9C2F2A;  /* cachet administratif — aplat porteur de texte */
  --sur-plein:        #E7E5DF;  /* encre SUR --accent-plein (mesuré 5.84) */
  --pierre-mouille:   #4F4A3D;  /* le même béton, LÀ où l'humidité tropicale l'a taché.
                                   Jeton de TEXTE secondaire : --pierre plafonne à 3.00 sur
                                   --fond (seuil « ui »), il ne peut PAS porter de texte. */
  --accent-decoratif: #A08D88;  /* filets et décor sur --encre (6.00) — JAMAIS sur
                                   --pierre-mouille (2.80) ni sur --accent-plein (2.33) */

  /* Jetons d'usage : surchargés PAR BANDE selon le fond du lé (voir site.css).
     On surcharge CE jeton, jamais un jeton de palette (gotcha « jeton auto-référent »). */
  --texte:        var(--encre);
  --texte-second: var(--pierre-mouille);
  --fil:          var(--pierre);

  /* ── Typographie (self-host, 1 woff2 variable par famille) ── */
  --font-display: 'Petrona', 'petrona-fallback', Georgia, serif;
  --font-body:    'Work Sans', 'worksans-fallback', 'Helvetica Neue', sans-serif;
  --font-mono:    'Fragment Mono', 'fragmentmono-fallback', 'Courier New', monospace;

  /* Échelle modulaire — ESPACES obligatoires autour des + et − : sans eux la
     propriété est ignorée EN SILENCE par le navigateur (lint L2, cf. RZB v7,
     dont les titres sortaient minuscules sans qu'aucune erreur ne soit levée). */
  --step--2:   clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem);
  --step--1:   clamp(0.81rem, 0.78rem + 0.16vw, 0.9rem);
  --step-0:    clamp(1.06rem, 1.03rem + 0.16vw, 1.15rem);
  --step-1:    clamp(1.27rem, 1.2rem + 0.35vw, 1.5rem);
  --step-2:    clamp(1.52rem, 1.39rem + 0.64vw, 1.95rem);
  --step-3:    clamp(1.83rem, 1.61rem + 1.1vw, 2.54rem);
  --step-4:    clamp(2.19rem, 1.84rem + 1.76vw, 3.3rem);
  /* Chapô ≥24px : seuil sous lequel un texte n'a PAS le droit de se poser sur
     l'aplat --lagune (mesuré 4.51, seuil « large » 3.0 — voir design-system.md). */
  --step-chapo: clamp(1.5rem, 1.35rem + 0.75vw, 1.9rem);
  --step-nom:   clamp(2.4rem, 0.6rem + 8.4vw, 9rem);

  /* ── Espacement (trame 4/8) ── */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 1rem;    --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4.5rem;  --sp-8: 7rem;

  /* ── Le tissage : coutures et lés ──────────────────────────────────────
     L'écru ne se voit plus qu'ICI, en fil de couture entre les lés. */
  --couture:       6px;                            /* fil entre deux lés */
  --couture-bande: 8px;                            /* fil entre deux bandes */
  --marge-lit:     clamp(1.15rem, 5vw, 4.5rem);    /* retrait de lecture dans un lé */
  --rayon:         0px;                            /* zéro arrondi : une couture est franche */

  /* ── Motion — « LE CROISEMENT DESSUS-DESSOUS » (E4) ────────────────────
     LE BATTAGE : les lés se rangent alternativement, impairs −8 % / pairs +8 %.
     LE CROISEMENT : les frontières de clip glissent de 2 à 4 % au scroll.
     L'ONDULATION : les lés défilent à 2–5 % de delta. */
  --dur-battage-1: 520ms;
  --dur-battage-2: 580ms;
  --dur-battage-3: 640ms;
  --stagger:       70ms;
  --dur-pas:       380ms;               /* ouverture du pas (hover d'un lé de domaine) */
  --dur-micro:     200ms;
  --ease-battant:  cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-micro:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* Les hauteurs de bande sont délibérément TOUTES différentes (garde-fou « rythme »).
   `svh` et non `vh` : la barre d'URL mobile fait bouger 100vh et fait exploser le CLS. */
:root {
  --h-b1:  92svh;   /* MARIAM TISSÉE */
  --h-b2:  42svh;   /* les six mots  */
  --h-b3: 150svh;   /* LE MÉTIER — la plus haute */
  --h-b4:  96svh;   /* le portrait revient en demi-lé */
  --h-b5:  60svh;   /* respiration lagune */
  --h-b6:  78svh;   /* ce que je ne promets pas */
  --h-b7:  70svh;   /* contact */
}

@media (min-width: 56.25rem) {
  :root {
    --couture:       8px;
    --couture-bande: 10px;
    --h-b1: 96svh; --h-b2: 46svh; --h-b3: 132svh; --h-b4: 90svh;
    --h-b5: 56svh; --h-b6: 72svh; --h-b7: 64svh;
  }
}

/* ============================================================
   Polices self-hostées + repli à MÉTRIQUES AJUSTÉES par famille.
   Gotcha CLS 0,74 (infusethe-v5, 2026-07-16) : le swap frappe TOUTES
   les familles, pas seulement la display. Les trois familles du haut
   de page sont donc préchargées ET dotées d'un repli ajusté.
   Valeurs calculées sur les fichiers réels (fontTools, rapport de
   hauteur d'x) — pas estimées :
     Petrona xh .443 / Georgia .4839      → 91.55 %
     Work Sans xh .500 / Arial .5186      → 96.41 %
     Fragment Mono xh .524 / Courier .4229 → 123.91 %
   ============================================================ */
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/petrona-var-latin.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-var-latin.woff2') format('woff2-variations');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('../fonts/fragmentmono-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'petrona-fallback';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
  size-adjust: 91.55%; ascent-override: 93.72%; descent-override: 29.49%; line-gap-override: 0%;
}
@font-face {
  font-family: 'worksans-fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 96.41%; ascent-override: 96.46%; descent-override: 25.21%; line-gap-override: 0%;
}
@font-face {
  font-family: 'fragmentmono-fallback';
  src: local('Courier New'), local('Liberation Mono');
  size-adjust: 123.91%; ascent-override: 76.67%; descent-override: 20.18%; line-gap-override: 0%;
}

/* ── Contrat no-js : le contenu EXISTE sans JavaScript ────────────────── */
.no-js [data-le],
.no-js [data-reveal]      { opacity: 1 !important; transform: none !important; }
.no-js .croise__calque    { clip-path: none !important; }
.no-js .metier__le        { flex: 1 1 0 !important; }