/* ============================================================
   FUTNOW PRO — Design system "Brutalist Editor"
   Noir pur / blanc, 0 radius, tonal depth, mono labels.
   ============================================================ */

:root {
  /* Tonal palette */
  --bg-0: #000000;
  --bg-1: #070707;
  --bg-2: #0d0d0d;
  --bg-3: #131313;
  --bg-4: #1a1a1a;
  --bg-5: #222222;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --fg: #ffffff;
  --fg-2: #c8c6c6;
  --fg-3: #8a8a8a;
  --fg-4: #5a5a5a;
  --fg-5: #3a3a3a;
  --paper: #ece7dd;             /* la surface claire du site : sections, boutons, bandeaux */
  --paper-2: #d7cfbe;           /* son état survolé */
  --paper-ink: #14110b;         /* l'encre posée dessus */
  --paper-line: rgba(28, 22, 10, 0.34);   /* filets sur papier */
  --signal: #4ade80;            /* un seul accent : la donnée live */
  --accent-num: #facc15;        /* survol des index de cartes — le vert reste réservé au live */
  --signal-dim: rgba(74, 222, 128, 0.18);
  --alert: #f87171;

  /* Typography */
  --font-display: 'Arimo', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-label: 'Arimo', 'Inter', sans-serif;   /* labels, index, HUD, chiffres */

  /* Échelle des titres divisée par deux au plafond (desktop) : le display ne
     porte plus la voix tout seul, la hiérarchie passe par la graisse, l'approche,
     les filets et la surface claire (.section--paper).
     Le plancher mobile descend un peu moins (~-40 %) : à 390 px, un h2 réduit de
     moitié tombe à la taille du texte courant et ne se lit plus comme un titre. */
  --text-hero: clamp(1.65rem, 0.75rem + 3.5vw, 3.5rem);
  --text-h1: clamp(1.45rem, 0.7rem + 2.6vw, 2.5rem);
  --text-h2: clamp(1.2rem, 0.6rem + 1.9vw, 1.9rem);
  --text-h3: clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
  --text-body: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  --text-small: 0.82rem;
  --text-label: 0.68rem;

  /* Barres fixes. La passerelle vers l'app joueurs a été retirée du Pro
     (24/08/2026) : ici le visiteur est déjà un club ou une fédération, on ne
     le renvoie pas vers l'app. Pour la réactiver : --topbar-h: 34px + le
     markup dans partials/head.html et head.en.html. */
  --topbar-h: 0px;
  --nav-h: 72px;
  --header-h: calc(var(--topbar-h) + var(--nav-h));

  /* Rhythm */
  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --space-section: clamp(5rem, 4rem + 6vw, 10rem);
  --space-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 420ms;
  --dur-slow: 900ms;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-0);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--paper); color: var(--paper-ink); }

/* ---------- Film grain (hérité du site joueurs) ---------- */
#page-grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 9000; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-move 0.5s steps(1) infinite;
}
@keyframes grain-move {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, -6%); }
  40% { transform: translate(6%, 4%); } 60% { transform: translate(-6%, 8%); }
  80% { transform: translate(8%, -4%); } 100% { transform: translate(-3%, 6%); }
}
@media (prefers-reduced-motion: reduce) { #page-grain { animation: none; } }

/* ---------- Typography utilities ---------- */
.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.018em;
  line-height: 1.02;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.008em; line-height: 1.25; }
h4 { font-size: 0.92rem; letter-spacing: -0.005em; line-height: 1.35; }

/* Second temps des titres : italique blanc. Arimo embarque un vrai italique dessiné
   (chargé via ital,wght@1,400..700), donc pas d'oblique synthétique. */
.emph { font-style: italic; }

.label {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.label--index { color: var(--fg-4); }
.label--signal { color: var(--signal); }
.label--signal::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px;
  background: var(--signal); vertical-align: middle; animation: blink 1.6s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.lede { font-size: clamp(0.95rem, 0.9rem + 0.32vw, 1.15rem); line-height: 1.55; color: var(--fg-2); font-weight: 300; }
.muted { color: var(--fg-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: var(--space-block); }
.section--band { background: var(--bg-2); }
.section--band-2 { background: var(--bg-1); }

/* ---------- Surface claire ----------
   Le parcours est noir : une section retournée en clair sert de respiration et
   redonne du poids aux titres devenus petits. Une seule surface claire, le
   papier chaud #ece7dd — pas de blanc franc (choix utilisateur du 24/08/2026) :
   le noir du site est pur, donc un blanc froid n'en était que le négatif, alors
   que le papier introduit une vraie température.
   Toute la palette est rejouée en variables locales : les composants (faq,
   cartes, listes, filets, accent signal) suivent sans surcharge individuelle.
   Ne pas poser sur une section à photo de fond — les voiles y sont calculés
   pour du noir : utiliser .strip à la place. */
.section--paper {
  --bg-0: var(--paper);             /* papier chaud : ni blanc franc, ni gris */
  --bg-1: #e5dfd2;
  --bg-2: #ded7c8;
  --bg-3: var(--paper-2);
  --bg-4: #cdc4b1;
  --bg-5: #bcb2a0;
  --line: rgba(28, 22, 10, 0.16);
  --line-strong: var(--paper-line);
  --fg: var(--paper-ink);
  --fg-2: #2e2920;
  --fg-3: #5d564a;
  --fg-4: #6f6656;                  /* 4.5:1 sur le papier */
  --fg-5: #a99e8a;
  --signal: #0a6b2f;
  --signal-dim: rgba(10, 107, 47, 0.16);
  background: var(--bg-0);
  color: var(--fg-2);
}

/* Les #fff écrits en dur dans les composants doivent basculer eux aussi. */
.section--paper :is(h1, h2, h3, h4),
.section--paper :is(.metric__val, .feature-grid .metric, .live-dash .big),
.section--paper :is(.solution__go, .link-arrow, .article-list .arrow),
.section--paper :is(.faq summary, .quote blockquote, .quote__meta strong),
.section--paper :is(.points li, .prose strong, .team strong, .pipeline h4) { color: var(--fg); }

.section--paper .btn--primary { background: var(--fg); color: var(--bg-0); border-color: var(--fg); }
.section--paper .btn--primary:hover { background: var(--fg-2); border-color: var(--fg-2); }
.section--paper .btn--ghost { color: var(--fg); border-color: var(--line-strong); }
.section--paper .btn--ghost:hover { border-color: var(--fg); }
.section--paper .btn--signal { color: #fff; }
.section--paper .link-arrow:hover { border-color: var(--fg); }
.section--paper .solution:hover { border-color: var(--fg); }
.section--paper .logos > div:hover { color: var(--fg); }
.section--paper .quotes__dots i.is-active { background: var(--fg); }
.section--paper .quotes__btns button:hover { background: var(--fg); color: var(--bg-0); }
.section--paper .feature__list li::before { color: var(--signal); }
.section--paper ::selection { background: var(--fg); color: var(--bg-0); }
.section--paper :is(a, button, .btn):focus-visible { outline-color: var(--fg); }

/* Îlots sombres sur surface claire. Deux familles, même mécanique :
   — les maquettes produit (.panel, .live-dash, .tech__media) sont des captures
     d'écran, pas des blocs de mise en page ; leurs tracés sont dessinés en
     blanc (SVG, barres, chiffres) et disparaîtraient sur du papier ;
   — les cartes (.solution) et le bloc témoignages (.quotes) restent noirs par
     principe : ce sont des objets posés sur la page, pas du fond de page.
   Dans les deux cas on rejoue la palette noire en local, donc chiffre fantôme,
   titre, texte et pied de carte suivent sans surcharge. */
.section--paper :is(.panel, .live-dash, .tech__media, .solution, .quotes, .live-board) {
  --bg-0: #000000;
  --bg-1: #070707;
  --bg-2: #0d0d0d;
  --bg-3: #131313;
  --bg-4: #1a1a1a;
  --bg-5: #222222;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --fg: #ffffff;
  --fg-2: #c8c6c6;
  --fg-3: #8a8a8a;
  --fg-4: #5a5a5a;
  --fg-5: #3a3a3a;
  --signal: #4ade80;
  --signal-dim: rgba(74, 222, 128, 0.18);
  color: var(--fg-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.section--paper :is(.panel, .live-dash, .tech__media) { border-color: transparent; }
.section--paper .panel { background: var(--bg-1); }
/* Pas de règle de fond ici : .solution et .quotes déclarent --bg-1 sur eux-mêmes,
   donc leur `background: var(--bg-1)` d'origine résout déjà dans la palette noire. */

/* ---------- Bandeau photo pleine largeur ----------
   La troisième rupture, et la seule qui apporte de la couleur : une bande de
   photo (jamais désaturée) posée en travers d'une longue plage de noir. Plus
   basse qu'une section — c'est une respiration, pas un chapitre. Le voile ne
   se densifie qu'en bas, sous la ligne de texte : le haut garde ses couleurs. */
.strip {
  position: relative;
  min-height: clamp(220px, 32vh, 380px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.strip__bg { position: absolute; inset: 0; z-index: 0; }
.strip__bg img { width: 100%; height: 100%; object-fit: cover; }
.strip__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.06) 34%,
    rgba(0, 0, 0, 0.62) 78%,
    rgba(0, 0, 0, 0.86) 100%);
}
.strip .container { position: relative; z-index: 1; padding-block: clamp(1.5rem, 2.6vw, 2.5rem); }
.strip .label { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9); }
.strip p {
  margin-top: 0.7rem; max-width: 34ch;
  text-wrap: balance;               /* évite le mot orphelin en fin de phrase */
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.018em;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6);
}

.section-head { display: grid; gap: 1.25rem; margin-bottom: var(--space-block); }
.section-head .label { display: block; }
.section-head h2 { max-width: 26ch; }
.section-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 7fr 5fr; gap: 3rem; }
  .section-head--split p { padding-bottom: 0.4rem; }
}

.grid { display: grid; gap: 1px; background: var(--line); }
.grid > * { background: var(--bg-0); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.hairline { border-top: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 0;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--paper); color: var(--paper-ink); border-color: var(--paper); }
.btn--primary:hover { background: var(--paper-2); border-color: var(--paper-2); }
.btn--ghost { color: #fff; border-color: var(--line-strong); }
.btn--ghost:hover { border-color: #fff; }
.btn--signal { background: var(--signal); color: #000; border-color: var(--signal); }
.btn--signal:hover { background: #7cf0a5; }
.btn .arrow { display: inline-block; transition: transform var(--dur-fast); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--sm { padding: 0.65rem 1.1rem; font-size: 0.66rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.35rem;
  transition: border-color var(--dur-fast);
}
.link-arrow:hover { border-color: #fff; }
.link-arrow .arrow { transition: transform var(--dur-fast); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---------- Top bar (lien vers le site joueurs) ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--topbar-h); background: var(--paper); color: var(--paper-ink);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding-inline: 1rem; text-align: center;
}
.topbar a { font-weight: 700; border-bottom: 1px solid var(--paper-ink); }
.topbar a:hover { border-bottom-width: 2px; }
.topbar .topbar__close { margin-left: 0.5rem; font-size: 0.9rem; line-height: 1; opacity: 0.6; }
@media (max-width: 640px) {
  .topbar { font-size: 0.6rem; letter-spacing: 0.08em; gap: 0.5rem; }
  .topbar > span:first-child { display: none; }
}
/* Fermeture par l'utilisateur : le token retombe à 0, nav, menu et héros se
   recalent seuls — plus de surcharge de position à maintenir en double. */
body.topbar-hidden { --topbar-h: 0px; }
body.topbar-hidden .topbar { display: none; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur);
}
.nav.is-scrolled { background: rgba(0, 0, 0, 0.82); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__brand { display: flex; align-items: center; gap: 0.75rem; }
.nav__brand img { height: 22px; width: auto; }
.nav__brand .pro {
  font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.22em;
  padding: 0.2rem 0.45rem; border: 1px solid var(--line-strong); color: #fff; line-height: 1;
}
.nav__links { display: none; align-items: center; gap: 2.2rem; }
.nav__links > li { position: relative; }
.nav__links a, .nav__links button {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  color: var(--fg-2); transition: color var(--dur-fast); display: inline-flex; align-items: center; gap: 0.4rem;
  padding-block: 1.4rem;
}
.nav__links a:hover, .nav__links button:hover, .nav__links .is-active > a, .nav__links .is-active > button { color: #fff; }
.nav__links .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast); }
.has-dropdown.is-open .caret { transform: translateY(1px) rotate(225deg); }
.dropdown {
  position: absolute; top: 100%; left: -1.5rem; min-width: 360px;
  background: var(--bg-2); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}
.has-dropdown.is-open .dropdown, .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.25rem 0.75rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); font-family: var(--font-body); font-weight: 500; }
.dropdown a:last-child { border-bottom: 0; }
.dropdown a:hover { background: var(--bg-3); }
.dropdown .idx { font-family: var(--font-label); font-size: 0.66rem; color: var(--fg-4); letter-spacing: 0.1em; padding-top: 0.3rem; }
.dropdown strong { color: #fff; font-weight: 600; display: block; }
.dropdown small { display: block; grid-column: 2; color: var(--fg-3); font-size: 0.8rem; line-height: 1.4; }
.nav__cta { display: none; align-items: center; gap: 1rem; }
.nav__login { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.nav__login:hover { color: #fff; }

.lang-switch { display: inline-flex; align-items: center; gap: 4px; margin-left: 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.lang-switch b { color: #fff; font-weight: 700; }
.lang-switch .sep { color: #444; }
.lang-switch a { color: #666; transition: color var(--dur-fast); }
.lang-switch a:hover { color: #fff; }
.nav-menu__lang { padding-top: 1.5rem; }
.nav__burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 0.5rem; }
.nav__burger span { width: 24px; height: 1.5px; background: #fff; transition: transform var(--dur-fast), opacity var(--dur-fast); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1024px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__burger { display: none; }
}

/* Mobile menu */
.nav-menu {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 999;
  background: #000; padding: 1.5rem var(--gutter) 3rem; overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur) var(--ease-out);
}
.nav-menu.is-open { transform: translateX(0); }
.nav-menu__group { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.nav-menu__group .label { margin-bottom: 0.75rem; }
.nav-menu a { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: #fff; padding: 0.45rem 0; letter-spacing: -0.02em; }
.nav-menu small { display: block; color: var(--fg-3); font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; letter-spacing: 0; }
.nav-menu__cta { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.5rem; }
.nav-menu a.btn { font-family: var(--font-label); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; justify-content: center; }
.nav-menu a.btn--primary { color: #000; }
.nav-menu a.btn--ghost { color: #fff; }
@media (min-width: 1024px) { .nav-menu { display: none; } }

/* ---------- Hero ---------- */
.hero {
  /* Réglages du fond — l'image se dissout dans le noir de la page, aucune arête visible.
     --hero-img-opacity : densité de l'image (1 = pleine puissance, baisser si le texte manque de contraste)
     --hero-fade-start  : hauteur à laquelle le fondu démarre — l'image actuelle a son terrain
                          entre 40 % et 80 % de la hauteur, ne pas descendre sous ~75 %
     --hero-scrim       : force des voiles de lisibilité posés sur l'image
     (la saturation se règle sur le filter de .hero__bg img, pas ici) */
  --hero-img-opacity: 1;
  --hero-fade-start: 78%;
  --hero-scrim: 0.1;
  /* --hero-img-rise : de combien le cadrage de la photo remonte dans le hero.
     0 = photo centrée sur le cadre. Au-delà de ~18 % on perd le haut des tribunes. */
  --hero-img-rise: 8%;
  /* Le hero ne prend volontairement pas toute la hauteur d'écran et son contenu
     se cale en haut : la section suivante dépasse sous la ligne de flottaison,
     on voit qu'il y a une suite sans avoir scrollé. */
  position: relative; min-height: 57svh; padding-top: var(--header-h); padding-bottom: 0;
  display: flex; align-items: center; overflow: hidden;
}
/* Le hero amène déjà son propre fondu : pas besoin du grand blanc habituel.
   Ce premier bloc est aussi resserré que possible pour que le haut des cartes
   entre dans le premier écran : on doit deviner qu'il y a trois blocs en
   dessous, pas seulement lire le titre de section. */
.hero + .section { padding-top: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); }
.hero + .section .section-head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* <picture> est inline par défaut : sans ça l'<img> perd sa hauteur de référence. */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
  /* L'image est plus haute que le cadre et remontée d'autant : le débord passe
     au-dessus du hero (overflow: hidden), le décor remonte avec le titre. */
  width: 100%; height: calc(100% + var(--hero-img-rise)); margin-top: calc(-1 * var(--hero-img-rise));
  object-fit: cover;
  opacity: var(--hero-img-opacity); filter: contrast(1.04) saturate(1.16) brightness(1.08);
  object-position: center 45%;
  /* le fondu porte sur l'image, pas sur un calque posé dessus : elle disparaît
     progressivement au lieu d'être recouverte — la jonction avec la section
     suivante (fond noir) devient invisible. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--hero-fade-start), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--hero-fade-start), transparent 100%);
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* voile latéral : protège le titre à gauche, laisse le terrain respirer à droite */
    linear-gradient(90deg,
      rgba(0,0,0,0.66) 0%,
      rgba(0,0,0,0.56) 24%,
      rgba(0,0,0,calc(var(--hero-scrim) + 0.22)) 44%,
      rgba(0,0,0,0) 66%),
    /* haut assombri (nav) + bas fondu au noir : jonction invisible avec la section suivante */
    linear-gradient(180deg,
      rgba(0,0,0,0.58) 0%,
      rgba(0,0,0,var(--hero-scrim)) 26%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,0.42) 84%,
      #000 100%);
}
/* En colonne unique le texte passe au centre : le voile latéral ne le couvre plus. */
@media (max-width: 1023px) {
  .hero__bg img { object-position: center 48%; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.6) 0%,
      rgba(0,0,0,0.28) 38%,
      rgba(0,0,0,0.52) 68%,
      #000 100%);
  }
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: 3rem; align-items: center; }
.hero__content { max-width: 60ch; }
/* Le voile latéral est volontairement léger pour laisser voir le terrain :
   ce halo garantit la lisibilité là où le texte passe sur le parquet éclairé. */
.hero__title, .hero__lede { text-shadow: 0 2px 28px rgba(0,0,0,0.6); }
/* Pas de marge haute : le h1 ouvre le hero, l'écart à la nav vient du padding de .hero. */
.hero__title { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.022em; margin: 0 0 1.5rem; }
.hero__title > span { display: block; }
.hero__lede { max-width: 50ch; margin-bottom: 2.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__tag {
  display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong); font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.hero__tag b { color: var(--signal); font-weight: 600; }

/* .live-board : le tracking live a quitté le hero le 24/08/2026 — il vit maintenant
   sous les trois cartes de la section 01, cf. « Tracking live » plus bas. */

.scroll-cue { position: absolute; bottom: 1.75rem; left: var(--gutter); z-index: 2; display: flex; align-items: center; gap: 0.75rem; }
.scroll-cue__line { width: 1px; height: 44px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue__line::after { content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: #fff; animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { top: -50%; } 100% { top: 110%; } }

/* ---------- Metrics band ---------- */
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics > div { padding: 2rem var(--gutter) 2rem 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics > div:nth-child(2n) { border-right: 0; }
.metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }
@media (min-width: 900px) {
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .metrics > div { border-bottom: 0; padding: 2.5rem 2rem; }
  .metrics > div:nth-child(2n) { border-right: 1px solid var(--line); }
  .metrics > div:last-child { border-right: 0; }
}
.metric__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 0.75rem + 1.5vw, 2.1rem); color: #fff; letter-spacing: -0.022em; line-height: 1; }
.metric__val small { font-size: 0.45em; color: var(--fg-3); font-weight: 500; letter-spacing: 0; margin-left: 0.15em; }
.metric__label { margin-top: 0.75rem; }

/* ---------- Solutions alignées (home) ---------- */
/* Cartes-teasers : repère, nom de la solution, une ligne. Le contenu vit dans les pages dédiées. */
.solutions { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (min-width: 800px) { .solutions { grid-template-columns: repeat(3, 1fr); } }
.solution { background: var(--bg-1); border: 1px solid var(--line-strong); min-width: 0; display: flex; flex-direction: column; gap: 2rem; padding: 2.25rem 1.75rem 1.75rem; min-height: clamp(210px, 20vw, 300px); transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.solution:hover { background: var(--bg-2); border-color: #fff; transform: translateY(-5px); }
.solution__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1rem + 2.25vw, 3rem); line-height: 0.85; letter-spacing: -0.028em; color: var(--fg-5); transition: color var(--dur); }
.solution:hover .solution__num { color: var(--accent-num); }
.solution__body { margin-top: auto; display: grid; gap: 0.7rem; }
.solution h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.012em; }
.solution p { font-size: 0.95rem; line-height: 1.5; color: var(--fg-3); max-width: 30ch; }
.solution__go { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; transition: border-color var(--dur-fast); }
.solution:hover .solution__go { border-color: var(--line-strong); }
.solution:hover .solution__go .arrow { color: var(--signal); }
.solution__go .arrow { margin-left: auto; transition: transform var(--dur-fast); }
.solution:hover .solution__go .arrow { transform: translateX(5px); }

/* ---------- Tracking live (démonstration animée, home) ----------
   Le canvas descendu du hero le 24/08/2026 et rejoué en futsal : terrain 40 × 20 m,
   5 contre 5, cf. assets/js/futsal-tracking.js (la version foot à 11 dort dans
   _archive/hero-tracking/). Îlot noir posé sur le papier : les tracés du canvas sont
   blancs, ils ont besoin du fond sombre — la palette est rejouée par la règle
   d'îlots de la section « Surface claire ». */
.live-demo { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
@media (min-width: 1024px) { .live-demo { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 1rem + 3.5vw, 5rem); } }
.live-demo__intro { display: grid; gap: 1rem; max-width: 46ch; }
.live-demo__intro h3 { font-size: var(--text-h2); line-height: 1.2; letter-spacing: -0.018em; margin-top: 0.35rem; }
.live-demo__intro p { font-size: 0.95rem; line-height: 1.6; }
.live-demo__intro .link-arrow { justify-self: start; margin-top: 0.4rem; }
.live-demo__viz { display: grid; gap: 0.85rem; min-width: 0; }
.live-demo__note { font-size: 0.58rem; color: var(--fg-4); }

.live-board { position: relative; background: var(--bg-1); border: 1px solid var(--line-strong); min-width: 0; }
.live-board__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); }
.live-board__head .label { font-size: 0.6rem; }
/* 16/9 : le terrain fait 2:1, le reste de la hauteur porte le HUD et l'étiquette du joueur suivi. */
.live-board canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.live-board__foot { display: grid; grid-template-columns: repeat(2, 1fr); }
.live-board__foot > div { padding: 0.85rem 1rem; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.live-board__foot > div:nth-child(2n) { border-right: 0; }
@media (min-width: 560px) {
  .live-board__foot { grid-template-columns: repeat(4, 1fr); }
  .live-board__foot > div:nth-child(2n) { border-right: 1px solid var(--line); }
  .live-board__foot > div:last-child { border-right: 0; }
}
.live-board__foot .label { font-size: 0.58rem; }
.live-board__foot .val { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.6rem); color: #fff; letter-spacing: -0.03em; line-height: 1.1; margin-top: 0.2rem; }
.live-board__foot .val small { font-family: var(--font-label); font-size: 0.6rem; color: var(--fg-3); margin-left: 0.25rem; letter-spacing: 0.05em; }
.live-board .corner { position: absolute; width: 14px; height: 14px; border-color: #fff; border-style: solid; border-width: 0; }
.live-board .corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.live-board .corner.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.live-board .corner.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.live-board .corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- Feature split (solutions) ---------- */
.feature { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .feature--flip .feature__copy { order: 2; }
  .feature--flip .feature__visual { order: 1; }
}
.feature__copy h2 { margin: 1rem 0 1.25rem; }
.feature__copy p { max-width: 48ch; }
.feature__list { margin: 1.75rem 0 2rem; display: grid; gap: 0.85rem; }
.feature__list li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.5rem; color: var(--fg-2); font-size: 0.95rem; line-height: 1.5; }
.feature__list li::before { content: '→'; font-family: var(--font-label); color: var(--signal); }
.feature__visual { position: relative; }
.feature__visual img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; filter: contrast(1.1); }
.feature + .feature { margin-top: var(--space-section); }

/* Panels (mock UI) */
.panel { border: 1px solid var(--line-strong); background: var(--bg-1); font-family: var(--font-label); color: var(--fg-2); }
.panel__head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.panel__body { padding: 1.25rem; }
.panel table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.panel th { text-align: left; font-weight: 400; color: var(--fg-4); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--line); }
.panel td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.panel tr:last-child td { border-bottom: 0; }
.panel td.hi { color: #fff; font-weight: 600; }
.panel .bar { height: 4px; background: var(--bg-5); position: relative; }
.panel .bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; }
.panel .bar.signal > i { background: var(--signal); }
.panel .bar.alert > i { background: var(--alert); }
.tag { display: inline-block; padding: 0.15rem 0.45rem; border: 1px solid var(--line-strong); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tag--signal { border-color: var(--signal); color: var(--signal); }
.tag--alert { border-color: var(--alert); color: var(--alert); }
.tag--fill { background: #fff; color: #000; border-color: #fff; }

/* Live dashboard mock */
.live-dash { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line-strong); }
.live-dash > * { background: var(--bg-1); padding: 1.1rem; }
.live-dash__row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
@media (min-width: 640px) { .live-dash { grid-template-columns: 1fr 1fr; } }
.live-dash .big { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; letter-spacing: -0.022em; line-height: 1; }
.live-dash .big small { font-family: var(--font-label); font-size: 0.62rem; color: var(--fg-3); letter-spacing: 0.08em; margin-left: 0.3rem; }
.alert-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--line); font-family: var(--font-label); font-size: 0.74rem; }
.alert-row:first-of-type { border-top: 0; }
.alert-row .who { color: #fff; font-weight: 600; }
.alert-row .what { color: var(--fg-3); }
.alert-row .delta { color: var(--alert); font-variant-numeric: tabular-nums; }
.alert-row .delta.up { color: var(--signal); }

/* Sparkline bars */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.bars i { flex: 1; background: #fff; opacity: 0.85; transform-origin: bottom; }
.bars i.dim { opacity: 0.3; }
.bars i.signal { background: var(--signal); opacity: 1; }

/* ---------- Full-bleed statement ---------- */
.statement { position: relative; min-height: 80vh; display: flex; align-items: end; overflow: hidden; }
.statement__bg { position: absolute; inset: 0; }
.statement__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.statement__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.05) 38%, rgba(0,0,0,0.72) 100%); }
.statement__content { position: relative; z-index: 1; padding-block: var(--space-section) 4rem; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .statement__content { grid-template-columns: 6fr 5fr; align-items: end; } }
.statement h2 { font-size: var(--text-h1); max-width: 21ch; }
.points { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.points li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong); color: #fff; font-weight: 500; }
.points li .idx { font-family: var(--font-label); font-size: 0.68rem; color: var(--fg-3); padding-top: 0.35rem; letter-spacing: 0.12em; }
.points li small { display: block; color: var(--fg-3); font-weight: 400; font-size: 0.88rem; margin-top: 0.2rem; }
/* Sur le statement, la liste est posée sur l'image en pleine puissance : assise locale. */
.statement .points {
  background: rgba(0,0,0,0.55); border: 1px solid var(--line);
  padding: 1.75rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------- Audience cards ---------- */
.audience { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .audience { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .audience { grid-template-columns: repeat(4, 1fr); } }
.audience__card { background: var(--bg-0); position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; isolation: isolate; }
.audience__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; z-index: -1; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur); }
.audience__card::before { content: ''; position: absolute; inset: 0; z-index: -1;
  /* Voile en deux temps : le haut protège le label, le bas rend le texte lisible
     même sur une photo claire (sol clair, maillots blancs, projecteurs). */
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 24%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.88) 68%, rgba(0,0,0,0.97) 88%, rgba(0,0,0,1) 100%); }
.audience__card .label, .audience__card h3, .audience__card p { text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.75); }
.audience__card:hover img { transform: scale(1.05); opacity: 0.92; }
.audience__card .label { margin-bottom: auto; color: var(--fg-2); }
.audience__card h3 { margin-bottom: 0.6rem; }
.audience__card p { font-size: 0.9rem; color: #ebe9e6; margin-bottom: 1.25rem; }
.audience__card .link-arrow { align-self: flex-start; }

/* ---------- Pipeline / technology ---------- */
.tech { position: relative; overflow: hidden; }
.tech__media { position: relative; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.tech__media video, .tech__media img { width: 100%; height: 100%; object-fit: cover; }
.tech__media .hud { position: absolute; font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.tech__media .hud.tl { top: 0.9rem; left: 1rem; } .tech__media .hud.tr { top: 0.9rem; right: 1rem; } .tech__media .hud.bl { bottom: 0.9rem; left: 1rem; } .tech__media .hud.br { bottom: 0.9rem; right: 1rem; }
.pipeline { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 3rem; }
@media (min-width: 700px) { .pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pipeline { grid-template-columns: repeat(4, 1fr); } }
.pipeline > div { background: var(--bg-0); padding: 1.5rem; }
.pipeline .idx { font-family: var(--font-label); font-size: 0.66rem; color: var(--fg-4); letter-spacing: 0.14em; }
.pipeline h4 { margin: 1.75rem 0 0.6rem; color: #fff; font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
.pipeline p { font-size: 0.9rem; color: var(--fg-3); }

/* ---------- Logos wall ---------- */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .logos { grid-template-columns: repeat(6, 1fr); } }
.logos > div { background: var(--bg-0); aspect-ratio: 3 / 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: var(--fg-4); transition: color var(--dur-fast), background var(--dur-fast); }
.logos > div:hover { color: #fff; background: var(--bg-2); }
.logos svg { width: 34px; height: 34px; }
.logos span { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- Testimonials ---------- */
.quotes { position: relative; border: 1px solid var(--line); background: var(--bg-1); overflow: hidden; }
.quotes__track { display: flex; }
.quote { flex: 0 0 100%; padding: clamp(2rem, 3vw, 4rem); display: grid; gap: 2rem; }
@media (min-width: 900px) { .quote { grid-template-columns: 1fr 280px; gap: 4rem; } }
.quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(0.98rem, 0.9rem + 0.5vw, 1.3rem); color: #fff; letter-spacing: -0.008em; line-height: 1.45; }
.quote blockquote::before { content: '“'; display: block; font-size: 1.8rem; line-height: 0.5; color: var(--fg-4); margin-bottom: 1.25rem; }
.quote__meta { align-self: end; border-left: 1px solid var(--line-strong); padding-left: 1.25rem; }
.quote__meta strong { display: block; color: #fff; font-weight: 600; }
.quote__meta span { display: block; color: var(--fg-3); font-size: 0.85rem; }
.quote__meta .tag { margin-top: 0.9rem; }
.quotes__nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 0.75rem 1rem; }
.quotes__dots { display: flex; gap: 6px; }
.quotes__dots i { width: 18px; height: 2px; background: var(--fg-5); transition: background var(--dur-fast); }
.quotes__dots i.is-active { background: #fff; }
.quotes__btns { display: flex; gap: 0.25rem; }
.quotes__btns button { width: 40px; height: 40px; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-label); transition: background var(--dur-fast), color var(--dur-fast); }
.quotes__btns button:hover { background: #fff; color: #000; }

/* ---------- News ---------- */
.news { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .news { grid-template-columns: repeat(3, 1fr); } }
.news__card { background: var(--bg-0); display: flex; flex-direction: column; }
.news__card .media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
.news__card img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur); }
.news__card:hover img { transform: scale(1.04); opacity: 1; }
.news__card .body { padding: 1.4rem; display: grid; gap: 0.7rem; flex: 1; }
.news__card h3 { font-size: 1rem; line-height: 1.3; }
.news__card .meta { font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); display: flex; gap: 1rem; }
.news__card .meta b { color: var(--signal); font-weight: 500; }
.news__card p { font-size: 0.9rem; color: var(--fg-3); }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; min-height: 70vh; display: flex; align-items: center; }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.cta__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 90% at 26% 48%, rgba(0,0,0,0.6), rgba(0,0,0,0.24) 78%); }
.cta__content { position: relative; z-index: 1; display: grid; gap: 2rem; }
@media (min-width: 1024px) { .cta__content { grid-template-columns: 7fr 5fr; align-items: end; } }
.cta h2 { font-size: var(--text-h1); max-width: 21ch; }
.cta__side { display: grid; gap: 1.25rem; }
.cta__side p { color: var(--fg-2); max-width: 40ch; }

/* Newsletter */
.newsletter { display: grid; gap: 1.5rem; align-items: center; padding-block: 3rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .newsletter { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.newsletter form { display: grid; grid-template-columns: 1fr auto; gap: 0; border-bottom: 1px solid var(--line-strong); }
.newsletter input { background: transparent; border: 0; color: #fff; padding: 1rem 0; font-family: var(--font-body); font-size: 1rem; outline: none; min-width: 0; }
.newsletter input::placeholder { color: var(--fg-4); }
.newsletter form:focus-within { border-bottom-color: #fff; }
.newsletter small { display: block; color: var(--fg-4); font-size: 0.75rem; margin-top: 0.75rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 4rem 2.5rem; background: var(--bg-0); }
.footer__grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__brand img { height: 26px; width: auto; margin-bottom: 1.25rem; }
.footer__brand p { color: var(--fg-3); font-size: 0.9rem; max-width: 34ch; }
.footer h4 { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 1.25rem; font-weight: 500; }
.footer li { margin-bottom: 0.6rem; }
.footer li a { color: var(--fg-2); font-size: 0.95rem; transition: color var(--dur-fast); }
.footer li a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }
.footer__bottom a:hover { color: #fff; }
.footer__bottom .links { display: flex; gap: 1.5rem; }

/* ---------- Sub-pages ---------- */
.page-hero { position: relative; padding-top: calc(var(--header-h) + var(--space-block)); padding-bottom: var(--space-block); overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.page-hero__bg::after { content: ''; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.2) 55%, #000 98%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--text-hero); margin: 1.1rem 0 1.35rem; max-width: 21ch; }
.page-hero .lede { max-width: 56ch; }
.page-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.breadcrumb { display: flex; gap: 0.75rem; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }
.breadcrumb a:hover { color: #fff; }

.feature-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.feature-grid > article { background: var(--bg-0); padding: 2rem; display: flex; flex-direction: column; gap: 0.9rem; min-height: 280px; transition: background var(--dur-fast); }
.feature-grid > article:hover { background: var(--bg-2); }
.feature-grid .idx { font-family: var(--font-label); font-size: 0.66rem; color: var(--fg-4); letter-spacing: 0.14em; margin-bottom: auto; }
.feature-grid h3 { font-size: 1.05rem; }
.feature-grid p { font-size: 0.92rem; color: var(--fg-3); }
.feature-grid .metric { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff; letter-spacing: -0.022em; line-height: 1; }
.feature-grid .metric small { font-size: 0.4em; color: var(--fg-3); font-weight: 500; }

.steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .steps > li { grid-template-columns: 4rem 1fr 1fr; gap: 2rem; } }
.steps > li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-label); font-size: 0.72rem; color: var(--fg-4); letter-spacing: 0.14em; padding-top: 0.4rem; }
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--fg-3); font-size: 0.95rem; }

.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 2rem; align-items: center; gap: 1rem; padding: 1.4rem 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.92rem, 0.88rem + 0.25vw, 1.08rem); color: #fff; letter-spacing: -0.006em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-label); font-size: 1.05rem; color: var(--fg-3); text-align: right; transition: transform var(--dur-fast); }
.faq details[open] summary::after { transform: rotate(45deg); }
/* Pendant le repli animé, `open` est encore vrai : on refait pivoter le « + »
   tout de suite pour qu'il ne traîne pas derrière la hauteur (cf. initFaq). */
.faq details.is-closing summary::after { transform: none; }
.faq .faq__body { padding: 0 0 1.6rem; max-width: 70ch; color: var(--fg-3); }
.faq .faq__body p + p { margin-top: 0.75rem; }

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.2rem; }
.prose strong { color: #fff; font-weight: 600; }

.team { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(4, 1fr); } }
.team > div { background: var(--bg-0); padding: 1.5rem; }
.team .avatar { width: 100%; aspect-ratio: 1; background: var(--bg-3); margin-bottom: 1.25rem; display: grid; place-items: center; overflow: hidden; }
.team .avatar img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.team .avatar svg { width: 40%; height: 40%; opacity: 0.3; }
.team strong { color: #fff; display: block; }
.team span { color: var(--fg-3); font-size: 0.85rem; }

/* Contact */
.contact { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact { grid-template-columns: 5fr 7fr; gap: 5rem; } }
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.5rem; }
.field label { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.field input, .field select, .field textarea {
  background: var(--bg-1); border: 0; border-bottom: 1px solid var(--line-strong); color: #fff;
  padding: 0.9rem 0.75rem; font-family: var(--font-body); font-size: 1rem; outline: none; border-radius: 0; width: 100%;
  transition: border-color var(--dur-fast);
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.field select option { background: #111; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom: 2px solid #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-4); }
.form__status { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; min-height: 1.2em; }
.form__status.is-error { color: var(--alert); }
.form__status.is-ok { color: var(--signal); }
.contact__info { display: grid; gap: 2rem; align-content: start; }
.contact__info dl { display: grid; gap: 1.25rem; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
.contact__info dt { font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 0.25rem; }
.contact__info dd { color: #fff; }

/* Article list */
.article-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.article-list > a { display: grid; gap: 1rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); transition: padding-left var(--dur-fast); }
@media (min-width: 900px) { .article-list > a { grid-template-columns: 140px 1fr 2fr auto; align-items: center; gap: 2rem; } }
.article-list > a:hover { padding-left: 0.75rem; }
.article-list .meta { font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }
.article-list h3 { font-size: 1.02rem; }
.article-list p { color: var(--fg-3); font-size: 0.92rem; }
.article-list .arrow { font-family: var(--font-label); color: #fff; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.9rem 0; font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.marquee--paper { background: var(--paper); color: var(--paper-ink); border-color: var(--paper-line); font-weight: 600; }
.marquee--paper .marquee__track span::before { color: rgba(28, 22, 10, 0.38); }
.marquee__track { display: inline-flex; gap: 3rem; animation: marquee 40s linear infinite; padding-right: 3rem; }
.marquee__track span::before { content: '//'; color: var(--fg-5); margin-right: 1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Misc ---------- */
.placeholder-note { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }