/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PROTOTYPE « PRÉCISION 47 »
   Étape A du cahier : navigation, héros, transition vers la preuve,
   début des expertises. Ordinateur et téléphone.

   Les jetons viennent de site/tokens.css (couleurs, polices, courbes).
   Ce fichier ne touche à aucun fichier du site en ligne.

   GÉOMÉTRIE DU HÉROS. La carte (territoire.webp, 2880 × 1800) et la
   grille (viewBox 1440 × 900) sont posées en « cover / slice ». Le 47e
   parallèle de la carte est à y = 400, soit 44,44 % de la hauteur ; le
   joint est à x = 1080, soit 75 %.
   Tout le reste est positionné en pourcentage sur les mêmes repères.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Le rouge Picbois47 du prototype : #E1061A (moodboard approuvée). Une
     seule variable ; il remplace le --red de tokens.css partout ici. */
  --red: #e1061a;
  --red-hover: #e1061a;
  --red-ring: rgba(225, 6, 26, 0.45);

  --y47: 44.44%;          /* le parallèle */
  --xj: 75%;              /* le joint : l'intersection principale (x = 1080) */
  --x-titre: 12.15%;      /* colonne du titre : 175 px sur 1440 */
  --marge-cadre: clamp(1.25rem, 4.4vw, 4rem);
  --rail-h: 84px;   /* relevé de 72 px le 22 sept. : le logo passe à 46 px */
  --t-monument: clamp(2.6rem, 6.1vw, 6.2rem);   /* trois lignes, la plus large : « VOTRE RÉALITÉ. » */
  --lh-titre: 1;          /* interligne du titre : relevé de 0,92 le 13 sept. pour laisser respirer les accents */
  --t-annot: 0.75rem;     /* 12 px mono — annotations de carte seulement */
  --grille-op: 0.07;
  --carte-op: 1;          /* l'intensité est cuite dans l'image */
  --ligne-ivoire: rgba(242, 239, 233, 0.16);
  --ligne-ivoire-forte: rgba(242, 239, 233, 0.34);
}

*, *::before, *::after { box-sizing: border-box; }
/* ── POURQUOI IL N'Y A PAS DE `overflow-x: hidden` ICI ──────────
   Il y en a eu un, le 25 sept., posé en garde-fou contre le glissement
   latéral sur iPhone. Il était à la fois inutile et nuisible.

   Inutile : la vraie cause était le rail, qui débordait entre 421 et
   475 px (voir plus bas). Elle est corrigée à la source — le contenu
   tient désormais dans l'écran de 320 à 1024 px, mesuré découpage
   neutralisé sur les onze pages.

   Nuisible : quand un seul axe cesse d'être `visible`, l'autre prend
   la valeur `auto`. Poser `overflow-x` sur la racine en faisait donc
   un conteneur de défilement — exactement le genre d'objet qui se
   laisse pousser du doigt sur iOS. Le remède entretenait le symptôme.

   Règle à garder : un débordement se corrige là où il naît. On ne le
   cache pas sous un découpage, qui masque le défaut dans Chrome sans
   l'empêcher dans Safari — et fait mentir le banc de vérification. */

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: var(--marge-cadre); top: -100px; z-index: 50; padding: 10px 14px; background: var(--ink); color: var(--canvas); font-weight: 600; }
.saut:focus { top: 12px; }

.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--t-label-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.mono { font-family: var(--f-mono); }

/* ═══════════════════ RAILS : navigation et action ═══════════════════ */

.rail {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--marge-cadre);
}
.rail-haut {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--rail-h);
  z-index: 5;
  background: var(--canvas);          /* zone libre du logo : rien ne passe dessous */
  border-bottom: 1px solid var(--ligne-ivoire);
}
.brand { display: flex; align-items: center; color: var(--ink); margin-right: auto; }
.brand svg { display: block; height: 46px; width: auto; }   /* la marque, pas une vignette */

.longitudes {
  position: absolute;
  left: 0; right: 0; top: var(--rail-h);
  height: 30px;
  z-index: 3;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: var(--t-annot);
  letter-spacing: 0.12em;
  color: var(--muted);
}
/* Halo cartographique : une ombre de la couleur du fond, sous les petits
   textes posés directement sur le territoire. */
.longitudes span, .entrees li, .parallele-etiquette, .sorties .sortie-texte, .sorties strong, .annot {
  text-shadow: 0 0 3px var(--canvas), 0 0 6px var(--canvas), 0 1px 10px var(--canvas);
}
.longitudes span {
  position: absolute;
  left: var(--x);
  top: 0;
  transform: translateX(-50%);
  padding-top: 10px;
}
.longitudes span::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; background: var(--muted);
}

/* Le menu : quatre liens en ligne sur ordinateur ; sur téléphone, un
   bouton les déplie. Sans JavaScript, les liens restent visibles. */
.menu-bouton { display: none; }
.menu-appel { display: none; }   /* l'appel n'existe que dans le panneau téléphone */
.menu ul { display: flex; gap: var(--sp-3); }
.menu a {
  display: inline-block;
  padding: 10px 2px;
  font-size: var(--t-small);
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.menu a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

/* ── Le menu Services (déroulant) — ajout du 15 sept. 2026, additif ─
   Au repos : rien ne change dans le rail, sauf un chevron de 10 px après
   « Services ». Ouvert : un panneau sombre sous le rail, aligné sur le lien. */
.menu-groupe { position: relative; display: inline-flex; align-items: center; }
.menu-deplier {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; min-height: 44px; margin-right: -22px;   /* logé dans la gouttière : le rail ne bouge pas */
  background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer;
}
.menu-deplier svg { width: 10px; height: 6px; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.menu-deplier:hover, .menu-groupe:hover .menu-deplier, .menu-groupe.ouvert .menu-deplier { color: var(--ink); }
.menu-groupe.ouvert .menu-deplier svg { transform: rotate(180deg); }
.menu-deplier:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.menu .sous-menu {
  display: none; position: absolute; left: -14px; top: 100%; min-width: 232px; z-index: 6;
  flex-direction: column; gap: 0; padding: 8px 14px 10px; margin: 0;
  background: var(--canvas); border: 1px solid var(--ligne-ivoire); border-top: 0;
}
.menu .menu-groupe.ouvert .sous-menu, .menu .menu-groupe:hover .sous-menu, html:not([data-js]) .menu .menu-groupe:focus-within .sous-menu { display: flex; }   /* clavier : par le bouton (.ouvert) ; sans JavaScript : au focus */
.sous-menu a { display: block; padding: 11px 0; font-size: var(--t-small); border-bottom: 1px solid var(--line); }
.sous-menu li:last-child a { border-bottom: 0; }
.sous-menu a[aria-current="page"], .menu a[aria-current="page"] { color: var(--ink); }
/* sans JavaScript : pas de bouton, le sous-menu s'ouvre au survol et au focus seulement */
html:not([data-js]) .menu-deplier { display: none; }

/* Le rail se replie dès qu'il manque de place, à n'importe quelle
   largeur. Sans cette règle, il restait sur une seule ligne au-dessus
   de 420 px et débordait jusqu'à ~475 px — c'est-à-dire sur TOUS les
   iPhone Plus et Pro Max (428, 430 et 440 px de large), qui pouvaient
   alors faire glisser la page latéralement de 45 px. Sur grand écran
   il y a de la place : rien ne se replie, rien ne change. */
.rail-haut { flex-wrap: wrap; }
.rail-haut .menu { min-width: 0; }

.action-haut, .action-bas {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ligne-ivoire-forte);
  transition: border-color var(--dur) var(--ease);
}
.action-haut:hover, .action-bas:hover { border-bottom-color: var(--ink); }
.action-haut span, .action-bas span { transition: transform var(--dur) var(--ease); }
.action-haut:hover span { transform: translate(2px, -2px); }
.action-bas:hover span { transform: translateY(2px); }

.rail-bas {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--rail-h);
  z-index: 4;
  background: var(--canvas);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid var(--ligne-ivoire);
}
.rail-bas .annot-bd { justify-self: end; text-align: right; }
.action-bas { border-bottom: 0; position: relative; justify-self: center; }
.action-bas::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: var(--ligne-ivoire-forte);
}

/* ═══════════════════ HÉROS ═══════════════════ */

.heros {
  position: relative;
  min-height: max(100vh, 760px);
  min-height: max(100svh, 760px);
  overflow: hidden;
  background: var(--canvas);
}

.carte {
  position: absolute;
  inset: var(--rail-h) 0 var(--rail-h) 0;
  background: url("territoire.webp") center / cover no-repeat;
  opacity: var(--carte-op);
  pointer-events: none;
  will-change: transform, opacity;
}
.grille {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform, opacity;
}
.grille-lignes path { stroke: var(--ink); stroke-opacity: var(--grille-op); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.grille-reperes path { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }

/* ── Le 47e parallèle ────────────────────────────────────────── */
.parallele {
  position: absolute;
  top: var(--y47);
  height: 2px;
  margin-top: -1px;
  background: var(--red);
  z-index: 2;
  pointer-events: none;
  transform-origin: left center;
}
.parallele-gauche { left: 0; width: calc(var(--x-titre) - 24px); }
.parallele-droite { left: var(--x-droite, calc(var(--x-titre) + var(--t-monument) * 7.55 + 24px)); right: 0; }
.parallele-etiquette {
  position: absolute;
  left: var(--marge-cadre);
  top: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-annot);
  letter-spacing: 0.12em;
  color: var(--ink);
}

/* ── Le cadre : tout est posé sur les repères de la carte ─────── */
.cadre { position: absolute; inset: 0; z-index: 3; }

.annot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: var(--t-annot);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.annot-forte { color: var(--text); }
.annot sup { font-size: 0.72em; line-height: 0; vertical-align: 0.45em; letter-spacing: 0; }

/* Les entrées, posées sur le collecteur. */
.entrees {
  position: absolute;
  left: var(--x-titre);
  top: 19%;
  width: calc(var(--xj) - var(--x-titre) - 48px);
  display: flex;
  justify-content: space-between;
  transform: translateY(-100%);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.entrees li { position: relative; padding-bottom: 16px; white-space: nowrap; }
.entrees li::after {
  content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--text);
}
.collecteur { position: absolute; inset: 0; pointer-events: none; }
.collecteur::before {          /* le collecteur horizontal */
  content: ""; position: absolute; left: var(--x-titre); top: 19%; height: 1px;
  width: calc(var(--xj) - var(--x-titre)); background: var(--ligne-ivoire-forte);
  transform-origin: left center;
}
.collecteur::after {           /* la descente vers le joint */
  content: ""; position: absolute; left: var(--xj); top: 19%; width: 1px;
  height: calc(var(--y47) - 19%); background: var(--ligne-ivoire-forte);
  transform-origin: top center;
}

/* ── Le titre monumental ─────────────────────────────────────── */
.titre {
  position: absolute;
  left: var(--x-titre);
  /* Trois lignes : la 1re au-dessus du parallèle, les deux autres dessous.
     La ligne vise l'espace entre la 1re et la 2e ; --corr est mesuré au chargement. */
  top: calc(var(--y47) - var(--t-monument) * var(--lh-titre) + var(--corr-titre, calc(var(--t-monument) * 0.106)));
  margin: 0;
  font-size: var(--t-monument);
  line-height: var(--lh-titre);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.titre .ligne { display: block; }

.chapo {
  position: absolute;
  left: var(--x-titre);
  top: calc(var(--y47) + var(--t-monument) * var(--lh-titre) * 2 + 30px);
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.5;
  color: var(--text);
  text-shadow: 0 0 3px var(--canvas), 0 0 8px var(--canvas);
}

/* ── Le joint, le tronc, les sorties ─────────────────────────── */
.joint {
  position: absolute;
  left: var(--xj);
  top: var(--y47);
  width: 0; height: 0;
  z-index: 4;
}
.joint .point-rouge {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--red);
}
.joint .viseur {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px;
  fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.75;
}

.tronc {
  position: absolute;
  left: var(--xj);
  top: var(--y47);
  width: 1px;
  height: calc(var(--y-sortie-3) - var(--y47) + 18px);
  background: var(--ligne-ivoire-forte);
  transform-origin: top center;
  pointer-events: none;
}

/* Le fil continue sous la dernière sortie jusqu'au rail, puis reprend dans
   la section des expertises : le héros et la suite partagent le même tracé. */
.tronc-suite {
  position: absolute;
  left: var(--xj);
  top: calc(var(--y-sortie-3) + 18px);
  bottom: var(--rail-h);
  width: 1px;
  background: var(--ligne-ivoire);
  pointer-events: none;
}

.sorties { position: absolute; left: var(--xj); top: 0; bottom: 0; right: var(--marge-cadre); }
.sorties li { position: absolute; left: 0; top: var(--y-sortie); }
.sorties li:nth-child(1) { --y-sortie: var(--y-sortie-1); }
.sorties li:nth-child(2) { --y-sortie: var(--y-sortie-2); }
.sorties li:nth-child(3) { --y-sortie: var(--y-sortie-3); }
.sorties a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 50px;
  min-height: 44px;
}
.sorties .tap {
  position: absolute; left: 0; top: 18px; width: 40px; height: 1px;
  background: var(--ligne-ivoire-forte); transform-origin: left center;
}
.sorties .tap::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ink);
}
.sorties .icone { flex: 0 0 auto; width: 36px; height: 36px; }
.sorties .icone svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.sorties .icone .coins { stroke-width: 1; opacity: 0.6; }
.sorties .sortie-texte { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }
.sorties strong { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); text-transform: uppercase; white-space: nowrap; }
.sorties .sortie-texte > span {
  font-size: 0.875rem; color: var(--muted); line-height: 1.4; max-width: 26ch;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sorties a:hover .sortie-texte > span,
.sorties a:focus-visible .sortie-texte > span { opacity: 1; transform: none; }
.sorties a:hover strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }
/* Écrans intermédiaires (tablette en paysage, petit portable) : la colonne des sorties, à droite de 75 %,
   n'a pas la place pour « APPLICATION SUR MESURE » sur une ligne ; les libellés se replient sur deux. */
@media (min-width: 861px) and (max-width: 1180px) {
  .sorties strong { white-space: normal; max-width: 12ch; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .sorties a { padding-left: 38px; gap: 10px; }
  .sorties .tap { width: 28px; }
  .sorties strong { font-size: 0.8125rem; }
}

:root {
  --y-sortie-1: 54.4%;
  --y-sortie-2: 65%;
  --y-sortie-3: 75.6%;
}

/* ═══════════════════ MOUVEMENT DU HÉROS ═══════════════════
   Ordre du cahier : grille → parallèle → entrées → convergence → joint
   → sorties. 1,6 s en tout. Le titre, le chapô et les actions ne
   bougent jamais : ils sont lisibles dès la première image.
   États initiaux uniquement si le moteur a démarré (data-motion="on")
   et tant que la classe .pret n'est pas posée. */

html[data-motion="on"] .heros:not(.pret) .carte,
html[data-motion="on"] .heros:not(.pret) .grille { opacity: 0; }
html[data-motion="on"] .heros:not(.pret) .parallele { transform: scaleX(0); }
html[data-motion="on"] .heros:not(.pret) .entrees li { opacity: 0; transform: translateY(6px); }
html[data-motion="on"] .heros:not(.pret) .collecteur::before { transform: scaleX(0); }
html[data-motion="on"] .heros:not(.pret) .collecteur::after { transform: scaleY(0); }
html[data-motion="on"] .heros:not(.pret) .joint .point-rouge { transform: scale(0); }
html[data-motion="on"] .heros:not(.pret) .joint .viseur { opacity: 0; transform: scale(1.3); }
html[data-motion="on"] .heros:not(.pret) .tronc { transform: scaleY(0); }
html[data-motion="on"] .heros:not(.pret) .sorties .tap { transform: scaleX(0); }
html[data-motion="on"] .heros:not(.pret) .sorties .icone,
html[data-motion="on"] .heros:not(.pret) .sorties .sortie-texte { opacity: 0; transform: translateX(-6px); }

html[data-motion="on"] .heros .carte  { transition: opacity 800ms var(--ease-out) 0ms; }
html[data-motion="on"] .heros .grille { transition: opacity 400ms var(--ease-out) 0ms; }
html[data-motion="on"] .heros .parallele-gauche { transition: transform 220ms var(--ease-out) 100ms; }
html[data-motion="on"] .heros .parallele-droite { transition: transform 420ms var(--ease-out) 300ms; }
html[data-motion="on"] .heros .entrees li { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(520ms + var(--i) * 90ms); }
html[data-motion="on"] .heros .collecteur::before { transition: transform 360ms var(--ease-out) 500ms; }
html[data-motion="on"] .heros .collecteur::after { transition: transform 220ms var(--ease-out) 820ms; }
html[data-motion="on"] .heros .joint .point-rouge { transition: transform 320ms var(--ease-spring) 1000ms; }
html[data-motion="on"] .heros .joint .viseur { transition: opacity 260ms var(--ease-out) 1040ms, transform 260ms var(--ease-out) 1040ms; }
html[data-motion="on"] .heros .tronc { transition: transform 320ms var(--ease-out) 1060ms; }
html[data-motion="on"] .heros .sorties .tap { transition: transform 200ms var(--ease-out); transition-delay: calc(1120ms + var(--i) * 90ms); }
html[data-motion="on"] .heros .sorties .icone,
html[data-motion="on"] .heros .sorties .sortie-texte { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); transition-delay: calc(1180ms + var(--i) * 90ms); }

/* Réaction légère au pointeur, ordinateur seulement (variables posées par le script). */
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .heros .carte  { transform: translate(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 4px)); }
  html[data-motion="on"] .heros .grille { transform: translate(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 7px)); }
}

/* ═══════════════════ SECTIONS SUIVANTES ═══════════════════ */

.cadre-section { padding: 0 var(--marge-cadre); max-width: 1600px; margin: 0 auto; }

.section-tete { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.trait-47 { display: inline-block; width: 40px; height: 2px; background: var(--red); }
.section-tete-grande { flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.section-tete-grande h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.1; max-width: 26ch; text-wrap: balance; }
.section-intro { max-width: 58ch; font-size: var(--t-lead); line-height: 1.55; margin-top: var(--sp-2); display: grid; gap: var(--sp-3); }

/* ── La preuve ──────────────────────────────────────────────── */
.preuve { padding: var(--sp-7) 0 var(--sp-8); }
.preuve .cadre-section { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--sp-3); row-gap: 0; }
.preuve .section-tete { grid-column: 1 / -1; }

.projet { margin: 0; display: grid; gap: var(--sp-3); align-content: start; }
.projet-image { display: block; overflow: hidden; background: var(--band); }
.projet-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms var(--ease-out); }
.projet-image:hover img { transform: scale(1.015); }

.projet-pano { grid-column: 1 / span 8; grid-row: 2; }
.projet-pano .projet-image { aspect-ratio: 21 / 9; }
.projet-vertical { grid-column: 9 / -1; grid-row: 2; margin-top: clamp(120px, 18vw, 260px); }
.projet-vertical .projet-image { aspect-ratio: 4 / 5; }
.projet-vertical .projet-image img { object-position: left top; }

figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-2); row-gap: 4px; align-items: baseline; }
.projet-no { grid-row: 1 / span 4; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.12em; color: var(--muted); padding-top: 4px; }
.projet-nom { font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.projet-meta { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.projet-desc { max-width: 44ch; color: var(--text); }
.lien-mono { display: inline-flex; gap: 0.4em; align-items: center; min-height: 44px; font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink); border-bottom: 1px solid var(--ligne-ivoire-forte); align-self: start; justify-self: start; transition: border-color var(--dur) var(--ease); }
.lien-mono:hover { border-bottom-color: var(--ink); }

/* Entrée par masque au défilement : la capture se découvre de bas en
   haut, sans rotation, sans échelle. */
html[data-motion="on"] [data-rv="masque"] .projet-image { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--ease-out); }
html[data-motion="on"] [data-rv="masque"].vu .projet-image { clip-path: inset(0 0 0 0); }
html[data-motion="on"] [data-rv="masque"] figcaption { opacity: 0; transform: translateY(var(--rise-block)); transition: opacity 700ms var(--ease-out) 300ms, transform 700ms var(--ease-out) 300ms; }
html[data-motion="on"] [data-rv="masque"].vu figcaption { opacity: 1; transform: none; }

html[data-motion="on"] [data-rv="haut"] { opacity: 0; transform: translateY(var(--rise-block)); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
html[data-motion="on"] [data-rv="haut"].vu { opacity: 1; transform: none; }

/* ── Les trois expertises ───────────────────────────────────── */
.expertises { position: relative; padding: var(--sp-8) 0 var(--sp-8); }
.expertises::before {
  content: ""; position: absolute; left: var(--xj); top: 0; height: calc(var(--sp-8) - 8px); width: 1px;
  background: var(--ligne-ivoire);
}
.expertises::after {
  content: ""; position: absolute; left: var(--xj); top: calc(var(--sp-8) - 12px); width: 7px; height: 7px; margin-left: -3px;
  border-radius: 50%; background: var(--ink); opacity: 0.6;
}
.trio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--sp-3);
  row-gap: var(--sp-6);
}
.expertise { display: grid; gap: var(--sp-2); align-content: start; }
.expertise h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; }
.expertise > p:not(.label) { max-width: 48ch; }
.expertise h3 { max-width: 22ch; }
.expertise-no { margin-top: var(--sp-2); }
.expertise .schema { position: relative; border-top: 1px solid var(--line); padding-top: var(--sp-3); }

/* Trois comportements, trois largeurs : rien d'interchangeable. */
.expertise-web  { grid-column: 1 / span 5; }
.expertise-auto { grid-column: 7 / span 6; }
.expertise-app  { grid-column: 1 / span 12; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--sp-5); }
.expertise-app .schema { grid-row: 1 / span 5; }
.expertise-app .expertise-no { margin-top: 0; }

/* 01 — la grille assemble une page à partir de blocs */
.schema-web { height: 190px; }
.schema-web .bloc { position: absolute; border: 1px solid var(--ink); opacity: 0.85; }
.schema-web .b1 { left: 0; top: var(--sp-3); width: 100%; height: 22px; }
.schema-web .b2 { left: 0; top: calc(var(--sp-3) + 30px); width: 62%; height: 70px; }
.schema-web .b3 { right: 0; top: calc(var(--sp-3) + 30px); width: 34%; height: 70px; }
.schema-web .b4 { left: 0; top: calc(var(--sp-3) + 108px); width: 100%; height: 28px; }
.schema-web .b5 { left: 0; top: calc(var(--sp-3) + 144px); width: 48%; height: 16px; }
/* Le joint : là où les deux blocs s'emboîtent, comme dans le logo. */
.schema-web .joint-mini { position: absolute; left: 64%; top: calc(var(--sp-3) + 65px); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--red); }
html[data-motion="on"] .expertise-web .bloc { transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out); }
html[data-motion="on"] .expertise-web:not(.vu) .b1 { transform: translateY(-24px); opacity: 0; }
html[data-motion="on"] .expertise-web:not(.vu) .b2 { transform: translateX(-32px); opacity: 0; }
html[data-motion="on"] .expertise-web:not(.vu) .b3 { transform: translateX(32px); opacity: 0; }
html[data-motion="on"] .expertise-web:not(.vu) .b4 { transform: translateY(24px); opacity: 0; }
html[data-motion="on"] .expertise-web:not(.vu) .b5 { transform: translateY(24px); opacity: 0; }
html[data-motion="on"] .expertise-web .b2 { transition-delay: 120ms; }
html[data-motion="on"] .expertise-web .b3 { transition-delay: 220ms; }
html[data-motion="on"] .expertise-web .b4 { transition-delay: 340ms; }
html[data-motion="on"] .expertise-web .b5 { transition-delay: 440ms; }
html[data-motion="on"] .expertise-web .joint-mini { transition: transform 360ms var(--ease-spring) 620ms; }
html[data-motion="on"] .expertise-web:not(.vu) .joint-mini { transform: scale(0); }

/* 02 — déclencheur → décision humaine → résultat */
.schema-auto { height: 190px; }
.schema-auto .fil { position: absolute; left: 0; right: 0; top: calc(var(--sp-3) + 40px); height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.schema-auto .noeud { position: absolute; top: calc(var(--sp-3) + 40px); display: grid; gap: 3px; width: 30%; }
.schema-auto .n1 { left: 0; }
.schema-auto .n2 { left: 50%; transform: translateX(-50%); text-align: center; }
.schema-auto .n3 { right: 0; text-align: right; }
.schema-auto .noeud i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin: -4px 0 14px; }
.schema-auto .n2 i { margin-left: auto; margin-right: auto; }
.schema-auto .n3 i { margin-left: auto; }
.schema-auto .humain i { width: 13px; height: 13px; margin-top: -6px; background: var(--red); }
.schema-auto .noeud b { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.schema-auto .noeud small { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.04em; color: var(--muted); }
html[data-motion="on"] .expertise-auto .fil { transition: transform 900ms var(--ease-out) 100ms; }
html[data-motion="on"] .expertise-auto:not(.vu) .fil { transform: scaleX(0); }
html[data-motion="on"] .expertise-auto .noeud i { transition: transform 380ms var(--ease-spring); }
html[data-motion="on"] .expertise-auto:not(.vu) .noeud i { transform: scale(0); }
html[data-motion="on"] .expertise-auto .n1 i { transition-delay: 150ms; }
html[data-motion="on"] .expertise-auto .n2 i { transition-delay: 560ms; }
html[data-motion="on"] .expertise-auto .n3 i { transition-delay: 980ms; }
html[data-motion="on"] .expertise-auto .noeud b, html[data-motion="on"] .expertise-auto .noeud small { transition: opacity 400ms var(--ease-out); }
html[data-motion="on"] .expertise-auto:not(.vu) .noeud b, html[data-motion="on"] .expertise-auto:not(.vu) .noeud small { opacity: 0; }
html[data-motion="on"] .expertise-auto .n1 b, html[data-motion="on"] .expertise-auto .n1 small { transition-delay: 250ms; }
html[data-motion="on"] .expertise-auto .n2 b, html[data-motion="on"] .expertise-auto .n2 small { transition-delay: 660ms; }
html[data-motion="on"] .expertise-auto .n3 b, html[data-motion="on"] .expertise-auto .n3 small { transition-delay: 1080ms; }

/* 03 — un besoin terrain devient une interface */
.schema-app { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; gap: var(--sp-2); min-height: 190px; }
.schema-app .terrain { font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.55; color: var(--text); max-width: 26ch; }
.schema-app .fleche { position: relative; height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.schema-app .fleche::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg); }
.schema-app .interface { display: grid; border-top: 1px solid var(--ink); }
.schema-app .champ { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--sp-2); padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); color: var(--ink); }
.schema-app .champ em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.schema-app .prio { color: var(--ink); font-weight: 600; }
html[data-motion="on"] .expertise-app .fleche { transition: transform 500ms var(--ease-out) 200ms; }
html[data-motion="on"] .expertise-app:not(.vu) .fleche { transform: scaleX(0); }
html[data-motion="on"] .expertise-app .champ { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
html[data-motion="on"] .expertise-app:not(.vu) .champ { opacity: 0; transform: translateX(12px); }
html[data-motion="on"] .expertise-app .champ:nth-child(1) { transition-delay: 560ms; }
html[data-motion="on"] .expertise-app .champ:nth-child(2) { transition-delay: 660ms; }
html[data-motion="on"] .expertise-app .champ:nth-child(3) { transition-delay: 760ms; }
html[data-motion="on"] .expertise-app .champ:nth-child(4) { transition-delay: 860ms; }

.reserve { display: block; height: 0; }
.fin-proto { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }

/* ═══════════════════ PORTABLE 1280 et moins ═══════════════════ */
@media (max-width: 1320px) {
  :root { --t-monument: clamp(2.6rem, 5.2vw, 5.4rem); }
}

/* ═══════════════════ TÉLÉPHONE ═══════════════════
   Pas une réduction de l'écran d'ordinateur : le titre vient d'abord,
   le schéma devient vertical, la carte s'efface, le parallèle devient
   un repère vertical court. */
@media (max-width: 860px) {
  :root { --rail-h: 72px; --marge-cadre: 20px; --carte-op: 0.5; }

  .longitudes { display: none; }
  .brand svg { height: 38px; }

  .rail-haut { gap: var(--sp-2); }
  html[data-js] .menu-bouton {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
    font: inherit; font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink);
    background: none; border: 0; border-bottom: 1px solid var(--ligne-ivoire-forte); cursor: pointer;
    position: relative; z-index: 7;
  }
  .menu-bouton[aria-expanded="true"] { border-bottom-color: var(--ink); }

  /* ── Le panneau téléphone (15 sept. 2026) : plein écran, opaque ─
     Toujours dans le flux du document (jamais display:none) pour qu'une
     transition courte soit possible ; invisible et inerte au repos.
     Ouvert : il couvre toute la fenêtre sous le rail, qui passe en fixe
     au-dessus. Le défilement de la page est bloqué par pages.js /
     precision47.js (html.menu-ouvert). Sans JavaScript : la rangée de
     liens sous le rail, plus bas. */
  html[data-js] .menu > ul {
    position: fixed; inset: 0; z-index: 6;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: calc(var(--rail-h) + var(--sp-4)) var(--marge-cadre) var(--sp-4);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--canvas);
    visibility: hidden; opacity: 0;
    transition: opacity 180ms var(--ease), visibility 0s linear 180ms;
  }
  html[data-js] .menu > ul.ouvert { visibility: visible; opacity: 1; transition: opacity 180ms var(--ease), visibility 0s; }
  html.menu-ouvert .rail-haut, html.menu-ouvert body.page .rail-haut { position: fixed; inset: 0 0 auto 0; z-index: 7; border-bottom-color: var(--ligne-ivoire); }
  html.menu-ouvert .rail-haut .brand { position: relative; z-index: 7; }   /* au-dessus du panneau, comme le bouton */
  html.menu-ouvert body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }   /* défilement bloqué, top posé par le script */
  .menu > ul { flex-direction: column; gap: 0; }
  .menu > ul > li { transition: opacity 180ms var(--ease) 40ms, transform 180ms var(--ease) 40ms; }
  html[data-js] .menu > ul:not(.ouvert) > li { opacity: 0; transform: translateY(4px); transition: none; }
  .menu a { display: block; padding: 15px 0; min-height: 44px; font-size: 1.25rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .menu a:hover, .menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--line); }
  .menu a[aria-current="page"] { padding-left: 14px; position: relative; }
  .menu a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--red); }   /* la page courante : le petit carré rouge du système */
  .menu-groupe { display: block; }
  .menu-deplier { display: none; }
  /* Les trois services, clairement subordonnés : retrait, filet vertical, mono plus petit. */
  html[data-js] .menu .sous-menu, html[data-js] .menu .menu-groupe:hover .sous-menu, html:not([data-js]) .menu .sous-menu {
    display: block; position: static; min-width: 0; margin: 6px 0 10px 2px; padding: 0 0 0 18px; border: 0; border-left: 1px solid var(--line);
  }
  .sous-menu a { font-family: var(--f-mono); font-size: var(--t-small); color: var(--text); padding: 12px 0; border-bottom: 0; }
  .sous-menu a:hover, .sous-menu a[aria-current="page"] { color: var(--ink); }
  .sous-menu a[aria-current="page"] { padding-left: 14px; }
  .sous-menu li:first-child { display: none; }   /* « Vue d'ensemble » = le lien « Services » juste au-dessus */
  /* L'appel, distinct des liens : action noire mono à joint rouge, le langage du héros. */
  html[data-js] .menu-appel { display: block; margin-top: auto; padding-top: var(--sp-4); }
  .action-menu, .menu .action-menu {
    display: inline-flex; align-items: center; gap: 0.6em; width: auto; min-height: 52px; padding: 0 22px 0 18px;
    font-family: var(--f-mono); font-size: var(--t-small); font-weight: 500; letter-spacing: 0.02em;
    color: var(--canvas); background: var(--ink); border: 0; position: relative;
  }
  .action-menu::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
  .menu .action-menu:hover { color: var(--canvas); background: #fff; }
  .menu .action-menu:focus-visible { outline-offset: 3px; }
  /* Sans JavaScript : les liens passent sous le rail, en une rangée. */
  html:not([data-js]) .menu { order: 3; width: 100%; }
  html:not([data-js]) .menu > ul { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-1); }
  html:not([data-js]) .menu a { display: inline-block; padding: 8px 0; min-height: 0; font-size: var(--t-small); color: var(--text); border-bottom: 0; }
  html:not([data-js]) .menu a[aria-current="page"] { padding-left: 0; color: var(--ink); }
  html:not([data-js]) .menu a[aria-current="page"]::before { display: none; }
  html:not([data-js]) .menu .sous-menu { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--line); }
  html:not([data-js]) .sous-menu a { padding: 8px 0; }
  html:not([data-js]) .rail-haut { flex-wrap: wrap; height: auto; padding-top: 10px; }
  .action-haut { font-size: 0.8125rem; white-space: nowrap; color: var(--text); border-bottom-color: var(--ligne-ivoire); }

  .heros { min-height: 0; padding-top: var(--rail-h); }
  .carte { inset: var(--rail-h) 0 0 0; }
  .grille { opacity: 0.7; }
  .longitudes, .parallele-gauche, .parallele-droite { display: none; }

  .cadre { position: relative; z-index: 3; padding: var(--sp-4) var(--marge-cadre) var(--sp-5); display: flex; flex-direction: column; }
  .carte, .grille { z-index: 0; }

  .titre { position: static; order: 1; font-size: clamp(2.2rem, 9.8vw, 3.2rem); white-space: normal; }
  .titre .ligne { display: block; }
  /* Le 47e parallèle devient un repère vertical court, sous la phrase secondaire. */
  .chapo::after {
    content: "47° N"; display: block; margin-top: var(--sp-3); padding: 10px 0 10px 12px; border-left: 2px solid var(--red);
    font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 400; letter-spacing: 0.12em; line-height: 1; color: var(--text);
  }
  .chapo { position: static; order: 2; margin-top: var(--sp-3); max-width: 34ch; }

  /* Le schéma vertical : entrées → joint → sorties, sur un seul fil à 12 px du bord. */
  .entrees { position: relative; order: 3; left: 0; top: auto; transform: none; width: auto; margin-top: var(--sp-5);
    display: grid; gap: 4px; padding-left: 36px; font-size: 0.8125rem; }
  .entrees li { padding-bottom: 0; white-space: normal; }
  .entrees li::after { left: -27px; bottom: auto; top: 50%; margin: -3px 0 0 0; width: 5px; height: 5px; }
  .entrees::before { content: ""; position: absolute; left: 12px; top: -8px; bottom: -8px; width: 1px; background: var(--ligne-ivoire-forte); }
  .collecteur { display: none; }

  .joint { position: relative; order: 4; left: 0; top: 0; height: 48px; margin: 8px 0; width: 100%; }
  .joint::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--ligne-ivoire-forte); }
  .joint .point-rouge { left: 5px; top: 17px; }
  .joint .viseur { left: -12px; top: 0; }
  .tronc, .tronc-suite { display: none; }
  .expertises::before, .expertises::after { display: none; }

  .sorties { position: relative; order: 5; left: 0; right: 0; display: grid; gap: var(--sp-3); padding-left: 0; }
  .sorties::before { content: ""; position: absolute; left: 12px; top: -8px; bottom: 26px; width: 1px; background: var(--ligne-ivoire-forte); }
  .sorties li { position: static; }
  .sorties a { padding-left: 56px; }
  .sorties .tap { left: 12px; width: 28px; }
  .sorties .sortie-texte > span { display: none; }

  .rail-bas { position: static; grid-template-columns: minmax(0, 1fr); height: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .rail-bas .annot-bd { display: none; }
  .action-bas { justify-self: start; }
  .action-bas::after { display: none; }

  html[data-motion="on"] .heros .carte, html[data-motion="on"] .heros .grille { transform: none; }
  /* Sur téléphone, l'animation d'entrée se réduit à des apparitions courtes. */
  html[data-motion="on"] .heros:not(.pret) .entrees li { transform: none; }

  .preuve { padding: var(--sp-6) 0 var(--sp-7); }
  .preuve .cadre-section { display: block; }
  .projet-pano .projet-image { aspect-ratio: 4 / 3; }
  .projet-pano .projet-image img { object-position: left top; }
  .projet-vertical { margin-top: var(--sp-6); }
  .projet-vertical .projet-image { aspect-ratio: 4 / 5; }
  .projet + .projet { margin-top: var(--sp-6); }

  .trio { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
  .expertise-web, .expertise-auto, .expertise-app { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .expertise-app .schema { grid-row: auto; }
  .schema-app { grid-template-columns: minmax(0, 1fr); }
  .schema-app .fleche { width: 1px; height: 32px; justify-self: start; margin-left: 12px; transform-origin: top center; }
  .schema-app .fleche::after { right: auto; left: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }
  html[data-motion="on"] .expertise-app:not(.vu) .fleche { transform: scaleY(0); }
  .schema-auto .noeud { width: 32%; }
}

@media (max-width: 420px) {
  .brand svg { height: 34px; }
}

/* Deux rangées : l'action garde son texte complet et passe dessous.
   Le seuil est à 520 px — mesuré, pas deviné : sur une seule ligne, le
   rail a besoin de 475 px pour tenir. 420 px laissait donc une bande
   morte de 421 à 475 px, pile là où vivent les grands iPhone. */
@media (max-width: 520px) {
  .rail-haut { height: auto; padding-top: 10px; padding-bottom: 8px; row-gap: 0; }
  .heros { padding-top: calc(var(--rail-h) + 44px); }
  .action-haut { order: 3; width: 100%; justify-content: flex-start; min-height: 44px; border-bottom: 0; }
  /* Menu ouvert : l'appel vit dans le panneau ; le rail revient à une rangée. */
  html.menu-ouvert .action-haut { display: none; }
  html.menu-ouvert .rail-haut { height: var(--rail-h); padding-top: 0; padding-bottom: 0; }
}

/* ═══════════════════ MOUVEMENT RÉDUIT ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}