/* Preload : partie publique (accueil EN et FR, pages d'inscription, 404, version web d'un numéro).
   Servie dans public.min.css (bin/build-css.php : fonts.css + partie commune d'app.css + ce fichier) :
   après toute modification, relancer php bin/build-css.php. Pas de FrankenUI sur ces
   pages : le socle (box-sizing, formulaires, boutons) est posé ici.
   Échelle d'espacement : tokens --space-* d'app.css, multiples de 4 px. Aucun texte sous 14 px.
   Media queries en min-width uniquement. Thème sombre : html.dark, couleurs en HSL. */

/* ------------------------------------------------------------------ Tokens */
:root {
  --space-11: 96px;
  --wrap: 1180px;

  /* Rythme vertical : trois intervalles seulement, repris par toutes les bandes */
  --band-y: clamp(72px, 2.5rem + 5vw, 128px);   /* haut et bas d'une bande */
  --head-gap: var(--space-4);                    /* titre de section → chapeau */
  --block-gap: clamp(40px, 1.75rem + 2.5vw, 64px); /* tête de section → contenu */

  /* Charte AWP : #2E69E8 bleu, #224EAE bleu foncé, #092652 marine, #425770 ardoise, #EBF2FF fond */
  --s-page: 222 64% 98%;        /* fond général, à peine bleuté */
  --s-surface: 0 0% 100%;       /* cartes et bandes blanches */
  --s-tint: 219 100% 96%;       /* #EBF2FF, premier écran */
  --s-ink: 216 80% 18%;         /* #092652, titres */
  --s-text: 213 26% 35%;        /* #425770, texte courant (6,8:1 sur le fond) */
  --s-accent: 221 67% 41%;      /* #224EAE, texte d'accent et liens (7:1) */
  --s-fill: 221 80% 55%;        /* #2E69E8, aplats et boutons (blanc dessus : 4,9:1) */
  --s-fill-hover: 221 67% 41%;
  --s-on-fill: 0 0% 100%;
  --s-line: 219 40% 89%;        /* filets décoratifs */
  --s-field: 216 18% 52%;       /* bordure de champ, 3:1 au moins sur blanc */
  --s-track: 219 60% 92%;       /* rails de la cascade */
  --s-deep: 216 80% 18%;        /* bande de rappel (marine) */
  --s-deep-text: 219 52% 86%;
  --s-shadow: 0 1px 2px hsl(216 80% 18% / 0.05), 0 12px 32px hsl(216 80% 18% / 0.07);
  --s-danger: 0 70% 38%;
  --s-grid: 221 80% 55% / 0.075;  /* trame de la cascade réseau, en fond du premier écran */
  --s-glow: 221 90% 62%;
  --s-lift: 0 1px 2px hsl(216 80% 18% / 0.06), 0 28px 64px -24px hsl(216 80% 18% / 0.28);
  --duo-o: 0.22;
  --s-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
html.dark {
  --s-page: 216 60% 7%;
  --s-surface: 216 52% 11%;
  --s-tint: 218 55% 10%;
  --s-ink: 219 60% 95%;
  --s-text: 216 28% 74%;
  --s-accent: 221 90% 74%;
  --s-fill: 221 85% 62%;
  --s-fill-hover: 221 90% 70%;
  --s-on-fill: 216 80% 10%;
  --s-line: 216 36% 18%;
  --s-field: 216 22% 46%;
  --s-track: 216 40% 17%;
  --s-deep: 221 58% 17%;
  --s-deep-text: 219 40% 82%;
  --s-shadow: none;
  --s-danger: 0 80% 74%;
  --s-grid: 221 85% 70% / 0.06;
  --s-lift: 0 0 0 1px hsl(216 36% 18%), 0 28px 64px -24px hsl(0 0% 0% / 0.6);
  --duo-o: 0.3;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ Socle */
.site *, .site *::before, .site *::after { box-sizing: border-box; }
html:has(body.site) { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.site {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: hsl(var(--s-page)); color: hsl(var(--s-text));
  font-size: 1rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.site main { flex: 1 0 auto; }
.site main:focus { outline: none; }
:where(.site) :is(h1, h2, h3) { color: hsl(var(--s-ink)); text-wrap: balance; }
:where(.site) :is(p, li, dd) { text-wrap: pretty; }
:where(.site) :is(ul, ol) { padding: 0; margin: 0; }
:where(.site) :is(button, input) { font: inherit; color: inherit; }
:where(.site) a { color: hsl(var(--s-accent)); }
.site code {
  font-family: var(--s-mono); font-size: 0.9em; padding: 1px var(--space-1); border-radius: 4px;
  background: hsl(var(--s-track)); color: hsl(var(--s-ink));
}
.site .num { font-family: inherit; font-variant-numeric: tabular-nums; }
.site :focus-visible { outline: 2px solid hsl(var(--s-fill)); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Liens dans un texte : soulignés (la couleur seule ne les distingue pas assez de l'ardoise) */
:where(.site main, .site-foot) p a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:where(.site main, .site-foot) p a:not([class]):hover { text-decoration-thickness: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-6); } }

/* ------------------------------------------------------------------ Marque */
.site-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: hsl(var(--s-ink)); text-decoration: none;
}
.site-brand .brand-mark { width: 32px; height: 32px; flex: none; display: block; }
.site-brand-text { display: flex; flex-direction: column; }
/* Alignement optique : le haut des capitales de « Preload » et le pied de la mention
   tombent sur le haut et le bas du pictogramme (40 px). */
.site-brand-name {
  font-family: 'Poppins', 'Poppins-fallback', system-ui, sans-serif; font-weight: 700;
  font-size: 1.3125rem; line-height: 1; letter-spacing: -0.025em; margin-top: -1px;
}
.site-brand-by {
  font-size: 0.875rem; line-height: 1; font-weight: 600; color: hsl(var(--s-text));
  margin-top: 4px; letter-spacing: 0; white-space: nowrap;
}
/* En-tête des petits écrans : la mention « by Agence Web Performance » laisse la place aux outils
   (elle reste dans le nom du lien, et en clair dans le pied de page) */
.site-top .site-brand-by { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 420px) { .site-top .site-brand-by { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
@media (min-width: 480px) {
  .site-brand { gap: var(--space-3); }
  .site-brand .brand-mark { width: 36px; height: 36px; }
  .site-brand-name { font-size: 1.5rem; }
}
.site-brand.site-brand-sm .brand-mark { width: 36px; height: 36px; }
.site-brand.site-brand-sm .site-brand-name { font-size: 1.3125rem; }

/* ------------------------------------------------------------------ En-tête */
.skip-link:focus { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 10; margin: 0; }
.site-top { position: relative; isolation: isolate; background: hsl(var(--s-tint)); }
/* Trame verticale de la cascade réseau, continue de l'en-tête au premier écran (même origine centrée) */
.site-top::before, .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, hsl(var(--s-grid)) 0 1px, transparent 1px 72px) 50% 0;
}
.site-top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 72px; padding-block: var(--space-3); }
.site-tools { display: flex; align-items: center; gap: var(--space-1); }
@media (min-width: 480px) { .site-tools { gap: var(--space-2); } }
.lang-link, .top-cta {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding-inline: var(--space-3);
  border-radius: 999px; font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  color: hsl(var(--s-accent));
}
.lang-link:hover { background: hsl(var(--s-surface)); }
.lang-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Petit écran : le drapeau seul, le nom de la langue reste lu par les lecteurs d'écran */
.lang-short { display: none; }
.lang-link { padding-inline: var(--space-2); }
@media (min-width: 480px) { .lang-link { padding-inline: var(--space-3); } }
@media (min-width: 480px) {
  .lang-long { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .lang-short { display: none; }
}
.top-cta { background: hsl(var(--s-fill)); color: hsl(var(--s-on-fill)); }
.top-cta:hover { background: hsl(var(--s-fill-hover)); }
.theme-switch {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid hsl(var(--s-field) / 0.6); border-radius: 999px; background: hsl(var(--s-surface));
  color: hsl(var(--s-ink)); cursor: pointer;
}
.theme-switch:hover { border-color: hsl(var(--s-fill)); color: hsl(var(--s-accent)); }
.theme-switch svg { width: 20px; height: 20px; }
.theme-switch .icon-sun, html.dark .theme-switch .icon-moon { display: none; }
html.dark .theme-switch .icon-sun { display: block; }

/* ------------------------------------------------------------------ Premier écran */
.hero { position: relative; isolation: isolate; overflow: clip; background: hsl(var(--s-tint)); padding-block: var(--space-5) var(--band-y); }
.hero::before { -webkit-mask-image: linear-gradient(#000 30%, transparent 92%); mask-image: linear-gradient(#000 30%, transparent 92%); }
/* Halo derrière le sommaire : la profondeur vient de la lumière, pas d'une ombre de plus */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(900px, 120vw); aspect-ratio: 1; right: -18%; top: -30%;
  background: radial-gradient(closest-side, hsl(var(--s-glow) / 0.22), hsl(var(--s-glow) / 0.06) 55%, transparent);
}
html.dark .hero::after { background: radial-gradient(closest-side, hsl(var(--s-glow) / 0.16), transparent); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-kicker { font-size: 0.9375rem; font-weight: 700; color: hsl(var(--s-accent)); max-width: 40ch; }
.hero .hero-kicker {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: none;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: 20px;
  background: hsl(var(--s-surface) / 0.8); border: 1px solid hsl(var(--s-line)); line-height: 1.4;
}
.hero .hero-kicker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--s-fill)); box-shadow: 0 0 0 4px hsl(var(--s-fill) / 0.18); }
.hero h1 {
  margin-top: var(--space-5);
  font-size: clamp(2.25rem, 1rem + 2.9vw, 3.5rem); line-height: 1.06; letter-spacing: -0.035em;
}
.hero-lead { margin-top: var(--space-4); font-size: 1.0625rem; line-height: 1.6; max-width: 34em; }
.hero .subscribe { margin-top: var(--space-5); max-width: 34rem; }
.hero-byline { margin-top: var(--space-4); font-size: 0.9375rem; }
@media (min-width: 768px) {
  .hero { padding-block: var(--space-7) var(--band-y); }
  .hero-lead { font-size: 1.1875rem; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); }
  .hero .subscribe { margin-top: var(--space-6); }
}
@media (min-width: 1280px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); }
}

/* --- Formulaire d'inscription --- */
.subscribe { display: grid; gap: var(--space-2); padding-top: 0; border-top: 0; }
.subscribe-label { font-size: 0.9375rem; font-weight: 700; color: hsl(var(--s-ink)); }
.subscribe-row { display: grid; gap: var(--space-2); }
.subscribe-input {
  width: 100%; min-height: 52px; padding: 0 var(--space-5);
  border: 1.5px solid hsl(var(--s-field)); border-radius: 999px;
  background: hsl(var(--s-surface)); color: hsl(var(--s-ink)); font-size: 1rem;
}
.subscribe-input::placeholder { color: hsl(var(--s-text)); opacity: 1; }
/* outline transparent plutôt que none : il réapparaît en mode contraste élevé, qui retire box-shadow */
.subscribe-input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: hsl(var(--s-fill)); box-shadow: 0 0 0 3px hsl(var(--s-fill) / 0.35); }
.subscribe-input[aria-invalid="true"] { border-color: hsl(var(--s-danger)); }
.subscribe-btn {
  min-height: 52px; padding: 0 var(--space-6); border: 2px solid transparent; border-radius: 999px;
  background: hsl(var(--s-fill)); color: hsl(var(--s-on-fill));
  font-weight: 800; font-size: 1rem; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
}
.subscribe-btn:hover { background: hsl(var(--s-fill-hover)); }
.subscribe-hint { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-1); font-size: 0.875rem; line-height: 1.5; }
.subscribe-hint > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.subscribe-hint .icon { width: 18px; height: 18px; color: hsl(var(--s-accent)); }
@media (min-width: 480px) { .hero .subscribe-row { box-shadow: 0 14px 36px -16px hsl(var(--s-fill) / 0.55); } }
.subscribe-btn { transition: background-color 0.2s; }
@media (prefers-reduced-motion: no-preference) { .subscribe-btn { transition: background-color 0.2s, transform 0.2s; } }
.subscribe-btn:active { transform: scale(0.97); }
.subscribe-error {
  padding: var(--space-3) var(--space-4); border-left: 3px solid hsl(var(--s-danger));
  background: hsl(var(--s-surface)); color: hsl(var(--s-danger)); font-weight: 600; font-size: 0.9375rem; border-radius: 0 8px 8px 0;
}
/* Champ et bouton réunis dans une même pilule dès qu'il y a la place */
@media (min-width: 480px) {
  .subscribe-row {
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); padding: var(--space-1);
    border: 1.5px solid hsl(var(--s-field)); border-radius: 999px; background: hsl(var(--s-surface));
  }
  .subscribe-row:focus-within { border-color: hsl(var(--s-fill)); box-shadow: 0 0 0 3px hsl(var(--s-fill) / 0.35); }
  .subscribe-row .subscribe-input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 48px; border: 0; padding-inline: var(--space-4); }
  .subscribe-row .subscribe-input:focus { box-shadow: none; }
  .subscribe-row:has([aria-invalid="true"]) { border-color: hsl(var(--s-danger)); }
  .subscribe-btn { min-height: 48px; }
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- La cascade : le sommaire type d'un numéro, dessiné comme une vue réseau --- */
.cascade {
  background: hsl(var(--s-surface)); border-radius: 20px; box-shadow: var(--s-lift);
  border: 1px solid hsl(var(--s-line)); padding: var(--space-5) var(--space-4) var(--space-4);
}
@media (min-width: 768px) { .cascade { padding: var(--space-6); } }
.cascade-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid hsl(var(--s-line)); }
.cascade-title, .sample-section {
  font-family: 'Manrope', 'Manrope-fallback', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--s-accent));
}
.cascade-meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.cascade-meta .icon { width: 18px; height: 18px; color: hsl(var(--s-accent)); }
/* Règle de temps au-dessus de la colonne des barres : 0 à 5 minutes de lecture */
.cascade-ruler {
  display: grid; grid-template-columns: 24px minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--space-3);
  padding-top: var(--space-3); font-size: 0.875rem; font-weight: 600; line-height: 1;
}
.cascade-scale {
  grid-column: 3; display: flex; justify-content: space-between; padding-bottom: var(--space-2);
  /* Six graduations, de 0 à 5 minutes : la dernière tombe sur le bord droit, sous « 5 min » */
  background:
    linear-gradient(hsl(var(--s-field) / 0.55), hsl(var(--s-field) / 0.55)) 100% 100% / 1px 6px no-repeat,
    linear-gradient(90deg, hsl(var(--s-field) / 0.55) 1px, transparent 1px) 0 100% / 20% 6px repeat-x;
  font-variant-numeric: tabular-nums;
}
.cascade-list { list-style: none; position: relative; container-type: inline-size; }
.cascade-row {
  display: grid; grid-template-columns: 24px minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: var(--space-3);
  padding-block: var(--space-2); border-bottom: 1px solid hsl(var(--s-line));
}
.cascade-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cascade-icon { width: 22px; height: 22px; color: hsl(var(--s-accent)); justify-self: center; }
.cascade-name { font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: hsl(var(--s-ink)); }
.cascade-desc { display: block; font-weight: 500; font-size: 0.875rem; color: hsl(var(--s-text)); }
.cascade-bar {
  display: block; height: 8px; border-radius: 999px; background: hsl(var(--s-fill) / 0.42);
  width: 34%; margin-inline-start: calc((var(--i) - 1) * 8.25%);
  transform-origin: left center;
}
.cascade-row:first-child .cascade-bar { margin-inline-start: 0; }
/* L'essentiel part en même temps que le premier octet : c'est la ressource préchargée */
.cascade-row.is-first .cascade-bar { margin-inline-start: 0; width: 48%; background: hsl(var(--s-fill)); }
.cascade-row.is-first .cascade-name { color: hsl(var(--s-accent)); }
@media (prefers-reduced-motion: no-preference) {
  .cascade-bar { animation: cascade-in 480ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(120ms + var(--i) * 70ms); }
  .cascade-row.is-first .cascade-bar { animation-delay: 120ms; }
}
@keyframes cascade-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ------------------------------------------------------------------ Bandes */
.band { padding-block: var(--band-y); }
.band h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.03em; }
.section-head { max-width: 40rem; }
.section-lead { margin-top: var(--head-gap); font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 768px) { .section-lead { font-size: 1.125rem; } }
.band h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.015em; }

/* --- Ce que contient Preload --- */
.band-what { background: hsl(var(--s-surface)); }
.pillars { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); margin-top: var(--block-gap); }
.pillar-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: var(--space-5);
  background: linear-gradient(150deg, hsl(var(--s-tint)), hsl(var(--s-fill) / 0.14)); color: hsl(var(--s-accent));
  box-shadow: inset 0 0 0 1px hsl(var(--s-fill) / 0.12);
}
.pillar-icon .icon { width: 28px; height: 28px; }
.pillar p { margin-top: var(--space-2); }
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
}

/* --- Une nouvelle, telle qu'elle apparaît --- */
.sample-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.sample-grid > * { min-width: 0; }
.anatomy { list-style: none; counter-reset: part; margin-top: var(--space-7); }
.anatomy > li {
  counter-increment: part; position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-8);
  border-top: 1px solid hsl(var(--s-line));
}
.anatomy > li::before {
  content: counter(part); position: absolute; left: 0; top: var(--space-3);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: hsl(var(--s-tint)); color: hsl(var(--s-accent)); font-weight: 800; font-size: 0.875rem; line-height: 1;
}
.anatomy strong { color: hsl(var(--s-ink)); }
.sample { margin: 0; }
.sample-caption { font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-3); }
.sample-card {
  background: hsl(var(--s-surface)); border: 1px solid hsl(var(--s-line)); border-radius: 20px; box-shadow: var(--s-lift);
  padding: var(--space-5) var(--space-4);
}
.sample-card > * + * { margin-top: var(--space-4); }
.site .sample-card.issue-item { border-top: 1px solid hsl(var(--s-line)); padding-top: var(--space-5); }
.sample-card h3 { font-size: 1.375rem; }
.sample-card .support { color: hsl(var(--s-ink)); }
@media (min-width: 768px) { .sample-card, .site .sample-card.issue-item { padding: var(--space-7); } }
@media (min-width: 1024px) {
  .sample-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-9); }
  .sample-text { position: sticky; top: var(--space-6); }
}

/* Gabarit d'une nouvelle (aussi utilisé par la version web d'un numéro) */
.site .issue-item code, .site .issue-intro code, .site .issue-section code { font-family: var(--s-mono); background: hsl(var(--s-track)); }
.site .geste { background: hsl(var(--s-tint)); border-left-color: hsl(var(--s-fill)); color: hsl(var(--s-ink)); }
.site .avis { color: hsl(var(--s-text)); border-left-color: hsl(var(--s-field)); }
.site .link-arrow { color: hsl(var(--s-accent)); }
.site .link-arrow::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); font-size: 0; margin-left: -2px;
}
.site a.link-arrow:hover { color: hsl(var(--s-ink)); }

/* --- Rappel d'inscription --- */
.band-cta { position: relative; isolation: isolate; overflow: clip; background: hsl(var(--s-deep)); color: hsl(var(--s-deep-text)); }
/* Barres de cascade en filigrane et halo : la bande de rappel reprend le motif du pictogramme */
.cta-deco {
  position: absolute; inset: 0 -25%; z-index: -1; pointer-events: none; opacity: 0.08;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='108'%3E%3Cg fill='%23fff'%3E%3Crect x='16' y='16' width='132' height='10' rx='5'/%3E%3Crect x='84' y='50' width='96' height='10' rx='5' opacity='.6'/%3E%3Crect x='150' y='84' width='168' height='10' rx='5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 108px;
}
.band-cta::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 720px; aspect-ratio: 1; left: -240px; bottom: -420px;
  background: radial-gradient(closest-side, hsl(var(--s-glow) / 0.35), transparent);
}
.band-cta h2 { color: #fff; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.cta-grid > * { min-width: 0; }
.cta-lead { margin-top: var(--space-3); font-size: 1.0625rem; max-width: 34em; }
.band-cta .subscribe-label { color: #fff; }
.band-cta .subscribe-hint { color: hsl(var(--s-deep-text)); }
.band-cta :focus-visible { outline-color: #fff; }
.band-cta .subscribe-row { border-color: transparent; }
/* Focus du formulaire sur la bande marine : contour blanc, 3:1 au moins en clair comme en sombre */
.band-cta .subscribe-row:focus-within, html.dark .band-cta .subscribe-row:focus-within { border-color: #fff; box-shadow: 0 0 0 3px hsl(0 0% 100% / 0.4); }
.band-cta .subscribe-input:focus { border-color: #fff; }
html.dark .band-cta .subscribe-btn { background: hsl(221 85% 66%); }
/* Sombre : le champ (surface sombre) sur la bande bleu nuit se délimite par sa bordure (3:1 au moins) */
html.dark .band-cta .subscribe-row, html.dark .band-cta .subscribe-input { border-color: hsl(219 40% 62%); }
@media (min-width: 480px) { html.dark .band-cta .subscribe-input { border-color: transparent; } }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); } }

/* --- L'auteur et l'agence --- */
.band-about { background: hsl(var(--s-page)); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--block-gap); }
.about-grid > * {
  min-width: 0; background: hsl(var(--s-surface)); border: 1px solid hsl(var(--s-line)); border-radius: 16px;
  padding: var(--space-5) var(--space-4);
}
.about-grid > * > * + * { margin-top: var(--space-4); }
.about-grid h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.about-grid .about-role { margin-top: var(--space-1); font-weight: 700; color: hsl(var(--s-accent)); font-size: 0.9375rem; }
.facts { list-style: none; }
.facts > li { display: flex; gap: var(--space-3); }
.facts > li + li { margin-top: var(--space-2); }
.facts .icon { width: 22px; height: 22px; margin-top: 2px; color: hsl(var(--s-accent)); }
.about-badge {
  display: grid; place-items: center; width: 120px; height: 120px; border-radius: 32px; margin-bottom: var(--space-4);
  background: linear-gradient(150deg, hsl(var(--s-tint)), hsl(var(--s-fill) / 0.2)); color: hsl(var(--s-accent));
  box-shadow: inset 0 0 0 1px hsl(var(--s-fill) / 0.14);
}
.about-badge .icon { width: 56px; height: 56px; }
.numbers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block: var(--space-5) 0; }
/* Le chiffre (dd) passe au-dessus de son libellé ; flex-end, en colonne inversée, colle le tout en haut :
   les chiffres restent alignés quand les libellés n'ont pas la même longueur */
.numbers > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid hsl(var(--s-line)); }
.numbers dt { font-size: 0.9375rem; line-height: 1.45; }
.numbers dd {
  margin: 0; font-family: 'Poppins', 'Poppins-fallback', system-ui, sans-serif; font-weight: 700;
  font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; color: hsl(var(--s-ink));
}
@media (min-width: 768px) {
  .about-grid > * { padding: var(--space-7); }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-6); }
}

/* --- Questions fréquentes --- */
.band-faq { background: hsl(var(--s-surface)); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.faq-grid > * { min-width: 0; }
.faq-list { border-top: 1px solid hsl(var(--s-line)); }
.faq-item { border-bottom: 1px solid hsl(var(--s-line)); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-4); cursor: pointer; list-style: none;
  font-family: 'Poppins', 'Poppins-fallback', system-ui, sans-serif; font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
  letter-spacing: -0.01em; color: hsl(var(--s-ink));
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: var(--space-2);
  border-right: 2px solid hsl(var(--s-accent)); border-bottom: 2px solid hsl(var(--s-accent));
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s;
}
.faq-item[open] > .faq-q::after { transform: translateY(2px) rotate(-135deg); }
.faq-q:hover { color: hsl(var(--s-accent)); }
.faq-a { padding-bottom: var(--space-5); max-width: 42em; }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-9); align-items: start; }
}

/* ------------------------------------------------------------------ Pied de page */
.site-foot { border-top: 1px solid hsl(var(--s-line)); background: hsl(var(--s-page)); padding-block: var(--space-7); font-size: 0.9375rem; }
.site-foot-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.site-foot-brand > p { margin-top: var(--space-3); max-width: 36em; }
.site-foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-foot-links a { font-weight: 700; text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.site-foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot-legal { font-size: 0.875rem; }
@media (min-width: 1024px) {
  .site-foot-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-9); }
  .site-foot-links { justify-content: flex-end; padding-top: var(--space-2); }
  .site-foot-legal { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Pages simples (inscription, confirmation, 404) */
.notice { padding-block: var(--space-8) var(--space-10); background: hsl(var(--s-tint)); flex: 1 0 auto; }
.notice-card {
  max-width: 44rem; background: hsl(var(--s-surface)); border: 1px solid hsl(var(--s-line)); border-radius: 16px;
  box-shadow: var(--s-shadow); padding: var(--space-6) var(--space-5);
}
.notice-card > * + * { margin-top: var(--space-4); }
.notice-card h1 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.notice-card .notice-lead { font-size: 1.0625rem; }
.notice-badge {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  background: hsl(var(--s-fill)); color: hsl(var(--s-on-fill)); --duo: hsl(var(--s-on-fill)); --duo-o: 0.22;
  box-shadow: 0 14px 32px -14px hsl(var(--s-fill) / 0.7);
}
.notice-badge .icon { width: 32px; height: 32px; }
.notice-steps { list-style: none; counter-reset: step; }
.notice-steps > li { counter-increment: step; position: relative; padding-left: var(--space-7); }
.notice-steps > li + li { margin-top: var(--space-3); }
.notice-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.875rem;
  background: hsl(var(--s-tint)); color: hsl(var(--s-accent));
}
.notice-small { font-size: 0.875rem; }
.btn-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-6); border-radius: 999px;
  background: hsl(var(--s-fill)); color: hsl(var(--s-on-fill)); font-weight: 800; text-decoration: none;
}
.site main .btn-link { text-decoration: none; }
.btn-link:hover { background: hsl(var(--s-fill-hover)); }
@media (min-width: 768px) { .notice-card { padding: var(--space-8); } }

/* ------------------------------------------------------------------ Version web d'un numéro */
.site .issue-wrap { padding-block: var(--space-6) var(--space-9); }
.site .panel { border-radius: 16px; background: hsl(var(--s-surface)); }
html.dark .site .panel, html.dark.site .panel { border-color: hsl(var(--s-line)); }
.site .issue .eyebrow, .site .issue .section-title { color: hsl(var(--s-accent)); }

/* ------------------------------------------------------------------ Contraste forcé */
@media (forced-colors: active) {
  .subscribe-btn, .btn-link, .top-cta, .theme-switch { border: 2px solid ButtonText; }
  .cascade-bar { background: CanvasText; }
  .cascade-row.is-first .cascade-bar { background: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.site) { scroll-behavior: auto; }
  .faq-q::after { transition: none; }
}
.notice-code {
  font-family: var(--s-mono); font-weight: 700; font-size: 0.9375rem; color: hsl(var(--s-accent));
  display: inline-block; padding: var(--space-1) var(--space-3); border-radius: 999px; background: hsl(var(--s-tint));
}

/* Photo de signature (gérée dans l'admin) */
.about-avatar {
  display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-4);
  box-shadow: 0 0 0 4px hsl(var(--s-tint, 219 100% 96%)), 0 12px 32px hsl(216 80% 18% / 0.16);
}

/* ------------------------------------------------------------------ Archives */
.band-archive { background: hsl(var(--s-page)); }
.link-rss { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-weight: 700; color: hsl(var(--s-accent)); }
.link-rss .icon { width: 20px; height: 20px; color: hsl(24 90% 46%); --duo: hsl(28 92% 52%); }
html.dark .link-rss .icon { color: hsl(28 92% 60%); }
.band-cta .link-rss { color: #fff; }
.archive-empty { margin-top: var(--space-8); padding: var(--space-6); background: hsl(var(--s-surface)); border: 1px dashed hsl(var(--s-line)); border-radius: 16px; }
.archive-list { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-4); }
.archive-item {
  background: hsl(var(--s-surface)); border: 1px solid hsl(var(--s-line)); border-radius: 16px; box-shadow: var(--s-shadow);
  padding: var(--space-5);
}
@media (min-width: 768px) { .archive-item { padding: var(--space-6) var(--space-7); } }
.archive-meta { display: flex; gap: var(--space-3); align-items: baseline; font-size: 0.875rem; color: hsl(var(--s-text)); }
.archive-num { font-weight: 800; color: hsl(var(--s-accent)); letter-spacing: 0.04em; }
.archive-title { margin-top: var(--space-2); font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em; }
.archive-title a { color: hsl(var(--s-ink)); text-decoration: none; }
.archive-title a:hover, .archive-title a:focus-visible { color: hsl(var(--s-accent)); text-decoration: underline; }
.archive-preheader { margin-top: var(--space-2); }
.archive-item.is-upcoming { background: hsl(var(--s-tint)); box-shadow: none; }
.archive-lock { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); font-size: 0.9375rem; }
.archive-lock svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: hsl(var(--s-accent)); }

/* ------------------------------------------------------------------ Numéro (version web) */
.issue-page { padding-block: var(--space-8) var(--space-10); background: hsl(var(--s-page)); }
.issue-wrap { max-width: 48rem; }
.issue-banner {
  margin-bottom: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: 12px;
  background: hsl(var(--s-tint)); border: 1px solid hsl(var(--s-line)); font-size: 0.9375rem;
}
.issue-head h1 { margin-top: var(--space-3); font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; color: hsl(var(--s-ink)); }
.issue-lead { margin-top: var(--space-4); font-size: 1.1875rem; line-height: 1.55; }
.issue-intro { margin-top: var(--space-7); padding: var(--space-5) var(--space-6); background: hsl(var(--s-surface)); border-left: 4px solid hsl(var(--s-fill)); border-radius: 0 16px 16px 0; font-size: 1.0625rem; }
.issue-intro > * + * { margin-top: var(--space-3); }
.issue-eyebrow { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--s-accent)); }
.issue-toc { margin-top: var(--space-7); padding-block: var(--space-5); border-block: 1px solid hsl(var(--s-line)); }
.issue-toc ol { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); }
.issue-toc a { font-weight: 700; color: hsl(var(--s-ink)); text-decoration: none; }
.issue-toc a:hover, .issue-toc a:focus-visible { color: hsl(var(--s-accent)); text-decoration: underline; }
.issue-toc span { display: block; font-size: 0.9375rem; }
.issue-section { margin-top: var(--space-9); scroll-margin-top: var(--space-6); }
.issue-lead-block { margin-top: var(--space-4); }
.issue-lead-block ul { padding-left: var(--space-5); }
.issue-lead-block li + li { margin-top: var(--space-2); }
.issue-item {
  margin-top: var(--space-5); padding: var(--space-5) var(--space-4); background: hsl(var(--s-surface));
  border: 1px solid hsl(var(--s-line)); border-radius: 16px; box-shadow: var(--s-shadow);
}
@media (min-width: 768px) { .issue-item { padding: var(--space-6) var(--space-7); } }
.issue-item > * + * { margin-top: var(--space-4); }
.issue-item h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em; color: hsl(var(--s-ink)); }
.issue-item code, .issue-intro code, .issue-lead-block code { font-family: var(--s-mono); font-size: 0.875em; background: hsl(var(--s-tint)); padding: 0.1em 0.35em; border-radius: 6px; }
.issue-support { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; font-weight: 600; color: hsl(var(--s-ink)); }
.issue-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.issue-support-baseline .issue-dot { background: hsl(152 60% 40%); }
.issue-support-partiel .issue-dot { background: hsl(36 95% 50%); }
.issue-support-experimental .issue-dot { background: hsl(0 72% 52%); }
.issue-geste { padding: var(--space-4) var(--space-5); background: hsl(var(--s-tint)); border-radius: 12px; }
.issue-geste-label { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--s-accent)); margin-bottom: var(--space-1); }
.issue-avis { margin-inline: 0; padding-left: var(--space-4); border-left: 3px solid hsl(var(--s-line)); font-style: italic; }
.issue-source a {
  display: inline-flex; align-items: center; gap: var(--space-3); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: hsl(var(--s-accent)); text-decoration: none;
}
.issue-source a::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.issue-source a::after { content: "▸"; }
.issue-source a:hover, .issue-source a:focus-visible { text-decoration: underline; }
.issue-sign { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-9); padding-top: var(--space-6); border-top: 1px solid hsl(var(--s-line)); }
.issue-sign img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.issue-sign strong { color: hsl(var(--s-ink)); }

/* ------------------------------------------------------------------ Icônes duotone et drapeaux
   Sprite inline en bas de page (templates/partials/_sprite.svg.twig). Les couches se règlent par
   propriétés héritées à travers <use> : --duo et --duo-o (couche secondaire), --dash-a et --dash (tracé). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; --duo: hsl(var(--s-fill)); }
.flag { width: 20px; height: 14px; flex: none; display: block; }
.foot-lang { gap: var(--space-2); }
.sample-section { display: flex; align-items: center; gap: var(--space-2); }
.sample-section .icon { width: 20px; height: 20px; }
@property --dash { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --duo-o { syntax: '<number>'; inherits: true; initial-value: 0.22; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* ------------------------------------------------------------------ Mouvement
   Tout est en CSS : animations liées au défilement (scroll(), view()) quand le navigateur les
   connaît, sinon un repli par IntersectionObserver (classe .io posée par le gabarit). Seuls
   transform et opacity sont animés sur les blocs ; rien ne bouge si l'utilisateur l'a demandé. */
.preload-bar { display: none; }
@media (prefers-reduced-motion: no-preference) {

  /* Le tracé des icônes : utilisable au chargement (pages de confirmation) comme au défilement */
  @keyframes icon-draw {
    0% { --dash: 1; --duo-o: 0; }
    65% { --dash: 0; --duo-o: 0; }
    100% { --dash: 0; --duo-o: var(--duo-o-to, 0.22); }
  }
  .notice-badge .icon-draw { --dash-a: 1 1; --duo-o-to: 0.22; animation: icon-draw 1.1s 0.15s cubic-bezier(.4, 0, .2, 1) both; }

  /* Premier écran : une tête de lecture balaie la colonne des barres, une seule fois */
  .cascade-list::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 2px;
    left: calc(48px + (100cqw - 48px) * 0.6);
    background: linear-gradient(transparent, hsl(var(--s-fill)) 12%, hsl(var(--s-fill)) 88%, transparent);
    box-shadow: 0 0 12px hsl(var(--s-glow) / 0.8);
    animation: cascade-sweep 1.5s 0.9s cubic-bezier(.45, 0, .2, 1) both;
  }
  @keyframes cascade-sweep {
    0% { translate: 0 0; opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { translate: calc((100cqw - 48px) * 0.4) 0; opacity: 0; }
  }

  /* Repli sans animation-timeline : apparition à l'entrée dans l'écran */
  .io [data-reveal] { transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1), translate 0.7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 110ms); }
  .io [data-reveal]:not(.is-in) { opacity: 0; translate: 0 28px; }
  .io [data-reveal] .icon-draw { --dash-a: 1 1; transition: --dash 0.9s 0.25s ease-out, --duo-o 0.5s 1s; }
  .io [data-reveal]:not(.is-in) .icon-draw { --dash: 1; --duo-o: 0; }

  @supports (animation-timeline: view()) {
    /* La barre de préchargement : la lecture de la page, comme une ressource qui se charge */
    .preload-bar {
      display: block; position: fixed; inset: 0 0 auto; height: 3px; z-index: 50; pointer-events: none;
      background: linear-gradient(90deg, hsl(var(--s-fill)), hsl(var(--s-glow)));
      box-shadow: 0 0 10px hsl(var(--s-glow) / 0.6);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: preload-progress linear both; animation-timeline: scroll(root block);
    }
    @keyframes preload-progress { to { transform: scaleX(1); } }

    /* Apparitions : courtes, décalées par --d, terminées avant le milieu de l'écran */
    [data-reveal] {
      animation: reveal linear both; animation-timeline: view();
      animation-range: entry calc(var(--d, 0) * 10%) entry calc(75% + var(--d, 0) * 10%);
    }
    @keyframes reveal { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }

    .icon-draw { --dash-a: 1 1; animation: icon-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    .notice-badge .icon-draw { animation: icon-draw 1.1s 0.15s cubic-bezier(.4, 0, .2, 1) both; animation-timeline: auto; }

    /* Chiffres de l'agence : décompte jusqu'à la valeur réelle, lue telle quelle par les lecteurs d'écran */
    .count { --n: var(--to); counter-reset: n var(--n); animation: count linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    .count .count-val { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .count::after { content: counter(n) / ""; }
    @keyframes count { from { --n: 0; } to { --n: var(--to); } }

    /* Bande de rappel : le filigrane glisse avec le défilement */
    .cta-deco { animation: cta-drift linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes cta-drift { from { translate: -6% 0; } to { translate: 6% 0; } }
  }

  /* FAQ : la réponse se déplie au lieu d'apparaître d'un coup */
  @supports (interpolate-size: allow-keywords) {
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 0.32s cubic-bezier(.2, .7, .2, 1), content-visibility 0.32s allow-discrete; }
    .faq-item[open]::details-content { block-size: auto; }
  }
}
.band-cta .subscribe-hint .icon { color: #fff; --duo: #fff; --duo-o: 0.2; }

/* ------------------------------------------------------------------ Une nouvelle, telle que vous la lirez
   Chaque partie de l'exemple s'entoure avec sa ligne de la liste : une toutes les 5 secondes,
   ou celle que survole la souris, d'un côté comme de l'autre (script en fin de section). */
.anatomy > li[data-part], .sample-card [data-part] { position: relative; isolation: isolate; }
.anatomy > li[data-part]::after, .sample-card [data-part]::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 12px;
  background: hsl(var(--s-fill) / 0.08); box-shadow: inset 0 0 0 1.5px hsl(var(--s-fill) / 0.55);
  opacity: 0;
}
.anatomy > li[data-part]::after { inset: 4px calc(var(--space-3) * -1) 4px calc(var(--space-2) * -1); }
.sample-card [data-part]::after { inset: calc(var(--space-2) * -1) calc(var(--space-3) * -1); }
.sample-card .geste[data-part]::after { inset: -4px; }
.sample-end > * + * { margin-top: var(--space-4); }
.anatomy > li.is-lit::after, .sample-card .is-lit::after { opacity: 1; }
.anatomy > li.is-lit::before { background: hsl(var(--s-fill)); color: hsl(var(--s-on-fill)); }
@media (prefers-reduced-motion: no-preference) {
  .anatomy > li[data-part]::after, .sample-card [data-part]::after { transition: opacity 0.35s ease; }
  .anatomy > li[data-part]::before { transition: background-color 0.35s ease, color 0.35s ease; }
}

/* ------------------------------------------------------------------ Page de confidentialité */
.legal-wrap { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.legal h2 { margin-top: var(--space-8); font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.015em; }
.legal h2 + p, .legal h2 + ul { margin-top: var(--space-3); }
.legal ul { padding-left: var(--space-5); list-style: disc; }
.legal li + li { margin-top: var(--space-2); }
.legal-date { margin-top: var(--space-8); font-size: 0.875rem; }
.band-cta .subscribe-hint a { color: #fff; }