/* ══════════════════════════════════════════════════════════════
   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; }
/* ── Garde-fou iOS : aucun glissement latéral ────────────────────
   Le héros contient des décors (carte, grille) volontairement plus
   larges que l'écran ; ils sont découpés par `.heros { overflow-x:
   hidden }`. Chrome respecte ce découpage — mesuré à 0 px de
   débordement sur toute la page, de 320 à 440 px. Safari sur iPhone,
   lui, laisse parfois quand même déplacer la page latéralement quand
   un descendant est beaucoup plus large que la fenêtre.
   `clip` et non `hidden` : `hidden` ferait de la racine un conteneur
   de défilement, ce qui casserait le rail collant des pages
   intérieures. Le zoom du visiteur reste possible — on ne bloque
   jamais l'agrandissement, c'est une question d'accessibilité. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

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; }

.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: 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: 1fr; row-gap: var(--sp-6); }
  .expertise-web, .expertise-auto, .expertise-app { grid-column: auto; grid-template-columns: 1fr; }
  .expertise-app .schema { grid-row: auto; }
  .schema-app { grid-template-columns: 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; }
  /* Le rail passe sur deux rangées : l'action garde son texte complet. */
  .rail-haut { flex-wrap: wrap; 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; }
}