/* ============================================================================
   TSB digital — feuille de style
   ============================================================================
   Grammaire reprise de microsoft.ai : serif monumentale mêlant italique et
   romain, micro-libellés en mono, barre de navigation flottante, fond crème,
   grandes cartes arrondies, respirations d'un écran entier.
   L'identité, elle, reste la nôtre : bleu marine, Newsreader, nos contenus.

   Règle absolue : AUCUNE couleur en dur hors de :root — tout vient du thème.
   Vérifié par : node ../OUTILS-COMMUNS/verifier-tokens.mjs public/assets/css
   ========================================================================== */

/* --- 1. Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WCAG 2.4.11 : la barre flottante ne doit jamais recouvrir une ancre.
     Variable, parce que les crans du savoir-faire doivent la compenser. */
  --degagement-barre: 110px;
  scroll-padding-top: var(--degagement-barre);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink-soft);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--c-accent-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-accent-dk); }

/* L'anneau de focus suit le fond : marine sur clair, or clair sur les
   sections bleues (--anneau y est redéfini), où le marine disparaîtrait. */
:focus-visible { outline: 2px solid var(--anneau, var(--c-accent-dk)); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--c-accent-200); color: var(--c-ink); }

.evitement {
  position: absolute; left: 16px; top: -200px; z-index: 300;
  padding: 12px 20px;
  background: var(--c-ink); color: var(--c-bg);
  border-radius: 8px; text-decoration: none;
  font-family: var(--f-mono); font-size: var(--fs-sm);
}
.evitement:focus { top: 16px; color: var(--c-bg); }

.contenu {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* --- 2. Typographie ----------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  /* 06-10-2026 : l'ardoise faisait des titres gris et mous sur le crème.
     Encre profonde pour les titres, l'ardoise reste au corps de texte. */
  color: var(--c-ink);
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.12; }

/* L'italique d'un titre n'est pas une emphase : c'est le geste qui donne son
   caractère à la composition. Un mot, jamais deux dans le même titre. */
.ital { font-style: italic; font-weight: 300; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Le mono ne sert QU'aux micro-libellés. Dès qu'il porte une phrase, tout le
   registre s'effondre — c'est pourquoi, depuis le 06-10-2026, boutons et
   navigation sont en Newsreader. Les libellés passent en capitales espacées :
   l'étiquette de maison, pas le terminal. */
.etiq {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--capitales-surtitre);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.titre-centre { text-align: center; margin-bottom: clamp(48px, 7vw, 96px); }

/* --- 3. Boutons --------------------------------------------------------- */

.pilule {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px;
  padding: 10px 30px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.pilule--beige { background: var(--c-bg-alt); color: var(--c-ink-soft); }
.pilule--beige:hover { background: var(--c-ink); color: var(--c-bg); }
.pilule--encre { background: var(--c-profond); color: var(--c-on-accent); }
.pilule--encre:hover { background: var(--c-accent-dk); color: var(--c-on-accent); }
.pilule--creme { background: var(--c-surface); color: var(--c-accent-ink); }
.pilule--creme:hover { background: var(--c-accent-50); color: var(--c-accent-ink); }

/* Le bouton carré qui accompagne une pilule : « Tous nos services  → » */
.carre {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 6px;
  background: var(--c-profond); color: var(--c-on-accent);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-sm) var(--ease);
}
.carre:hover { background: var(--c-accent-dk); color: var(--c-on-accent); }
.carre--beige { background: var(--c-bg-alt); color: var(--c-ink-soft); }
.carre--beige:hover { background: var(--c-ink); color: var(--c-bg); }
.carre[disabled] { opacity: .45; cursor: default; }
.carre svg { width: 16px; height: 16px; }

.duo-boutons { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* --- 4. Barre de navigation flottante ----------------------------------- */

.barre {
  position: fixed;
  top: 20px; left: 20px; right: 20px;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 6px 10px 6px 20px;
  background: var(--c-surface);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 30px rgba(0, 0, 0, .05);
  transition: background-color var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
.barre__marque {
  font-family: var(--f-display);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-decoration: none;
}
.barre__marque .ital { color: var(--c-ink-soft); }
.barre__marque:hover { color: var(--c-ink); }

.barre__liens { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.barre__liens a {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--f-display); font-size: 1rem;
  color: var(--c-ink-soft); text-decoration: none;
  transition: background var(--dur-xs) var(--ease);
}
.barre__liens a:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.barre__liens a.barre__contact { background: var(--c-accent-dk); color: var(--c-on-accent); }
.barre__liens a.barre__contact:hover { background: var(--c-accent-ink); color: var(--c-on-accent); }
/* Au survol, et sur la page où l'on se trouve : un filet doré sous le mot. */
.barre__liens a:not(.barre__contact) { position: relative; }
.barre__liens a:not(.barre__contact)::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 5px;
  height: 1px;
  background: var(--c-or);
  transform: scaleX(0);
  transition: transform var(--dur-sm) var(--ease);
}
.barre__liens a:not(.barre__contact):hover::after,
.barre__liens a[aria-current="page"]::after { transform: scaleX(1); }

/* Sur la nuit du héros — 30-09-2026 : « supprime le blanc de la barre en
   page 1, les écritures doivent être intégrées dans le fond bleu ». La barre
   perd son fond et son ombre, les mots s'écrivent sur le ciel ; le nom prend
   l'or clair du pied de page, le contact devient un liseré doré. site.js
   (§0) lui rend son fond crème dès que le ciel s'éclaircit sous elle.
   La classe est posée dans le HTML — pas par le script — pour qu'aucun
   éclair blanc ne précède son arrivée ; sans script, un <noscript> la
   neutralise. Contraste : 10,87:1 au pire (accent-200 sur le bleu nuit). */
.barre--nuit { background-color: transparent; box-shadow: none; --anneau: var(--c-or-clair); }
.barre--nuit .barre__marque, .barre--nuit .barre__marque:hover { color: var(--c-on-accent); }
.barre--nuit .barre__marque .ital { color: var(--c-or-clair); }
.barre--nuit .barre__liens a { color: var(--c-accent-200); transition: color var(--dur-md) var(--ease), background var(--dur-xs) var(--ease); }
.barre--nuit .barre__liens a:hover { background: rgba(255, 255, 255, .08); color: var(--c-on-accent); }
.barre--nuit .barre__liens a:not(.barre__contact)::after { background: var(--c-or-clair); }
.barre--nuit .barre__liens a.barre__contact {
  background: transparent;
  color: var(--c-on-accent);
  box-shadow: inset 0 0 0 1px var(--c-or-clair);
}
.barre--nuit .barre__liens a.barre__contact:hover { background: rgba(255, 255, 255, .08); color: var(--c-on-accent); }

/* Huit entrées : on retire d'abord les ancres que la page d'accueil montre
   de toute façon en défilant, puis tout sauf le contact sur téléphone. Les
   deux pages ajoutées restent jointes depuis le contenu et le pied de page. */
@media (max-width: 1240px) {
  .barre__liens .barre__secondaire { display: none; }
}
@media (max-width: 980px) {
  .barre__liens li:not(:last-child):not(.barre__essentiel) { display: none; }
}
@media (max-width: 760px) {
  .barre { top: 12px; left: 12px; right: 12px; padding-left: 16px; }
  .barre__liens li:not(:last-child) { display: none; }
}

/* --- 5. Héros — de la nuit à l'écru, galaxie ----------------------------- */
/* 30-09-2026, deuxième reprise du jour. L'aplat du 25-09 faisait « carré
   bleu ». La première reprise (aplat + bande floue vers l'écru, en oklab)
   traversait un GRIS TERNE à mi-hauteur : un mélange direct du bleu et de
   l'écru passe par les neutres. Désormais le fondu EST le fond, du haut au
   bas du héros, par les paliers « aube » du thème : nuit profonde en haut,
   marine sous le texte, puis un bleu qui garde sa couleur en s'éclaircissant
   et un nacre chaud qui le fait céder à l'écru. Aucune couche par-dessus.
   Le texte clair reste au-dessus de --c-aube-2 (7,91:1 au pire) : le test
   de contraste interpole le dégradé à la hauteur de chaque élément et le
   mesure — le héros n'est plus exclu du portail.
   La galaxie s'efface par un masque avant que le ciel ne s'éclaircisse :
   pas de points bleus sur fond clair. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 140px 20px clamp(200px, 30svh, 320px);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-profond);
  background: linear-gradient(180deg,
    var(--c-nuit-haut)   0%,
    var(--c-profond)     22%,
    var(--c-aube-1)      44%,
    var(--c-accent-dk)   56%,
    var(--c-aube-2)      64%,
    var(--c-aube-3)      71%,
    var(--c-aube-4)      78%,
    var(--c-aube-5)      85%,
    var(--c-nacre)       92%,
    var(--c-nacre-clair) 96%,
    var(--c-bg)          100%);
  --anneau: var(--c-or-clair);
}
.hero__scene {
  position: absolute; inset: 0; z-index: 0;
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 74%);
          mask-image: linear-gradient(to bottom, black 40%, transparent 74%);
}
/* Le contenu attend le script de l'entrée animée. S'il ne vient jamais
   (réseau coupé, erreur), cette animation de secours le révèle seule. */
.hero__contenu {
  position: relative; z-index: 2;
  opacity: 0;
  animation: hero-secours .6s var(--ease) 2.4s forwards;
}
@keyframes hero-secours { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__contenu { opacity: 1; animation: none; }
}
/* Un halo bleu nuit, à demi transparent, autour des lettres : il écarte les
   points de la galaxie qui passent derrière le texte. À demi seulement,
   parce que le fond n'est plus uni : un halo plein ferait une tache plus
   sombre que le ciel autour du sous-titre.
   Posé sur le titre une fois recollé (.est-pose) : pendant l'entrée, chaque
   lettre est une boîte à part, et le halo de l'une assombrirait sa voisine. */
.hero h1.est-pose, .hero__sous {
  --halo: color-mix(in srgb, var(--c-profond) 55%, transparent);
  text-shadow: 0 0 14px var(--halo), 0 0 32px var(--halo), 0 0 60px var(--halo);
}
.hero h1 {
  font-size: clamp(3.6rem, 10vw, 8.125rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -0.04em;
  color: var(--c-on-accent);
}
.hero h1 span { display: block; }
.hero__sous {
  margin: 26px auto 0;
  max-width: 34ch;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.3;
  color: var(--c-on-accent);
}
.hero .filet-or { margin-top: 34px; }
.hero .pilule { margin-top: 44px; }
/* La pilule crème du héros porte un liseré doré d'un pixel, à l'intérieur :
   visible de près, invisible de loin. */
.hero .pilule--creme, .contact .pilule--creme {
  box-shadow: inset 0 0 0 1px var(--c-or);
}

/* Le héros d'une page intérieure : même ciel, sans galaxie ni script. Le
   contenu entre en CSS seul (il n'attend pas heros.js, qui n'est chargé que
   sur l'accueil). */
.hero--page { min-height: 92svh; }
.hero--page .hero__contenu {
  opacity: 1;
  animation: hero-entree .9s var(--ease) .1s both;
}
@keyframes hero-entree { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) { .hero--page .hero__contenu { animation: none; } }
.hero--page h1 { font-size: clamp(3rem, 7.4vw, 6.25rem); line-height: 1.02; }
.hero--page h1 span { display: inline; }
.hero--page .etiq { color: var(--c-accent-200); margin-bottom: 28px; }
.hero--page .hero__sous { max-width: 38ch; }
/* Sans galaxie, le halo n'a plus de points à écarter : il ne ferait qu'une
   tache sombre autour du sous-titre. */
.hero--page .hero__sous { text-shadow: none; }

/* --- 5 bis. Touches dorées ------------------------------------------------ */
/* 30-09-2026 : « quelques touches de doré discrètes un peu partout, pas
   grosses, pour donner un côté premium ». Règle tenue partout : le doré
   est un TRAIT — filet, puce, losange, liseré —, jamais une surface ni du
   texte courant. Un pixel d'épaisseur, rarement plus. */

/* Filet doré : un trait qui s'allume au centre et s'éteint aux bords. */
.filet-or {
  display: block;
  position: relative;
  width: 96px; height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--c-or) 30%, var(--c-or) 70%, transparent);
}
/* …avec un losange en son milieu, pour les moments de ponctuation. */
.filet-or--losange::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px;
  background: var(--c-or);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Sur le bleu, l'or s'éclaircit — le même or paraîtrait terne. */
.hero .filet-or, .contact .filet-or, .pied .filet-or {
  background: linear-gradient(90deg, transparent, var(--c-or-clair) 30%, var(--c-or-clair) 70%, transparent);
}
.hero .filet-or--losange::after, .contact .filet-or--losange::after { background: var(--c-or-clair); }

/* Sur-titre de section précédé d'un court filet doré. */
.etiq--or::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 22px; height: 1px;
  margin: -2px 12px 0 0;
  background: var(--c-or);
}
.hero .etiq--or::before { background: var(--c-or-clair); }
/* Libellé mis en avant (« Le plus demandé ») : une petite étoile dorée. */
.etiq--vedette::before {
  content: "✦";
  content: "✦" / "";   /* décor : rien à lire pour un lecteur d'écran */
  margin-right: 8px;
  color: var(--c-or);
}

/* --- 6. Vitrine — la grande carte qui chevauche le héros ---------------- */
/* Chez le modèle, c'est une illustration. Ici, c'est notre travail : les
   quatre sites, en éventail. On ne montre rien d'autre que ce qu'on sait faire. */

.vitrine { position: relative; z-index: 2; margin-top: -110px; }
.vitrine__carte {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-alt);
  aspect-ratio: 16 / 7.4;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .12);
}
/* Quatre écrans qui se chevauchent en éventail : assez grands pour qu'on
   reconnaisse chaque site, assez serrés pour que la carte paraisse pleine. */
.vitrine__rangee {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6%;
}
/* 06-10-2026 : à 30 %, les écrans des bords étaient rognés par la carte. */
.vitrine__ecran {
  position: relative;
  flex: 0 0 28%;
  margin-inline: -1.8%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .22);
  transition: transform var(--dur-lg) var(--ease);
}
.vitrine__ecran img { width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; object-position: top; }
/* Tous ceux qui brillent porte un bandeau « site en construction » (10 % du
   haut de la capture desktop, 18,6 % de la mobile) jusqu'à l'ouverture du
   salon. On cadre sous le bandeau ; à retirer quand les captures seront
   refaites sans lui (outils/capturer-realisations.mjs). */
.vitrine__ecran img.sous-bandeau { transform: scale(1.12); transform-origin: 50% 100%; }
.vitrine__ecran:nth-child(1) { z-index: 1; transform: translateY(9%)  rotate(-6deg); }
.vitrine__ecran:nth-child(2) { z-index: 3; transform: translateY(-5%) rotate(-2deg); }
.vitrine__ecran:nth-child(3) { z-index: 2; transform: translateY(-3%) rotate(2deg); }
.vitrine__ecran:nth-child(4) { z-index: 1; transform: translateY(10%) rotate(6deg); }
.vitrine__carte:hover .vitrine__ecran:nth-child(1) { transform: translate(-4%, 6%) rotate(-7deg); }
.vitrine__carte:hover .vitrine__ecran:nth-child(4) { transform: translate(4%, 6%) rotate(7deg); }

@media (max-width: 760px) {
  .vitrine { margin-top: -70px; }
  .vitrine__carte { aspect-ratio: 4 / 3.6; }
  .vitrine__rangee { flex-wrap: wrap; align-content: center; gap: 4%; padding: 6%; }
  .vitrine__ecran { flex: 0 0 46%; margin: 0; }
}

/* --- 7. Sections -------------------------------------------------------- */

.section { padding-block: clamp(96px, 12vw, 176px); }
.section--beige { background: var(--c-bg-alt); }

/* --- 8. Défilé des réalisations ------------------------------------------ */
/* 06-10-2026 — seule section en direction « Galerie » (le reste du site est
   « Nocturne ») : le travail devient le sujet. Titre monumental, chaque
   projet sur une grande carte, la capture mobile dans un téléphone ; seuls
   les « objets » (les téléphones) portent une ombre. Grammaire empruntée à
   Garden Eight (Refero) — directions/elevation-06-10/. */

.defile__tete {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.defile__tete h2 { font-size: clamp(2.75rem, 7vw, 6.25rem); line-height: .94; letter-spacing: -0.045em; }
.defile__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(1080px, 88%);
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(20px, 4vw, 48px);
  padding-inline: clamp(20px, 4vw, 48px);
  padding-bottom: 8px;
  scrollbar-width: none;
}
.defile__piste::-webkit-scrollbar { display: none; }
@media (min-width: 1416px) {
  .defile__piste {
    padding-inline: calc((100vw - var(--max-w)) / 2 + 48px);
    scroll-padding-inline: calc((100vw - var(--max-w)) / 2 + 48px);
  }
}

.projet {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 30px;
  background: var(--c-bg-alt);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-sm) var(--ease);
}
.projet:hover { background: var(--c-nacre-clair); color: inherit; }
/* La capture mobile, dans un téléphone. */
.projet__image {
  width: min(100%, 290px);
  margin-inline: auto;
  aspect-ratio: 9 / 15;
  overflow: hidden;
  border: 9px solid var(--c-ink);
  border-radius: 40px;
  background: var(--c-surface);
  box-shadow: 0 44px 80px -26px color-mix(in srgb, var(--c-profond) 55%, transparent);
}
.projet__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform var(--dur-lg) var(--ease); }
/* Cadré par le bas : le téléphone coupe le bandeau « en construction ». */
.projet__image img.sous-bandeau { object-position: 50% 100%; }
.projet:hover .projet__image img { transform: scale(1.03); }
.projet__corps { align-self: stretch; display: flex; flex-direction: column; padding: 12px 0 4px; }
.projet__titre { font-size: clamp(2.25rem, 3.8vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; color: var(--c-ink); }
.projet__texte { margin-top: 18px; max-width: 34ch; font-size: 1.25rem; line-height: 1.45; color: var(--c-ink-soft); }
.projet__pied { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.projet__pied svg { width: 18px; height: 18px; color: var(--c-accent-ink); transition: transform var(--dur-sm) var(--ease); }
.projet:hover .projet__pied svg { transform: translateX(4px); }

@media (max-width: 700px) {
  .projet { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .projet__image { width: min(100%, 230px); }
}

/* Flèches au contour d'encre, remplies au survol. */
.defile__commandes { display: flex; gap: 8px; }
.defile__commandes .carre {
  border-radius: 999px;
  background: transparent; color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ink);
}
.defile__commandes .carre:hover { background: var(--c-ink); color: var(--c-bg); }
.defile__commandes .carre[disabled] { opacity: .3; }
.defile__commandes .carre[disabled]:hover { background: transparent; color: var(--c-ink); }

/* --- 9. Catalogue des services ------------------------------------------ */

/* 06-10-2026 : les pictogrammes en pastilles bleu pâle (vocabulaire des
   modèles SaaS) sont remplacés par un grand chiffre italique doré.
   Pictogrammes archivés dans themes/ecartes/marques-trait/. */
.catalogue {
  counter-reset: service;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: clamp(12px, 3vw, 40px) clamp(20px, 4vw, 64px);
}
.service {
  display: grid;
  grid-template-columns: 180px minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-block: clamp(40px, 5vw, 72px);
}
.service { counter-increment: service; }
.service + .service { border-top: 1px solid var(--c-line); }
/* Grand chiffre décoratif (le lecteur d'écran lit déjà une liste d'articles) :
   3:1 suffit au-delà de 24 px — or foncé, 4,27:1 sur la surface. */
.service::before {
  content: counter(service, decimal-leading-zero);
  content: counter(service, decimal-leading-zero) / "";
  padding-top: 8px;
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.25rem, 5vw, 4.75rem);
  line-height: .8;
  letter-spacing: -0.05em;
  color: var(--c-or-fonce);
}
.service__nom { font-size: clamp(2rem, 3.8vw, 3.25rem); margin: 14px 0 26px; line-height: 1.02; }
.service__texte { font-size: 1.3125rem; line-height: 1.45; padding-top: 34px; }
.service__prix { display: block; margin-top: 18px; font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-accent-ink); }

@media (max-width: 900px) {
  .service { grid-template-columns: 1fr; gap: 0; }
  .service::before { margin-bottom: 14px; text-align: left; }
  .service__texte { padding-top: 22px; }
}

.catalogue__suite { margin-top: 48px; }

/* --- 10. Manifeste ------------------------------------------------------ */

.manifeste { text-align: center; }
.manifeste__phrase {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--f-display);
  font-size: clamp(2.125rem, 4.4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-wrap: balance;
}
.manifeste__suite {
  margin: 48px auto 0;
  max-width: 50ch;
  font-size: 1.3125rem;
  line-height: 1.5;
}

/* --- 10 ter. Interlude de nuit (06-10-2026, direction « Nocturne ») ------ */
/* La nuit n'est plus seulement le cadre (héros, contact) : elle revient au
   milieu de la page et coupe le couloir crème. Jamais un « carré bleu »
   (refusé le 30-09-2026) : on y entre par un .fondu et on en sort par un
   .fondu--sortie (section 15), blocs à part de hauteur fixe, sur les paliers
   « aube » du héros. Le texte vit entre les deux, sur le bleu nuit uni :
   c'est ce que mesure le test de contraste. */

.nuit {
  --anneau: var(--c-or-clair);
  background: var(--c-profond);
  color: var(--c-lune);
}
.nuit h2, .nuit h3, .nuit .manifeste__phrase, .nuit dt { color: var(--c-on-accent); }
.nuit h2 .ital { color: var(--c-or-clair); }             /* 7,51:1 */
.nuit p, .nuit dd { color: var(--c-lune); }               /* 9,54:1 */
.nuit .etiq { color: var(--c-lune); }
.nuit a { color: var(--c-on-accent); }
.nuit a:hover { color: var(--c-or-clair); }
.nuit .etiq--or::before { background: var(--c-or-clair); }
.nuit .filet-or {
  background: linear-gradient(90deg, transparent, var(--c-or-clair) 30%, var(--c-or-clair) 70%, transparent);
}
.nuit .filet-or--losange::after { background: var(--c-or-clair); }

/* --- 10 bis. L'équipe — deux portraits, sans photographie ---------------- */
/* Pas de photo : une initiale en italique, comme les chiffres de la méthode.
   La typographie porte seule le portrait — cohérent avec le reste du site. */

.equipe__intro {
  margin: 0 auto;
  max-width: 44ch;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
}
.equipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(48px, 6vw, 80px);
  align-items: start;
}
.portrait {
  padding: clamp(32px, 4vw, 56px);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.portrait__initiale {
  display: block;
  margin-bottom: 30px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: .75;
  letter-spacing: -0.05em;
  color: var(--c-accent-dk);
}
/* Sous l'initiale, un court filet doré : la signature du portrait. */
.portrait__initiale::after {
  content: "";
  display: block;
  width: 36px; height: 1px;
  margin-top: 26px;
  background: var(--c-or);
}
.portrait__nom {
  margin: 12px 0 24px;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--c-ink);
}
.portrait p { font-size: 1.125rem; line-height: 1.55; }
.equipe__chute {
  margin: clamp(44px, 5vw, 68px) auto 0;
  max-width: 54ch;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.5;
}

@media (max-width: 900px) { .equipe { grid-template-columns: 1fr; } }

/* --- 11. Savoir-faire — la scène se fige, un cran par compétence -------- */
/* Repris du modèle (« Our Values ») : sur grand écran, la scène reste à
   l'écran pendant que la page défile, et chaque cran fait passer à la
   compétence suivante. Les crans sont des points d'aimantage (scroll-snap
   « proximity ») : la page marque un temps d'arrêt sur chacun au lieu de
   filer — c'est la petite résistance voulue, vers le bas comme vers le haut.
   Le mode épinglé n'existe que si site.js a posé .est-epingle : sans script,
   et sur téléphone, les six compétences s'affichent l'une sous l'autre. */

/* 06-10-2026 : la scène se joue sur la nuit — elle prolonge le manifeste. */
.savoir { --pas: 60svh; --anneau: var(--c-or-clair); position: relative; background: var(--c-profond); }
.savoir h2 { color: var(--c-on-accent); }
.savoir h2 .ital { color: var(--c-or-clair); }
.savoir__scene { padding-block: clamp(96px, 12vw, 176px); }
.savoir__grille { position: relative; }
.savoir__liste { list-style: none; margin: 0; padding: 0; }
.savoir__item + .savoir__item { margin-top: 44px; }
.savoir__nom {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-on-accent);
  transition: color var(--dur-sm) var(--ease);
}
.savoir__texte {
  margin-top: 14px;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--c-lune);
}
.savoir__texte p { max-width: 30ch; }
.savoir__compte { margin-bottom: 18px; color: var(--c-or-clair); }
.savoir__trait, .savoir__crans { display: none; }

/* Mode épinglé — posé par site.js au-delà de 900 px de large. */
.savoir.est-epingle { height: calc(100svh + 5 * var(--pas)); }
.est-epingle .savoir__scene {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  padding-block: 96px 48px;
}
.est-epingle .savoir__scene > .contenu { width: 100%; }
.est-epingle .titre-centre { margin-bottom: clamp(40px, 8vh, 96px); }
.est-epingle .savoir__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 8vw, 140px);
  align-items: start;
}
.est-epingle .savoir__item { display: contents; }
.est-epingle .savoir__nom {
  grid-column: 1;
  padding: 2px 0;
  color: var(--c-aube-4);             /* ≥ 24 px : seuil 3:1, tenu à 5,16:1 sur la nuit */
  cursor: pointer;
}
.est-epingle .savoir__nom:hover { color: var(--c-lune); }
.est-epingle .est-actif .savoir__nom { color: var(--c-on-accent); }
/* Les six textes occupent la même case : seul l'actif est visible. */
.est-epingle .savoir__texte {
  grid-column: 2;
  grid-row: 1 / span 6;
  margin: 0;
  padding-top: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}
.est-epingle .est-actif .savoir__texte { opacity: 1; transform: none; }

/* Le trait manuscrit qui relie la liste au texte. */
.est-epingle .savoir__trait {
  display: block;
  position: absolute;
  left: 35%; top: 4%;
  width: 17%;
  pointer-events: none;
  color: var(--c-or-clair);      /* le trait manuscrit, à l'encre dorée */
  opacity: .9;
}

/* Les crans : un repère invisible par compétence, espacé d'un pas. Le
   dégagement de la barre est ajouté parce que l'aimantage, lui aussi,
   respecte le scroll-padding de la page. */
.est-epingle .savoir__crans { display: block; position: absolute; inset: 0; pointer-events: none; }
.savoir__crans i {
  position: absolute; left: 0;
  width: 1px; height: 1px;
  top: calc(var(--k) * var(--pas) + var(--degagement-barre));
  scroll-snap-align: start;
}
.savoir__crans i:nth-child(1) { --k: 0; }
.savoir__crans i:nth-child(2) { --k: 1; }
.savoir__crans i:nth-child(3) { --k: 2; }
.savoir__crans i:nth-child(4) { --k: 3; }
.savoir__crans i:nth-child(5) { --k: 4; }
.savoir__crans i:nth-child(6) { --k: 5; }
html:has(.savoir.est-epingle) { scroll-snap-type: y proximity; }

/* --- 12. Le forfait ----------------------------------------------------- */

.forfait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.forfait__prix {
  margin: 20px 0 0;
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 11vw, 9.5rem);
  line-height: .9;
  letter-spacing: -0.045em;
  color: var(--c-profond);
}
.forfait__prix::after {
  content: "";
  display: block;
  width: 72px; height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, var(--c-or), transparent);
}
.forfait__sous { margin-top: 22px; font-size: 1.375rem; line-height: 1.4; max-width: 26ch; }
.forfait .pilule { margin-top: 40px; }
.forfait__mention { margin-top: 16px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-mute); }
.conditions__grille a { color: var(--c-accent-ink); }

.inclus { list-style: none; margin: 0; padding: 0; }
.inclus li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 1.1875rem; line-height: 1.45;
}
.inclus li:first-child { border-top: 1px solid var(--c-line); }
.inclus li::before {
  content: ""; width: 9px; height: 9px; margin-top: .55em;
  border-radius: 50%; background: var(--c-or);
}
.inclus b { font-weight: 500; color: var(--c-ink); }

.conditions {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.conditions__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; margin-top: 26px; }
@media (max-width: 1000px) { .conditions__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .conditions__grille { grid-template-columns: 1fr; } }
.conditions__grille p { font-size: 1.0625rem; line-height: 1.5; margin: 0; }
.conditions__grille b { display: block; font-weight: 500; color: var(--c-ink); margin-bottom: 6px; font-size: 1.1875rem; }

@media (max-width: 900px) { .forfait { grid-template-columns: 1fr; } }

/* --- 13. Méthode — titre fixe à gauche, étapes qui défilent à droite ---- */
/* Composition éditoriale : le titre reste en place pendant que les quatre
   étapes passent, chacune ouverte par un grand chiffre italique et par un
   filet qui se trace à son arrivée. Rien d'autre : la typographie suffit. */

.methode {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.methode__tete { position: sticky; top: calc(var(--degagement-barre) + 30px); }
.methode__tete h2 { margin-top: 18px; }
.methode__tete p { margin-top: 28px; max-width: 30ch; font-size: 1.3125rem; line-height: 1.45; }
.methode__tete .pilule { margin-top: 36px; }

.etapes {
  list-style: none; margin: 0; padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-or) 45%, transparent);
}
.etape {
  position: relative;
  display: grid;
  grid-template-columns: clamp(76px, 9vw, 140px) minmax(0, 1fr);
  column-gap: clamp(16px, 2.5vw, 32px);
  padding-block: clamp(36px, 4.5vw, 64px);
}
.etape::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-or), color-mix(in srgb, var(--c-or) 30%, transparent));
  transform-origin: left;
}
.etape__num {
  grid-row: 1 / span 3;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.25rem, 5.6vw, 5.25rem);
  line-height: .8;
  letter-spacing: -0.05em;
  color: var(--c-or-fonce);
}
.etape__meta { grid-column: 2; color: var(--c-ink-mute); }
.etape h3 {
  grid-column: 2;
  margin: 14px 0 16px;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.02;
  color: var(--c-ink);
}
.etape p { grid-column: 2; max-width: 42ch; font-size: 1.25rem; line-height: 1.5; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .etape::before {
      animation: trace linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
    .etape__num {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    @keyframes trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}

@media (max-width: 900px) {
  .methode { grid-template-columns: 1fr; }
  .methode__tete { position: static; }
  .etape { grid-template-columns: 60px minmax(0, 1fr); }
}

/* --- 14. Citation ------------------------------------------------------- */

.citation { text-align: center; }
/* Juste avant un fondu : la respiration du bas est déjà faite par le fondu
   lui-même, qui commence en écru. */
.section:has(+ .fondu) { padding-bottom: clamp(40px, 5vw, 72px); }
.citation blockquote { margin: 0; }
.citation .filet-or, .manifeste .filet-or { margin-bottom: 48px; }
.citation p {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--c-ink);
}
.citation figcaption { margin-top: 44px; }

/* --- 15. Contact — de l'écru à la nuit ----------------------------------- */
/* 30-09-2026. Le bas du site répond au haut : le héros part de la nuit et
   s'éclaircit vers l'écru, la fin de page fait le chemin inverse et se
   referme en bleu nuit, pied de page compris. Plus de carte ni de bande
   bleue posée sur la page : aucun bord net, aucun retour à l'écru.
   Le fondu est un BLOC À PART, sans texte, de hauteur fixe (.fondu) : la
   hauteur du texte varie d'un écran à l'autre, celle du fondu jamais. Le
   texte vit en dessous, sur le bleu nuit uni — ce que mesure le test de
   contraste, et ce qu'il y a réellement derrière chaque lettre. */

.fondu {
  height: clamp(240px, 30vw, 440px);
  pointer-events: none;
  background: var(--c-profond);
  background: linear-gradient(180deg,
    var(--depuis, var(--c-bg)) 0%,
    var(--c-nacre-clair) 8%,
    var(--c-nacre)       16%,
    var(--c-aube-5)      30%,
    var(--c-aube-4)      44%,
    var(--c-aube-3)      57%,
    var(--c-aube-2)      70%,
    var(--c-accent-dk)   82%,
    var(--c-aube-1)      91%,
    var(--c-profond)     100%);
}

/* Après une section beige, le fondu part du beige (06-10-2026). */
.section--beige + .fondu { --depuis: var(--c-bg-alt); }
/* Le chemin inverse : on sort d'un interlude de nuit vers l'écru. */
.fondu--sortie {
  background: linear-gradient(180deg,
    var(--c-profond)     0%,
    var(--c-aube-1)      9%,
    var(--c-accent-dk)   18%,
    var(--c-aube-2)      30%,
    var(--c-aube-3)      43%,
    var(--c-aube-4)      56%,
    var(--c-aube-5)      70%,
    var(--c-nacre)       84%,
    var(--c-nacre-clair) 92%,
    var(--c-bg)          100%);
}

.contact {
  padding: clamp(24px, 3vw, 40px) 0 clamp(64px, 7vw, 104px);
  text-align: center;
  background: var(--c-profond);
  --anneau: var(--c-or-clair);
}
.contact .filet-or { margin-bottom: 40px; }
.contact h2 { color: var(--c-on-accent); font-size: clamp(2.75rem, 6.5vw, 5.5rem); }
.contact p { margin: 26px auto 0; max-width: 40ch; font-size: 1.375rem; line-height: 1.4; color: var(--c-on-accent); }
.contact__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }

/* Emplacement laissé VISIBLEMENT vide : un trou visible force la décision,
   une valeur inventée part en production. */
.a-completer {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 26px;
  border: 1px dashed var(--c-accent-200);
  border-radius: var(--radius);
  font-family: var(--f-mono); font-size: var(--fs-sm);
  color: var(--c-on-accent);
}

/* --- 16. Pied de page — la nuit --------------------------------------- */
/* Il prolonge le contact : du bleu nuit à la nuit haute, le nom en or clair.
   Sur les pages sans section de contact, un .fondu le précède, pour que la
   page s'y fonde au lieu de s'y cogner. */

.pied {
  padding-block: 72px 48px;
  background: var(--c-profond);
  background: linear-gradient(180deg, var(--c-profond) 0%, var(--c-nuit-haut) 100%);
  --anneau: var(--c-or-clair);
}
.pied > .contenu::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 56px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-or-clair) 55%, transparent), transparent);
}
.pied .barre__marque { color: var(--c-on-accent); }
.pied .barre__marque .ital { color: var(--c-or-clair); }
.pied .barre__marque:hover { color: var(--c-on-accent); }
.pied__grille { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pied__liens a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--f-display); font-size: 1rem;
  color: var(--c-accent-200); text-decoration: none;
}
.pied__liens a:hover { background: rgba(255, 255, 255, .07); color: var(--c-on-accent); }
.pied__mention { margin-top: 40px; font-size: .9375rem; line-height: 1.5; color: var(--c-accent-200); max-width: 60ch; }

/* --- 17. Pages de texte (mentions, confidentialité, 404) ---------------- */

.page-texte { padding: 170px 0 72px; }
.prose { max-width: 68ch; }
.prose h1 { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.04em; margin: 18px 0 48px; color: var(--c-ink-soft); }
.prose h2 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); margin: 64px 0 18px; }
.prose p { font-size: 1.1875rem; line-height: 1.55; }
.prose b { font-weight: 500; color: var(--c-ink); }
.prose .etiq { margin-bottom: 0; }
.prose h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 36px 0 12px; color: var(--c-ink); }
.prose .liste-legale li:not(:has(b)) { display: list-item; list-style: none; }
/* Le formulaire type de rétractation : un bloc qu'on reconnaît et qu'on imprime. */
.formulaire-type {
  margin: 12px 0 24px;
  padding: 24px 28px;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: 8px;
  background: var(--c-surface);
}
.formulaire-type p { font-size: 1.0625rem; }

.liste-legale { list-style: none; margin: 0 0 24px; padding: 0; }
.liste-legale li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--c-line);
  font-size: 1.125rem;
}
/* Sur fond clair, le repère d'emplacement vide passe dans la couleur d'accent. */
.liste-legale .a-completer, .prose .a-completer {
  min-height: 36px; padding: 6px 16px;
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.perdu { min-height: 70vh; display: grid; align-content: center; }
/* Pages de texte : le pied bleu nuit arrive par un fondu plus court. */
.page-texte + .fondu { height: clamp(200px, 22vw, 320px); }

/* --- 17 bis. Questions fréquentes -------------------------------------- */
/* Des <details> natifs : ouverts au clic, au clavier et sans script,
   trouvés par la recherche du navigateur, lus dans l'ordre par un lecteur
   d'écran. Le signe + / − est un pictogramme d'interface : or foncé,
   3,68:1 au pire (critère 1.4.11, seuil 3:1). */

.faq__etiq { text-align: center; margin-bottom: 18px; }
.faq__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__theme { margin: 0 0 14px; }
.question { border-top: 1px solid var(--c-line); }
.question:last-child { border-bottom: 1px solid var(--c-line); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 44px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(1.3125rem, 1.7vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--c-accent-ink); }
.question__signe {
  position: relative;
  flex: 0 0 auto;
  width: 14px; height: 14px;
}
.question__signe::before, .question__signe::after {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 1.5px;
  margin-top: -.75px;
  background: var(--c-or-fonce);
  transition: transform var(--dur-sm) var(--ease);
}
.question__signe::after { transform: rotate(90deg); }
.question[open] .question__signe::after { transform: rotate(0deg); }
.question__reponse { padding: 0 44px 28px 0; }
.question__reponse p { font-size: 1.125rem; line-height: 1.55; max-width: 58ch; }

/* L'ouverture se déplie en douceur là où le navigateur sait animer une
   hauteur « auto » ; ailleurs, elle s'ouvre d'un coup, ce qui est très bien. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .question::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size var(--dur-md) var(--ease), content-visibility var(--dur-md) allow-discrete;
    }
    .question[open]::details-content { block-size: auto; }
  }
}
.faq__suite { margin-top: clamp(40px, 5vw, 64px); text-align: center; font-size: 1.1875rem; }

@media (max-width: 900px) { .faq__grille { grid-template-columns: 1fr; } }

/* --- 17 ter. Page « Pourquoi un site » ---------------------------------- */

/* Le chemin d'un client : quatre temps, reliés par un filet doré. */
.parcours {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  list-style: none; margin: 0; padding: 0;
}
.parcours::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--c-or), color-mix(in srgb, var(--c-or) 25%, transparent));
}
.parcours li { position: relative; }
.parcours__num {
  display: inline-block;
  padding-right: 14px;
  background: var(--c-bg);       /* le chiffre coupe le filet (section écru) */
  font-family: var(--f-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(3rem, 4.6vw, 4.25rem);
  line-height: .9;
  letter-spacing: -0.05em;
  color: var(--c-or-fonce);
}
.parcours h3 { margin: 26px 0 12px; font-size: clamp(1.5rem, 2.1vw, 1.875rem); color: var(--c-ink); }
.parcours p { font-size: 1.125rem; line-height: 1.5; }
@media (max-width: 900px) {
  .parcours { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .parcours::before { display: none; }
}
@media (max-width: 560px) { .parcours { grid-template-columns: 1fr; } }

/* Trois chiffres sourcés, pas un de plus. */
.chiffres__titre { margin: 18px 0 clamp(48px, 6vw, 80px); }
.chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin: 0;
}
.chiffres > div { border-top: 1px solid var(--c-or); padding-top: 28px; }
.nuit .chiffres > div { border-top-color: var(--c-or-clair); }
.nuit .chiffres dt { color: var(--c-on-accent); }
.chiffres dt {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: .95;
  letter-spacing: -0.045em;
  color: var(--c-ink);
}
.chiffres dd { margin: 18px 0 0; font-size: 1.1875rem; line-height: 1.45; max-width: 30ch; }
.chiffres__source { margin-top: 40px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-soft); max-width: 90ch; }
.nuit .chiffres__source { color: var(--c-lune); }
@media (max-width: 800px) { .chiffres { grid-template-columns: 1fr; } }

/* Six raisons, en grandes cartes. */
.raisons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.raison {
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.raison__num { display: block; color: var(--c-ink-mute); }
.raison__num::after {
  content: "";
  display: block;
  width: 28px; height: 1px;
  margin: 18px 0 22px;
  background: var(--c-or);
}
.raison h3 { margin: 0 0 16px; font-size: clamp(1.5rem, 2vw, 1.875rem); color: var(--c-ink); }
.raison p { font-size: 1.125rem; line-height: 1.5; }
@media (max-width: 1000px) { .raisons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .raisons { grid-template-columns: 1fr; } }

/* Ce qu'on entend souvent : l'objection en italique, la réponse en dessous. */
.objections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(40px, 6vw, 96px);
}
.objection { border-top: 1px solid var(--c-line); padding-top: 28px; }
.objection h3 {
  margin: 0 0 16px;
  font-style: italic; font-weight: 300;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  color: var(--c-ink);
}
.objection p { font-size: 1.125rem; line-height: 1.55; max-width: 52ch; }
@media (max-width: 800px) { .objections { grid-template-columns: 1fr; } }

/* Ce qu'un bon site doit faire : la liste « inclus » du forfait, réutilisée. */
.bon-site { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.bon-site h2 { margin-top: 18px; }
.bon-site__tete p { margin-top: 26px; font-size: 1.3125rem; line-height: 1.45; max-width: 30ch; }
.bon-site__tete .pilule { margin-top: 36px; }
@media (max-width: 900px) { .bon-site { grid-template-columns: 1fr; } }

.chapeau-section { max-width: 46ch; margin: -40px auto clamp(48px, 6vw, 80px); text-align: center; font-size: 1.3125rem; line-height: 1.45; }

/* --- 18. Apparition au défilement --------------------------------------- */
/* Timeline native, sans bibliothèque. Sans prise en charge, le contenu
   s'affiche normalement : rien n'est jamais masqué par défaut. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    @keyframes apparition {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* --- 19. Accessibilité — obligatoire ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.prose .chapeau { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.4; }
.prose .discret { font-size: 1.0625rem; color: var(--c-ink-soft); }
.perdu__code { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-accent-ink); }
.perdu .duo-boutons { justify-content: flex-start; margin-top: 44px; flex-wrap: wrap; }