/* ==========================================================================
   DTF Max3DPrint — système visuel partagé
   Maquette locale multipage. Prolonge la Direction B2.2 « Pelage réel » :
   les jetons de couleur, la typographie, l'échelle et les boutons sont ceux
   de B2.2, repris sans modification. Ce fichier ajoute ce que B2.2 n'avait
   pas — en-tête complet, menu téléphone, pied de page, composants de contenu,
   révélations au défilement.

   Aucun lien avec WordPress, le staging ou la production.
   ========================================================================== */

/* --- Police — identique à B2.2 -------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope repli';
  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* --- Jetons — identiques à B2.2, plus quatre jetons de rythme -------------- */
:root {
  --deep-1: #041B33;
  --deep: #05203D;
  --deep-2: #0A3358;
  --deep-3: #0E4670;
  --deep-4: #12557F;

  --aqua: #4FDCEF;
  --aqua-soft: #A9E9F6;
  --cyan: #19B9DC;
  --electric: #3B82F6;
  --violet: #8B6BFF;
  --magenta: #FF5AA0;
  --ambre: #FFB23D;

  --t-1: #F1F6FB;
  --t-2: #C3D6E6;
  --t-3: #93AFC6;
  --t-ink: #03192F;

  /* --- Surfaces claires — passe 2 -----------------------------------------
     Le site alternait neuf fois le même bleu nuit. Ces trois surfaces et leurs
     trois encres donnent la respiration, sans sortir de la palette B2.2 : le
     pâle est un bleu nuit très délavé, pas un blanc neutre.
     Contrastes mesurés au § 2 du rapport d'accessibilité. */
  --pale: #EEF3F7;
  --pale-2: #E0EBF2;
  --pale-3: #D2E4EC;
  --ink-1: #071A2E;
  --ink-2: #2F4E67;
  --ink-3: #4E6C84;
  --cyan-ink: #0B5A70;
  --line-ink: rgba(7, 26, 46, .14);
  --line-ink-fort: rgba(7, 26, 46, .40);

  --line: rgba(241, 246, 251, .16);
  --line-strong: rgba(241, 246, 251, .58);
  --veil: rgba(5, 32, 61, .55);

  --gut: clamp(20px, 4vw, 48px);
  --max: 1360px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --t-fast: 170ms;
  --t-mid: 280ms;
  --t-slow: 520ms;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.22, .61, .36, 1);

  /* Rythme vertical des sections.
     Passe 2 : les valeurs ont été réduites d'environ un tiers. Une section
     de texte qui tient dans une colonne n'a pas à occuper un écran entier. */
  --sec: clamp(40px, 5.2vh, 70px);
  --sec-sm: clamp(28px, 3.6vh, 46px);
  --sec-lg: clamp(52px, 7vh, 92px);
  --hdr-h: 78px;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--deep-1);
  color: var(--t-1);
  /* Couleur de fond réellement rendue, déclarée pour pouvoir être lue.
     Les dégradés et les couches translucides rendent le fond effectif
     impossible à déduire d'un `background-color` : cette variable, qui hérite,
     donne au contrôle de contraste la valeur exacte contre laquelle mesurer. */
  --surface-fond: #041B33;
  font-family: 'Manrope', 'Manrope repli', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.028em; line-height: 1.1; }
p { margin: 0; }
a { color: var(--aqua); text-underline-offset: .18em; }
ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 5px; }

.skip {
  position: absolute; left: 8px; top: -64px; z-index: 200;
  background: var(--t-1); color: var(--t-ink);
  padding: 11px 20px; border-radius: var(--r-pill); font-weight: 700;
  text-decoration: none; transition: top var(--t-fast) var(--e-soft);
}
.skip:focus { top: 10px; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 940px; }
.nb { white-space: nowrap; }

/* ==========================================================================
   EN-TÊTE — repris de B2.2, complété par un menu téléphone et un état collant
   ========================================================================== */
.hdr {
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0;
}
/* --- Mot-symbole provisoire ------------------------------------------------
   Ce n'est pas un logo : c'est un traitement typographique, en attendant le
   logo officiel. Aucun symbole dessiné, rien qui puisse être confondu avec une
   marque définitive.
   Le seul effet est un décalage de repérage — le léger désalignement cyan et
   magenta d'une impression couleur mal calée. C'est un détail du métier, et il
   est fait en `text-shadow` : aucun contenu supplémentaire, donc rien de plus
   à lire pour un lecteur d'écran. Au survol et au focus, le repérage se cale. */
.hdr__mark {
  display: inline-flex; align-items: baseline; gap: .40em; min-height: 46px;
  align-self: center;
  font-weight: 800; font-size: 21px; letter-spacing: -.035em;
  color: var(--t-1); text-decoration: none; white-space: nowrap;
}
.hdr__mark i {
  font-style: normal; font-weight: 800; letter-spacing: -.02em;
  text-shadow: -1.6px 1.1px 0 rgba(255, 90, 160, .58),
                1.6px -1.1px 0 rgba(79, 220, 239, .58);
  transition: text-shadow var(--t-mid) var(--e-soft);
}
.hdr__mark:hover i, .hdr__mark:focus-visible i {
  text-shadow: 0 0 0 rgba(255, 90, 160, 0), 0 0 0 rgba(79, 220, 239, 0);
}
.hdr__mark b {
  font-weight: 600; font-size: .82em; letter-spacing: .01em;
  color: var(--aqua-soft);
}
@media (prefers-reduced-motion: reduce) {
  .hdr__mark i { transition: none; }
}
.hdr__nav { display: flex; gap: 24px; margin-inline: auto; }
.hdr__nav a {
  position: relative; padding: 10px 0;
  color: var(--t-2); text-decoration: none; font-size: 15.5px; font-weight: 500;
  transition: color var(--t-fast) var(--e-soft);
}
.hdr__nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--electric) 60%, var(--magenta));
  transition: right var(--t-mid) var(--e-soft);
}
.hdr__nav a:hover { color: var(--t-1); }
.hdr__nav a:hover::after,
.hdr__nav a[aria-current="page"]::after { right: 0; }
.hdr__nav a[aria-current="page"] { color: var(--t-1); font-weight: 700; }
.hdr__cta { margin-left: auto; }
.hdr__cta .long { display: inline; }
.hdr__cta .short { display: none; }

/* Bouton du menu téléphone — n'existait pas en B2.2 : sous 1080 px, la
   navigation y disparaissait sans remplacement. */
.hdr__burger {
  display: none;
  align-items: center; gap: 10px;
  min-height: 46px; padding: 0 16px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(241, 246, 251, .07);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--t-1); font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.hdr__burger i {
  position: relative; display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--aqua);
  transition: transform var(--t-mid) var(--e-soft), background-color var(--t-fast) linear;
}
.hdr__burger i::before, .hdr__burger i::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 2px; border-radius: 2px;
  background: var(--aqua);
  transition: transform var(--t-mid) var(--e-soft);
}
.hdr__burger i::before { top: -6px; }
.hdr__burger i::after { top: 6px; }
.hdr__burger[aria-expanded="true"] i { background: transparent; }
.hdr__burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); }

/* B2.2 basculait à 1080 px avec cinq entrées. Le site en compte sept :
   à 1080 px elles se chevauchaient avec l'appel à l'action. Le basculement
   remonte donc à 1200 px. Écart documenté. */
@media (max-width: 1200px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; margin-left: auto; }
}
/* Sous 620 px, l'appel à l'action de l'en-tête sort : le nom et le bouton
   Menu remplissent déjà la largeur. Il reste atteignable dans le panneau,
   et le héros pose les deux boutons pleine largeur juste dessous.
   Le sélecteur est ancré sur .hdr : à spécificité égale, `.btn` déclaré plus
   bas dans la feuille l'emportait et le bouton restait affiché — c'est ce qui
   provoquait un débordement de 39 px à 360 px. */
@media (max-width: 620px) {
  .hdr .hdr__cta { display: none; }
  .hdr__mark { font-size: 16.5px; }
  .hdr__burger { padding: 0 14px; }
}

/* --- Panneau du menu téléphone -------------------------------------------- */
.mnav {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  background: linear-gradient(170deg, var(--deep) 0%, var(--deep-1) 70%);
  padding: 18px var(--gut) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mnav[data-open] { display: block; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; }
.mnav__close {
  min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: rgba(241, 246, 251, .08); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--t-1); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.mnav__list { list-style: none; margin: 26px 0 0; }
.mnav__list li { border-top: 1px solid var(--line); }
.mnav__list li:last-child { border-bottom: 1px solid var(--line); }
.mnav__list a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 2px; min-height: 54px;
  color: var(--t-1); text-decoration: none;
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
}
.mnav__list a[aria-current="page"] { color: var(--aqua); }
.mnav__list em {
  font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--t-3); min-width: 2ch;
}
.mnav__cta { display: grid; gap: 12px; margin-top: 26px; }
.mnav__cta .btn { width: 100%; }
.mnav__nap {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 16px; color: var(--t-2); line-height: 1.6;
}
.mnav__nap a { color: var(--t-1); font-weight: 700; text-decoration: none; }
body[data-locked] { overflow: hidden; }

/* --- Barre d'en-tête collante ---------------------------------------------
   Un seul en-tête dans le document : il reste dans le flux et se fixe en haut
   au défilement. Pas de second exemplaire dupliqué — donc pas de deuxième
   repère de navigation pour les lecteurs d'écran, et aucun décalage de mise
   en page au moment où il se fixe.

   Passe 4 — LE FOND EXISTE DÈS LE CHARGEMENT.
   Jusqu'ici, la barre était transparente tant que le héros n'était pas passé :
   sur l'accueil, le mot-symbole, les liens et le bouton se confondaient avec
   la plaque, la vidéo et les nappes de lumière du héros, et la navigation
   paraissait disparaître pendant la première seconde. Le fond est maintenant
   posé d'emblée, sur toutes les pages, dans le bleu nuit de B2.2 (--deep-1,
   #041B33) à 86 % — assez opaque pour que le contraste reste franc au-dessus
   de la partie la plus lumineuse du héros, assez translucide pour que la
   barre reste une barre et non un bandeau.

   Il n'y a aucun état initial masqué à retirer : l'en-tête n'a jamais porté
   d'`opacity: 0`, de translation ni de délai — il n'utilise aucune des
   classes d'animation `.an` / `.rv`, et le script du héros ne le touche pas.

   Le contraste (rapport 4,5:1 exigé sur `--t-2`, texte de navigation) est
   mesuré au § 2 du rapport d'accessibilité, au-dessus des deux fonds : le
   héros au premier écran, et le contenu courant après défilement. */
.hdr-bar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4, 27, 51, .86);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  transition: background-color var(--t-mid) var(--e-soft),
              box-shadow var(--t-mid) var(--e-soft);
}
/* Au défilement, le fond se densifie et la barre se resserre. C'est une
   nuance, pas une apparition : rien n'y devient visible qui ne l'était pas. */
.hdr-bar.is-on {
  background: rgba(4, 27, 51, .96);
  box-shadow: 0 1px 0 var(--line), 0 18px 34px -28px rgba(3, 18, 38, .9);
}
.hdr-bar.is-on .hdr { padding: 11px 0; }
/* Sans `backdrop-filter`, la translucidité seule ne suffit plus à séparer la
   barre de l'image : le fond monte presque à l'opaque, dans la même teinte. */
@supports not (backdrop-filter: blur(10px)) {
  .hdr-bar { background: rgba(4, 27, 51, .95); }
  .hdr-bar.is-on { background: rgba(4, 27, 51, .99); }
}
/* Réduction de mouvement : le fond reste, seule la transition tombe. */
@media (prefers-reduced-motion: reduce) {
  .hdr-bar { transition: none; }
}

/* ==========================================================================
   BOUTONS — repris de B2.2 sans modification
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 10px 0 26px; border-radius: var(--r-pill);
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; border: 0;
  cursor: pointer;
  transition: transform var(--t-fast) var(--e-soft),
              background-color var(--t-fast) var(--e-soft),
              box-shadow var(--t-fast) var(--e-soft);
}
.btn__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  transition: transform var(--t-mid) var(--e-soft);
}
.btn__chip svg { width: 15px; height: 15px; }

.btn--main { background: var(--t-1); color: var(--t-ink); }
.btn--main .btn__chip { background: var(--deep-2); color: var(--t-1); }
.btn--main:hover { background: #fff; transform: translateY(-1px); }
.btn--main:hover .btn__chip { transform: translateX(3px); }

.btn--ghost {
  background: rgba(241, 246, 251, .06); color: var(--t-1);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost .btn__chip { background: rgba(241, 246, 251, .12); color: var(--t-1); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--t-1); transform: translateY(-1px); }
.btn--ghost:hover .btn__chip { transform: translateX(3px); }

.btn--sm { min-height: 46px; font-size: 15px; padding: 0 8px 0 20px; }
.btn--sm .btn__chip { width: 32px; height: 32px; }
.btn:active { transform: translateY(0); }

.link3 {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  color: var(--t-2); font-size: 16px; font-weight: 600; text-decoration: none;
  transition: color var(--t-fast) var(--e-soft);
}
.link3 svg { width: 14px; height: 14px; color: var(--aqua);
  transition: transform var(--t-fast) var(--e-soft); }
.link3:hover { color: var(--t-1); }
.link3:hover svg { transform: translateX(4px); }

/* ==========================================================================
   RYTHME DES SECTIONS ET TYPOGRAPHIE DE CONTENU
   ========================================================================== */
.sec { position: relative; padding: var(--sec) 0; }
.sec--tight { padding: var(--sec-sm) 0; }
.sec--deep { background: var(--deep); --surface-fond: #05203D; }
.sec--line { border-top: 1px solid var(--line); }

/* Trame d'impression : un point tous les 8 px, masqué en dégradé. C'est le
   seul motif décoratif du site, et il vient du procédé lui-même. */
.sec--trame::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(241, 246, 251, .30) 1px, transparent 1.4px);
  background-size: 8px 8px;
  opacity: .16;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 6%, transparent 72%);
  mask-image: radial-gradient(90% 70% at 50% 0%, #000 6%, transparent 72%);
}
.sec > .wrap { position: relative; z-index: 1; }

.kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--aqua-soft);
}
.kicker::before {
  content: ''; width: 36px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--aqua), var(--magenta));
}

.h1 { font-size: clamp(32px, 3.15vw, 46px); max-width: 22ch; text-wrap: balance; }
.h2 { margin: 14px 0 0; font-size: clamp(26px, 2.6vw, 38px); max-width: 24ch; text-wrap: balance; }
.h3 { font-size: clamp(19px, 1.5vw, 22px); }
.lead { margin-top: 18px; max-width: 62ch; font-size: clamp(16.5px, 1.15vw, 18.5px);
        line-height: 1.58; color: var(--t-2); }
.txt { margin-top: 16px; max-width: 68ch; color: var(--t-2); }
.txt + .txt { margin-top: 14px; }
.txt b, .txt strong { color: var(--t-1); }

.sec__head { max-width: 780px; }
.sec__head .h2 { margin-top: 12px; }

/* Liste à puces sobre — un tiret aqua, jamais une pastille */
.liste { list-style: none; margin-top: 18px; max-width: 66ch; display: grid; gap: 10px; }
.liste li { position: relative; padding-left: 24px; color: var(--t-2); }
.liste li::before {
  content: ''; position: absolute; left: 0; top: .72em; width: 12px; height: 2px;
  border-radius: 2px; background: var(--aqua);
}
.liste b { color: var(--t-1); }

/* ==========================================================================
   PASSE 2 — BANDE PHOTOGRAPHIQUE BORD À BORD
   L'image sort du conteneur et touche les deux bords de la fenêtre. C'est le
   principal moyen de casser l'enchaînement « titre à gauche, texte, filet ».

   PASSE 4 — LA CAUSE DU BOUTON COUPÉ, ET SA CORRECTION.
   La bande était construite à l'envers : `height` ferme (`clamp(…, 52vh, …)`),
   image en flux occupant `height: 100%`, contenu sorti du flux en
   `position: absolute; inset: 0`, et `overflow: hidden` par-dessus. Trois
   conséquences enchaînées :
     1. la hauteur ne dépendait pas du contenu, mais de la fenêtre ;
     2. le contenu, absolu, ne pouvait pas pousser la bande ;
     3. ce qui dépassait était coupé net par `overflow: hidden`.
   Un zoom navigateur réduit la hauteur de fenêtre en pixels CSS tout en
   agrandissant le texte : à 125 %, 150 % et 200 %, le titre, le paragraphe et
   le bouton « Comprendre le halftone » débordaient les 52 vh et le bouton
   disparaissait sous la section suivante. Dézoomer le faisait réapparaître —
   ce qui est exactement le symptôme rapporté.

   La bande est donc retournée dans le bon sens : l'image passe en fond absolu,
   le contenu revient dans le flux normal, et la hauteur devient un plancher
   (`min-height`) au lieu d'un plafond. La bande ne peut plus être plus courte
   que son contenu, donc plus rien ne peut être coupé ni recouvert.
   `overflow: hidden` est conservé — il n'a jamais servi qu'à contenir le
   léger agrandissement de l'image à la révélation — mais il ne borde
   désormais qu'une boîte qui grandit avec ce qu'elle contient.
   ========================================================================== */
.bleed {
  position: relative;
  width: 100vw; margin-inline: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center;
}
/* L'image est le fond de la bande, pas son contenu : elle couvre la boîte
   quelle que soit la hauteur que le contenu lui impose. */
.bleed img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.bleed--haute { min-height: clamp(300px, 52vh, 520px); }
.bleed--basse { min-height: clamp(200px, 34vh, 340px); }
.bleed__voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 20, 40, .90) 0%, rgba(4, 20, 40, .68) 38%,
              rgba(4, 20, 40, .12) 72%, rgba(4, 20, 40, .32) 100%);
}
/* Dans le flux, et non plus `inset: 0`. Les marges hautes et basses donnent
   au bouton l'air libre qu'il n'avait pas : elles ne sont pas décoratives,
   ce sont elles qui garantissent qu'aucun élément interactif ne vient
   toucher le bord de la bande — ni son ombre de focus. */
.bleed__c {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(34px, 5vh, 62px);
}
.bleed__c .wrap { width: 100%; }
.bleed__t { max-width: 30ch; color: var(--t-1); --surface-fond: #0A1A2C; }
.bleed__t .h2 { margin-top: 10px; text-shadow: 0 2px 22px rgba(3, 18, 38, .6); }
.bleed__t p { margin-top: 12px; max-width: 42ch; color: var(--t-2); }
.bleed__t .kicker { color: var(--aqua-soft); }
/* Légende sous la bande, jamais par-dessus l'image : ce qu'on regarde doit
   rester lisible même quand la photo est sombre. */
.bleed + .bleed__leg { margin-top: 12px; font-size: 15.5px; color: var(--t-3); }

/* Révélation : l'image se découvre par le bas, une seule fois. */
.js-anim .bleed img { transform: scale(1.06); }
.js-anim .bleed.is-in img {
  transform: scale(1);
  transition: transform 1400ms var(--e-out);
}

/* ==========================================================================
   PASSE 2 — COMPOSITIONS ÉDITORIALES ASYMÉTRIQUES
   ========================================================================== */
.edito {
  display: grid; align-items: center;
  gap: clamp(20px, 3vw, 48px);
  grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr);
}
.edito--inverse { grid-template-columns: minmax(0, 5.8fr) minmax(0, 6.2fr); }
.edito--serre { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.edito--haut { align-items: start; }
/* La colonne média déborde légèrement vers le haut : c'est ce décalage qui
   fait la différence entre une grille et une composition. */
.edito__media { position: relative; }
@media (min-width: 981px) {
  .edito__media--releve { margin-top: -46px; margin-bottom: -46px; }
  .edito__media--descendu { margin-top: 46px; }
}
.edito__texte { min-width: 0; }
@media (max-width: 900px) {
  .edito, .edito--inverse, .edito--serre { grid-template-columns: 1fr; }
  .edito__media--releve, .edito__media--descendu { margin-top: 0; margin-bottom: 0; }
  /* Sur téléphone, le média passe toujours avant le texte : on voit la pièce,
     puis on lit pourquoi. */
  .edito--photo-dabord .edito__media { order: -1; }
}

/* Deux images superposées, l'une décalée sur l'autre. */
.pile { position: relative; }
/* La seconde image se pose sur le coin de la première. Elle ne descend pas
   sous le bloc : elle y percuterait le contenu suivant — c'est ce qui masquait
   la dernière colonne de la bande de faits, à la passe 2. */
.pile__b {
  position: absolute; right: -5%; bottom: 5%; width: 44%; z-index: 2;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 0 0 4px var(--deep-1), 0 24px 44px -22px rgba(3, 18, 38, .95);
}
.sec--clair .pile__b { box-shadow: 0 0 0 4px var(--pale), 0 24px 44px -26px rgba(7, 26, 46, .5); }
.pile__b img { width: 100%; display: block; }
/* Quand la pile vit dans une `.fig` — c'est le cas dès que la figure porte une
   légende —, la seconde image hériterait du cadre et de l'ombre de `.fig img`
   par-dessus le cadre que `.pile__b` lui donne déjà. Un seul cadre suffit. */
.fig .pile__b img { border-radius: 0; box-shadow: none; }
/* En colonne unique, la pile occupe toute la largeur du conteneur : le
   débord de 5 % sortirait de la gouttière et créerait un défilement
   horizontal de quelques pixels. Elle rentre. */
@media (max-width: 980px) {
  .pile__b { right: 0; bottom: 4%; width: 42%; }
}
@media (max-width: 620px) {
  .pile__b { right: 0; bottom: 4%; width: 40%; }
}

/* ==========================================================================
   PASSE 4 — JEU DE CARTES « BRODERIE QUÉBEC »
   Trois photographies posées en éventail, à la place d'une seule grande. Tout
   est exprimé en pourcentages d'un conteneur à rapport fixe : la composition
   est donc rigoureusement la même à 360 px et à 1920 px, et elle ne peut pas
   se décomposer à une largeur intermédiaire.

   Les rotations sont faibles (7° au plus) et la boîte laisse une marge de
   sécurité à gauche, à droite et en bas : une carte tournée occupe une boîte
   plus large que sa largeur, et c'est ce débord-là qui provoquerait un
   défilement horizontal. Aucune carte n'en couvre une autre sur son sujet —
   les deux casquettes arrière montrent leur logo, les lettres montrent le A.
   ========================================================================== */
.eventail {
  position: relative; display: block;
  width: 100%; aspect-ratio: 100 / 72;
  text-decoration: none;
  border-radius: var(--r-md);
}
.eventail__c {
  position: absolute; margin: 0;
  width: 49%; aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--deep-1);
  box-shadow: 0 0 0 1px rgba(241, 246, 251, .24),
              0 26px 46px -22px rgba(3, 18, 38, .95);
  transition: transform var(--t-mid) var(--e-soft), box-shadow var(--t-mid) var(--e-soft);
}
.sec--clair .eventail__c {
  box-shadow: 0 0 0 1px rgba(7, 26, 46, .16),
              0 26px 46px -24px rgba(7, 26, 46, .50);
}
.eventail__c img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Les deux cartes arrière occupent le haut, la carte principale le bas : elles
   ne se recouvrent que par un coin. C'est ce qui distingue cet éventail d'une
   pile — sur la paire de casquettes, une carte principale posée au milieu
   masquait entièrement la casquette grise, et le texte alternatif annonçait
   alors une chose que l'image ne montrait plus. Ici, chaque sujet reste
   entier : les deux casquettes Silanglois, le A de l'appliqué, et la
   casquette rouge en entier au premier plan. */
.eventail__c--gauche { left: 0;    top: 0;      z-index: 1; transform: rotate(-6deg); }
.eventail__c--droite { right: 0;   top: 5%;     z-index: 2; transform: rotate(6deg); }
.eventail__c--avant  { left: 25%;  bottom: 0;   z-index: 3; width: 50%;
                       transform: rotate(-1.5deg); }

/* Survol : l'éventail s'ouvre d'un cheveu. Rien ne se déplace assez pour
   changer ce qu'on lit — c'est un signe que l'ensemble est cliquable. */
@media (hover: hover) {
  .eventail:hover .eventail__c--gauche { transform: rotate(-8.5deg) translate(-2.5%, -2%); }
  .eventail:hover .eventail__c--droite { transform: rotate(8.5deg) translate(2.5%, -2%); }
  .eventail:hover .eventail__c--avant  { transform: rotate(-1.5deg) translateY(-3%); }
}
/* Le focus clavier porte sur le lien entier, et le contour doit rester
   visible : la boîte est donc plus grande que les cartes qu'elle contient. */
.eventail:focus-visible { outline: 3px solid var(--aqua); outline-offset: 6px; }
.sec--clair .eventail:focus-visible { outline-color: var(--cyan-ink); }

@media (prefers-reduced-motion: reduce) {
  .eventail__c { transition: none; }
  .eventail:hover .eventail__c--gauche { transform: rotate(-6deg); }
  .eventail:hover .eventail__c--droite { transform: rotate(6deg); }
  .eventail:hover .eventail__c--avant  { transform: rotate(-1.5deg); }
}

/* Sur téléphone, l'éventail se redresse en cascade.
   À 350 px de large, garder la composition en largeur reviendrait à choisir
   entre des cartes trop petites pour qu'on lise un logo brodé, et un
   recouvrement qui cachait la moitié de la casquette grise. En cascade
   verticale, les cartes gagnent un tiers de largeur — 231 px au lieu de
   171 px — et ne se recouvrent plus que par un coin. */
@media (max-width: 620px) {
  .eventail { aspect-ratio: 100 / 128; }
  .eventail__c { width: 66%; }
  .eventail__c--gauche { left: 0;   top: 0;      transform: rotate(-4.5deg); }
  .eventail__c--droite { right: 0;  top: 30%;    transform: rotate(4.5deg); }
  .eventail__c--avant  { left: 17%; bottom: 0; width: 66%; transform: rotate(-1.5deg); }
}
/* Le survol reprend la géométrie de la cascade : sans cette reprise, une
   fenêtre étroite mais pointée à la souris ouvrirait l'éventail selon les
   angles de l'ordinateur, et les cartes se décaleraient de travers. */
@media (hover: hover) and (max-width: 620px) {
  .eventail:hover .eventail__c--gauche { transform: rotate(-6deg) translateX(-2%); }
  .eventail:hover .eventail__c--droite { transform: rotate(6deg) translateX(2%); }
  .eventail:hover .eventail__c--avant  { transform: rotate(-1.5deg) translateY(-2%); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 620px) {
  .eventail:hover .eventail__c--gauche { transform: rotate(-4.5deg); }
  .eventail:hover .eventail__c--droite { transform: rotate(4.5deg); }
  .eventail:hover .eventail__c--avant  { transform: rotate(-1.5deg); }
}

/* ==========================================================================
   PASSE 2 — GALERIE DÉFILANTE
   Défilement natif avec ancrage : elle fonctionne au doigt, à la molette, au
   clavier et sans JavaScript. Aucun carrousel automatique.
   ========================================================================== */
.rail-zone { position: relative; }
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 30vw, 380px);
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  padding: 4px var(--gut) 20px;
  margin-inline: calc(var(--gut) * -1);
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.rail > li { scroll-snap-align: start; min-width: 0; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: rgba(241, 246, 251, .07); border-radius: 4px; }
.rail::-webkit-scrollbar-thumb { background: rgba(241, 246, 251, .30); border-radius: 4px; }
.sec--clair .rail::-webkit-scrollbar-track { background: rgba(7, 26, 46, .07); }
.sec--clair .rail::-webkit-scrollbar-thumb { background: rgba(7, 26, 46, .28); }
.rail .fig img { aspect-ratio: 4 / 5; object-fit: cover; }
.rail__aide {
  display: flex; align-items: center; gap: 10px;
  margin-top: 2px; font-size: 14.5px; color: var(--t-3);
}
.sec--clair .rail__aide { color: var(--ink-3); }
.rail__aide svg { width: 15px; height: 15px; }
@media (min-width: 1200px) {
  /* Au-delà de 1200 px, les colonnes se partagent la largeur : la rangée tient
     en entier quel que soit le nombre de pièces — quatre, cinq ou six — et il
     ne reste aucune cellule vide. Plus rien ne défile, l'aide disparaît. */
  .rail { grid-auto-columns: minmax(0, 1fr); overflow-x: visible;
          padding-inline: 0; margin-inline: 0; padding-bottom: 0; }
  .rail__aide { display: none; }
}

/* ==========================================================================
   PASSE 2 — BANDE DE FAITS
   Quatre faits vérifiables, sur une ligne. Aucun chiffre de production,
   aucune statistique : ce sont des faits, pas des arguments fabriqués.
   ========================================================================== */
.faits {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; list-style: none;
  margin-top: clamp(22px, 3vh, 34px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sec--clair .faits { border-color: var(--line-ink); }
.faits li {
  padding: clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 22px);
  border-left: 1px solid var(--line);
}
.sec--clair .faits li { border-left-color: var(--line-ink); }
.faits li:first-child { border-left: 0; padding-left: 0; }
.faits b { display: block; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700;
           letter-spacing: -.02em; line-height: 1.2; }
.faits span { display: block; margin-top: 7px; font-size: 15.5px; color: var(--t-2); line-height: 1.45; }
.sec--clair .faits span { color: var(--ink-2); }
@media (max-width: 900px) {
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faits li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .faits li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sec--clair .faits li:nth-child(n+3) { border-top-color: var(--line-ink); }
  .faits span { font-size: 16px; }
}
@media (max-width: 520px) {
  .faits { grid-template-columns: 1fr; }
  .faits li { border-left: 0; padding-left: 0; }
  .faits li + li { border-top: 1px solid var(--line); }
  .sec--clair .faits li + li { border-top-color: var(--line-ink); }
}

/* ==========================================================================
   PASSE 2 — NOTE DISCRÈTE DE MAQUETTE
   Remplace les gros blocs orangés. Une ligne, en petit, qui ne casse pas la
   composition — et qui disparaît à l'intégration.
   ========================================================================== */
.note-maquette {
  margin-top: 16px; padding-left: 14px;
  border-left: 2px solid rgba(241, 246, 251, .28);
  font-size: 14.5px; line-height: 1.5; color: var(--t-3);
}
.sec--clair .note-maquette { border-left-color: var(--line-ink-fort); color: var(--ink-3); }
@media (max-width: 900px) { .note-maquette { font-size: 16px; } }

/* Passe 4 — note de service, discrète mais permanente.
   À ne pas confondre avec `.note-maquette`, qui disparaîtra à l'intégration :
   celle-ci est du contenu réel. Elle sert à poser une précision utile sans
   lui donner le ton d'un avertissement — d'où le corps réduit et l'encre
   secondaire plutôt qu'un encadré. Le corps remonte à 16 px sur téléphone :
   sous 16 px, le texte devient difficile à lire et déclenche le zoom. */
.note-fine { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--t-3); }
.sec--clair .note-fine { color: var(--ink-3); }
@media (max-width: 900px) { .note-fine { font-size: 16px; } }

/* ==========================================================================
   FIL D'ARIANE
   ========================================================================== */
.fil { padding: 14px 0 0; font-size: 14.5px; color: var(--t-3); }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fil li { display: inline-flex; align-items: center; min-height: 44px; }
.fil li::after { content: '›'; margin-left: 8px; color: var(--t-3); }
.fil li:last-child::after { content: none; }
.fil a { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--t-2); text-decoration: none; }
.fil a:hover { color: var(--t-1); text-decoration: underline; }
.fil [aria-current] { color: var(--t-1); }

/* ==========================================================================
   EN-TÊTE DE PAGE INTÉRIEURE
   ========================================================================== */
.ptop {
  position: relative; isolation: isolate; overflow: hidden;
  /* Passe 2 : hauteur réduite d'un tiers. Un en-tête de page n'a pas à
     occuper un écran entier avant que le contenu commence. */
  padding: clamp(14px, 2vh, 26px) 0 clamp(26px, 3.6vh, 44px);
  background:
    radial-gradient(100% 76% at 78% 0%, rgba(79, 220, 239, .17), transparent 62%),
    radial-gradient(80% 60% at 6% 100%, rgba(59, 130, 246, .22), transparent 66%),
    linear-gradient(176deg, var(--deep-1) 0%, var(--deep) 62%, var(--deep-2) 100%);
}
/* Champ de points en dégradé, en haut à droite : il occupe le vide que laisse
   une colonne d'accroche courte, et il vient du procédé — c'est la trame.
   Décoratif, donc hors du flux et invisible pour les lecteurs d'écran. */
.ptop::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -6%; top: -22%; width: 58%; aspect-ratio: 1;
  background-image: radial-gradient(rgba(169, 233, 246, .55) 1.6px, transparent 2px);
  background-size: 15px 15px;
  opacity: .30;
  -webkit-mask-image: radial-gradient(58% 58% at 62% 58%, #000 4%, transparent 72%);
  mask-image: radial-gradient(58% 58% at 62% 58%, #000 4%, transparent 72%);
}
.ptop > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .ptop::after { width: 96%; right: -22%; top: -12%; opacity: .22; } }

.ptop__grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
              gap: clamp(22px, 3.4vw, 48px); align-items: center; margin-top: 14px; }
.ptop .lead { margin-top: 16px; }
.ptop__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* Variante avec média : l'en-tête de page porte une photographie plutôt qu'un
   grand vide à droite. */
.ptop--media .ptop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; }
.ptop__fig { margin: 0; position: relative; }
.ptop__fig img {
  width: 100%; border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(3, 18, 38, .95);
}
.ptop__fig figcaption { margin-top: 11px; font-size: 15px; color: var(--t-3); }
@media (max-width: 900px) {
  .ptop--media .ptop__grid { grid-template-columns: 1fr; }
  .ptop__fig { order: -1; margin-bottom: 4px; }
  .ptop__fig figcaption { font-size: 16px; }
}
.ptop__aside {
  border-left: 2px solid var(--aqua);
  padding: 4px 0 4px 20px;
  font-size: 16px; color: var(--t-2);
}
.ptop__aside b { display: block; color: var(--t-1); font-size: 17px; margin-bottom: 6px; }
@media (max-width: 900px) {
  .ptop__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ==========================================================================
   BANDE DE CONFIANCE — reprise de B2.2
   ========================================================================== */
.strip {
  position: relative; z-index: 40;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(4, 20, 40, .28), rgba(4, 20, 40, .52));
  backdrop-filter: blur(4px);
}
.strip__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 30px; padding: 15px 0; list-style: none;
}
.strip__list li { display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--t-2); line-height: 1.4; }
.strip__list b { color: var(--t-1); font-weight: 700; }
.strip__list svg { width: 16px; height: 16px; color: var(--aqua); flex: none; }

/* ==========================================================================
   LES DEUX PARCOURS
   ========================================================================== */
.parcours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, 2vw, 26px); margin-top: clamp(26px, 4vh, 44px); }
.pc {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(14, 70, 112, .52), rgba(4, 20, 40, .72));
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--t-mid) var(--e-soft), box-shadow var(--t-mid) var(--e-soft);
}
.pc::after {
  content: ''; position: absolute; right: -18%; top: -34%; width: 62%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(79, 220, 239, .30), transparent 68%);
  filter: blur(30px);
  transition: opacity var(--t-slow) var(--e-soft);
  opacity: .7;
}
.pc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pc:hover::after { opacity: 1; }
.pc__num {
  position: relative; z-index: 1;
  font-size: 12.5px; font-weight: 800; letter-spacing: .18em; color: var(--aqua);
}
.pc__t { position: relative; z-index: 1; margin-top: 14px; font-size: clamp(21px, 1.9vw, 27px); }
.pc__d { position: relative; z-index: 1; margin-top: 12px; color: var(--t-2); max-width: 44ch; }
.pc .liste { margin-top: 16px; }
.pc__go { position: relative; z-index: 1; margin-top: auto; padding-top: 22px; }
@media (max-width: 860px) { .parcours { grid-template-columns: 1fr; } }

/* ==========================================================================
   ÉTAPES NUMÉROTÉES
   ========================================================================== */
.etapes { list-style: none; display: grid; gap: clamp(18px, 2vw, 28px);
          grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(26px, 4vh, 44px);
          counter-reset: et; }
.etapes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etapes li { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.etapes li::before {
  counter-increment: et; content: counter(et, decimal-leading-zero);
  position: absolute; top: -1px; left: 0; padding-right: 12px;
  transform: translateY(-50%);
  background: var(--deep-1);
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; color: var(--aqua);
}
.sec--deep .etapes li::before { background: var(--deep); }
.etapes h3 { font-size: 19px; }
.etapes p { margin-top: 10px; color: var(--t-2); font-size: 16px; }
@media (max-width: 1080px) { .etapes, .etapes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .etapes, .etapes--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   MÉDIAS — figures, galeries, comparaisons
   ========================================================================== */
.fig { margin: 0; }
.fig img { width: 100%; border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--line), 0 26px 50px -26px rgba(3, 18, 38, .9); }
.fig figcaption { margin-top: 13px; font-size: 15.5px; color: var(--t-2); line-height: 1.52; }
.fig figcaption b { color: var(--t-1); }

.galerie { list-style: none; display: grid; gap: clamp(14px, 2vw, 26px);
           grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(26px, 4vh, 44px); }
.galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerie li { min-width: 0; }
.galerie .fig img { aspect-ratio: 4 / 5; object-fit: cover; }
.galerie .fig--libre img { aspect-ratio: auto; }
.galerie .fig--large img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .galerie, .galerie--2 { grid-template-columns: 1fr; } }

/* Réalisations DTF — carrousel de cartes inspiré des feuilles empilées
   sur la table de production. Sans JavaScript, les onze pièces restent une
   galerie ordinaire et entièrement lisible. */
.real-slider {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(26px, 4vh, 44px); padding: clamp(24px, 3vw, 42px);
  border-radius: var(--r-lg); background: #061A30;
  box-shadow: inset 0 0 0 1px rgba(120, 210, 231, .18),
              0 32px 62px -38px rgba(1, 12, 27, .95);
}
.real-slider__fonds, .real-slider__nav, .real-slider__pied { display: none; }
.real-slider__cartes {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.real-slider__carte { min-width: 0; }
.real-slider__carte .fig img { aspect-ratio: 4 / 5; object-fit: cover; }

.real-slider.is-ready { min-height: clamp(650px, 72vw, 760px); }
.real-slider.is-ready .real-slider__fonds {
  display: block; position: absolute; inset: 0; z-index: -2;
  overflow: hidden; pointer-events: none;
}
.real-slider.is-ready .real-slider__fonds::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3, 17, 34, .78), rgba(3, 17, 34, .94));
}
.real-slider.is-ready .real-slider__fonds img {
  position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
  opacity: 0; filter: blur(26px) saturate(.82); transform: scale(1.04);
  transition: opacity 560ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.real-slider.is-ready .real-slider__fonds img.is-active { opacity: .8; transform: scale(1.1); }
.real-slider.is-ready .real-slider__scene {
  position: relative; min-height: 580px; display: grid; place-items: center;
}
.real-slider.is-ready .real-slider__cartes {
  position: relative; width: 100%; height: 560px; display: block;
}
.real-slider.is-ready .real-slider__carte {
  --tilt: 0deg;
  position: absolute; top: 8px; left: 50%; width: clamp(260px, 28vw, 360px);
  opacity: 0; pointer-events: none; z-index: 0;
  transform: translateX(-50%) translateY(54px) scale(.72);
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1),
              opacity 420ms ease, filter 520ms ease;
  filter: saturate(.62) brightness(.66);
}
.real-slider.is-ready .real-slider__carte.is-active {
  opacity: 1; pointer-events: auto; z-index: 3; filter: none;
  transform: translateX(-50%) rotate(var(--tilt)) scale(1);
}
.real-slider.is-ready .real-slider__carte.is-prev {
  opacity: .64; z-index: 1;
  transform: translateX(calc(-50% - clamp(230px, 27vw, 380px))) translateY(58px)
             rotate(-6deg) scale(.82);
}
.real-slider.is-ready .real-slider__carte.is-next {
  opacity: .64; z-index: 2;
  transform: translateX(calc(-50% + clamp(230px, 27vw, 380px))) translateY(58px)
             rotate(6deg) scale(.82);
}
.real-slider.is-ready .real-slider__carte .fig { position: relative; }
.real-slider.is-ready .real-slider__carte .fig img {
  aspect-ratio: 4 / 5; object-fit: cover; background: #07172A;
  box-shadow: 0 34px 68px -30px rgba(0, 0, 0, .92),
              0 0 0 1px rgba(196, 233, 244, .28);
}
.real-slider.is-ready .real-slider__carte .fig img.real-slider__media--contain,
.real-slider__carte .fig img.real-slider__media--contain {
  object-fit: contain; background: #07172A; padding: 10px;
}
.real-slider.is-ready .real-slider__carte .tag {
  position: absolute; z-index: 2; top: 12px; left: 12px; margin: 0;
  background: rgba(4, 20, 40, .90); color: #BFF5FC;
  box-shadow: inset 0 0 0 1px rgba(126, 225, 238, .42);
}
.real-slider.is-ready .real-slider__carte figcaption {
  min-height: 66px; opacity: 0; transform: translateY(10px);
  transition: opacity 280ms ease 180ms, transform 520ms cubic-bezier(.16, 1, .3, 1) 150ms;
}
.real-slider.is-ready .real-slider__carte.is-active figcaption { opacity: 1; transform: none; }
.real-slider.is-ready .real-slider__carte:not(.is-active) .tag { opacity: 0; }
.real-slider.is-ready .real-slider__nav {
  position: absolute; top: 45%; z-index: 6; width: 52px; height: 52px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #F1F6FB; color: #072B4C; cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .8);
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease;
}
.real-slider__nav:hover { transform: translateY(-2px) scale(1.04); background: #FFFFFF; }
.real-slider__nav:focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; }
.real-slider__nav svg { width: 21px; height: 21px; }
.real-slider__nav--prev { left: clamp(2px, 2vw, 24px); }
.real-slider__nav--prev svg { transform: rotate(180deg); }
.real-slider__nav--next { right: clamp(2px, 2vw, 24px); }
.real-slider.is-ready .real-slider__pied {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 4px;
}
.real-slider__statut { color: var(--t-2); font-size: 14.5px; }
.real-slider__statut b { color: var(--t-1); }
.real-slider__points {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  max-width: 528px; gap: 0;
}
.real-slider__points button {
  position: relative; width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
.real-slider__points button::after {
  content: ""; position: absolute; top: 17px; left: 17px;
  width: 10px; height: 10px; border-radius: 8px;
  background: rgba(219, 242, 249, .34);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease;
}
.real-slider__points button[aria-current="true"]::after { background: var(--aqua); transform: scaleX(3); }
.real-slider__points button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

@media (max-width: 900px) {
  .real-slider__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .real-slider.is-ready { min-height: 660px; padding-inline: 18px; }
  .real-slider.is-ready .real-slider__carte.is-prev {
    transform: translateX(calc(-50% - 48vw)) translateY(66px) rotate(-5deg) scale(.78);
  }
  .real-slider.is-ready .real-slider__carte.is-next {
    transform: translateX(calc(-50% + 48vw)) translateY(66px) rotate(5deg) scale(.78);
  }
}
@media (max-width: 600px) {
  .real-slider { padding: 18px 12px 22px; border-radius: var(--r-md); }
  .real-slider__cartes { grid-template-columns: 1fr; }
  .real-slider.is-ready { min-height: 590px; }
  .real-slider.is-ready .real-slider__scene { min-height: 510px; }
  .real-slider.is-ready .real-slider__cartes { height: 500px; }
  .real-slider.is-ready .real-slider__carte { width: min(76vw, 320px); top: 5px; }
  .real-slider.is-ready .real-slider__carte.is-prev {
    transform: translateX(calc(-50% - 63vw)) translateY(46px) rotate(-4deg) scale(.78);
  }
  .real-slider.is-ready .real-slider__carte.is-next {
    transform: translateX(calc(-50% + 63vw)) translateY(46px) rotate(4deg) scale(.78);
  }
  .real-slider.is-ready .real-slider__nav { width: 46px; height: 46px; top: 42%; }
  .real-slider__nav--prev { left: 2px; }
  .real-slider__nav--next { right: 2px; }
  .real-slider.is-ready .real-slider__pied { flex-direction: column; gap: 10px; margin-top: 8px; }
  .real-slider__points { max-width: 264px; }
  .real-slider.is-ready .real-slider__carte figcaption { min-height: 76px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .real-slider.is-ready .real-slider__fonds img,
  .real-slider.is-ready .real-slider__carte,
  .real-slider.is-ready .real-slider__carte figcaption,
  .real-slider__nav,
  .real-slider__points button { transition: none; }
}

/* Étiquette de technique — jamais décorative : elle dit ce qu'on regarde. */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px; padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(79, 220, 239, .12); box-shadow: inset 0 0 0 1px rgba(79, 220, 239, .38);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--aqua-soft);
}
.tag--autre { background: rgba(139, 107, 255, .14); box-shadow: inset 0 0 0 1px rgba(139, 107, 255, .42); color: #CDBDFF; }

/* Comparaison côte à côte — jamais un curseur : les deux images ne sont pas
   superposables, un curseur donnerait une impression trompeuse. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: clamp(14px, 2vw, 24px); margin-top: clamp(22px, 3vh, 34px); }
.duo .fig img { background: #0A1526; }
/* Une comparaison qui n'est qu'une démonstration technique n'a pas à occuper
   toute la largeur : elle est bornée, et centrée. */
.duo--borne { max-width: 780px; margin-inline: auto; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }

/* Ruban de preuve — pleine largeur, aucune carte */
.preuve { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: clamp(14px, 2vw, 28px); margin-top: clamp(26px, 4vh, 44px); }
@media (max-width: 1080px) {
  .preuve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preuve li:last-child { grid-column: span 2; max-width: 52%; }
}
@media (max-width: 720px) {
  .preuve { grid-template-columns: 1fr; gap: 26px; }
  .preuve li:last-child { grid-column: auto; max-width: none; }
}

/* Passe 4 — la séquence du pelage n'a plus que deux moments.
   Deux colonnes égales sur toute la largeur du contenu, à toutes les largeurs
   d'ordinateur : ni colonne vide héritée de la grille de trois, ni la règle
   `:last-child` qui bornait la dernière à 52 % de la rangée, ni marge latérale
   qui ferait croire qu'une troisième image manque. C'est exactement la
   géométrie de `.duo`, la paire employée partout ailleurs sur le site — les
   deux photographies passent d'environ 380 px de large à environ 655 px.
   Sous 720 px, une seule colonne, pleine largeur. */
.preuve--duo { grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: clamp(16px, 2.4vw, 34px); }
.preuve--duo li:last-child { grid-column: auto; max-width: none; }
@media (max-width: 1080px) {
  .preuve--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preuve--duo li:last-child { grid-column: auto; max-width: none; }
}
@media (max-width: 720px) {
  .preuve--duo { grid-template-columns: 1fr; gap: 26px; }
}

/* Bande photographique bord à bord */
.bande { position: relative; margin-top: clamp(28px, 4vh, 48px); }
.bande img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); }
.bande figcaption { margin-top: 12px; font-size: 15.5px; color: var(--t-2); }
@media (max-width: 720px) { .bande img { aspect-ratio: 4 / 3; border-radius: var(--r-md); } }

/* ==========================================================================
   PANNEAU D'INFORMATION
   ========================================================================== */
.panneau {
  margin-top: clamp(24px, 3vh, 38px);
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--r-md);
  background: rgba(10, 51, 88, .38);
  box-shadow: inset 0 0 0 1px var(--line);
  --surface-fond: #08294A;
}
.panneau h3 { font-size: 19px; }
.panneau p { margin-top: 10px; color: var(--t-2); }
.panneau .liste { margin-top: 14px; }

.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(24px, 3.5vh, 40px); align-items: start; }
.grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(24px, 3.5vh, 40px); align-items: start; }
@media (max-width: 980px) { .grille3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .grille2, .grille3 { grid-template-columns: 1fr; } }

/* Bloc « à confirmer » — annotation de maquette, pas un élément de design.
   Il disparaîtra à l'intégration ; il est ici pour ne rien inventer. */
.avalider {
  margin-top: 18px; padding: 13px 16px; border-radius: 12px;
  background: rgba(255, 178, 61, .10);
  border: 1px solid rgba(255, 178, 61, .34);
  color: #FFD79A; font-size: 15.5px; line-height: 1.55;
}
.avalider b { color: #FFD79A; }
.avalider::before {
  content: 'À CONFIRMER'; display: block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em; margin-bottom: 5px;
  color: var(--ambre);
}

/* ==========================================================================
   FAQ — <details> natifs, donc utilisables sans JavaScript
   ========================================================================== */
.faq { margin-top: clamp(24px, 3.5vh, 40px); max-width: 900px; }
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  list-style: none; cursor: pointer;
  padding: 18px 2px; min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: clamp(17px, 1.35vw, 19.5px); font-weight: 700; line-height: 1.35; }
.faq summary:hover h3 { color: var(--aqua-soft); }
.faq__pl {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(241, 246, 251, .08); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.faq__pl::before, .faq__pl::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px;
  border-radius: 2px; background: var(--aqua); transform: translate(-50%, -50%);
  transition: transform var(--t-mid) var(--e-soft), opacity var(--t-mid) var(--e-soft);
}
.faq__pl::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__pl::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq__a { padding: 0 2px 22px; color: var(--t-2); max-width: 74ch; }
.faq__a p + p { margin-top: 12px; }
.faq__a b { color: var(--t-1); }
.faq__a .liste { margin-top: 12px; }

/* ==========================================================================
   FORMULAIRE
   Champs réels, étiquettes réelles, navigation clavier complète. Aucun champ
   ne porte de `name` : rien ne peut être transmis depuis la maquette.
   ========================================================================== */
.form { margin-top: clamp(24px, 3.5vh, 40px); }
.form__note {
  padding: 14px 17px; border-radius: 12px; margin-bottom: 26px;
  background: rgba(79, 220, 239, .09);
  border: 1px solid rgba(79, 220, 239, .32);
  color: var(--aqua-soft); font-size: 15.5px; line-height: 1.55;
}
.form__note b { color: var(--t-1); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }

.champ { display: grid; gap: 8px; margin-top: 18px; }
.form__grid .champ { margin-top: 0; }
.champ label { font-size: 15.5px; font-weight: 700; color: var(--t-1); }
.champ .req { color: var(--aqua); }
.champ .opt { font-weight: 500; color: var(--t-3); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border-radius: 12px; border: 0;
  background: rgba(4, 20, 40, .55);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--t-1); font: inherit; font-size: 16px; line-height: 1.5;
  transition: box-shadow var(--t-fast) var(--e-soft), background-color var(--t-fast) var(--e-soft);
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--t-3); opacity: 1; }
.champ input:hover, .champ select:hover, .champ textarea:hover {
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 3px solid var(--aqua); outline-offset: 2px;
  background: rgba(4, 20, 40, .75);
}
.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--aqua) 50%),
                    linear-gradient(135deg, var(--aqua) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.champ--check {
  grid-template-columns: auto 1fr; align-items: start; gap: 12px; margin-top: 22px;
}
.champ--check input {
  width: 24px; height: 24px; min-height: 24px; padding: 0; margin-top: 1px;
  accent-color: var(--aqua);
}
.champ--check label { font-weight: 500; color: var(--t-2); }
.form__envoi { margin-top: 28px; }
@media (max-width: 560px) { .form__envoi .btn { width: 100%; } }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; color: var(--aqua-soft); word-break: break-word;
  margin-top: 12px;
}

/* ==========================================================================
   SECTION LOCALE
   ========================================================================== */
.local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
         gap: clamp(24px, 4vw, 56px); align-items: center; }
.nap { list-style: none; display: grid; gap: 16px; margin-top: 24px; }
.nap li { display: flex; gap: 14px; align-items: flex-start; color: var(--t-2); }
.nap svg { width: 18px; height: 18px; color: var(--aqua); flex: none; margin-top: 4px; }
.nap b { display: block; color: var(--t-1); }
.nap a { color: var(--t-1); text-decoration: none; font-weight: 700; }
.nap a:hover { text-decoration: underline; }
.carte {
  position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(70% 60% at 30% 24%, rgba(79, 220, 239, .20), transparent 66%),
    linear-gradient(155deg, var(--deep-2), var(--deep-1));
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center; text-align: center; padding: 30px;
}
.carte::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(241, 246, 251, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 246, 251, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(80% 70% at 50% 50%, #000 20%, transparent 78%);
}
.carte__p { position: relative; }
.carte__p b { display: block; font-size: 19px; }
.carte__p span { display: block; margin-top: 8px; color: var(--t-2); font-size: 16px; }
.carte__pin {
  width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--aqua); box-shadow: 0 0 0 8px rgba(79, 220, 239, .18), 0 0 0 16px rgba(79, 220, 239, .08);
}
@media (max-width: 900px) { .local { grid-template-columns: 1fr; } }

/* ==========================================================================
   APPEL À L'ACTION FINAL
   ========================================================================== */
.final {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 56px);
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(79, 220, 239, .26), transparent 64%),
    radial-gradient(70% 110% at 6% 100%, rgba(139, 107, 255, .24), transparent 66%),
    linear-gradient(150deg, var(--deep-3), var(--deep-1));
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between;
  --surface-fond: #0C3A5E;
}
.final__c { max-width: 46ch; }
.final__c p { margin-top: 12px; color: var(--t-2); }
.final__b { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) { .final__b { width: 100%; } .final__b .btn { width: 100%; } }

/* ==========================================================================
   PIED DE PAGE — n'existait pas en B2.2. Les coordonnées y sont sur toutes
   les pages : c'est le correctif le moins cher relevé par l'audit.
   ========================================================================== */
.foot { border-top: 1px solid var(--line); background: var(--deep); padding: clamp(38px, 5vh, 62px) 0 26px; }
.foot__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: clamp(24px, 3vw, 44px); }
.foot h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-3); font-weight: 800; }
/* Les entrées du pied sont des liens de navigation, pas des liens au fil du
   texte : elles ont droit à une hauteur de frappe complète. L'espacement de
   la grille est réduit d'autant, la colonne garde donc la même hauteur. */
.foot ul { list-style: none; margin-top: 10px; display: grid; gap: 0; }
.foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
.foot a { color: var(--t-2); text-decoration: none; font-size: 16px; }
.foot a:hover { color: var(--t-1); text-decoration: underline; }
.foot__mark { display: inline-flex; align-items: baseline; gap: .40em; min-height: 44px;
  font-weight: 800; font-size: 22px; letter-spacing: -.035em;
  color: var(--t-1); text-decoration: none; }
.foot__mark i {
  font-style: normal; font-weight: 800;
  text-shadow: -1.6px 1.1px 0 rgba(255, 90, 160, .58),
                1.6px -1.1px 0 rgba(79, 220, 239, .58);
}
.foot__mark b { font-weight: 600; font-size: .82em; color: var(--aqua-soft); }
.foot__about { margin-top: 14px; color: var(--t-2); font-size: 16px; max-width: 34ch; }
.foot .nap { margin-top: 16px; gap: 12px; }
.foot .nap li { font-size: 16px; }
.foot__bas {
  margin-top: clamp(28px, 4vh, 46px); padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  color: var(--t-3); font-size: 15px;
}
.foot__bas ul { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.foot__bas a { font-size: 15px; }
@media (max-width: 1080px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .foot__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOUVEMENT
   Tout état masqué dépend de .js-anim, posée par le script uniquement quand
   une animation va réellement jouer. Sans JavaScript, sous réduction de
   mouvement ou dans un onglet jamais rendu, la page est complète dès le
   premier rendu.
   ========================================================================== */
.js-anim .rv { opacity: 0; transform: translateY(22px); }
.js-anim .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--e-out), transform 780ms var(--e-out);
}
/* Révélation d'image : un volet qui se retire, jamais un fondu mou.
   Le masque est posé sur l'image, jamais sur le conteneur observé : un élément
   entièrement rogné par `clip-path` est vu comme hors champ par
   IntersectionObserver, et ne peut donc plus déclencher sa propre apparition.
   Défaut réel, trouvé à la passe 2 — deux blocs restaient invisibles. */
.js-anim .rv-img > img,
.js-anim .rv-img figure > img,
.js-anim .rv-img .pile > img,
.js-anim .rv-img .pile__b > img { clip-path: inset(0 0 100% 0); }
.js-anim .rv-img.is-in > img,
.js-anim .rv-img.is-in figure > img,
.js-anim .rv-img.is-in .pile > img,
.js-anim .rv-img.is-in .pile__b > img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--e-out);
}
.js-anim .rv-img.is-in .pile__b > img { transition-delay: 180ms; }

/* Décalage en cascade dans une grille */
.js-anim [data-rv-d="1"].is-in { transition-delay: 90ms; }
.js-anim [data-rv-d="2"].is-in { transition-delay: 180ms; }
.js-anim [data-rv-d="3"].is-in { transition-delay: 270ms; }
.js-anim [data-rv-d="4"].is-in { transition-delay: 360ms; }
.js-anim [data-rv-d="5"].is-in { transition-delay: 450ms; }

/* Parallaxe : une seule variable, écrite par le script, deux couches.
   Amplitude maximale 16 px — c'est l'écart entre les couches qui fait la
   profondeur, pas leur amplitude. */
.par { transform: translate3d(0, calc(var(--par, 0) * 1px), 0); }
.par--2 { transform: translate3d(0, calc(var(--par, 0) * 1.9px), 0); }

/* Arrivée de page : 200 ms, jamais bloquante — le contenu est peint d'abord. */
.js-anim body { }
html.js-anim .pagefade { animation: pagein 240ms var(--e-out) 1 both; }
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
html.js-anim.is-leaving .pagefade { opacity: .3; transition: opacity 150ms linear; }

/* ==========================================================================
   RÉDUCTION DE MOUVEMENT
   Le site reste complet et attrayant : rien n'est masqué, rien n'est retiré.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js-anim .rv, .js-anim .rv-img, .js-anim .rv-img img, .js-anim .bleed img {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important;
  }
  .rail { scroll-behavior: auto; scroll-snap-type: none; }
  .par, .par--2 { transform: none !important; }
  html.js-anim .pagefade { animation: none !important; }
  html.js-anim.is-leaving .pagefade { opacity: 1 !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PLANCHER TYPOGRAPHIQUE — repris de B2.2
   Sous 900 px, tout texte de lecture remonte à 16 px. Seules restent plus
   petites les micro-étiquettes, qui ne sont pas du texte courant.
   ========================================================================== */
@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .lead { font-size: 17px; }
  .strip__list li, .fig figcaption, .bande figcaption, .etapes p, .liste li,
  .txt, .faq__a, .avalider, .link3, .btn--sm, .foot a, .foot__about, .foot__bas,
  .foot__bas a, .nap li, .pc__d, .panneau p, .fil, .fil a, .ptop__aside,
  .carte__p span, .mnav__nap, .hdr__burger, .mnav__close, .form__note,
  .champ label, .champ--check label, .mono { font-size: 16px; }
  /* Les seules exceptions au plancher de 16 px : des micro-étiquettes en
     capitales, interlettrées, qui ne sont pas du texte de lecture. */
  .tag, .kicker, .etapes li::before, .pc__num, .mnav__list em { font-size: 12.5px; }
  .foot h2 { font-size: 13px; }
}
@media (max-width: 720px) {
  .strip__list { grid-template-columns: 1fr; gap: 9px; padding: 14px 0; }
  .final { padding: 26px 22px; }
}

/* ==========================================================================
   PASSE 2 — TÉLÉPHONE : RESSERRER
   Les pages complètes à 390 px étaient trop longues, avec des successions de
   paragraphes séparées par de grands vides. Les hauteurs descendent encore,
   les médias, eux, gardent leur taille : c'est la longueur inutile qu'on
   retire, pas ce qu'il y a à regarder.
   ========================================================================== */
@media (max-width: 720px) {
  :root {
    --sec: clamp(30px, 4.4vh, 44px);
    --sec-sm: clamp(22px, 3vh, 32px);
    --sec-lg: clamp(36px, 5vh, 56px);
  }
  .sec__head .h2 { margin-top: 9px; }
  .lead { margin-top: 13px; }
  .txt { margin-top: 13px; }
  .txt + .txt { margin-top: 11px; }
  .liste { margin-top: 14px; gap: 9px; }
  .panneau { margin-top: 18px; padding: 18px 17px; }
  .grille2, .grille3 { gap: 22px; margin-top: 20px; }
  .parcours { gap: 14px; margin-top: 20px; }
  .etapes { gap: 18px; margin-top: 22px; }
  .galerie, .galerie--2 { gap: 22px; margin-top: 22px; }
  .duo { gap: 16px; margin-top: 18px; }
  .faq { margin-top: 20px; }
  .fig figcaption { margin-top: 10px; }
  .bande { margin-top: 22px; }
  .sec--clair::before { height: 56px; }
  .bleed--haute { min-height: clamp(260px, 42vh, 340px); }
  .bleed--basse { min-height: clamp(180px, 26vh, 240px); }
  .bleed__voile {
    background: linear-gradient(180deg, rgba(4, 20, 40, .30) 0%,
                rgba(4, 20, 40, .55) 45%, rgba(4, 20, 40, .92) 100%);
  }
  /* Le contenu se cale en bas de la bande : c'est `.bleed` qui aligne
     maintenant, puisque c'est lui la boîte flexible. */
  .bleed { align-items: flex-end; }
  .bleed__c { padding-block: clamp(46px, 8vh, 80px) 24px; }
  .bleed__t { max-width: none; }
  .ptop__aside { padding-left: 16px; }
}

/* ==========================================================================
   PASSE 2 — RANGÉE DÉFILANTE SUR TÉLÉPHONE SEULEMENT
   Trois photographies d'une même séquence, ou quatre fiches parallèles,
   empilées à 390 px, cela fait deux mille pixels de haut pour un contenu que
   l'œil parcourt naturellement de gauche à droite. Sous 720 px, ces groupes
   deviennent une rangée qui défile ; au-dessus, ils reprennent leur grille.
   Le défilement est natif : au doigt, à la molette, au clavier, sans script.
   ========================================================================== */
.rail__aide--mobile { display: none; }
@media (max-width: 720px) {
  .rail-mobile {
    display: grid; grid-auto-flow: column;
    /* impératif : les grilles d'origine posent `grid-template-columns`, qui
       s'appliquerait à la première colonne et casserait la rangée. */
    grid-template-columns: none;
    grid-auto-columns: 76vw;
    align-items: start;
    gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    padding: 4px var(--gut) 18px;
    margin-inline: calc(var(--gut) * -1);
    list-style: none;
    scrollbar-width: thin;
  }
  .rail-mobile > * { scroll-snap-align: start; min-width: 0; }
  .rail-mobile > li:last-child { grid-column: auto; max-width: none; }
  .rail-mobile::-webkit-scrollbar { height: 7px; }
  .rail-mobile::-webkit-scrollbar-track { background: rgba(241, 246, 251, .08); border-radius: 4px; }
  .rail-mobile::-webkit-scrollbar-thumb { background: rgba(241, 246, 251, .32); border-radius: 4px; }
  .sec--clair .rail-mobile::-webkit-scrollbar-track { background: rgba(7, 26, 46, .08); }
  .sec--clair .rail-mobile::-webkit-scrollbar-thumb { background: rgba(7, 26, 46, .30); }
  .rail__aide--mobile { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-mobile { scroll-snap-type: none; }
}

/* Repli : un contenu secondaire, disponible sans allonger la page.
   `<details>` natif — donc utilisable sans JavaScript, annoncé correctement, et
   il se comporte de la même façon à toutes les largeurs. Le résumé reste
   visible partout : un contenu qu'on ne peut pas atteindre sans JavaScript
   n'est pas un contenu. */
.repli { margin-top: 20px; }
.repli > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  list-style: none; cursor: pointer; min-height: 54px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 16.5px; font-weight: 700; color: var(--t-1);
}
.repli[open] > summary { border-bottom-color: transparent; }
.repli > summary:hover { color: var(--aqua-soft); }
.sec--clair .repli > summary { border-color: var(--line-ink); color: var(--ink-1); }
.sec--clair .repli > summary:hover { color: var(--cyan-ink); }
.repli > summary::-webkit-details-marker { display: none; }
.repli__c { padding: 18px 0 20px; }
@media (max-width: 900px) { .repli > summary { font-size: 16px; } }

/* ==========================================================================
   PASSE 2 — SURFACES CLAIRES
   Le site alternait neuf fois le même bleu nuit. Une section sur trois environ
   bascule maintenant sur une surface pâle. Ce n'est pas un blanc neutre : c'est
   le bleu nuit de B2.2 très délavé, donc la palette ne change pas, seule sa
   valeur change.
   ========================================================================== */
.sec--clair {
  background: var(--pale);
  color: var(--ink-1);
  --surface-fond: #EEF3F7;
}
.sec--clair-2 {
  background: linear-gradient(172deg, var(--pale-2), var(--pale));
  --surface-fond: #E7EFF4;
}

/* Le passage sombre → clair ne se fait pas sur un bord net : la trame se
   resserre puis la surface bascule. C'est un détail d'impression, pas un
   ornement — et il ne coûte aucune requête. */
.sec--clair::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--deep-1) 1.1px, transparent 1.5px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, transparent 100%);
  opacity: .5;
}
.sec--clair.sec--sans-trame::before { content: none; }

.sec--clair .h1, .sec--clair .h2, .sec--clair .h3,
.sec--clair h2, .sec--clair h3, .sec--clair h4 { color: var(--ink-1); }
.sec--clair .kicker { color: var(--cyan-ink); }
.sec--clair .kicker::before { background: linear-gradient(90deg, var(--cyan-ink), var(--magenta)); }
.sec--clair .lead, .sec--clair .txt, .sec--clair p,
.sec--clair .liste li, .sec--clair .fig figcaption,
.sec--clair .etapes p, .sec--clair .faq__a { color: var(--ink-2); }
.sec--clair .txt b, .sec--clair .txt strong, .sec--clair .liste b,
.sec--clair .fig figcaption b, .sec--clair .faq__a b { color: var(--ink-1); }
.sec--clair a { color: var(--cyan-ink); }
.sec--clair .liste li::before { background: var(--cyan-ink); }
.sec--clair .panneau {
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  --surface-fond: #F6F9FB;
}
.sec--clair .etapes li { border-top-color: var(--line-ink); }
.sec--clair .etapes li::before { background: var(--pale); color: var(--cyan-ink); }
.sec--clair.sec--clair-2 .etapes li::before { background: var(--pale-2); }
.sec--clair .fig img { box-shadow: 0 0 0 1px var(--line-ink), 0 22px 44px -26px rgba(7, 26, 46, .45); }
.sec--clair .faq details,
.sec--clair .faq details:last-of-type { border-color: var(--line-ink); }
.sec--clair .faq summary h3 { color: var(--ink-1); }
.sec--clair .faq summary:hover h3 { color: var(--cyan-ink); }
.sec--clair .faq__pl { background: rgba(7, 26, 46, .06); box-shadow: inset 0 0 0 1px var(--line-ink-fort); }
.sec--clair .faq__pl::before, .sec--clair .faq__pl::after { background: var(--cyan-ink); }
.sec--clair .tag {
  background: rgba(11, 90, 112, .10);
  box-shadow: inset 0 0 0 1px rgba(11, 90, 112, .34);
  color: var(--cyan-ink);
}
.sec--clair .tag--autre {
  background: rgba(90, 60, 180, .10);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 180, .32);
  color: #4B3199;
}
.sec--clair .link3 { color: var(--ink-2); }
.sec--clair .link3 svg { color: var(--cyan-ink); }
.sec--clair .link3:hover { color: var(--ink-1); }
.sec--clair :focus-visible { outline-color: var(--cyan-ink); }

/* Les boutons changent de valeur, pas de forme. */
.sec--clair .btn--main { background: var(--deep); color: var(--t-1); }
.sec--clair .btn--main .btn__chip { background: rgba(241, 246, 251, .18); color: var(--t-1); }
.sec--clair .btn--main:hover { background: var(--deep-1); }
.sec--clair .btn--ghost {
  background: rgba(7, 26, 46, .04); color: var(--ink-1);
  box-shadow: inset 0 0 0 1.5px var(--line-ink-fort);
}
.sec--clair .btn--ghost .btn__chip { background: rgba(7, 26, 46, .09); color: var(--ink-1); }
.sec--clair .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-1); }

/* Le panneau d'appel à l'action final ne bascule pas : il reste sombre même
   sur une surface claire. C'est le point le plus contrasté de la page, et il
   doit le rester. */
.sec--clair .final .h2, .sec--clair .final h2 { color: var(--t-1); }
.sec--clair .final p { color: var(--t-2); }
.sec--clair .final .btn--main { background: var(--t-1); color: var(--t-ink); }
.sec--clair .final .btn--main .btn__chip { background: var(--deep-2); color: var(--t-1); }
.sec--clair .final .btn--main:hover { background: #fff; }
.sec--clair .final .btn--ghost {
  background: rgba(241, 246, 251, .06); color: var(--t-1);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.sec--clair .final .btn--ghost .btn__chip { background: rgba(241, 246, 251, .12); color: var(--t-1); }
.sec--clair .final .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--t-1); }