/* ============================================================
   site.css — mariam-kamagate v2 · « BORD À BORD »
   Tissage à bandes plein champ. Aucun hex ici (lint L3) : tout vient
   de tokens.css. Aucun dégradé nulle part : les transitions de champ
   sont des COUTURES nettes, jamais des fondus.

   PRINCIPE DE LISIBILITÉ — chaque aplat porteur de texte emploie un
   couple MESURÉ par scripts/contrast.sh (21 paires, exit 0) :
     --fond sur --encre ............ 15.02      --brume sur --encre ...... 12.52
     --fond sur --lien .............. 8.94      --brume sur --lien ....... 7.45
     --fond sur --pierre-mouille .... 7.01      --brume sur --p.-mouille . 5.84
     --fond sur --accent-plein ...... 5.84      --brume sur --accent ..... 4.87
     --accent-decoratif sur --encre . 6.00      --pierre sur --encre ..... 5.01
     --fond sur --lagune ............ 4.51  (LARGE UNIQUEMENT : ≥24px)
   Paires mortes, jamais employées : --accent-decoratif sur --pierre-mouille
   (2.80) ou sur --accent-plein (2.33) · --pierre sur --accent-plein (1.95)
   ou sur --lagune (1.50) · --brume sur --lagune (3.76).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--texte);
  background: var(--encre);          /* aucune zone écru ne peut apparaître au rebond */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; margin: 0; text-wrap: balance; }
p  { margin: 0 0 var(--sp-3); }
ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; }

.saut {
  position: absolute; left: var(--sp-3); top: -100%;
  z-index: 99; padding: var(--sp-2) var(--sp-4);
  background: var(--fond); color: var(--encre);
  font-family: var(--font-mono); font-size: var(--step--1);
  transition: top var(--dur-micro) var(--ease-micro);
}
.saut:focus-visible { top: var(--sp-3); outline: 3px solid var(--accent-plein); outline-offset: 2px; }

:where(a, article, .cta):focus-visible {
  outline: 3px solid var(--fond);
  outline-offset: 3px;
}

/* ── LA BANDE ET LE LÉ ────────────────────────────────────────────────────
   La page EST une étoffe : 7 bandes pleine largeur de hauteurs franchement
   inégales, cousues par un fil écru. L'écru ne subsiste QUE là et dans le
   texte posé sur les aplats — il n'est plus jamais un fond. */
.bande {
  position: relative;
  border-block-end: var(--couture-bande) solid var(--fond);
}

.tissage { display: grid; gap: 0; }

/* Le fil de couture est tracé par la BORDURE du lé : il passe donc
   PAR-DESSUS la couche photographique, qui est en dessous. */
.le { position: relative; z-index: 2; min-width: 0; overflow: hidden; }

/* ══ BANDE 1 · MARIAM TISSÉE ══════════════════════════════════════════════ */
.bande--hero { min-height: var(--h-b1); background: var(--pierre-mouille); }

.tissage--hero {
  position: relative;
  min-height: var(--h-b1);
  /* mobile : le tissage pivote de 90°, les lés deviennent des rangs inégaux */
  grid-template-rows: 1.9fr 0.55fr 1.15fr 0.75fr 0.5fr;
}
@media (min-width: 56.25rem) {
  .tissage--hero {
    grid-template-rows: none;
    /* Les lés 1-3 portent la photo (54 % de la largeur), les lés 4-5 sont des
       aplats qui portent le texte : à 1440 px la zone photo fait ~778 × 830,
       soit un cadrage de buste. Étalée sur toute la bande, la même image ne
       donnerait qu'une tranche horizontale du visage (mesuré : rognée à la
       bouche). Le nom, lui, traverse bien les cinq lés. */
    grid-template-columns: 2.3fr 0.5fr 0.55fr 2.1fr 0.75fr;
  }
}

/* Couche photographique CONTINUE, sous les lés : c'est elle qui fait que
   le portrait est DÉCOUPÉ par le tissage au lieu d'être posé dessus. */
.hero__photo, .hero__dessus {
  position: absolute; z-index: 1;
  inset: 0 0 34% 0;                    /* mobile : la photo tient le haut de la bande */
  width: 100%; height: auto;
  block-size: 66%;
  object-fit: cover; object-position: 50% 12%;
}
/* Dessus-dessous : cette copie repasse PAR-DESSUS le lé opaque suivant.
   Même géométrie que la couche du dessous → l'alignement est exact.
   Le clip est calé pour laisser le lé de couleur LISIBLE au-dessus et
   en dessous — sinon la copie le recouvre et la bande ne se lit plus. */
.hero__dessus { z-index: 3; clip-path: inset(52% 4% 6% 30%); }
@media (min-width: 56.25rem) {
  .hero__photo, .hero__dessus {
    inset: 0 46% 0 0;                  /* la photo occupe les lés 1 à 3 */
    width: 54%; height: 100%; block-size: auto;
    object-position: 54% 6%;
  }
  /* L'épaule et les cheveux repassent devant le lé rouge (37,1 → 45,2 % de la
     bande, soit 68,7 → 83,7 % de la couche photographique).
     RÈGLE APPRISE ICI : un lé opaque ne doit JAMAIS croiser le VISAGE. Le
     tissage fait traverser un membre, une épaule, une chevelure — pas une
     figure, qui s'y lit amputée et passe pour un défaut d'affichage. Le lé
     rouge a donc été déplacé vers la droite (colonnes 2.3/0.5/0.55 au lieu de
     1.7/0.5/1.15, largeur de photo inchangée à 54 %). */
  .hero__dessus { clip-path: inset(40% 24.5% 4% 68.7%); }
}

.le--photo   { background: transparent; }
.le--accent  { background: var(--accent-plein); }
.le--mouille { background: var(--pierre-mouille); }
.tissage--hero .le + .le { border-block-start: var(--couture) solid var(--fond); }
@media (min-width: 56.25rem) {
  .tissage--hero .le + .le { border-block-start: 0; border-inline-start: var(--couture) solid var(--fond); }
}

.hero__texte {
  position: absolute; z-index: 4;
  inset-inline: 0; inset-block-end: 0;
  display: grid;
}
@media (min-width: 56.25rem) {
  /* le bloc d'information vient occuper les lés 4-5 : plus aucune zone morte
     en bas à droite (grief nº3 de la v1 : « ça paraît vide et pas fini ») */
  .hero__texte { inset-block: 0; display: grid; grid-template-rows: 1fr auto; align-content: end; }
  .hero__bas {
    grid-row: 1;
    /* le bloc se pose exactement sur le lé 4 (54 → 87,9 %), qui est un aplat
       --pierre-mouille : le couple texte/fond reste mesuré (7.01). Il ne
       chevauche pas le lé 5, qui est rouge. */
    margin-inline: 54% 12.1%;
    align-content: center;
    background: transparent;
    border-block-start: 0;
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
  }
  .croise { grid-row: 2; }
}

/* ── LE CROISEMENT DESSUS-DESSOUS (mécanique signature) ───────────────────
   Le nom traverse les lés horizontalement et CHANGE DE COULEUR à chaque
   couture. Le texte réel est .croise__base ; les calques sont des copies
   visuelles aria-hidden, clippées sur la frontière d'un lé et colorées du
   couple mesuré de CE lé. Rien de typographique n'est animé : on déplace
   la couture, on ne recompose pas le texte.
   --k : décalage de couture piloté au scroll par motion.js (2 à 4 %). */
.croise { position: relative; --k: 0%; }
.croise__base, .croise__calque {
  display: block;
  margin: 0;
  padding: var(--sp-3) var(--marge-lit) var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-nom);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  /* mobile : le nom se replie. Le « nowrap » n'arrive qu'au-dessus de 900 px,
     où la mesure montre qu'il tient sur une ligne (sinon : 52 px de débordement). */
  overflow-wrap: break-word;
}
.croise__base   { background: var(--encre); color: var(--fond); }        /* 15.02 */
.croise__calque {
  position: absolute; inset: 0;
  transition: clip-path var(--dur-battage-2) var(--ease-battant);
}
/* frontières calées sur les fractions réelles des lés
   (desktop : lé 2 = 37,1 → 45,2 % · lé 5 = 87,9 → 100 %) */
.croise__calque--2 { background: var(--accent-plein);   color: var(--fond);
  clip-path: inset(0 calc(62% - var(--k)) 0 calc(8% + var(--k))); }                    /* 5.84 */
.croise__calque--5 { background: var(--pierre-mouille); color: var(--fond);
  clip-path: inset(0 0 0 calc(78% - var(--k))); }                                       /* 7.01 */
@media (min-width: 56.25rem) {
  .croise__base, .croise__calque { white-space: nowrap; }
  .croise__calque--2 { clip-path: inset(0 calc(54.8% - var(--k)) 0 calc(37.1% + var(--k))); }
  .croise__calque--5 { clip-path: inset(0 0 0 calc(87.9% - var(--k))); }
}

.hero__bas {
  background: var(--pierre-mouille);
  color: var(--fond);                                   /* 7.01 */
  padding: var(--sp-4) var(--marge-lit) var(--sp-5);
  display: grid; gap: var(--sp-3);
  border-block-start: var(--couture) solid var(--fond);
}
.hero__role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brume);                                  /* 5.84 */
}
.hero__adresse { margin: 0; font-size: var(--step-1); max-width: 38ch; }

/* ── LE CTA ───────────────────────────────────────────────────────────────
   Aplat --accent-plein, texte --fond (5.84). Au survol, une couture
   verticale balaie le bouton et recolore le libellé au passage. */
.cta {
  position: relative; overflow: hidden;
  display: inline-grid; gap: var(--sp-1);
  justify-self: start;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent-plein);
  color: var(--fond);
  text-decoration: none;
  border-radius: var(--rayon);
}
.cta__fil {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 0; background: var(--encre);
  transition: width var(--dur-pas) var(--ease-battant);
}
.cta__mot, .cta__num { position: relative; z-index: 1; }
.cta__mot { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.05; }
.cta__num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--brume); }  /* 4.87 → 12.52 */
.cta:hover .cta__fil, .cta:focus-visible .cta__fil { width: 100%; }
.cta:hover .cta__num, .cta:focus-visible .cta__num { color: var(--accent-decoratif); }        /* 6.00 sur --encre */

/* ══ BANDE 2 · LA CHAÎNE ══════════════════════════════════════════════════ */
.bande--chaine { min-height: var(--h-b2); background: var(--accent-plein); color: var(--fond); }
.tissage--chaine {
  min-height: var(--h-b2);
  align-content: center;
  padding: var(--sp-6) var(--marge-lit);
  gap: var(--sp-4);
}
.chaine__titre { font-size: var(--step-3); max-width: 22ch; }
.chaine__mots { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

/* LE BATTAGE : les mots impairs descendent, les pairs montent, staggerés. */
.chaine__mot {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  opacity: 0;
  transform: translateY(-8%);
  transition: opacity var(--dur-battage-1) var(--ease-battant),
              transform var(--dur-battage-1) var(--ease-battant);
}
.chaine__mot:nth-child(odd) { transform: translateY(8%); transition-duration: var(--dur-battage-3); }
.chaine__mot:nth-child(2n)  { transition-delay: var(--stagger); }
.chaine__mot:nth-child(3n)  { transition-delay: calc(var(--stagger) * 2); }
.chaine__mot.est-tissee     { opacity: 1; transform: none; }
.chaine__mot span {
  display: inline-block;
  border-block-end: 2px solid var(--fond);
  padding-block-end: 2px;
  transition: border-color var(--dur-micro) var(--ease-micro),
              padding-block-end var(--dur-micro) var(--ease-micro);
}
.chaine__mot:hover span { border-color: var(--encre); padding-block-end: 10px; }
.chaine__note { margin: 0; max-width: 62ch; color: var(--brume); }        /* 4.87 */

/* ══ BANDE 3 · LE MÉTIER ══════════════════════════════════════════════════ */
.bande--metier { min-height: var(--h-b3); background: var(--encre); color: var(--fond); }
.metier__entete {
  /* aplat distinct du premier lé : sans lui, en-tête + lé 1 forment 1300 px
     de --encre d'affilée sur mobile (mesuré par surface-probe). */
  background: var(--pierre-mouille);
  padding: var(--sp-6) var(--marge-lit) var(--sp-5);
}
.metier__titre  { font-size: var(--step-3); max-width: 20ch; }
.metier__chapo  { margin-block-start: var(--sp-3); margin-block-end: 0; max-width: 58ch; color: var(--brume); }  /* 12.52 */

.tissage--metier { display: flex; flex-direction: column; }

/* Les lés alternent --encre / --pierre-mouille : sur mobile, le champ
   chromatique change tous les ~250 px, jamais 900 px de scroll sans rupture. */
.metier__le {
  flex: 1 1 auto;
  /* min-width:0 OBLIGATOIRE : sans lui, le padding d'un item flex ne se comprime
     pas et les 5 lés débordent de 107 px à 1440 (mesuré, pas supposé). */
  min-width: 0;
  padding: var(--sp-5) var(--marge-lit);
  border-block-start: var(--couture) solid var(--fond);
  transition: flex-grow var(--dur-pas) var(--ease-battant);
}
/* Trois champs, pas deux : mesuré à la sonde de surface, une alternance
   encre/mouille laissait 3120 px de scroll mobile dans un seul champ --encre
   (seuil : 900). Chaque lé porte donc AUSSI son propre jeton de filet, pris
   dans les paires mesurées — jamais --pierre sur --accent-plein (1.95, morte). */
.metier__le:nth-child(1),
.metier__le:nth-child(4) { background: var(--encre);          --fil: var(--pierre); }
.metier__le:nth-child(2),
.metier__le:nth-child(5) { background: var(--pierre-mouille); --fil: var(--brume); }
.metier__le:nth-child(3) { background: var(--accent-plein);   --fil: var(--fond); }

/* Le titre de domaine est porté par le FIL lui-même : une couture écru
   pleine largeur de lé. Elle rompt le champ chromatique (un lé mobile
   faisait 1024 px d'un seul aplat, seuil 900) et elle est exactement le
   concept — l'écru n'est plus un fond, c'est le fil qui traverse. */
.metier__dom {
  font-size: var(--step-2);
  display: flex; align-items: baseline; gap: var(--sp-2);
  background: var(--fond);
  color: var(--encre);                                  /* 15.02 */
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--marge-lit)) var(--sp-4);
  padding: var(--sp-3) var(--marge-lit);
}
.metier__num {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--pierre-mouille);                         /* 7.01 sur le fil écru */
  transition: color var(--dur-micro) var(--ease-micro);
}
.metier__le:hover .metier__num, .metier__le:focus-visible .metier__num { color: var(--accent-plein); }  /* 5.84 */

.croisements { display: grid; gap: var(--sp-3); }
.crois {
  display: grid; gap: 2px;
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--fil);
  transition: border-color var(--dur-micro) var(--ease-micro),
              padding-inline-start var(--dur-micro) var(--ease-micro);
}
.crois:hover { border-color: var(--fond); padding-inline-start: var(--sp-4); }
.crois dt {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brume);                                  /* 12.52 / 5.84 */
}
.crois dd { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--fond); }

@media (min-width: 56.25rem) {
  /* le tissage se redresse : les lés redeviennent verticaux, largeurs inégales */
  .tissage--metier { flex-direction: row; align-items: stretch; }
  .metier__le {
    flex: 1.7 1 0;
    border-block-start: 0;
    border-inline-start: var(--couture) solid var(--fond);
    /* retrait propre au lé : --marge-lit (72 px) est calibré pour une bande
       pleine largeur, pas pour une colonne de ~230 px. */
    padding: var(--sp-5) var(--sp-4);
  }
  .metier__dom {
    margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
  }
  .metier__le:first-child  { border-inline-start: 0; }
  .metier__le:nth-child(2) { flex-grow: 2.4; }
  .metier__le:nth-child(3) { flex-grow: 1.2; }
  .metier__le:nth-child(4) { flex-grow: 2.1; }
  .metier__le:nth-child(5) { flex-grow: 1.5; }
  /* OUVERTURE DU PAS : le lé survolé s'ouvre, ses voisins se resserrent. */
  .metier__le:hover, .metier__le:focus-visible { flex-grow: 4.2; }
}

/* ══ BANDE 4 · L'ATELIER ══════════════════════════════════════════════════ */
.bande--atelier { min-height: var(--h-b4); background: var(--pierre-mouille); color: var(--fond); }
.tissage--atelier {
  min-height: var(--h-b4);
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "texte texte" "portrait korhogo" "pyramide pyramide";
}
.le--texte {
  grid-area: texte;
  padding: var(--sp-6) var(--marge-lit) var(--sp-5);
  overflow: visible;
}
.le--texte p { max-width: 58ch; }
.atelier__titre { font-size: var(--step-3); margin-block-end: var(--sp-4); max-width: 18ch; }
.atelier__signe {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--brume); margin: 0;                       /* 5.84 */
}
.le--portrait2 { grid-area: portrait; min-height: 40svh; }
.le--portrait2 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.le--matiere { background-size: cover; background-position: center; min-height: 30svh; }
.le--korhogo  { grid-area: korhogo;  background-image: url('/assets/img/korhogo.webp'); }
.le--pyramide { grid-area: pyramide; background-image: url('/assets/img/pyramide.webp'); }
.le--bureau   { background-image: url('/assets/img/bureau.webp'); }
/* la matière se retend au survol — jamais un zoom générique */
.le--matiere, .le--portrait2 img {
  filter: saturate(0.72) contrast(1.04);
  transition: filter var(--dur-pas) var(--ease-battant), transform var(--dur-pas) var(--ease-battant);
}
.le--matiere:hover, .le--portrait2:hover img { filter: saturate(1) contrast(1); transform: translateY(-4px); }

.tissage--atelier .le { border-block-start: var(--couture) solid var(--fond); }
.tissage--atelier .le--texte { border-block-start: 0; }
.le--korhogo { border-inline-start: var(--couture) solid var(--fond); }
@media (min-width: 56.25rem) {
  .tissage--atelier {
    grid-template-columns: 2.6fr 1.1fr 1.5fr 0.9fr;
    grid-template-areas: "texte korhogo portrait pyramide";
  }
  .le--portrait2, .le--matiere { min-height: 0; }
  .tissage--atelier .le { border-block-start: 0; border-inline-start: var(--couture) solid var(--fond); }
  .tissage--atelier .le--texte { border-inline-start: 0; }
}

/* ══ BANDE 5 · RESPIRATION ════════════════════════════════════════════════
   Aplat --lagune : mesuré 4.51. Display et chapô ≥24 px UNIQUEMENT.
   Aucun texte courant ne se pose ici — c'est une bande de respiration. */
.bande--lagune { min-height: var(--h-b5); background: var(--lagune); color: var(--fond); }
.tissage--lagune {
  min-height: var(--h-b5);
  align-content: center; gap: var(--sp-4);
  padding: var(--sp-6) var(--marge-lit);
}
.lagune__titre { font-size: var(--step-4); max-width: 24ch; }
.lagune__chapo { margin: 0; font-size: var(--step-chapo); max-width: 44ch; line-height: 1.35; }

/* ══ BANDE 6 · CE QUE JE NE PROMETS PAS ═══════════════════════════════════ */
.bande--promets { min-height: var(--h-b6); background: var(--encre); color: var(--fond); }
.tissage--promets {
  min-height: var(--h-b6);
  align-content: center; gap: var(--sp-4);
  padding: var(--sp-6) var(--marge-lit);
}
/* Même couture écru que les titres de domaine : le fil traverse aussi cette
   bande, qui faisait sinon 1024 px d'un seul --encre sur mobile (seuil 900). */
.promets__titre {
  font-size: var(--step-3);
  background: var(--fond); color: var(--encre);         /* 15.02 */
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--marge-lit)) var(--sp-2);
  padding: var(--sp-4) var(--marge-lit);
}
.promets__liste { display: grid; gap: var(--sp-3); max-width: 66ch; }
.promets__liste li {
  padding-inline-start: var(--sp-4);
  border-inline-start: 3px solid var(--fil);
  color: var(--brume);                                  /* 12.52 */
  opacity: 0; transform: translateX(-2%);
  transition: opacity var(--dur-battage-2) var(--ease-battant),
              transform var(--dur-battage-2) var(--ease-battant),
              border-color var(--dur-micro) var(--ease-micro);
}
.promets__liste li:nth-child(2n) { transition-delay: var(--stagger); }
.promets__liste li.est-tissee    { opacity: 1; transform: none; }
.promets__liste li:hover { border-color: var(--accent-plein); }
.promets__non { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--fond); }
/* La chute change de champ : elle se détache de la liste et raccourcit
   d'autant l'intervalle --encre. --accent-decoratif est MORT sur mouille
   (2.80) — le texte y passe donc en --brume (5.84). */
.promets__pied {
  margin: var(--sp-4) calc(-1 * var(--marge-lit)) calc(-1 * var(--sp-6));
  padding: var(--sp-5) var(--marge-lit) var(--sp-6);
  background: var(--pierre-mouille);
  color: var(--brume);                                  /* 5.84 */
  max-width: none;
}
.promets__pied > span { display: block; max-width: 60ch; }

/* ══ BANDE 7 · CONTACT ════════════════════════════════════════════════════
   Le bleu du Bic n'apparaît QU'ICI, une seule fois dans toute la page. */
.bande--contact { min-height: var(--h-b7); background: var(--lien); color: var(--fond); }
.tissage--contact { min-height: var(--h-b7); grid-template-rows: auto 30svh; }
.le--adresse {
  padding: var(--sp-6) var(--marge-lit);
  display: grid; gap: var(--sp-4); align-content: center;
  overflow: visible;
}
.contact__titre { font-size: var(--step-4); }
.contact__ligne { margin: 0; max-width: 46ch; font-size: var(--step-1); color: var(--brume); }  /* 7.45 */
.cta--final .cta__mot { font-size: var(--step-3); }
.tissage--contact .le--bureau { border-block-start: var(--couture) solid var(--fond); }
@media (min-width: 56.25rem) {
  .tissage--contact { grid-template-rows: none; grid-template-columns: 2.7fr 1.1fr; }
  .tissage--contact .le--bureau { border-block-start: 0; border-inline-start: var(--couture) solid var(--fond); }
}

/* ══ PIED ═════════════════════════════════════════════════════════════════ */
.pied {
  background: var(--encre); color: var(--brume);         /* 12.52 */
  padding: var(--sp-6) var(--marge-lit);
  border-block-start: var(--couture-bande) solid var(--fond);
  display: grid; gap: var(--sp-3);
  font-size: var(--step--1);
}
.pied__mention { margin: 0; max-width: 72ch; }
.pied__mention strong { color: var(--fond); }
.pied__mono { margin: 0; font-family: var(--font-mono); color: var(--accent-decoratif); }  /* 6.00 */

[data-reveal] { will-change: transform, opacity; }


/* La navette n'existe QUE sur mobile : le desktop n'a pas de défilement
   horizontal à repérer. Masquée par défaut, sinon elle allonge la page
   grand écran de 30 px (mesuré). */
.navette { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE (≤ 900 px) — LE MÉTIER À TISSER
   Constat mesuré avant d'écrire une ligne : 8 règles :hover, 0 :active,
   0 écouteur tactile. Toutes les micro-interactions du site étaient
   accrochées au SURVOL, donc rigoureusement inexistantes au doigt — et le
   pilotage --k de la mécanique signature était enfermé dans la media query
   desktop. Le mobile n'était qu'un long défilement vertical de 8590 px.
   Rien ici ne touche le desktop.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 56.24rem) {

  /* ── LA NAVETTE ────────────────────────────────────────────────────────
     Les 5 domaines cessent d'être une pile : ils deviennent le métier, et
     c'est le pouce qui pousse la navette d'un lé au suivant. Le geste EST
     la métaphore — on traverse la trame au lieu de la dérouler. */
  /* La bande était calée à 150 svh pour une pile de 5 lés. Le métier
     horizontal ne fait plus que la hauteur d'un lé : garder 150 svh
     laissait ~600 px de vide sombre sous la navette (mesuré). */
  .bande--metier { min-height: auto; }

  .tissage--metier {
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tissage--metier::-webkit-scrollbar { display: none; }

  .metier__le {
    flex: 0 0 88%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-block-start: 0;
    border-inline-start: var(--couture) solid var(--fond);
  }
  .metier__le:first-child { border-inline-start: 0; }
  .metier__le:last-child  { border-inline-end: var(--couture) solid var(--fond); }

  /* Repère de position — la recherche est formelle : un défilement
     inhabituel sans indicateur de progression se paie en désorientation.
     Il est construit dans le même geste, pas dans un sprint plus tard. */
  .navette {
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--pierre-mouille);
    padding: 0 var(--marge-lit) var(--sp-4);
    font-family: var(--font-mono); font-size: var(--step--2);
    color: var(--brume);                                  /* 5.84 */
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .navette__compte b { color: var(--fond); font-weight: 400; }  /* 7.01 */
  .navette__rail {
    position: relative; flex: 1 1 auto; height: 2px;
    background: var(--pierre);
  }
  /* le fil de la navette : il avance d'un lé à l'autre, il ne s'étire pas */
  .navette__fil {
    position: absolute; inset-block: -1px; inset-inline-start: 0;
    width: 20%; background: var(--fond);
    transform: translateX(calc(var(--nav-p, 0) * 400%));
    transition: transform var(--dur-pas) var(--ease-battant);
  }
  .navette__aide {
    color: var(--fond);
    transition: opacity var(--dur-pas) var(--ease-micro);
  }
  .navette__aide::after { content: ' \2192'; }
  .navette.est-parcourue .navette__aide { opacity: 0; }

  /* ── PARITÉ TACTILE ────────────────────────────────────────────────────
     Chaque effet de survol reçoit son équivalent au doigt. `.est-pressee`
     est posée par motion.js sur pointerdown : iOS ne déclenche pas :active
     sur un élément sans gestionnaire, s'y fier serait un effet fantôme. */
  .metier__le.est-pressee            { background-color: var(--lagune); }
  .crois.est-pressee                 { border-color: var(--fond); padding-inline-start: var(--sp-4); }
  .chaine__mot.est-pressee span      { border-color: var(--encre); padding-block-end: 10px; }
  .promets__liste li.est-pressee     { border-color: var(--accent-plein); }
  .le--matiere.est-pressee           { filter: saturate(1) contrast(1); transform: translateY(-4px); }
  .cta.est-pressee .cta__fil         { width: 100%; }
  .cta.est-pressee .cta__num         { color: var(--accent-decoratif); }

  /* ── LE BATTAGE À L'OUVERTURE ──────────────────────────────────────────
     Les lés de couleur du hero se TISSENT à l'arrivée : la couleur est
     tirée en travers de l'image comme une passe de navette. clip-path et
     non transform — une boîte translatée déborderait sur sa voisine. */
  .tissage--hero .le--accent,
  .tissage--hero .le--mouille {
    animation: passe-navette var(--dur-battage-3) var(--ease-battant) both;
  }
  .tissage--hero .le--mouille { animation-delay: var(--stagger); animation-duration: var(--dur-battage-1); }
  .hero__photo { animation: passe-chaine var(--dur-battage-2) var(--ease-battant) both; }
}

@keyframes passe-navette {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }
}
@keyframes passe-chaine {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

/* ── TISSAGE PILOTÉ PAR LE SCROLL (scroll-driven, sans JS) ───────────────
   Chrome 115+ · Safari 18+ · Firefox 132+ (~84 % du parc). Sous @supports :
   là où ce n'est pas gêré, il ne se passe rien de plus, rien ne casse.
   Le fil écru du titre se TIRE quand son lé entre — sur l'axe INLINE pour
   les lés du métier, puisqu'ils arrivent horizontalement. */
@supports (animation-timeline: view()) {
  @media (max-width: 56.24rem) {
    .metier__le .metier__dom {
      animation: fil-tire linear both;
      animation-timeline: view(inline);
      animation-range: entry 5% entry 85%;
    }
    .promets__titre {
      animation: fil-tire linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 75%;
    }
  }
}
@keyframes fil-tire {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }
}

/* ══ ACCESSIBILITÉ : tout est SERVI À L'ÉTAT FINAL ════════════════════════
   Le croisement dessus-dessous reste VISIBLE — c'est un effet de composition,
   pas d'apparition : il survit à l'arrêt du mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .chaine__mot, .promets__liste li { opacity: 1 !important; transform: none !important; }
  /* les tissages mobiles sont servis tissés, pas en cours de tissage */
  .tissage--hero .le--accent, .tissage--hero .le--mouille,
  .metier__le .metier__dom, .promets__titre { clip-path: none !important; }
  .hero__photo { opacity: 1 !important; transform: none !important; }
  .tissage--metier { scroll-behavior: auto !important; }
}