/* NOIRE AUDIO — site, version 2 (refonte « Apple »).
   Couleurs et polices de la charte NOIRE (noire-tokens.css), langage visuel d'Apple :
   une couche de contenu opaque (sections Obsidian et Porcelain, tuiles, rendus du plugin)
   et une couche fonctionnelle en Liquid Glass (navigation, barre produit, sélecteurs, flèches).
   Contrastes calculés (WCAG) : voir DESIGN.md. */

/* ------------------------------------------------------------------ Polices */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ Jetons */

:root {
  /* Charte */
  --obsidian: #111110;
  --porcelain: #f3f0ea;
  --oxide: #d65a36;
  --stone: #b7ada0;
  --taupe: #827c70;
  --sage: #789486;

  /* Typographie */
  --font-display: "Archivo", "Instrument Sans", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Mise en page : 692 px (lecture), 980 px (contenu), 1200 px (large) */
  --w-text: 43.25rem;
  --w-content: 61.25rem;
  --w-wide: 75rem;
  --w-max: 90rem;
  --gutter: clamp(1.375rem, 4vw, 2.5rem);
  --section-space: clamp(5rem, 9vw, 8.5rem);

  /* Formes */
  --r-tile: 1.75rem;
  --r-card: 1.25rem;
  --r-image: 1rem;
  --r-pill: 999px;

  /* Mouvement */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.32, 1.25, .48, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 900ms;

  /* Hauteur réservée à la navigation flottante */
  --nav-h: 3rem;
  --nav-top: .75rem;
}

/* Thèmes de section : la même composante change de valeurs selon son fond. */
.theme-light,
:root {
  --surface: #f3f0ea;
  --surface-raised: #fbfaf7;
  --surface-sunken: #e9e5dd;
  --label: #111110;           /* 16,6:1 sur Porcelain */
  --label-2: #5c574d;         /* 6,3:1 */
  --label-3: #6d675c;         /* 4,9:1 */
  --separator: rgba(17, 17, 16, .12);
  --link: #b3462a;            /* Oxyde encre : 4,8:1 */
  --signal: #4f6a5d;          /* Sauge encre : 5,2:1 */
  --tile-shadow: 0 1px 2px rgba(17, 17, 16, .04), 0 12px 40px rgba(17, 17, 16, .06);
  color-scheme: light;
}

.theme-dark {
  --surface: #111110;
  --surface-raised: #1b1b19;
  --surface-sunken: #0b0b0a;
  --label: #f3f0ea;           /* 16,6:1 sur Obsidian */
  --label-2: #b7ada0;         /* 8,6:1 (7,7:1 sur tuile) */
  --label-3: #9c9488;         /* 6,3:1 (5,8:1 sur tuile) */
  --separator: rgba(243, 240, 234, .12);
  --link: #e46f4b;            /* Oxyde clair : 6,0:1 (5,5:1 sur tuile) */
  --signal: #789486;          /* Sauge : 5,7:1 */
  --tile-shadow: 0 0 0 1px rgba(243, 240, 234, .06);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--nav-top) * 3);
  background: var(--obsidian);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-text);
  font-size: 1.0625rem;              /* 17 px : corps de texte Apple */
  line-height: 1.5294;
  font-weight: 400;
  color: var(--label);
  background: var(--surface);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: .18em;
}

a:hover {
  text-decoration: underline;
}

/* Liens dans un texte courant : soulignés, pas seulement colorés. */
.doc__body a,
.faq__answer a,
.notfound__alt a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

p,
h1,
h2,
h3,
h4,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
}

strong,
b {
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  color: var(--obsidian);
  background: rgba(214, 90, 54, .55);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Un contrôle masqué tant que le script ne l'a pas activé reste masqué, quelle que soit sa classe. */
[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1.25rem;
  color: var(--obsidian);
  font-weight: 500;
  background: var(--porcelain);
  border-radius: var(--r-pill);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}

.skip-link:focus {
  transform: none;
  text-decoration: none;
}

/* Champs à compléter avant publication (mentions légales, contact). Le prix, annoncé au lancement,
   n'est pas souligné : c'est une information assumée, pas un trou. */
[data-pending]:not([data-pending="launch"]) {
  text-decoration: underline dotted;
  text-decoration-color: var(--label-3);
  text-underline-offset: .2em;
}

/* ------------------------------------------------------------------ Mise en page */

.section {
  position: relative;
  padding-block: var(--section-space);
  color: var(--label);
  background: var(--surface);
}

.section--flush-top {
  padding-top: 0;
}

/* Deux sections de même fond qui se suivent : un seul espace, pas deux. */
.section.theme-dark + .section.theme-dark:not(.section--flush-top),
.section.theme-light + .section.theme-light:not(.section--flush-top) {
  padding-top: calc(var(--section-space) * .35);
}

.section--tight {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.container {
  width: min(100% - var(--gutter) * 2, var(--w-wide));
  margin-inline: auto;
}

.container--content {
  width: min(100% - var(--gutter) * 2, var(--w-content));
  margin-inline: auto;
}

.container--text {
  width: min(100% - var(--gutter) * 2, var(--w-text));
  margin-inline: auto;
}

.container--max {
  width: min(100% - var(--gutter) * 2, var(--w-max));
  margin-inline: auto;
}

.center {
  text-align: center;
}

.section-head {
  max-width: var(--w-content);
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.section-head--left {
  margin-inline: 0;
  text-align: left;
}

.section-head .lead {
  max-width: 40rem;
  margin-top: 1.25rem;
  margin-inline: auto;
}

.section-head--left .lead {
  margin-inline: 0;
}

/* ------------------------------------------------------------------ Typographie */

.eyebrow {
  display: block;
  margin-bottom: .875rem;
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, .5vw + .9rem, 1.3125rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--label-2);
}

.eyebrow--accent {
  color: var(--link);
}

.display-hero {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.2vw + .5rem, 7rem);
  line-height: 1.0;
  font-weight: 600;
  letter-spacing: -.036em;
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.4vw + .5rem, 4.5rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.2vw + .8rem, 2.75rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.026em;
  text-wrap: balance;
}

.title {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, .8vw + 1rem, 1.6875rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.018em;
}

.lead {
  font-size: clamp(1.1875rem, .9vw + .85rem, 1.625rem);
  line-height: 1.38;
  letter-spacing: -.012em;
  color: var(--label-2);
  text-wrap: pretty;
}

.body-2 {
  color: var(--label-2);
}

.caption {
  font-size: .875rem;
  line-height: 1.43;
  color: var(--label-3);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 0;
  letter-spacing: -.01em;
}

.muted-2 {
  color: var(--label-2);
}

/* Texte d'introduction : la phrase est grise, les mots qui portent le sens sont en clair. */
.intro-text {
  max-width: var(--w-content);
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw + .7rem, 3.25rem);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -.028em;
  color: var(--label-3);
  text-wrap: pretty;
}

/* Respiration entre un titre et le texte qui le suit. */
.display + .lead,
.headline + .lead,
.display-hero + .lead {
  margin-top: 1.25rem;
}

.headline + p:not(.lead),
.title + p:not(.lead) {
  margin-top: .875rem;
}

.intro-text strong {
  font-weight: 600;
  color: var(--label);
}

/* ------------------------------------------------------------------ Liens et boutons */

.link-chevron {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  font-weight: 400;
  color: var(--link);
}

.link-chevron::after {
  content: "";
  width: .5em;
  height: .5em;
  margin-top: .05em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) scale(.82);
  transition: transform var(--t-fast) var(--ease-out);
}

.link-chevron:hover::after {
  transform: translateX(.15em) rotate(45deg) scale(.82);
}

.link-chevron--down::after {
  transform: rotate(135deg) scale(.82);
}

.link-chevron--down:hover::after {
  transform: translateY(.12em) rotate(135deg) scale(.82);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.actions--left {
  justify-content: flex-start;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;               /* 44 px */
  padding: .6875rem 1.375rem;
  font-size: 1.0625rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.01em;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  transform: scale(.97);
}

/* Action principale : fond Oxyde, libellé Obsidian (4,8:1). */
.button--primary {
  color: var(--obsidian);
  background: var(--oxide);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 20px rgba(214, 90, 54, .28);
}

.button--primary:hover {
  background: #e06642;
}

.button--secondary {
  color: var(--label);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--separator), inset 0 0 0 1.5px color-mix(in srgb, var(--label) 22%, transparent);
}

.button--secondary:hover {
  background: color-mix(in srgb, var(--label) 7%, transparent);
}

/* Statut « Bientôt disponible » : une information, pas une action. */
.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem 1.125rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--label-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--separator);
}

.glass .status {
  color: var(--glass-label-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glass-label) 16%, transparent);
}

.status__dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--oxide);
  box-shadow: 0 0 0 4px rgba(214, 90, 54, .18);
}

/* ------------------------------------------------------------------ Liquid Glass
   Couche fonctionnelle uniquement (navigation, barre produit, sélecteurs, flèches).
   Flou et saturation de l'arrière-plan, remplissage translucide, liseré lumineux,
   reflet qui suit le pointeur. Repli opaque si la transparence est réduite. */

.glass {
  --glass-fill-top: rgba(46, 46, 43, .62);
  --glass-fill-bottom: rgba(22, 22, 21, .58);
  --glass-rim: rgba(255, 255, 255, .22);
  --glass-edge: rgba(255, 255, 255, .09);
  --glass-label: #f3f0ea;
  --glass-label-2: #c9c1b5;
  --gx: 30%;
  --gy: 0%;
  position: relative;
  isolation: isolate;
  color: var(--glass-label);
  background: linear-gradient(180deg, var(--glass-fill-top), var(--glass-fill-bottom));
  -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.04);
  backdrop-filter: blur(22px) saturate(1.8) brightness(1.04);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 10px 30px rgba(0, 0, 0, .28),
    0 2px 6px rgba(0, 0, 0, .16);
}

/* Reflet spéculaire : une lumière douce qui suit le pointeur sur la surface. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at var(--gx) var(--gy), rgba(255, 255, 255, .16), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}

.glass--light,
.nav-tone-light .glass {
  --glass-fill-top: rgba(253, 252, 249, .72);
  --glass-fill-bottom: rgba(243, 240, 234, .64);
  --glass-rim: rgba(255, 255, 255, .9);
  --glass-edge: rgba(17, 17, 16, .08);
  --glass-label: #111110;
  --glass-label-2: #4f4a42;
}

.nav-tone-light .glass::before,
.glass--light::before {
  background:
    radial-gradient(120% 140% at var(--gx) var(--gy), rgba(255, 255, 255, .7), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 50%);
}

/* ------------------------------------------------------------------ Navigation globale */

.site-nav {
  position: sticky;
  z-index: 100;
  top: var(--nav-top);
  height: 0;
  pointer-events: none;
}

/* Pages produit : la navigation globale défile, la barre produit reste (comme chez Apple). */
.has-localnav .site-nav {
  position: absolute;
  inset-inline: 0;
  top: var(--nav-top);
}

.nav-capsule {
  display: flex;
  align-items: center;
  gap: .25rem;
  width: min(100% - 1.5rem, 61.25rem);
  height: var(--nav-h);
  margin-inline: auto;
  padding: 0 .375rem 0 1rem;
  border-radius: var(--r-pill);
  pointer-events: auto;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-right: auto;
  padding-right: .5rem;
  color: var(--glass-label);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.nav-brand:hover {
  text-decoration: none;
}

.nav-brand img {
  width: 1.375rem;
  height: 1.375rem;
}

/* Oxyde clair sur verre sombre (5,4:1), Oxyde encre sur verre clair (4,8:1). */
.nav-brand__audio {
  color: #e46f4b;
}

.nav-tone-light .nav-brand__audio {
  color: #b3462a;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .125rem;
  list-style: none;
}

.nav-links a,
.nav-links .nav-shop {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 .875rem;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--glass-label);
  border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease-out);
}

.nav-links a:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--glass-label) 10%, transparent);
}

.nav-links a[aria-current] {
  background: color-mix(in srgb, var(--glass-label) 13%, transparent);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: .5rem;
  padding-left: .5rem;
  border-left: 1px solid color-mix(in srgb, var(--glass-label) 16%, transparent);
}

.lang-switch {
  display: flex;
  align-items: center;
  padding: .1875rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--glass-label) 8%, transparent);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 1.875rem;
  padding: 0 .5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--glass-label-2);
  border-radius: var(--r-pill);
}

.lang-switch a:hover {
  color: var(--glass-label);
  text-decoration: none;
}

.lang-switch a[aria-current] {
  color: var(--obsidian);
  background: var(--porcelain);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.nav-tone-light .lang-switch a[aria-current] {
  color: var(--porcelain);
  background: var(--obsidian);
}

.nav-shop {
  gap: .5rem;
  color: var(--glass-label-2) !important;
  cursor: default;
}

.nav-shop .status__dot {
  width: .375rem;
  height: .375rem;
  box-shadow: none;
}

.nav-menu-button {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: .25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.nav-menu-button span {
  position: absolute;
  left: .875rem;
  width: 1rem;
  height: 1.5px;
  background: var(--glass-label);
  border-radius: 2px;
  transition: transform var(--t-med) var(--ease-spring), top var(--t-med) var(--ease-spring);
}

.nav-menu-button span:first-child {
  top: 1.125rem;
}

.nav-menu-button span:last-child {
  top: 1.5625rem;
}

.nav-menu-button[aria-expanded="true"] span:first-child {
  top: 1.34rem;
  transform: rotate(45deg);
}

.nav-menu-button[aria-expanded="true"] span:last-child {
  top: 1.34rem;
  transform: rotate(-45deg);
}

/* Feuille de navigation mobile : verre plus épais (beaucoup de texte). */
.nav-sheet {
  display: none;
}

@media (max-width: 52.5rem) {
  .nav-links,
  .nav-tools {
    display: none;
  }

  .nav-menu-button {
    display: block;
  }

  .nav-sheet {
    position: absolute;
    top: calc(var(--nav-h) + .5rem);
    left: 50%;
    display: block;
    width: min(100% - 1.5rem, 30rem);
    padding: 1rem;
    border-radius: 1.75rem;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -.5rem) scale(.98);
    transform-origin: top center;
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-spring), visibility 0s linear var(--t-med);
    --glass-fill-top: rgba(40, 40, 38, .86);
    --glass-fill-bottom: rgba(22, 22, 21, .84);
  }

  .nav-tone-light .nav-sheet {
    --glass-fill-top: rgba(253, 252, 249, .92);
    --glass-fill-bottom: rgba(243, 240, 234, .9);
  }

  .nav-sheet.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-spring), visibility 0s;
  }

  .nav-sheet ul {
    list-style: none;
  }

  .nav-sheet li + li {
    border-top: 1px solid color-mix(in srgb, var(--glass-label) 10%, transparent);
  }

  .nav-sheet a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0 .5rem;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--glass-label);
  }

  .nav-sheet a:hover {
    text-decoration: none;
  }

  .nav-sheet__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    padding: .75rem .5rem .25rem;
    border-top: 1px solid color-mix(in srgb, var(--glass-label) 10%, transparent);
  }

  .nav-sheet .lang-switch a {
    min-height: 2.5rem;
    min-width: 3rem;
    font-size: .875rem;
  }

  .nav-sheet .nav-shop {
    display: inline-flex;
    align-items: center;
    font-size: .9375rem;
  }
}

/* ------------------------------------------------------------------ Barre produit (local nav) */

.localnav {
  position: sticky;
  z-index: 90;
  top: var(--nav-top);
  height: 0;
  margin-top: calc(var(--nav-h) + var(--nav-top) * 2);
  pointer-events: none;
}

.localnav__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100% - 1.5rem, 61.25rem);
  height: var(--nav-h);
  margin-inline: auto;
  padding: 0 .375rem 0 1.25rem;
  border-radius: var(--r-pill);
  pointer-events: auto;
}

.localnav__title {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--glass-label);
  white-space: nowrap;
}

.localnav__title:hover {
  text-decoration: none;
}

.localnav__links {
  display: flex;
  gap: .125rem;
  list-style: none;
}

.localnav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 .75rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--glass-label-2);
  border-radius: var(--r-pill);
}

.localnav__links a:hover {
  color: var(--glass-label);
  text-decoration: none;
}

.localnav__links a[aria-current] {
  color: var(--glass-label);
  background: color-mix(in srgb, var(--glass-label) 12%, transparent);
}

.localnav__cta {
  min-height: 2.25rem;
  padding: .375rem .9375rem;
  font-size: .8125rem;
}

@media (max-width: 52.5rem) {
  .localnav__links {
    display: none;
  }
}

/* ------------------------------------------------------------------ Héros */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--nav-top) * 2 + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  text-align: center;
  color: var(--label);
  background: var(--surface);
}

.has-localnav .hero {
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
}

/* Héros à rendu produit : une scène de studio. Lumière d'ambiance en haut, faisceau doux,
   grain fin, et le plugin en premier écran. */
.hero--stage {
  padding-top: calc(var(--nav-h) + var(--nav-top) * 2 + clamp(2.25rem, 5vw, 4rem));
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(243, 240, 234, .075), transparent 70%),
    radial-gradient(62% 46% at 50% 78%, rgba(214, 90, 54, .2), transparent 72%),
    radial-gradient(38% 40% at 6% 42%, rgba(120, 148, 134, .09), transparent 70%),
    linear-gradient(180deg, #0b0b0a 0%, #111110 100%);
}

.has-localnav .hero--stage {
  padding-top: clamp(3rem, 6vw, 4.75rem);
}

.hero--stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 35%;
  background: conic-gradient(from 0deg at 50% -4%, transparent 0deg 161deg, rgba(243, 240, 234, .055) 171deg, rgba(243, 240, 234, .08) 180deg, rgba(243, 240, 234, .055) 189deg, transparent 199deg 360deg);
  filter: blur(22px);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  pointer-events: none;
}

.hero--stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Titre métallique : Porcelain qui se patine vers Stone (8,5:1 au plus sombre). */
.hero--stage .display-hero {
  padding-bottom: .06em;
  color: var(--porcelain);
  background: linear-gradient(180deg, #ffffff 0%, #f3f0ea 42%, #c4bbae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero--stage .display-hero + .lead {
  margin-top: 1.125rem;
}

/* Titre sur une ligne dès que la largeur le permet, pour laisser le plugin entrer dans le premier écran. */
.hero--stage .hero__copy {
  width: min(100% - var(--gutter) * 2, var(--w-wide));
}

.hero--stage .display-hero {
  font-size: clamp(3rem, 6.2vw + .25rem, 6rem);
}

/* Annonce de la première sortie, en verre (c'est un lien). */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
  margin-bottom: 1.75rem;
  padding: .3125rem 1.125rem .3125rem .3125rem;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--glass-label);
  border-radius: var(--r-pill);
  transition: transform var(--t-fast) var(--ease-out);
}

.hero-pill:hover {
  text-decoration: none;
}

@media (max-width: 30rem) {
  .hero-pill {
    gap: .625rem;
    font-size: .875rem;
  }

  .hero-pill__more {
    display: none;
  }
}

.hero-pill:active {
  transform: scale(.98);
}

.hero-pill::after {
  content: "";
  width: .45em;
  height: .45em;
  margin-left: -.125rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease-out);
}

.hero-pill:hover::after {
  transform: translateX(.15em) rotate(45deg);
}

.hero-pill__tag {
  flex: none;
  white-space: nowrap;
  padding: .375rem .75rem;
  font-size: .8125rem;
  color: var(--obsidian);
  background: var(--oxide);
  border-radius: var(--r-pill);
}

.hero__copy {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, var(--w-content));
  margin-inline: auto;
}

/* Pages secondaires : héros sans rendu, phrase seule (À propos). */
.hero--statement {
  padding-bottom: clamp(4rem, 9vw, 8rem);
}

.display-hero__muted {
  color: var(--label-3);
}

.hero__topics {
  position: relative;
  z-index: 2;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: left;
}

.hero__topics-more {
  margin-top: 1.75rem;
  text-align: center;
}

.hero__copy .lead {
  max-width: 38rem;
  margin: 1.5rem auto 0;
}

/* Scène produit : le plugin, présenté comme un objet, dans la lumière Oxyde de son bouton AUTO MASTER. */
.product-stage {
  --bezel: clamp(.3125rem, .7vw, .625rem);
  --shot-radius: clamp(.875rem, 1.6vw, 1.5rem);
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, 76rem);
  margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
}

/* Halo : toujours allumé, il déborde du rendu pour en détacher la silhouette. */
.product-stage::before {
  content: "";
  position: absolute;
  inset: -14% -10% -16%;
  z-index: -1;
  background:
    radial-gradient(46% 44% at 50% 50%, rgba(214, 90, 54, .55), transparent 72%),
    radial-gradient(26% 30% at 14% 32%, rgba(120, 148, 134, .22), transparent 70%),
    radial-gradient(22% 26% at 88% 28%, rgba(243, 240, 234, .08), transparent 70%);
  filter: blur(56px);
  pointer-events: none;
}

/* Finition Porcelain : la lumière devient blanche et chaude. */
.product-stage::after {
  content: "";
  position: absolute;
  inset: -12% -8% -30%;
  z-index: -1;
  background:
    radial-gradient(50% 44% at 50% 60%, rgba(243, 240, 234, .26), transparent 70%),
    radial-gradient(28% 28% at 80% 28%, rgba(214, 90, 54, .2), transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
  pointer-events: none;
}

.product-stage.is-porcelain::after {
  opacity: 1;
}

/* Cadre : une fine lunette sombre, éclairée par le haut, posée sur une lueur Oxyde. */
.product-shot {
  position: relative;
  overflow: hidden;
  padding: var(--bezel);
  border-radius: var(--shot-radius);
  background: linear-gradient(180deg, #3b3a37 0%, #232220 9%, #161615 55%, #121211 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 0 0 1px rgba(0, 0, 0, .55),
    0 60px 120px -30px rgba(0, 0, 0, .85),
    0 28px 90px -26px rgba(214, 90, 54, .45);
}

.product-shot img {
  width: 100%;
  border-radius: calc(var(--shot-radius) - var(--bezel));
}

/* Reflet : une lumière passe une fois sur l'écran à l'arrivée. */
.product-shot::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .11) 47%, rgba(255, 255, 255, .03) 55%, transparent 63%) 130% 0 / 260% 100% no-repeat;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js .product-shot::after {
    animation: shot-shine 2.8s var(--ease-out) .4s both;
  }
}

@keyframes shot-shine {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}

.product-shot__layer {
  position: absolute;
  inset: var(--bezel);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}

.product-shot__layer.is-active {
  opacity: 1;
}

.product-stage__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 1.25rem;
  font-size: .875rem;
  color: var(--label-3);
}

.product-stage__caption--center {
  justify-content: center;
  align-items: center;
  gap: .5rem 1.25rem;
  margin-top: 1.75rem;
  font-size: 1.0625rem;
}

/* Le rendu s'élève et s'éclaire à l'arrivée (défilement, navigateurs compatibles). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .product-stage .product-shot {
      animation: stage-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
  }
}

/* Le rendu reste pleinement visible : seule son inclinaison change. */
@keyframes stage-rise {
  from {
    transform: perspective(2200px) rotateX(16deg) scale(.95);
  }
  to {
    transform: none;
  }
}

/* Sélecteur de finition (thèmes du plugin), façon pastilles de couleur. */
.finish-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-top: 2rem;
}

.finish-picker__label {
  font-size: .875rem;
  color: var(--label-2);
}

.finish-picker__options {
  display: inline-flex;
  gap: .25rem;
  padding: .3125rem;
  border-radius: var(--r-pill);
}

.finish-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
  padding: 0 1rem 0 .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--glass-label-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.finish-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.finish-option:has(input:checked) {
  color: var(--glass-label);
  background: color-mix(in srgb, var(--glass-label) 14%, transparent);
}

.finish-option:has(input:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* La finition choisie se lit dans le formulaire : aucun script nécessaire. */
.product-stage:has(input[value="porcelain"]:checked) .product-shot__layer {
  opacity: 1;
}

.product-stage:has(input[value="porcelain"]:checked)::after {
  opacity: 1;
}

.finish-option__swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .4);
}

.finish-option__swatch--obsidian {
  background: radial-gradient(circle at 35% 30%, #3a3a37, #111110 65%);
}

.finish-option__swatch--porcelain {
  background: radial-gradient(circle at 35% 30%, #ffffff, #e2ddd3 70%);
}

/* Bandeau de mesures sous le héros. */
.readouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100% - var(--gutter) * 2, var(--w-content));
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  text-align: center;
}

.readout {
  padding: 0 1rem;
}

.readout + .readout {
  border-left: 1px solid var(--separator);
}

.readout__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw + .6rem, 2.75rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--label);
}

.readout__value small {
  margin-left: .2em;
  font-family: var(--font-text);
  font-size: .4em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--label-2);
}

.readout__label {
  display: block;
  margin-top: .625rem;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--label-2);
}

@media (max-width: 46rem) {
  .readouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .readout:nth-child(3) {
    border-left: 0;
  }
}

/* Sélecteur de familles sous le héros (comme la rangée de produits d'Apple). */
.chapternav {
  position: relative;
  z-index: 2;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.chapternav ul {
  display: flex;
  justify-content: center;
  gap: clamp(.25rem, 3vw, 2.5rem);
  overflow-x: auto;
  padding: 0 var(--gutter);
  list-style: none;
  scrollbar-width: none;
}

.chapternav ul::-webkit-scrollbar {
  display: none;
}

.chapternav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  min-width: 6.75rem;
  padding: .875rem .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--label);
  border-radius: var(--r-card);
  transition: background var(--t-fast) var(--ease-out);
}

.chapternav__item:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--label) 6%, transparent);
}

.chapternav svg {
  width: 3rem;
  height: 3rem;
  margin-bottom: .375rem;
  fill: none;
  stroke: var(--label-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chapternav svg .chapternav__accent {
  stroke: var(--oxide);
}

.chapternav__note {
  font-size: .75rem;
  color: var(--link);
}

.chapternav__note--muted {
  color: var(--label-3);
}

/* ------------------------------------------------------------------ Tuiles (bento) */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 3;
  min-height: 22rem;
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--label);
  background: var(--surface-raised);
  border-radius: var(--r-tile);
  box-shadow: var(--tile-shadow);
}

.tile--wide {
  grid-column: span 6;
}

.tile--third {
  grid-column: span 2;
}

.tile--4 {
  grid-column: span 4;
}

.tile--tall {
  grid-row: span 2;
}

.tile--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tile .eyebrow {
  font-size: 1.0625rem;
}

.tile p:not(.eyebrow) {
  margin-top: .875rem;
  color: var(--label-2);
}

.tile .link-chevron {
  margin-top: auto;
  padding-top: 1.5rem;
}

.tile .actions .link-chevron {
  margin-top: 0;
  padding-top: 0;
}

.tile__media {
  margin: clamp(1.5rem, 3vw, 2.5rem) calc(clamp(1.75rem, 3vw, 2.75rem) * -1) calc(clamp(1.75rem, 3vw, 2.75rem) * -1);
  margin-top: auto;
}

.tile__media img {
  width: 100%;
}

.tile__media--inset {
  margin: auto 0 0;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.tile__media--inset img {
  border-radius: var(--r-image);
  box-shadow: 0 0 0 1px rgba(243, 240, 234, .08), 0 20px 50px rgba(0, 0, 0, .35);
}

.tile__figure {
  display: block;
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: .95;
  font-weight: 600;
  letter-spacing: -.045em;
}

.tile__figure small {
  margin-left: .12em;
  font-family: var(--font-text);
  font-size: .28em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--label-2);
}

/* Tuile vedette : un produit présenté en grand, texte centré au-dessus de son rendu. */
.tile--feature {
  align-items: center;
  text-align: center;
}

.tile--feature__copy {
  max-width: 46rem;
}

.tile--feature .actions {
  margin-top: 1.75rem;
}

.tile--feature .tile__media--inset {
  width: 100%;
  max-width: 68rem;
}

.tile--feature__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--separator);
}

.tile--feature__meta dt {
  font-size: .875rem;
  color: var(--label-2);
}

.tile--feature__meta dd {
  margin-top: .25rem;
  font-weight: 500;
}

@media (max-width: 46rem) {
  .tile--feature__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile--accent-glow::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(214, 90, 54, .32), transparent 70%);
  pointer-events: none;
}

.tile--link {
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.tile--link:hover {
  text-decoration: none;
  transform: translateY(-3px);
}

.tile--link .link-chevron::after {
  transition: transform var(--t-fast) var(--ease-out);
}

.tile--link:hover .link-chevron::after {
  transform: translateX(.15em) rotate(45deg) scale(.82);
}

@media (max-width: 68rem) {
  .tile--third {
    grid-column: span 3;
  }

  .tile--4 {
    grid-column: span 6;
  }
}

@media (max-width: 46rem) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile,
  .tile--third,
  .tile--4,
  .tile--wide {
    grid-column: auto;
    min-height: 0;
  }

  .tile--tall {
    grid-row: auto;
  }
}

/* ------------------------------------------------------------------ Contrôle segmenté (verre) */

.segmented {
  display: inline-flex;
  gap: .25rem;
  padding: .3125rem;
  border-radius: var(--r-pill);
}

.segmented[hidden] {
  display: none;
}

.segmented button {
  min-height: 2.5rem;
  padding: 0 1.125rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--glass-label-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.segmented button:hover {
  color: var(--glass-label);
}

.segmented button[aria-selected="true"] {
  color: var(--obsidian);
  background: var(--porcelain);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.glass--light .segmented button[aria-selected="true"],
.segmented.glass--light button[aria-selected="true"] {
  color: var(--porcelain);
  background: var(--obsidian);
}

/* ------------------------------------------------------------------ Histoire défilante (Auto Master) */

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.story__steps {
  display: flex;
  flex-direction: column;
}

.story__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70vh;
  padding-block: 2rem;
}

/* Étape inactive : le texte passe au gris tertiaire (6,3:1), jamais en transparence. */
.story__step .headline,
.story__step .lead {
  transition: color var(--t-med) var(--ease-out);
}

.js .story__step:not(.is-active) .headline,
.js .story__step:not(.is-active) .lead {
  color: var(--label-3);
}

.story__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--label);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--separator);
}

.story__step.is-active .story__index {
  color: var(--obsidian);
  background: var(--oxide);
  box-shadow: none;
}

.story__step .lead {
  margin-top: 1rem;
}

.story__media {
  position: sticky;
  top: calc(50vh - min(22vw, 15rem));
  padding-block: 2rem;
}

.story__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 992 / 460;
  border-radius: var(--r-card);
  background: #0b0b0a;
  box-shadow: 0 0 0 1px rgba(243, 240, 234, .1), 0 40px 90px rgba(0, 0, 0, .55);
}

.story__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

.story__frame img.is-active {
  opacity: 1;
  transform: none;
}

.story__progress {
  display: flex;
  gap: .375rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.story__progress span {
  width: 1.75rem;
  height: .25rem;
  border-radius: var(--r-pill);
  background: var(--separator);
  transition: background var(--t-med) var(--ease-out), width var(--t-med) var(--ease-spring);
}

.story__progress span.is-active {
  width: 2.75rem;
  background: var(--oxide);
}

@media (max-width: 52.5rem) {
  .story {
    grid-template-columns: minmax(0, 1fr);
  }

  .story__media {
    position: sticky;
    z-index: 2;
    top: calc(var(--nav-h) + var(--nav-top) * 2);
    order: -1;
    padding-block: 1rem;
    background: var(--surface);
  }

  .story__step {
    min-height: 55vh;
  }
}

/* Cibles Auto Master */
.targets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--r-tile);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
}

.target-panel[hidden] {
  display: none;
}

.target-panel .target-panel__value {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -.05em;
  color: var(--label);
}

.target-panel__value small {
  margin-left: .1em;
  font-family: var(--font-text);
  font-size: .2em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--label-2);
}

.target-panel__name {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.target-panel p {
  margin-top: .5rem;
  color: var(--label-2);
}

.target-meter {
  position: relative;
  height: .375rem;
  margin-top: 2rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(120, 148, 134, .25), rgba(214, 90, 54, .35));
}

/* Position sur l'échelle −20 … −6 LUFS (pas de style en ligne : CSP). */
.target-meter__marker--16 { left: 28.57%; }
.target-meter__marker--14 { left: 42.86%; }
.target-meter__marker--11 { left: 64.29%; }
.target-meter__marker--9 { left: 78.57%; }

.target-meter__marker {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--porcelain);
  box-shadow: 0 0 0 4px rgba(214, 90, 54, .9), 0 4px 12px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%);
}

.target-meter__scale {
  display: flex;
  justify-content: space-between;
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--label-3);
}

.targets__intro .lead {
  margin-top: 1rem;
}

.targets__intro .segmented {
  margin-top: 1.75rem;
}

@media (max-width: 52.5rem) {
  .targets {
    grid-template-columns: minmax(0, 1fr);
  }

  .targets .segmented {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 1.5rem;
  }
}

@media (max-width: 30rem) {
  .targets .segmented button {
    padding: 0 .6875rem;
    font-size: .875rem;
  }
}

/* ------------------------------------------------------------------ Galerie horizontale */

.gallery {
  position: relative;
}

.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 18.5rem);
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  overflow-x: auto;
  padding: .5rem max(var(--gutter), calc((100vw - var(--w-wide)) / 2)) 2rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--w-wide)) / 2));
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.module-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
}

.module-card__media {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1.75rem 1.5rem 0;
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(214, 90, 54, .18), transparent 70%),
    var(--surface-sunken);
}

.module-card__media img {
  width: 12.625rem;                 /* largeur réelle d'une carte du plugin */
  border-radius: .5rem .5rem 0 0;
  box-shadow: 0 0 0 1px rgba(243, 240, 234, .1), 0 -12px 40px rgba(0, 0, 0, .35);
}

.module-card__body {
  padding: 1.5rem 1.625rem 1.75rem;
}

.module-card__index {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--link);
}

.module-card h3 {
  margin-top: .375rem;
}

.module-card p {
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.47;
  color: var(--label-2);
}

.gallery__paddles {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  width: min(100% - var(--gutter) * 2, var(--w-wide));
  margin-inline: auto;
}

.paddle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.paddle:active {
  transform: scale(.94);
}

.paddle:disabled {
  opacity: .35;
  cursor: default;
}

.paddle svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ Figures et plans */

.figure {
  overflow: hidden;
  border-radius: var(--r-card);
  background: #0b0b0a;
  box-shadow: 0 0 0 1px rgba(243, 240, 234, .1), 0 30px 80px rgba(0, 0, 0, .45);
}

.theme-light .figure {
  box-shadow: 0 0 0 1px rgba(17, 17, 16, .08), 0 30px 80px rgba(17, 17, 16, .18);
}

.figure img {
  width: 100%;
}

.figure-caption {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--label-3);
  text-align: center;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.split--media-wide {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Texte et rendu étroit dans une tuile (panneau du plugin). */
.split--tile {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.lead + .lead {
  margin-top: 1.25rem;
}

.split .feature-list,
.split .chips {
  margin-top: 2rem;
}

.figure--narrow {
  justify-self: end;
  width: 100%;
  max-width: 15rem;
}

.metering-figure {
  justify-self: center;
  width: 100%;
  max-width: 24rem;
}

.chain-demo {
  margin-top: clamp(4rem, 8vw, 7rem);
}

.chain-demo__copy {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 52.5rem) {
  .chain-demo__copy {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 52.5rem) {
  .split,
  .split--media-wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Puces de profils et de caractéristiques */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
}

.chips li {
  padding: .375rem .875rem;
  font-size: .875rem;
  color: var(--label-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--separator);
}

.chips li.is-active {
  color: var(--obsidian);
  background: var(--porcelain);
  box-shadow: none;
}

.theme-light .chips li.is-active {
  color: var(--porcelain);
  background: var(--obsidian);
}

/* Liste de mesures (spécifications rapides) */
.feature-list {
  display: grid;
  gap: 0;
  list-style: none;
}

.feature-list li {
  display: grid;
  grid-template-columns: minmax(7rem, 2fr) minmax(0, 5fr);
  gap: 1.25rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--separator);
}

.feature-list li:last-child {
  border-bottom: 1px solid var(--separator);
}

.feature-list strong {
  font-weight: 500;
  color: var(--label);
}

.feature-list span {
  color: var(--label-2);
}

.signal {
  color: var(--signal);
}

/* ------------------------------------------------------------------ Spécifications techniques */

.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.specs__row {
  display: grid;
  grid-template-columns: minmax(10rem, 3fr) minmax(0, 7fr);
  gap: 1.5rem 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--separator);
}

.specs__row:last-child {
  border-bottom: 1px solid var(--separator);
}

.specs__row dt {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -.018em;
}

.specs__row dd {
  color: var(--label);
}

.specs__row dd small {
  display: block;
  margin-top: .375rem;
  font-size: .9375rem;
  color: var(--label-2);
}

@media (max-width: 46rem) {
  .specs__row {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    padding: 1.5rem 0;
  }
}

/* ------------------------------------------------------------------ Manifeste */

.manifesto {
  list-style: none;
  border-top: 1px solid var(--separator);
}

.manifesto__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: .75rem clamp(2rem, 5vw, 5rem);
  align-items: baseline;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--separator);
}

.manifesto__item p {
  margin-top: 0;
  font-size: clamp(1.1875rem, .6vw + 1rem, 1.4375rem);
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--label-2);
}

@media (max-width: 46rem) {
  .manifesto__item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ Questions fréquentes */

.faq {
  border-top: 1px solid var(--separator);
}

.faq details {
  border-bottom: 1px solid var(--separator);
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 1rem 3rem 1rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, .6vw + 1rem, 1.4375rem);
  font-weight: 600;
  letter-spacing: -.018em;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: .375rem;
  top: 50%;
  width: .9375rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease-spring);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq__answer {
  max-width: 44rem;
  padding: 0 0 1.75rem;
  color: var(--label-2);
}

.faq__answer p + p {
  margin-top: .75rem;
}

/* ------------------------------------------------------------------ Historique des versions */

.changelog-title {
  margin: clamp(4.5rem, 9vw, 7rem) 0 1.75rem;
}

.changelog {
  display: grid;
  gap: 1rem;
}

.changelog__entry {
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) minmax(0, 7fr);
  gap: 1rem 2.5rem;
  padding: 1.75rem clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
}

.changelog__version {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.03em;
}

.changelog__version small {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--label-2);
}

.changelog ul {
  display: grid;
  gap: .5rem;
  padding-left: 1.125rem;
  color: var(--label-2);
}

@media (max-width: 46rem) {
  .changelog__entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ Catalogue */

.family-art {
  width: 100%;
  height: auto;
  margin-top: auto;
  padding-top: 2rem;
}

.family-art .stroke-1 { stroke: var(--label-3); }
.family-art .stroke-2 { stroke: var(--label-2); }
.family-art .stroke-accent { stroke: var(--oxide); }
.family-art .fill-accent { fill: var(--oxide); }

.family-art + .link-chevron {
  margin-top: 0;
  padding-top: 1.25rem;
}

.badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.25rem;
  padding: .3125rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--label-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--separator);
}

.badge--live {
  color: var(--obsidian);
  background: var(--oxide);
  box-shadow: none;
}

/* ------------------------------------------------------------------ Bandeau photo */

.photo-band {
  position: relative;
  min-height: clamp(30rem, 70vw, 48rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #f3f0ea;
  background: #0b0b0a;
}

.photo-band picture,
.photo-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 10, .1) 30%, rgba(11, 11, 10, .88) 100%);
}

.photo-band__copy {
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, var(--w-wide));
  margin: 0 auto;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.photo-band__copy .lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: #d9d4cc;
}

/* ------------------------------------------------------------------ Principes */

.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.principle__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.5rem;
  stroke: var(--label);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principle__icon .accent {
  stroke: var(--oxide);
}

.principle p {
  margin-top: .75rem;
  color: var(--label-2);
}

@media (max-width: 52.5rem) {
  .principles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Nuancier de la charte (À propos) */
.swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  list-style: none;
}

.swatch {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
}

.swatch__chip {
  aspect-ratio: 1;
}

.swatch__chip--obsidian { background: #111110; box-shadow: inset 0 0 0 1px rgba(243, 240, 234, .12); }
.swatch__chip--porcelain { background: #f3f0ea; }
.swatch__chip--oxide { background: #d65a36; }
.swatch__chip--stone { background: #b7ada0; }
.swatch__chip--taupe { background: #827c70; }
.swatch__chip--sage { background: #789486; }

.swatch__body {
  padding: 1rem 1.125rem 1.25rem;
}

.swatch__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.swatch__body span {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--label-3);
}

.swatch__body p {
  margin-top: .625rem;
  font-size: .875rem;
  line-height: 1.43;
  color: var(--label-2);
}

@media (max-width: 68rem) {
  .swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ Support */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  list-style: none;
}

.topic {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 11rem;
  padding: 1.5rem 1.625rem;
  color: var(--label);
  border-radius: var(--r-card);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
  transition: transform var(--t-med) var(--ease-out);
}

.topic:hover {
  text-decoration: none;
  transform: translateY(-3px);
}

.topic svg {
  width: 2rem;
  height: 2rem;
  margin-bottom: auto;
  stroke: var(--link);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topic strong {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.topic span {
  margin-top: .25rem;
  font-size: .9375rem;
  color: var(--label-2);
}

@media (max-width: 68rem) {
  .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .topic-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.steps {
  display: grid;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  list-style: none;
  counter-reset: step;
}

.steps--row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
}

.step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--obsidian);
  background: var(--oxide);
  border-radius: 50%;
}

.step p {
  margin-top: .625rem;
  color: var(--label-2);
}

@media (max-width: 52.5rem) {
  .steps--row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cinq étapes : trois puis deux, en tuiles. */
.steps--five {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.steps--five .step {
  grid-column: span 2;
}

.steps--five .step:nth-child(n + 4) {
  grid-column: span 3;
}

@media (max-width: 52.5rem) {
  .steps--five {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps--five .step,
  .steps--five .step:nth-child(n + 4) {
    grid-column: auto;
  }
}

.note {
  max-width: 40rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-size: .9375rem;
  text-align: center;
  color: var(--label-2);
}

.chips--spaced {
  margin-top: 1.75rem;
}

.split--top {
  align-items: start;
}

.install-details {
  margin-top: clamp(4rem, 8vw, 6rem);
}

.install-details .headline {
  margin-bottom: 1.5rem;
}

.hosts-card {
  min-height: 0;
}

.hosts-card p + p {
  margin-top: .875rem;
}

.host-title {
  margin-top: 2rem;
}

kbd {
  padding: .0625rem .375rem;
  font-family: var(--font-mono);
  font-size: .8125em;
  border-radius: .3125rem;
  box-shadow: inset 0 0 0 1px var(--separator), 0 1px 0 var(--separator);
}

.paths {
  display: grid;
  list-style: none;
  border-top: 1px solid var(--separator);
}

.paths li {
  display: grid;
  grid-template-columns: minmax(9rem, 2fr) minmax(0, 6fr);
  gap: .5rem 2rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--separator);
}

.paths strong {
  font-weight: 500;
}

.code {
  font-family: var(--font-mono);
  font-size: .875em;
  overflow-wrap: anywhere;
  color: var(--label);
}

.code-chip {
  padding: .1875rem .5rem;
  font-family: var(--font-mono);
  font-size: .875em;
  overflow-wrap: anywhere;
  border-radius: .375rem;
  background: var(--surface-sunken);
}

@media (max-width: 46rem) {
  .paths li {
    grid-template-columns: minmax(0, 1fr);
  }
}

.copy-button {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2rem;
  margin-left: .5rem;
  padding: 0 .75rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--label);
  vertical-align: middle;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--separator);
  cursor: pointer;
}

.copy-button[hidden] {
  display: none;
}

.copy-button:hover {
  background: color-mix(in srgb, var(--label) 7%, transparent);
}

.host-steps {
  display: grid;
  gap: .875rem;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  color: var(--label-2);
}

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--r-tile);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
}

.contact-card__mail {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2vw + 1rem, 1.875rem);
  font-weight: 600;
  letter-spacing: -.02em;
}

.contact-card .title + ul {
  margin-top: 1rem;
}

.contact-card ul {
  display: grid;
  gap: .625rem;
  padding-left: 1.125rem;
  color: var(--label-2);
}

@media (max-width: 52.5rem) {
  .contact-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ Documents (légal) */

/* En-tête des pages de document, aligné sur la grille du document. */
.hero--doc {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: left;
}

.hero--doc .container,
.container.doc {
  width: min(100% - var(--gutter) * 2, 64.25rem);
}

.doc {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, var(--w-text));
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 6rem);
}

.doc__toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--nav-top) * 3);
  align-self: start;
}

.doc__toc p {
  font-size: .875rem;
  font-weight: 500;
  color: var(--label-2);
}

.doc__toc ol {
  display: grid;
  gap: .125rem;
  margin-top: .75rem;
  list-style: none;
}

.doc__toc a {
  display: block;
  padding: .375rem 0;
  font-size: .9375rem;
  color: var(--label-2);
}

.doc__toc a:hover {
  color: var(--label);
}

.doc__body h2 {
  margin-top: 3.5rem;
  scroll-margin-top: 6rem;
}

.doc__body > h2:first-child,
.doc__summary h2 {
  margin-top: 0;
}

.doc__summary {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--surface-raised);
  box-shadow: var(--tile-shadow);
}

.doc__body p,
.doc__body ul,
.doc__body dl {
  margin-top: 1rem;
  color: var(--label-2);
}

.doc__body ul {
  display: grid;
  gap: .5rem;
  padding-left: 1.25rem;
}

.doc__body dl {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
  border-top: 1px solid var(--separator);
}

.doc__body dt,
.doc__body dd {
  padding: .875rem 0;
  border-bottom: 1px solid var(--separator);
}

.doc__body dt {
  font-weight: 500;
  color: var(--label);
}

.doc__note--top {
  margin-top: 0 !important;
}

.doc__note {
  margin-top: 2rem;
  padding: 1.125rem 1.375rem;
  font-size: .9375rem;
  color: var(--label-2);
  border-radius: var(--r-card);
  background: var(--surface-raised);
}

.doc__updated {
  margin-top: 1rem;
  font-size: .9375rem;
  color: var(--label-3);
}

@media (max-width: 52.5rem) {
  .doc {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc__toc {
    position: static;
  }

  .doc__body dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc__body dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------------ Pied de page */

.site-footer {
  padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--label-2);
  background: var(--surface);
  border-top: 1px solid var(--separator);
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-bottom: 2.5rem;
}

.footer-brand__mark {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.045em;
  color: var(--label);
}

.footer-brand__mark img {
  width: 1.75rem;
  height: 1.75rem;
}

.footer-brand__mark span span {
  color: var(--oxide);
}

.footer-brand p {
  max-width: 26rem;
  font-size: .9375rem;
  color: var(--label-2);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--separator);
}

.footer-grid h2 {
  margin-bottom: .75rem;
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--label);
}

.footer-grid ul {
  display: grid;
  gap: .5rem;
  list-style: none;
}

.footer-grid a {
  color: var(--label-2);
}

.footer-grid a:hover {
  color: var(--label);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--separator);
}

.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
}

.footer-legal a {
  color: var(--label-2);
}

.footer-legal a:hover {
  color: var(--label);
}

@media (max-width: 46rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ Conclusion de page */

.closing {
  overflow: hidden;
}

.closing::before {
  content: "";
  position: absolute;
  inset: 40% -10% -40%;
  background: radial-gradient(45% 50% at 50% 100%, rgba(214, 90, 54, .3), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.closing > * {
  position: relative;
}

.closing__mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 2rem;
}

.closing .lead {
  max-width: 36rem;
  margin: 1.25rem auto 0;
}

/* ------------------------------------------------------------------ Page 404 */

.notfound {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 8rem var(--gutter) 4rem;
  text-align: center;
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: .9375rem;
  color: var(--label-3);
}

.notfound .display-hero {
  margin-top: 1rem;
}

.notfound .lead {
  max-width: 32rem;
  margin: 1.25rem auto 0;
}

.notfound__alt {
  margin-top: 2.5rem;
  font-size: .9375rem;
  color: var(--label-3);
}

/* ------------------------------------------------------------------ Apparition au défilement */

.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js .reveal--delay-1 { transition-delay: 80ms; }
.js .reveal--delay-2 { transition-delay: 160ms; }
.js .reveal--delay-3 { transition-delay: 240ms; }

/* ------------------------------------------------------------------ Préférences système */

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

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .story__frame img {
    transform: none;
  }
}

/* Transparence réduite : surfaces opaques, plus de flou. */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #1b1b19;
  }

  .glass--light,
  .nav-tone-light .glass {
    background: #fbfaf7;
  }

  .glass::before {
    display: none;
  }
}

/* Contraste renforcé : bords nets, remplissages pleins. */
@media (prefers-contrast: more) {
  .theme-light,
  :root {
    --label-2: #3d3933;
    --label-3: #4f4a42;
    --separator: rgba(17, 17, 16, .4);
  }

  .theme-dark {
    --label-2: #ddd6cb;
    --label-3: #c9c1b5;
    --separator: rgba(243, 240, 234, .45);
  }

  .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #111110;
    border-color: rgba(243, 240, 234, .6);
  }

  .glass--light,
  .nav-tone-light .glass {
    background: #ffffff;
    border-color: rgba(17, 17, 16, .6);
  }

  .tile,
  .module-card,
  .step,
  .topic {
    box-shadow: inset 0 0 0 1px var(--separator);
  }
}

@media (prefers-contrast: more) {
  .hero--stage .display-hero {
    background: none;
    -webkit-text-fill-color: var(--porcelain);
  }

  .hero--stage::before,
  .hero--stage::after {
    display: none;
  }
}

@media (forced-colors: active) {
  .glass,
  .tile,
  .button {
    border: 1px solid CanvasText;
  }

  .hero--stage .display-hero {
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
}

@media print {
  .site-nav,
  .localnav,
  .gallery__paddles,
  .finish-picker {
    display: none;
  }

  .section,
  .hero {
    padding-block: 2rem;
  }
}