/*
 * Ma Marelle — site public.
 *
 * Aucun framework, aucune police externe, aucun script tiers (§4, §10).
 * Les polices sont auto-hébergées dans ./polices ; la CSP de production
 * (infra/serveur/nginx-mamarelle.conf) est « self » partout, donc rien n'est
 * en ligne : ni <style>, ni attribut style. Ce qui bouge au défilement est
 * piloté par le CSSOM depuis mouvement.js, ce que la CSP autorise.
 *
 * Contraintes du §11 tenues ici : 17 px pour tout texte porteur de sens,
 * aucun gris clair sur blanc, cibles de 48 px, information jamais portée par
 * la seule couleur, thème sombre chaud.
 */

/* ----------------------------------------------------------------- polices */

@font-face {
  font-family: 'Public Sans';
  src: url('./polices/public-sans-variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('./polices/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- jetons */

:root {
  color-scheme: light;

  --papier: #fdfaf4;
  --surface: #ffffff;
  --surface-douce: #f4eee3;
  --encre: #0e7a84;
  --encre-fonce: #0b646d;
  --encre-douce: #dcf0f0;
  --sur-encre: #fdfaf4;
  --texte: #24211c;
  --texte-second: #5b554c;
  --filet: #e6dccb;
  --filet-net: #d2c7b4;
  --fait: #2e7d4f;
  --fait-doux: #ddefe3;
  --a-faire: #a45f10;
  --urgent: #c0483c;

  --e1: #3e6fd9;
  --e2: #c65f14;
  --e3: #24805a;
  --e4: #8b5bd6;
  --e5: #a97c0b;
  --e6: #c33f86;

  --ombre: 0 1px 2px rgb(21 24 29 / 6%), 0 18px 40px -26px rgb(21 24 29 / 45%);
  --ombre-haute: 0 2px 6px rgb(21 24 29 / 8%), 0 34px 70px -34px rgb(21 24 29 / 52%);
  --rayon: 14px;

  /* Une seule grammaire de mouvement : une sortie exponentielle, partout. */
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --doux: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    color-scheme: dark;
    --papier: #1b1915;
    --surface: #232019;
    --surface-douce: #2c281f;
    --encre: #4fc7d0;
    --encre-fonce: #3fb6bf;
    --encre-douce: #14312f;
    --sur-encre: #10201f;
    --texte: #f0eae0;
    --texte-second: #b3aa9c;
    --filet: #383226;
    --filet-net: #4d4535;
    --fait: #6fcf9b;
    --fait-doux: #16301f;
    --a-faire: #e8b76a;
    --urgent: #e0776a;
    --e1: #6e96ea;
    --e2: #ee9455;
    --e3: #55c48d;
    --e4: #b48ce8;
    --e5: #e5bc55;
    --e6: #e77cb0;
    --ombre: 0 1px 2px rgb(0 0 0 / 50%), 0 18px 40px -26px rgb(0 0 0 / 90%);
    --ombre-haute: 0 2px 6px rgb(0 0 0 / 55%), 0 34px 70px -34px rgb(0 0 0 / 95%);
  }
}

:root[data-theme='sombre'] {
  color-scheme: dark;
  --papier: #1b1915;
  --surface: #232019;
  --surface-douce: #2c281f;
  --encre: #4fc7d0;
  --encre-fonce: #3fb6bf;
  --encre-douce: #14312f;
  --sur-encre: #10201f;
  --texte: #f0eae0;
  --texte-second: #b3aa9c;
  --filet: #383226;
  --filet-net: #4d4535;
  --fait: #6fcf9b;
  --fait-doux: #16301f;
  --a-faire: #e8b76a;
  --urgent: #e0776a;
  --e1: #6e96ea;
  --e2: #ee9455;
  --e3: #55c48d;
  --e4: #b48ce8;
  --e5: #e5bc55;
  --e6: #e77cb0;
  --ombre: 0 1px 2px rgb(0 0 0 / 50%), 0 18px 40px -26px rgb(0 0 0 / 90%);
  --ombre-haute: 0 2px 6px rgb(0 0 0 / 55%), 0 34px 70px -34px rgb(0 0 0 / 95%);
}

/* ------------------------------------------------------------------- base */

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--filet-net) transparent;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Les surfaces que l'on ne dessine pas portent quand même la palette. */
::selection { background: var(--encre); color: var(--sur-encre); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--filet-net);
  border: 3px solid var(--papier);
  border-radius: 99px;
}
:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
  border-radius: 4px;
}

p, h1, h2, h3, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; }
img, canvas, svg { max-width: 100%; }

a { color: var(--encre); text-underline-offset: 3px; text-decoration-thickness: 1px; }

.evitement {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--encre);
  color: var(--sur-encre);
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s var(--sortie);
}
.evitement:focus { transform: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.col { max-width: 68ch; }
.pile { display: flex; flex-direction: column; gap: 16px; }

h2 {
  font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; }
.sub { color: var(--texte-second); font-size: 1.06rem; text-wrap: pretty; }
.sub strong { color: var(--texte); font-weight: 600; }
.note { font-size: 0.98rem; color: var(--texte-second); }
.mention {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-second);
}

.section { padding: clamp(72px, 9vw, 128px) 0; border-top: 1px solid var(--filet); }

/* ----------------------------------------------------- défilement inertiel */

/* Sans JavaScript, la page défile normalement : rien de ce qui suit ne s'active. */
html.js-defilement { scroll-behavior: auto; }
html.js-defilement #defilement {
  position: fixed;
  inset: 0 0 auto 0;
  will-change: transform;
}

/* --------------------------------------------------------------- révélation */

/* Le point masqué est posé par le script, jamais par la feuille seule : sans
   JavaScript — ou si le script échoue — tout le contenu reste visible. C'est
   une question d'accessibilité, et d'indexation : la moitié des robots qui
   lisent une page n'exécutent aucun JavaScript. */
html.js [data-reveler] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  clip-path: inset(0 0 18% 0);
  transition:
    opacity 0.75s var(--sortie),
    transform 0.9s var(--sortie),
    clip-path 0.9s var(--sortie);
  transition-delay: var(--retard, 0ms);
}
html.js [data-reveler].vu { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

.reveler-mots .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.reveler-mots .mot > span {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform 0.95s var(--sortie);
  transition-delay: calc(var(--i, 0) * 34ms);
}
.reveler-mots.vu .mot > span { transform: none; }

/* ------------------------------------------------------------------- barre */

.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--doux), background 0.4s var(--doux);
}
.barre.posee {
  border-bottom-color: var(--filet);
  background: color-mix(in srgb, var(--papier) 92%, transparent);
}
.barre__jauge {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--encre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.barre__in { display: flex; align-items: center; gap: 20px; height: 66px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.7rem;
  line-height: 1;
}
.logo__marque { flex: 0 0 auto; }
.logo__marque rect { transition: transform 0.5s var(--sortie); transform-origin: center; }
.logo:hover .logo__marque rect:nth-child(2) { transform: translateY(-1.5px); }
.logo:hover .logo__marque rect:nth-child(3) { transform: translateY(1.5px); }
.logo:hover .logo__marque rect:nth-child(4) { transform: translateY(-1.5px); }

.liens { display: none; gap: 18px; margin-left: auto; font-size: 0.95rem; font-weight: 600; }
.liens a {
  color: var(--texte-second);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.3s var(--doux), border-color 0.3s var(--doux);
}
.liens a:hover { color: var(--texte); }
.liens a.ici { color: var(--encre); border-bottom-color: var(--encre); }
/* L'entrée vers l'espace des référents s'adresse à un autre public que le reste
   du menu : elle est mise à part, à l'encre, plutôt que noyée dans les ancres. */
.liens__ref { position: relative; margin-left: 18px; color: var(--encre); }
/* Le filet est posé hors de la boîte du lien : sinon le soulignement de la page
   courante partirait du filet au lieu du premier mot. */
.liens__ref::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--filet-net);
}
@media (min-width: 900px) { .liens { display: flex; } }
/* La barre est large de 1080 px au plus : sous cette largeur, elle ne tient pas
   toutes les ancres en plus du lien référent. On retire l'ancre d'appoint —
   le pied de page les garde toutes — plutôt que de laisser les libellés se
   couper en deux lignes. */
@media (max-width: 1079px) { .liens a[data-appoint] { display: none; } }

.appel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  background: var(--encre);
  color: var(--sur-encre);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  padding: 0 18px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.3s var(--doux), transform 0.3s var(--sortie);
}
.appel:hover { background: var(--encre-fonce); transform: translateY(-1px); }
@media (min-width: 900px) { .appel { margin-left: 0; } }

/* -------------------------------------------------------------------- héro */

.hero { position: relative; padding: clamp(112px, 15vh, 168px) 0 clamp(64px, 8vw, 96px); }
.hero__fond {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: clip;
}
.marelle {
  /* Contrainte par la hauteur : la marelle tient dans la marge droite du
     héros sans jamais passer sous le texte. */
  height: clamp(280px, 46vh, 440px);
  width: auto;
  opacity: 0.62;
  transform: translate3d(0, 0, 0) rotate(-7deg);
  will-change: transform;
}
@media (max-width: 900px) {
  .marelle { height: clamp(320px, 60vh, 520px); opacity: 0.14; }
  .hero__fond { justify-content: center; }
}

.case {
  fill: var(--encre);
  fill-opacity: calc(var(--t, 0) * 0.09);
  stroke: var(--encre);
  stroke-width: 2;
  stroke-dasharray: 272;
  stroke-dashoffset: calc(272 - var(--t, 0) * 272);
  stroke-opacity: 0.55;
}
/* Sans JavaScript, la marelle ne se dessine pas : on la donne déjà tracée. */
html:not(.js) .case { --t: 1; }
html:not(.js) .palet { --po: 1; }

.palet {
  fill: var(--e2);
  opacity: var(--po, 0);
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  will-change: transform;
}

.hero__texte { position: relative; max-width: 21ch; }
.hero h1 {
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.038em;
}
.hero h1 em { font-style: normal; color: var(--encre); }
.hero .lede {
  max-width: 58ch;
  margin-top: 24px;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.5;
  color: var(--texte-second);
  text-wrap: pretty;
}
.hero .lede strong { color: var(--texte); font-weight: 600; }
.hero__texte { max-width: none; }
.hero h1 { max-width: 19ch; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero .note { margin-top: 14px; max-width: 52ch; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--encre);
  color: var(--sur-encre);
  border: 2px solid var(--encre);
  border-radius: 10px;
  padding: 0 24px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s var(--doux),
    transform 0.35s var(--sortie),
    box-shadow 0.35s var(--sortie);
}
.bouton:hover {
  background: var(--encre-fonce);
  border-color: var(--encre-fonce);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--encre) 80%, transparent);
}
.bouton--creux { background: transparent; color: var(--encre); }
.bouton--creux:hover { background: var(--encre-douce); border-color: var(--encre); color: var(--encre); }
.bouton--large { width: 100%; margin-top: auto; }

.gages { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.gages li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.94rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 99px;
  padding: 8px 16px 8px 12px;
}
.gages li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--encre);
  flex: 0 0 auto;
}

.rail6 { display: flex; gap: 5px; margin-top: 38px; }
.rail6 i {
  height: 6px;
  flex: 1;
  border-radius: 3px;
  transform: scaleX(var(--t, 1));
  transform-origin: 0 50%;
  transition: transform 0.9s var(--sortie);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.rail6 .c1 { background: var(--e1); }
.rail6 .c2 { background: var(--e2); }
.rail6 .c3 { background: var(--e3); }
.rail6 .c4 { background: var(--e4); }
.rail6 .c5 { background: var(--e5); }
.rail6 .c6 { background: var(--e6); }

/* ---------------------------------------------------------------- chiffres */

.trois {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 46px;
}
.chiffre { display: flex; flex-direction: column; gap: 8px; }
.chiffre b {
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.3rem);
  line-height: 1;
  color: var(--encre);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.chiffre p { font-size: 1rem; color: var(--texte-second); }
.chiffre p strong { color: var(--texte); font-weight: 600; }

/* Une phrase qui conclut une rangée de chiffres ou de fonctions : elle a besoin
   d'autant d'air que la rangée en a pris au-dessus, sinon elle se lit comme la
   légende de la dernière colonne. */
.trois + .sub,
.fonctions + .sub { margin-top: 46px; max-width: 68ch; }

/* --------------------------------------------------------------- fonctions */

.fonctions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 42px;
}
.fonction {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: transform 0.5s var(--sortie), box-shadow 0.5s var(--sortie);
}
/* Un seul geste au survol : la carte se soulève et un liseré s'allume. */
.fonction::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--encre);
  opacity: 0;
  transition: opacity 0.45s var(--doux);
  pointer-events: none;
}
.fonction:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.fonction:hover::after { opacity: 0.6; }
.etiq {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--encre-douce);
  color: var(--encre-fonce);
}
.fonction p { font-size: 1rem; color: var(--texte-second); }
.fonction p strong { color: var(--texte); font-weight: 600; }

/* ------------------------------------------------------------------ étapes */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 42px;
  counter-reset: pas;
}
.etape { display: flex; flex-direction: column; gap: 9px; counter-increment: pas; }
.etape::before {
  content: counter(pas);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--encre);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.etape p { font-size: 1rem; color: var(--texte-second); }

/* --------------------------------------------------------- section épinglée */

/* Sans JavaScript, une section épinglée est une section normale. */
.epingle { border-top: 1px solid var(--filet); }
.epingle__scene { padding: clamp(72px, 9vw, 120px) 0; }
html.js-defilement .epingle__scene {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform;
}

/* ------------------------------------------------- une couleur par enfant */

.couleurs { display: grid; gap: 46px; align-items: center; }
@media (min-width: 940px) { .couleurs { grid-template-columns: 1.05fr 0.95fr; gap: 60px; } }
.couleurs__texte { display: flex; flex-direction: column; gap: 16px; max-width: 60ch; }

.journee {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: var(--ombre);
}
.journee__jour {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-second);
  margin-bottom: 14px;
}
.journee__liste { display: flex; flex-direction: column; gap: 8px; }
.jl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--surface-douce);
  opacity: var(--o, 1);
  transform: translate3d(calc(var(--x, 0) * 1px), 0, 0);
  transition: background 0.5s var(--doux), opacity 0.5s var(--doux), transform 0.6s var(--sortie);
}
/* La couleur arrive par le rail ET par le prénom en gras : l'information ne
   dépend jamais de la teinte seule (§11). */
.jl i {
  width: 5px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 99px;
  background: var(--teinte);
  flex: 0 0 5px;
}
.jl.allume { background: color-mix(in srgb, var(--teinte) 11%, var(--surface-douce)); }
.jl__h {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--texte-second);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.jl__t { display: flex; flex-direction: column; font-size: 0.98rem; line-height: 1.35; }
.jl__t b { font-weight: 700; color: var(--teinte-texte); font-size: 0.92rem; }
.journee__pied { margin-top: 16px; font-size: 0.94rem; color: var(--texte-second); }

.t1 { --teinte: var(--e1); --teinte-texte: var(--e1); }
.t2 { --teinte: var(--e2); --teinte-texte: var(--e2); }
.t3 { --teinte: var(--e3); --teinte-texte: var(--e3); }
.t4 { --teinte: var(--e4); --teinte-texte: var(--e4); }
.t5 { --teinte: var(--e5); --teinte-texte: var(--e5); }
.t6 { --teinte: var(--e6); --teinte-texte: var(--e6); }

/* ----------------------------------------------------------------- galerie */

.galerie__tete { display: flex; flex-direction: column; gap: 14px; max-width: 68ch; }
.galerie__tete .mention { margin-top: 4px; }

/* ------------------------------------------------------------------ scène */

/* Le titre parle à gauche, l'écran du moment se tient à droite. Rien n'est
   dessiné en double : ce sont les écrans eux-mêmes, en plus grand. */
.scene-ecrans { display: flex; flex-direction: column; gap: 30px; }
/* En repli, la bande retrouve les bords de l'écran : elle défile d'un bord à
   l'autre plutôt que dans la gouttière du texte. */
.scene-ecrans .galerie { margin-inline: -24px; }
.scene__dire { display: flex; flex-direction: column; gap: 14px; }
.scene__nom, .scene__dit, .scene__puces { display: none; }

/* La scène ne se tient que si la fenêtre peut porter un écran à taille
   lisible ; sinon les quatre reprennent leur place en bande. */
@media (min-width: 820px) and (min-height: 780px) {
  html.js-defilement .epingle--galerie .epingle__scene {
    /* La barre fixe couvre le haut de la fenêtre ; et la scène ne dépasse
       jamais la fenêtre, sinon elle rogne son propre contenu. */
    padding-block: max(clamp(40px, 5vw, 88px), 86px) clamp(40px, 5vw, 88px);
    max-height: 100svh;
  }
  html.js-defilement .scene-ecrans {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 5vw, 72px);
  }
  html.js-defilement .scene__dire { flex: 1 1 auto; max-width: 52ch; }
  html.js-defilement .scene__nom,
  html.js-defilement .scene__dit { display: block; }
  html.js-defilement .scene__puces { display: flex; gap: 10px; margin-top: 4px; }

  html.js-defilement .scene__nom {
    margin-top: 10px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
    line-height: 1.05;
    color: var(--encre);
  }
  html.js-defilement .scene__dit { font-size: 1.06rem; color: var(--texte-second); max-width: 40ch; }
  /* Une puce par écran : où l'on en est, sans dépendre de la seule couleur. */
  html.js-defilement .scene__puces li {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-second);
    opacity: 0.5;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
    transition: opacity 0.4s var(--doux), color 0.4s var(--doux), border-color 0.4s var(--doux);
  }
  html.js-defilement .scene__puces li.ici { opacity: 1; color: var(--encre); border-bottom-color: var(--encre); }

  /* La scène empile les quatre écrans au même endroit ; un seul est visible.
     L'échelle vient du JavaScript : c'est lui qui sait la place restante. */
  html.js-defilement .epingle--galerie .galerie {
    position: relative;
    margin-inline: 0;
    flex: 0 0 auto;
    width: calc(300px * var(--ech, 1));
    height: calc(672px * var(--ech, 1));
    overflow: visible;
    scroll-snap-type: none;
  }
  html.js-defilement .epingle--galerie .galerie__piste { display: contents; }
  html.js-defilement .epingle--galerie .ecran {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    transform-origin: top left;
    transform: translateY(18px) scale(var(--ech, 1));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--doux), transform 0.6s var(--sortie), visibility 0.5s;
  }
  html.js-defilement .epingle--galerie .ecran.ici {
    transform: translateY(0) scale(var(--ech, 1));
    opacity: 1;
    visibility: visible;
  }
  /* La légende est dite en grand dans la colonne de gauche. */
  html.js-defilement .epingle--galerie .ecran figcaption { display: none; }
}

/* Repli — fenêtre étroite, doigt, mouvement réduit, pas de script : les quatre
   écrans reprennent leur place en bande, défilable à la main. */
.galerie {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--texte-second) 40%, transparent) transparent;
}
.galerie:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; border-radius: 8px; }
.galerie__piste {
  display: flex;
  gap: 26px;
  padding: 8px 24px 26px;
  /* Centrée quand les quatre écrans tiennent, défilable quand ils débordent. */
  width: max-content;
  max-width: none;
  margin-inline: auto;
}
.ecran { flex: 0 0 auto; width: 300px; display: flex; flex-direction: column; gap: 12px; scroll-snap-align: center; }
.ecran figcaption { font-size: 0.94rem; color: var(--texte-second); padding: 0 4px; }
.ecran figcaption b { display: block; color: var(--texte); font-weight: 700; font-size: 1rem; }

/* ------------------------------------------------------- écrans d'exemple */

/* Ces blocs sont des illustrations à l'échelle d'une capture d'écran ; le
   texte de la page, lui, ne descend jamais sous 17 px (§11). */
.tel {
  /* Hauteur commune aux quatre écrans, calée sur le plus chargé (Aujourd'hui,
     qui porte les jetons, les deux listes et la marelle des gestes) : en dessous,
     la dernière tuile ou l'action principale sortait de la carte. */
  height: 700px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 28px;
  box-shadow: var(--ombre);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.4;
  transition: transform 0.6s var(--sortie), box-shadow 0.6s var(--sortie);
}
.ecran:hover .tel { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.tel__hd {
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--filet);
  background: linear-gradient(180deg, color-mix(in srgb, var(--encre) 9%, var(--surface)), var(--surface));
}
.tel__t {
  display: block;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.025em;
  color: var(--encre);
  line-height: 1.15;
}
.tel__s { font-size: 12.5px; color: var(--texte-second); }
.tel__bd { flex: 1; min-height: 0; padding: 13px 14px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
/* Si un écran d'exemple déborde un jour, c'est la liste qui se coupe,
   jamais le bouton d'action : il reste posé au bas de la carte. */
.grp { display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow: hidden; }
.grp--serre { gap: 5px; }
.grp--kx { gap: 3px; }
.grp__gl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
  opacity: 0.85;
}
.grp__note { font-size: 12.5px; color: var(--texte-second); }

.ln {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--teinte, var(--filet-net)) 12%, var(--surface));
}
.ln--off { opacity: 0.55; }
.ln__rail { width: 5px; align-self: stretch; border-radius: 99px; flex: 0 0 5px; background: var(--teinte, var(--filet-net)); }
.ln__h { font-size: 12.5px; font-weight: 700; color: var(--texte-second); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ln__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ln__m b { font-size: 13.5px; font-weight: 700; }
.ln__m em { font-style: normal; font-size: 12.5px; color: var(--texte-second); }

.pil {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.pil--a { background: var(--surface-douce); color: var(--a-faire); }
.pil--b { background: var(--fait-doux); color: var(--fait); }
.pil--c { background: var(--surface-douce); color: var(--texte-second); }

/* Le choix du dossier, en jetons : les prénoms sont tous lisibles à la fois, et
   chacun porte le filet de sa couleur — l'information survit à la perte de la
   couleur, parce que le prénom la double toujours (§11). */
.jetons { display: flex; gap: 6px; flex-wrap: wrap; }
.jeton {
  padding: 6px 11px 5px;
  border: 1px solid var(--filet);
  border-bottom: 3px solid var(--teinte, var(--filet-net));
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texte-second);
  background: var(--surface);
}
.jeton.on { background: color-mix(in srgb, var(--teinte) 12%, var(--surface)); color: var(--texte); }

/* Les gestes du jour, en marelle : la première et la quatrième case tiennent
   toute la largeur, les autres vont par deux. */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tuile {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 11px;
  border: 1px solid var(--filet);
  border-radius: 12px;
  background: var(--surface);
}
.tuile b { font-size: 13px; font-weight: 700; }
.tuile em { font-style: normal; font-size: 11.5px; color: var(--texte-second); }
.tuile--large { grid-column: 1 / -1; }
.tuile--pri { background: var(--encre); border-color: var(--encre); }
.tuile--pri b { color: var(--surface); font-size: 15px; }
.tuile--pri em { color: color-mix(in srgb, var(--surface) 78%, var(--encre)); }

.kx { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--filet); }
.kx--fin { border-bottom: 0; }
.kx b { font-weight: 700; font-variant-numeric: tabular-nums; }
.somme { font-size: 38px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.c1t { color: var(--e1); }
.depasse { font-size: 12px; color: var(--e2); font-weight: 700; }
.encart { background: var(--surface-douce); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.encart b { font-size: 12.5px; font-weight: 700; }
.encart span { font-size: 12px; color: var(--texte-second); }

.tel__act {
  background: var(--encre);
  color: var(--sur-encre);
  border-radius: 99px;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-top: auto;
  flex: 0 0 auto;
}
.tel__nv { display: flex; border-top: 1px solid var(--filet); }
.tel__nv span { flex: 1; text-align: center; padding: 10px 2px 13px; font-size: 10.5px; font-weight: 700; color: var(--texte-second); }
.tel__nv span::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 5px;
  border-radius: 7px;
  background: currentcolor;
  opacity: 0.4;
}
.tel__nv span.on { color: var(--encre); }
.tel__nv span.on::before { opacity: 1; }

/* --------------------------------------------------------- confidentialité */

.bloc-sur { border-top: 0; }
.bloc-sur > .col { position: relative; }
.grille-sur { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; margin-top: 42px; }
.carte-sur { background: var(--surface-douce); border-radius: var(--rayon); padding: 20px 22px; }
.carte-sur h3 {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 9px;
}
.carte-sur p { font-size: 1rem; color: var(--texte-second); }
.carte-sur p strong { color: var(--texte); font-weight: 600; }
.carte-sur--seule { margin-top: 26px; background: var(--encre-douce); padding: 26px 28px; }
.carte-sur--seule h3 { font-size: 1.12rem; letter-spacing: -0.012em; text-transform: none; }

/* ------------------------------------------------------------------ offres */

.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 42px; }
.offre {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.offre--mise { border-color: var(--encre); box-shadow: var(--ombre); }
.offre__nom { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--texte-second); }
.offre--mise .offre__nom { color: var(--encre); }
.offre__prix { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.038em; line-height: 1; font-variant-numeric: tabular-nums; }
.offre__prix small { font-size: 1.05rem; font-weight: 600; color: var(--texte-second); letter-spacing: 0; }
.offre__eco { align-self: flex-start; font-size: 0.94rem; font-weight: 700; color: var(--fait); background: var(--fait-doux); padding: 4px 10px; border-radius: 6px; }
.offre ul { display: flex; flex-direction: column; gap: 9px; font-size: 1rem; color: var(--texte-second); }
.offre li { padding-left: 22px; position: relative; }
.offre li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--encre);
}
.offre li strong { color: var(--texte); font-weight: 600; }

/* --------------------------------------------------------------- questions */

.questions { margin-top: 34px; max-width: 80ch; }
.questions details { border-bottom: 1px solid var(--filet); }
.questions summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  min-height: 48px;
  padding: 18px 0;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: '';
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 6px;
  border-right: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  transform: rotate(45deg);
  transition: transform 0.4s var(--sortie);
}
.questions details[open] summary::after { transform: rotate(-135deg); }
.reponse { overflow: hidden; }
.reponse p { padding-bottom: 20px; font-size: 1.02rem; color: var(--texte-second); max-width: 68ch; }
.reponse p strong { color: var(--texte); font-weight: 600; }

/* -------------------------------------------------------------------- fin */

.final {
  background: var(--encre);
  border-radius: 20px;
  padding: clamp(32px, 4.5vw, 56px);
  color: var(--sur-encre);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.final h2 { color: var(--sur-encre); }
/* Sur fond coloré, le texte secondaire est teinté depuis la couleur de fond,
   jamais gris (contraste et craft-floor). */
.final p { color: color-mix(in srgb, var(--sur-encre) 82%, var(--encre)); max-width: 58ch; font-size: 1.06rem; }
.final strong { color: var(--sur-encre); }
.final .bouton { background: var(--sur-encre); color: var(--encre); border-color: var(--sur-encre); }
.final .bouton:hover { background: #fff; border-color: #fff; color: var(--encre-fonce); }
.final .bouton--creux { background: transparent; color: var(--sur-encre); border-color: color-mix(in srgb, var(--sur-encre) 55%, var(--encre)); }
.final .bouton--creux:hover { background: color-mix(in srgb, var(--sur-encre) 14%, var(--encre)); color: var(--sur-encre); border-color: var(--sur-encre); }
.final .note { color: color-mix(in srgb, var(--sur-encre) 74%, var(--encre)); }

/* ------------------------------------------------------------------- pied */

.pied { border-top: 1px solid var(--filet); padding: 44px 0 64px; font-size: 0.95rem; color: var(--texte-second); }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
.pied h3 { font-size: 0.84rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--texte); margin-bottom: 10px; }
.pied ul { display: flex; flex-direction: column; gap: 8px; }
.pied__note { margin-top: 12px; max-width: 34ch; }
.pied__legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--filet); font-size: 0.88rem; line-height: 1.55; }

/* ------------------------------------------------- mouvement et impression */

/* La demande est ferme et vaut pour tout : plus rien ne bouge, tout reste lisible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveler] { opacity: 1; transform: none; clip-path: none; }
  .reveler-mots .mot > span { transform: none; }
  .case { fill-opacity: 0.09; stroke-dashoffset: 0; }
  .palet { opacity: 1; --px: 0; --py: 0; }
}

@media print {
  .barre, .hero__fond, .evitement { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .tel, .fonction, .offre, .carte-sur { break-inside: avoid; box-shadow: none; }
  .questions details { break-inside: avoid; }
  .reponse { display: block; height: auto; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
  a[href^='#']::after { content: ''; }
}