/* ==========================================================================
   TERR1 — feuille de styles
   Construite sur les tokens de « Charte Graphique TERR1 » (V1 — 09.2026).
   Règles de marque appliquées :
   fond blanc dominant, angles droits, jaune en traits fins uniquement,
   aucun dégradé ni ombre douce, transitions sèches de 150 à 300 ms.
   ========================================================================== */

/* --- Polices ------------------------------------------------------------- */
/* Inter et IBM Plex Mono sont sous licence OFL et servies depuis le site.
   Arial Black est appelée depuis le système : elle est présente sur macOS,
   Windows et Android, et sa licence interdit de la redistribuer ici. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Couleurs primaires */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-yellow: #FFD300;

  /* Couleurs d'accent */
  --color-blue: #6A42FF;
  --color-red: #EB1E1E;

  /* Gris */
  --color-gray-50: #F9F9F9;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  /* Sémantique */
  --text-primary: var(--color-black);
  --text-secondary: var(--color-gray-700);
  --text-tertiary: var(--color-gray-600);
  --text-inverse: var(--color-white);

  --surface-primary: var(--color-white);
  --surface-secondary: var(--color-gray-100);
  --surface-inverse: var(--color-black);

  --accent-primary: var(--color-yellow);
  --accent-secondary: var(--color-blue);
  --accent-alert: var(--color-red);

  --border-color: var(--color-black);
  --border-color-light: var(--color-gray-300);

  /* Typographie */
  --font-display: 'Arial Black', 'Arial Bold', 'Helvetica Neue Black', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 56px;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Espacements, base 8 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Traits */
  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 4px;

  /* Transitions sèches */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 350ms ease-out;

  /* Mise en page */
  --page-max: 1400px;
  --gutter: clamp(20px, 5vw, 64px);
  --grid-size: 40px;
}

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

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

html {
  scroll-padding-top: 96px;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background: var(--surface-primary);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--surface-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

p { line-height: var(--line-height-normal); }

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

/* L'attribut « hidden » cache toujours, même sur un élément auquel le CSS
   impose un affichage (grille, flex). */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

::selection { background: var(--color-yellow); color: var(--color-black); }

:focus-visible {
  outline: var(--border-width-base) solid var(--color-blue);
  outline-offset: 3px;
}

/* --- Utilitaires --------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}
.skip-link:focus { left: 0; }

.nowrap { white-space: nowrap; }

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

/* Étiquette de section : numéro mono + filet jaune */
.sec-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  margin-bottom: var(--space-8);
}
.sec-label::after {
  content: "";
  flex: 1;
  height: var(--border-width-thin);
  background: var(--border-color-light);
}
.sec-label .rule {
  width: 24px;
  height: 3px;
  background: var(--color-yellow);
  flex: none;
}

/* Bloc sombre : le filet de section passe en clair */
.section--dark .sec-label { color: var(--color-gray-400); }
.section--dark .sec-label::after { background: rgba(255, 255, 255, 0.2); }

/* --- Boutons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  border: var(--border-width-base) solid var(--color-black);
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover { opacity: 0.85; }

.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
}

.btn--onDark {
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn--onDark.btn--primary {
  background: var(--color-white);
  color: var(--color-black);
}

.btn .arrow { font-family: var(--font-mono); }

/* --- Coins de cadre ------------------------------------------------------ */
/* Angles à 90°, jamais arrondis. Signe de cadrage journalistique. */

.crop { position: relative; }
.crop::before,
.crop::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.crop::before {
  top: -8px; left: -8px;
  border-top: var(--border-width-thick) solid var(--color-black);
  border-left: var(--border-width-thick) solid var(--color-black);
}
.crop::after {
  bottom: -8px; right: -8px;
  border-bottom: var(--border-width-thick) solid var(--color-yellow);
  border-right: var(--border-width-thick) solid var(--color-yellow);
}

/* --- En-tête ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: var(--border-width-thin) solid var(--border-color-light);
  transition: border-color var(--transition-fast);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--color-black);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 72px;
}

/* Wordmark : coin jaune obligatoire sur fond clair */
.wordmark {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xl);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-black);
  padding-right: var(--space-3);
}
.wordmark::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--color-yellow);
  border-right: 3px solid var(--color-yellow);
}
.wordmark--onDark { color: var(--color-white); }
.wordmark--lg { font-size: var(--font-size-3xl); }
.wordmark--lg::after { width: 14px; height: 14px; border-width: 4px; top: -6px; }

.nav { display: flex; align-items: center; gap: var(--space-6); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  padding-block: var(--space-2);
  border-bottom: var(--border-width-base) solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav__link:hover {
  color: var(--color-black);
  border-bottom-color: var(--color-yellow);
}

.nav__link[aria-current="page"] {
  color: var(--color-black);
  border-bottom-color: var(--color-yellow);
}

.nav__cta { padding: var(--space-3) var(--space-5); }

/* Le texte du bouton d'appel passe en jaune sur fond noir.
   Le sélecteur double l'emporte sur .nav__link et sur son survol,
   qui passerait sinon le texte en noir, donc invisible sur le noir. */
.nav__cta.btn--primary,
.nav__cta.btn--primary:hover { color: var(--color-yellow); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: var(--border-width-base) solid var(--color-black);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--color-black);
  transform: translateX(-50%);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after { top: 6px; left: 0; transform: none; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Ouverture ----------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--color-white);
  border-bottom: var(--border-width-thick) solid var(--color-black);
}

/* Grille de montage animée. Deux couches :
   une trame constante très discrète, et une trame révélée au curseur.
   Chaque section porte la sienne, mais toutes partagent la même horloge et
   se décalent de leur propre position dans la page : la trame se lit comme
   une seule grille continue du haut jusqu'au pied de page. */
.grid-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.grid-field__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid-field__layer--base { opacity: 0.18; color: var(--color-gray-400); }
.grid-field__layer--reveal {
  opacity: 0;
  color: var(--color-black);
  transition: opacity var(--transition-slow);
}
.grid-field[data-active="true"] .grid-field__layer--reveal { opacity: 1; }

/* Sur fond noir, la trame passe en trait blanc. */
.grid-field--onDark .grid-field__layer--base { opacity: 0.16; color: var(--color-gray-500); }
.grid-field--onDark .grid-field__layer--reveal { color: var(--color-white); }

/* Les sections deviennent le repère de leur trame,
   et leur contenu passe au-dessus. */
.hero,
.proof,
.section,
.site-footer { position: relative; overflow: hidden; }

.hero > .wrap,
.proof > .wrap,
.section > .wrap,
.site-footer > .wrap { position: relative; z-index: 1; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  min-height: min(88vh, 820px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  color: var(--text-tertiary);
}
.hero__eyebrow .rule { width: 32px; height: 3px; background: var(--color-yellow); flex: none; }

/* Rouleau de l'accroche : la fin de la phrase défile verticalement, avec un
   léger rebond à l'arrêt, comme une case de machine à sous. Le rouleau prend
   la largeur du mot le plus long, pour que la ligne ne bouge pas. */
.wordroll {
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--text-primary);
}
.wordroll__track {
  display: block;
  animation: wordroll-spin 10s cubic-bezier(0.65, -0.25, 0.3, 1.3) infinite;
}
.wordroll__track > span {
  display: block;
  height: 1.4em;
  line-height: 1.4em;
  white-space: nowrap;
}
/* Cinq cases : la dernière reprend la première, pour une boucle sans saut. */
@keyframes wordroll-spin {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-20%); }
  50%, 70%  { transform: translateY(-40%); }
  75%, 95%  { transform: translateY(-60%); }
  100%      { transform: translateY(-80%); }
}

.hero__title {
  font-size: clamp(40px, 7.2vw, 80px);
  /* Interligne desserré : le filet jaune sous « réel » descend sous la ligne de
     base et venait toucher l'accent du « à » de « déjà » sur la ligne suivante. */
  line-height: 1.06;
  margin-bottom: var(--space-8);
}
/* Le mot souligné d'un filet jaune, le texte reste noir.
   Le filet est exprimé en em : il reste proportionnellement fin à toutes
   les tailles, du mobile au grand écran. */
.hero__title .accent {
  position: relative;
  display: inline-block;
}
.hero__title .accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Le filet est calé juste sous la ligne de base plutôt qu'en dessous :
     « réel » n'a aucune lettre descendante, rien ne le gêne, et il cesse
     d'empiéter sur les accents de la ligne suivante. */
  bottom: -0.01em;
  height: 0.06em;
  background: var(--color-yellow);
}

.hero__lede {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: var(--space-10);
  border-left: var(--border-width-base) solid var(--color-yellow);
  padding-left: var(--space-5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* --- Emplacements média -------------------------------------------------- */
/* Réservations honnêtes : aucune image de stock ne tient lieu de référence. */

.media {
  position: relative;
  background: var(--color-gray-100);
  border: var(--border-width-base) solid var(--color-black);
  overflow: hidden;
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--9x16 { aspect-ratio: 9 / 16; }
.media--4x3 { aspect-ratio: 4 / 3; }

.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lecteur intégré (Vimeo) : remplit exactement le cadre, sans bordure. */
.media > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lecteur vidéo : fond noir le temps que la vignette arrive,
   et l'image entière reste visible, sans recadrage. */
.media--video { background: var(--color-black); }
.media--video > video { object-fit: contain; }

/* --- Vidéo vitrine de l'ouverture ----------------------------------------- */
/* Les repères de tournage passent en blanc sur pastille noire pour rester
   lisibles sur l'image. Le témoin REC ne clignote que pendant la lecture. */

.hero__media .media__rec,
.hero__media .media__tc {
  z-index: 2;
  color: var(--color-white);
  background: var(--color-black);
  padding: 2px var(--space-2);
}
.hero__media[data-playing="false"] .media__rec { display: none; }

.hero__controls {
  position: absolute;
  z-index: 2;
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  gap: var(--space-2);
}

.video-btn {
  min-width: 44px;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-black);
  border: var(--border-width-thin) solid var(--color-white);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.video-btn:hover { opacity: 0.85; }


.media__slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-6);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      rgba(0, 0, 0, 0.035) 10px 11px
    );
}

.media__slot .tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  background: var(--color-black);
  color: var(--color-white);
}

.media__slot .brief {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
  max-width: 42ch;
}

/* Repères de tournage : témoin REC et timecode */
.media__rec {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  color: var(--color-black);
}
.media__rec .dot {
  width: 8px;
  height: 8px;
  background: var(--color-red);
  animation: rec-blink 2s steps(1, end) infinite;
}
@keyframes rec-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

.media__tc {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* --- Sections ------------------------------------------------------------ */

.section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.section--dark {
  background: var(--color-black);
  color: var(--color-white);
}
.section--dark h2, .section--dark h3 { color: var(--color-white); }

.section__title {
  font-size: clamp(28px, 4.2vw, var(--font-size-4xl));
  max-width: 20ch;
}
.section__intro {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  max-width: 58ch;
  margin-top: var(--space-6);
}

/* --- Le parcours ---------------------------------------------------------- */

.proof {
  background: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-16);
}
.proof .sec-label { color: var(--color-gray-500); margin-bottom: var(--space-10); }
.proof .sec-label::after { background: rgba(255, 255, 255, 0.2); }

/* Chiffres du parcours */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

/* Bandeau défilant : pleine largeur, fondu aux deux bords, défilement continu
   vers la gauche, dans le sens de lecture. */
.proof > .marquee { position: relative; z-index: 1; }
/* Fluidité : le masque dégradé appliqué au conteneur obligeait le navigateur à
   recalculer tout le bandeau à chaque image, d'où les saccades. Les fondus sont
   désormais deux calques fixes posés par-dessus les bords, et la bande elle-même
   est confiée à la carte graphique. */
.marquee {
  position: relative;
  overflow: hidden;
  contain: paint;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--color-black), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--color-black), transparent); }
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation: marquee-left 45s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .stats {
  display: flex;
  flex: none;
  gap: var(--space-16);
  padding-right: var(--space-16);
}
.marquee .stat { flex: none; min-width: 170px; }
@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-6);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.stat__value::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: var(--color-yellow);
  margin-bottom: var(--space-5);
}

.stat__label {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

/* --- Texte éditorial au long --------------------------------------------- */


.prose {
  max-width: 68ch;
  margin-top: var(--space-10);
}
.prose p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}
.prose p + p { margin-top: var(--space-6); }


/* --- Le constat : titre fixe à gauche, texte à droite ----------------------- */

/* « overflow: clip » coupe la grille animée comme « hidden », mais sans créer
   de zone de défilement : c'est la condition pour que le titre reste collé
   pendant la lecture. Les navigateurs trop anciens retombent sur « hidden »
   et affichent simplement un titre immobile. */
.section--clip { overflow: hidden; overflow: clip; }

.constat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-16);
}

.constat__title {
  position: sticky;
  top: 120px;
  font-size: clamp(28px, 3.6vw, var(--font-size-4xl));
  line-height: 1.05;
}

.constat .prose { margin-top: 0; }

/* La phrase clé détachée du texte, en caractères de titre. */
.prose .prose__highlight {
  margin-block: var(--space-10);
  padding-left: var(--space-6);
  border-left: var(--border-width-thick) solid var(--color-yellow);
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-black);
}
.prose .prose__highlight + p { margin-top: 0; }

/* --- Bande démo ----------------------------------------------------------- */

.reel {
  margin: var(--space-12) auto 0;
  /* Le lecteur tient toujours en entier sous le menu fixe : sa hauteur
     ne dépasse pas celle de l'écran moins 160 px, soit le menu et une marge
     au-dessus et au-dessous. La largeur en découle, au format 16:9.
     La seconde ligne utilise la hauteur visible réelle sur mobile, là où
     le navigateur la comprend. */
  max-width: max(320px, calc((100vh - 160px) * 16 / 9));
  max-width: max(320px, calc((100dvh - 160px) * 16 / 9));
}

/* --- Les productions ------------------------------------------------------ */

.productions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-12);
}

/* Largeur plafonnée pour que la vidéo verticale tienne en entier sous le menu
   fixe, comme la bande démo : hauteur au plus égale à l'écran moins 160 px. */
.production {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 400px);
  width: min(100%, 400px, calc((100vh - 160px) * 9 / 16));
  width: min(100%, 400px, calc((100dvh - 160px) * 9 / 16));
}
.production > .crop { width: 100%; }

.production__title {
  font-size: var(--font-size-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.production__caption {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

/* --- La méthode ----------------------------------------------------------- */

.method {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: var(--space-16);
  align-items: start;
}

.steps {
  counter-reset: step;
  border-top: var(--border-width-thin) solid var(--border-color-light);
  margin-top: var(--space-10);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: var(--border-width-thin) solid var(--border-color-light);
}
.step::before {
  content: "SÉQ. 0" counter(step);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}
.method__sub {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--space-6);
  max-width: 34ch;
}

.step__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.step__text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

.method__aside { display: grid; gap: var(--space-6); }

/* --- Derrière TERR1 ------------------------------------------------------- */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-16);
  align-items: center;
}
.founder__title { font-size: clamp(26px, 3.6vw, var(--font-size-3xl)); max-width: 18ch; }
.founder__text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  max-width: 52ch;
}

/* --- Bio dépliable -------------------------------------------------------- */
/* Élément natif : la bio reste accessible même sans JavaScript. */

.bio { max-width: 56ch; }

.bio__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  border: var(--border-width-base) solid var(--color-black);
  cursor: pointer;
  list-style: none;
  transition: opacity var(--transition-fast);
}
.bio__toggle::-webkit-details-marker { display: none; }
.bio__toggle:hover { opacity: 0.85; }

.bio__toggle .arrow {
  font-family: var(--font-mono);
  transition: transform var(--transition-fast);
}
.bio[open] .bio__toggle .arrow { transform: rotate(180deg); }

.bio__close { display: none; }
.bio[open] .bio__open { display: none; }
.bio[open] .bio__close { display: inline; }

.bio__body {
  margin-top: var(--space-8);
  padding-left: var(--space-6);
  border-left: var(--border-width-thick) solid var(--color-yellow);
}
.bio__body p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}
.bio__body p + p { margin-top: var(--space-5); }

/* --- Sur le terrain de : références et avis clients ------------------------ */

.references {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* La référence est un encadré blanc posé sur le fond quadrillé de la section :
   le quadrillage passe derrière et ne gêne plus la lecture de l'avis. */
.reference {
  background: var(--color-white);
  border: var(--border-width-base) solid var(--color-black);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
}

/* Logo du client, en tête de l'encadré, présenté sans aucun filtre pour
   respecter sa charte graphique. */
.reference__logo {
  margin-bottom: var(--space-6);
}
.reference__logo img {
  width: auto;
  max-width: 150px;
  height: auto;
}

.reference__meta {
  color: var(--text-tertiary);
  margin-bottom: var(--space-5);
}

/* L'avis tient sur plusieurs paragraphes : le filet jaune est porté par le bloc
   entier plutôt que par chaque paragraphe, et tous les paragraphes sont traités
   de la même façon, en corps de texte. */
.reference__quote {
  padding-left: var(--space-6);
  border-left: var(--border-width-thick) solid var(--color-yellow);
}
.reference__quote p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}
.reference__quote p + p { margin-top: var(--space-4); }

.reference__author {
  margin-top: var(--space-4);
  padding-left: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.reference__body .pending { display: inline-block; }

.reference__link {
  display: table;
  margin-top: var(--space-6);
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-yellow);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  transition: opacity var(--transition-fast);
}
.reference__link::after { content: " →"; font-family: var(--font-mono); }
.reference__link:hover { opacity: 0.85; }

/* --- Articles : page de liste ---------------------------------------------- */

.page-head { padding-bottom: var(--space-8); }
.page-head__title {
  font-size: clamp(40px, 7.2vw, 80px);
  line-height: 0.94;
}

.articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.articles__empty {
  grid-column: 1 / -1;
  max-width: 56ch;
  padding: var(--space-5) var(--space-6);
  background: var(--color-gray-100);
  border-left: var(--border-width-thick) solid var(--color-yellow);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: var(--border-width-base) solid var(--color-black);
  padding-top: var(--space-5);
  transition: opacity var(--transition-fast);
}
.article-card:hover { opacity: 0.85; }

.article-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.article-card__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
}
/* Toute la carte est cliquable, le lien reste sur le titre. */
.article-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.article-card__excerpt {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.article-card__more {
  margin-top: auto;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-yellow);
}

/* --- Mentions légales --------------------------------------------------- */

.legal__updated {
  margin-top: var(--space-6);
  color: var(--text-tertiary);
}

.legal { max-width: 820px; }

.legal__block + .legal__block {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: var(--border-width-thin) solid var(--border-color-light);
}

.legal h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-6);
}

.legal p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}
.legal p + p { margin-top: var(--space-4); }

.legal a {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Fiche d'identité : intitulé à gauche, valeur à droite. */
.legal__facts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  border-top: var(--border-width-base) solid var(--color-black);
}
.legal__facts dt,
.legal__facts dd {
  padding-block: var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--border-color-light);
}
.legal__facts dt {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-right: var(--space-4);
}
.legal__facts dd {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

/* --- Articles : page d'article --------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-tertiary);
  margin-bottom: var(--space-12);
}
.breadcrumb a:hover { color: var(--color-black); }

.article { max-width: 760px; }

.article__meta {
  display: flex;
  gap: var(--space-6);
  color: var(--text-tertiary);
  margin-bottom: var(--space-5);
}

.article__title {
  font-size: clamp(32px, 5vw, var(--font-size-5xl));
  line-height: 1;
}

.article__lede {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: var(--border-width-base) solid var(--color-yellow);
}

.article__figure { margin-block: var(--space-12); }

.article__body h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}
.article__body h3 {
  font-size: var(--font-size-md);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.article__body p,
.article__body li {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}
.article__body p + p { margin-top: var(--space-5); }
.article__body ul {
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  list-style: square;
}
.article__body li + li { margin-top: var(--space-2); }
.article__body a {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: var(--border-width-base) solid var(--color-black);
}
.article__cta {
  flex-basis: 100%;
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* --- Contact -------------------------------------------------------------- */

.contact { text-align: left; }

/* Texte et adresse à gauche, formulaire à droite. */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-16);
  align-items: start;
}

.contact__title {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 0.96;
  max-width: 14ch;
}
.contact__text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-400);
  max-width: 52ch;
  margin-top: var(--space-8);
  margin-bottom: var(--space-10);
}
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

.pending {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  border: var(--border-width-thin) dashed var(--color-gray-600);
  padding: var(--space-2) var(--space-3);
}

/* --- Formulaire de contact ------------------------------------------------ */
/* Sur fond noir : champs à angles droits, filet gris, filet blanc au survol
   et jaune à la saisie. Les erreurs utilisent le rouge de la charte, réservé
   aux alertes, lisible sur le noir. */

.contact-form {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-2);
}

.contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.field__label {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-300);
}
.field__req { color: var(--color-yellow); }

.field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-white);
  background: var(--color-black);
  border: var(--border-width-thin) solid var(--color-gray-600);
  border-radius: 0;
  appearance: none;
  transition: border-color var(--transition-fast);
}
.field__input:hover { border-color: var(--color-gray-400); }
.field__input:focus {
  outline: none;
  border-color: var(--color-yellow);
  box-shadow: inset 0 0 0 1px var(--color-yellow);
}
.field__input:focus-visible { outline: none; }

.field__textarea { min-height: 160px; resize: vertical; }

/* Flèche du menu déroulant, dessinée en trait comme le reste de la charte. */
.field__select {
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: calc(100% - 16px) 50%;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field__select option { color: var(--color-black); background: var(--color-white); }

.field__help {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-gray-500);
}

.field__error {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-red);
}
.field__input[aria-invalid="true"] { border-color: var(--color-red); }

/* Piège à robots : retiré de l'écran et des lecteurs d'écran. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.contact-form__submit[disabled] { opacity: 0.6; cursor: wait; }

.contact-form__legend { color: var(--color-gray-500); }

.contact-form__privacy {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-gray-500);
}
.contact-form__privacy a {
  color: var(--color-gray-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form__privacy a:hover { color: var(--color-yellow); }

/* Messages après envoi : filet jaune pour la réussite, rouge pour l'échec. */
.contact-form__status {
  padding: var(--space-5) var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-white);
  border-left: var(--border-width-thick) solid var(--color-yellow);
  background: var(--color-gray-900);
}
.contact-form__status:focus { outline: none; }
.contact-form__status[data-state="error"] { border-left-color: var(--color-red); }
.contact-form__status a {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: var(--color-yellow);
  text-underline-offset: 3px;
}

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

.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  border-top: var(--border-width-thick) solid var(--color-yellow);
  padding-block: var(--space-16) var(--space-8);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: var(--border-width-thin) solid rgba(255, 255, 255, 0.2);
}

.site-footer__sign {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin-top: var(--space-4);
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: var(--space-5);
}

.site-footer li { margin-bottom: var(--space-3); }
.site-footer li a {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
  transition: color var(--transition-fast);
}
.site-footer li a:hover { color: var(--color-yellow); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  color: var(--color-gray-500);
}

/* --- Adaptation ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__inner { gap: var(--space-12); }
  .method { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .founder { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav__list { display: none; }
  .nav-toggle { display: block; }

  .nav[data-open="true"] { position: static; }
  .nav[data-open="true"] .nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-white);
    border-block: var(--border-width-base) solid var(--color-black);
    padding: var(--space-4) var(--gutter) var(--space-6);
  }
  .nav[data-open="true"] .nav__list a {
    display: block;
    padding-block: var(--space-4);
    font-size: var(--font-size-md);
    color: var(--color-black);
    border-bottom: var(--border-width-thin) solid var(--border-color-light);
  }
  .nav[data-open="true"] .nav__list .nav__cta {
    margin-top: var(--space-5);
    border: var(--border-width-base) solid var(--color-black);
    background: var(--color-black);
    color: var(--color-yellow);
    text-align: center;
    font-weight: var(--font-weight-bold);
  }

  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .constat { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .legal__facts { grid-template-columns: minmax(0, 1fr); }
  .legal__facts dt { padding-bottom: 0; border-bottom: none; }
  .constat__title { position: static; }
  .articles { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
}

@media (max-width: 620px) {
  /* Sur mobile, le titre passe sur plus de lignes : on desserre davantage pour
     dégager le filet jaune des accents de la ligne du dessous. */
  .hero__title { line-height: 1.16; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .step::before { display: block; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .btn { width: 100%; justify-content: space-between; }
  .hero__actions .btn { width: 100%; }
}

/* --- Animation réduite --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grid-field__layer--reveal { display: none; }
  /* Pas de rouleau : on affiche « de marque ». */
  .wordroll__track { animation: none; }
  /* Pas de défilement : les chiffres s'affichent à plat, sans la copie. */
  .marquee { padding-inline: var(--space-6); }
  .marquee::before, .marquee::after { display: none; }
  .marquee__track { animation: none; width: auto; }
  .marquee .stats { flex-wrap: wrap; row-gap: var(--space-4); }
  .marquee .stats[aria-hidden="true"] { display: none; }
}

/* --- Impression ---------------------------------------------------------- */

@media print {
  .site-header, .grid-field, .nav-toggle { display: none; }
  .section--dark, .site-footer { background: #fff; color: #000; }
}