@charset "UTF-8";
/* =============================================================================
   JERSOFT — Feuille de style unique
   -----------------------------------------------------------------------------
   Aucune dépendance externe. Aucun appel réseau tiers.
   Thème sombre cinématique. Écrit à la main, sans framework.

   SOMMAIRE
     01. Polices auto-hébergées
     02. Jetons de design
     03. Réinitialisation
     04. Typographie
     05. Mise en page
     06. Accessibilité
     07. Couches décoratives
     08. En-tête et navigation
     09. Boutons
     10. Hero
     11. Bifurcation (les deux portes)
     12. Cartes
     13. Chiffres
     14. Étapes et jalons
     15. Bandeau de technologies
     16. Accordéon
     17. Formulaires
     18. Pied de page
     19. Pages de texte
     20. Révélations au défilement
     21. Mouvement réduit et impression
   ============================================================================= */

/* -----------------------------------------------------------------------------
   01. POLICES AUTO-HÉBERGÉES
   Servies depuis ce domaine : aucune requête vers Google Fonts, donc aucune
   transmission de l'adresse IP du visiteur à un tiers (voir docs/RGPD.md).
   Fichiers variables : une seule requête couvre toutes les graisses.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/spacegrotesk-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/spacegrotesk-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-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;
}

/* -----------------------------------------------------------------------------
   02. JETONS DE DESIGN
   -------------------------------------------------------------------------- */
:root {
  /* Fonds — du plus profond au plus clair */
  --ink-1000: #04050a;
  --ink-950: #06070e;
  --ink-900: #0a0c16;
  --ink-850: #0e1120;
  --ink-800: #141827;
  --ink-700: #1d2233;
  --ink-600: #2a3044;

  /* Texte */
  --text-1: #edeff7;
  --text-2: #a9b1c7;
  --text-3: #737c96;

  /* Accents */
  --accent: #5ee7ff;
  --accent-soft: #9df1ff;
  --accent-ink: #04121a;
  --violet: #9b8cff;
  --violet-soft: #c0b6ff;
  --grad: linear-gradient(115deg, #5ee7ff 0%, #9b8cff 100%);
  --grad-soft: linear-gradient(115deg, rgba(94, 231, 255, 0.16), rgba(155, 140, 255, 0.16));

  /* Traits et voiles */
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);
  --veil: rgba(255, 255, 255, 0.03);
  --veil-2: rgba(255, 255, 255, 0.055);

  /* États */
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #fb7185;

  /* Familles */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Échelle typographique fluide */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 3.9vw, 5.25rem);

  /* Rythme — base 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Rayons */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Ombres */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --sh-lg: 0 40px 80px -32px rgba(0, 0, 0, 0.85);
  --sh-glow: 0 0 0 1px rgba(94, 231, 255, 0.25), 0 20px 60px -20px rgba(94, 231, 255, 0.28);

  /* Mouvement */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s;
  --t-mid: 0.35s;
  --t-slow: 0.7s;

  /* Gabarit */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --header-h: 68px;

  color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   03. RÉINITIALISATION
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
  min-height: 100svh;
  background: var(--ink-1000);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

::selection {
  background: rgba(94, 231, 255, 0.28);
  color: #fff;
}

/* Barre de défilement discrète, cohérente avec le thème */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-600) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: var(--r-pill);
  border: 3px solid var(--ink-1000);
}

/* -----------------------------------------------------------------------------
   04. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.04em;
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.034em;
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
  color: var(--text-1);
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.lead {
  font-size: var(--fs-lg);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 60ch;
}

.muted {
  color: var(--text-2);
}
.dim {
  color: var(--text-3);
}

/* Mot mis en lumière dans un titre */
.glow {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Étiquette de section, en mono */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.eyebrow--plain::before {
  display: none;
}

/* Numéro d'ordre discret */
.ordinal {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   05. MISE EN PAGE
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

@media (min-width: 640px) {
  .wrap {
    width: min(100% - 4rem, var(--wrap));
  }
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  position: relative;
  padding-block: clamp(4rem, 2rem + 8vw, 8.5rem);
}

.section--tight {
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem);
}

.section-head {
  max-width: 70ch;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.section-head > .eyebrow {
  margin-bottom: var(--sp-4);
}

.section-head > p {
  margin-top: var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs-lg);
  max-width: 58ch;
}

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* -----------------------------------------------------------------------------
   06. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

/* -----------------------------------------------------------------------------
   07. COUCHES DÉCORATIVES
   -------------------------------------------------------------------------- */

/* Grain fin : évite le banding sur les dégradés très sombres */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halo diffus posé derrière une section */
.aura {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.aura--cyan {
  background: radial-gradient(circle, rgba(94, 231, 255, 0.3), transparent 70%);
}
.aura--violet {
  background: radial-gradient(circle, rgba(155, 140, 255, 0.28), transparent 70%);
}

/* Positions — jamais d'attribut style dans le HTML, la politique de sécurité
   du site interdit les styles en ligne (voir .htaccess). */
.aura--top-left {
  top: -12%;
  left: -8%;
  width: min(620px, 72vw);
  aspect-ratio: 1;
}
.aura--right {
  top: 8%;
  right: -14%;
  width: min(560px, 66vw);
  aspect-ratio: 1;
}
.aura--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 92%);
  aspect-ratio: 1.5;
  opacity: 0.35;
}

/* Grille technique, atténuée sur les bords */
.mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity: 0.7;
}

/* Filet lumineux horizontal entre deux sections */
.seam {
  position: relative;
}
.seam::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 231, 255, 0.35), rgba(155, 140, 255, 0.28), transparent);
}

/* -----------------------------------------------------------------------------
   08. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad);
  will-change: transform;
}

.header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
    backdrop-filter var(--t-mid) var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: rgba(6, 7, 14, 0.72);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Pas de `width: 100%` ici : cette classe est portée par le même élément que
   `.wrap`, à spécificité égale mais plus bas dans le fichier — elle écraserait
   la largeur maximale du conteneur et collerait le contenu aux bords. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
}

.brand:hover .brand__mark {
  animation: markPulse 0.9s var(--ease);
}

@keyframes markPulse {
  50% {
    transform: scale(1.08) rotate(-4deg);
  }
}

.nav {
  display: none;
  align-items: center;
  gap: var(--sp-2);
}

@media (min-width: 900px) {
  .nav {
    display: flex;
  }
}

.nav__link {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 2px;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-mid) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--text-1);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Bouton hamburger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--veil);
}

@media (min-width: 900px) {
  .burger {
    display: none;
  }
}

.burger span {
  display: block;
  height: 1.5px;
  background: var(--text-1);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}

.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Panneau mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: calc(var(--header-h) + var(--sp-6)) var(--sp-5) var(--sp-8);
  background: rgba(4, 5, 10, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (min-width: 900px) {
  .drawer {
    display: none;
  }
}

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.drawer__link[aria-current='page'] {
  color: var(--accent);
}

.drawer .btn {
  margin-top: var(--sp-5);
  justify-content: center;
}

/* -----------------------------------------------------------------------------
   09. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--veil-2);
  --btn-fg: var(--text-1);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.72rem 1.35rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
    background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.btn:hover {
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--t-mid) var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn--primary {
  --btn-bg: var(--grad);
  --btn-fg: var(--accent-ink);
  --btn-bd: transparent;
  font-weight: 650;
}

.btn--primary::after {
  /* reflet qui balaie le bouton au survol */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease);
}

.btn--primary:hover::after {
  transform: translateX(120%);
}

.btn--primary:hover {
  box-shadow: 0 14px 40px -14px rgba(94, 231, 255, 0.6);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: var(--line-strong);
}

.btn--lg {
  padding: 0.92rem 1.7rem;
  font-size: var(--fs-base);
}

.btn--block {
  width: 100%;
  justify-content: center;
}

/* Lien fléché discret */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}

.arrow-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-mid) var(--ease);
}

.arrow-link:hover svg {
  transform: translateX(4px);
}

/* Pastille d'état */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--veil);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.status__dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
}

.status__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  opacity: 0;
  animation: ping 2.4s var(--ease-io) infinite;
}

@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  70%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* -----------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 900px);
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: var(--sp-8);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero__canvas.is-ready {
  opacity: 1;
}

/* Voile de composition.
   Deux couches : la première laisse respirer le réseau de points à DROITE,
   loin du texte ; la seconde assombrit franchement la colonne de gauche pour
   garantir le contraste du titre, quelle que soit la position des particules. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(95deg, var(--ink-1000) 0%, rgba(4, 5, 10, 0.86) 30%, rgba(4, 5, 10, 0.35) 62%, transparent 88%),
    radial-gradient(115% 95% at 78% 30%, rgba(4, 5, 10, 0.1) 0%, rgba(4, 5, 10, 0.62) 52%, var(--ink-1000) 100%);
}

/* Même remarque que pour .header__inner : ne pas redéclarer de largeur ici. */
.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__content {
  max-width: 22ch;
}

.hero h1 {
  margin-block: var(--sp-5) var(--sp-5);
  max-width: 15ch;
}

.hero__lead {
  max-width: 52ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.hero__content {
  max-width: none;
}

/* Indicateur « défiler » */
.scroll-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (min-width: 900px) {
  .scroll-hint {
    display: flex;
  }
}

.scroll-hint__rail {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-hint__rail::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -50%;
  height: 50%;
  background: var(--accent);
  animation: railRun 2.2s var(--ease-io) infinite;
}

@keyframes railRun {
  0% {
    top: -50%;
  }
  100% {
    top: 100%;
  }
}

/* Révélation du titre mot par mot (voir main.js) */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.reveal-word > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  animation: wordUp 0.9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes wordUp {
  to {
    transform: none;
    opacity: 1;
  }
}

/* -----------------------------------------------------------------------------
   11. BIFURCATION — LES DEUX PORTES
   -------------------------------------------------------------------------- */
.doors {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 860px) {
  .doors {
    grid-template-columns: 1fr 1fr;
  }
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--ink-900), var(--ink-950) 70%);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease), border-color var(--t-mid) var(--ease);
}

.door::before {
  /* liseré dégradé au survol */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(94, 231, 255, 0.6), rgba(155, 140, 255, 0.3) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  pointer-events: none;
}

.door::after {
  /* Lueur suivant le pointeur.
     z-index négatif dans un contexte d'empilement isolé : la lueur passe
     au-dessus du fond de la carte, mais reste DERRIÈRE le texte. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 231, 255, 0.12), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.door:hover,
.door:focus-within {
  border-color: transparent;
}

.door:hover::before,
.door:focus-within::before,
.door:hover::after,
.door:focus-within::after {
  opacity: 1;
}

.door--violet::before {
  background: linear-gradient(150deg, rgba(155, 140, 255, 0.65), rgba(94, 231, 255, 0.28) 45%, transparent 75%);
}

.door--violet::after {
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(155, 140, 255, 0.13), transparent 62%);
}

.door__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--text-3);
}

.door h3 {
  margin-top: var(--sp-5);
  max-width: 16ch;
}

.door__desc {
  margin-top: var(--sp-4);
  color: var(--text-2);
  max-width: 42ch;
}

.door__list {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.door__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.door__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.door--violet .door__list li::before {
  background: var(--violet);
}

.door__go {
  margin-top: auto;
  padding-top: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text-1);
}

.door__go svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-mid) var(--ease);
}

.door:hover .door__go svg {
  transform: translateX(5px);
}

/* Toute la carte est cliquable, le lien reste la cible accessible */
.door__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* -----------------------------------------------------------------------------
   12. CARTES
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--ink-900), var(--ink-950));
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease), border-color var(--t-mid) var(--ease);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 231, 255, 0.09), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.card:hover {
  border-color: var(--line-strong);
}

.card:hover::after {
  opacity: 1;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--grad-soft);
  color: var(--accent);
}

.card__icon svg {
  width: 21px;
  height: 21px;
}

.card h3,
.card h4 {
  letter-spacing: -0.02em;
}

.card p {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
}

/* Carte inclinable en 3D (activée par main.js) */
.tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Puces techniques */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.chip {
  padding: 0.24rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--veil);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--text-2);
  white-space: nowrap;
}

/* Liste à cocher */
.checks {
  display: grid;
  gap: var(--sp-3);
}

.checks li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--text-2);
}

.checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(94, 231, 255, 0.35);
  background: rgba(94, 231, 255, 0.09);
}

.checks li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.72em;
  width: 5px;
  height: 8px;
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(42deg);
}

/* Liste des exclusions (ce que je ne fais pas) */
.crosses li::before {
  border-color: rgba(251, 113, 133, 0.32);
  background: rgba(251, 113, 133, 0.08);
}

.crosses li::after {
  left: 7.5px;
  top: 0.78em;
  width: 7px;
  height: 0;
  border-right: 0;
  border-bottom: 1.6px solid var(--err);
  transform: none;
}

/* -----------------------------------------------------------------------------
   13. CHIFFRES
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}

@media (min-width: 820px) {
  .stats--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .stats--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat {
  padding: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  background: var(--ink-950);
  transition: background var(--t-mid) var(--ease);
}

.stat:hover {
  background: var(--ink-900);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.45;
}

.stat__note {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   14. ÉTAPES ET JALONS
   -------------------------------------------------------------------------- */
.steps {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  counter-reset: step;
}

@media (min-width: 900px) {
  .steps--row {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
}

.step {
  position: relative;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 34%;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-slow) var(--ease);
}

.step.is-in::before {
  transform: scaleX(1);
}

.step__no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--accent);
}

.step h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-xl);
}

.step p {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.step__meta {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

/* Version verticale détaillée */
.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-7);
  padding-left: var(--sp-6);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), rgba(155, 140, 255, 0.5), transparent);
  opacity: 0.5;
}

.timeline > li {
  position: relative;
}

.timeline > li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-6) + 1px);
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-1000);
  border: 1.5px solid var(--accent);
}

/* -----------------------------------------------------------------------------
   15. BANDEAU DE TECHNOLOGIES
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-7);
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.marquee__item:hover {
  color: var(--accent);
}

/* -----------------------------------------------------------------------------
   16. ACCORDÉON
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: var(--sp-3);
}

.qa {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-950);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}

.qa[open] {
  border-color: var(--line-strong);
  background: var(--ink-900);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.015em;
  list-style: none;
}

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

.qa summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.6px solid var(--text-2);
  border-bottom: 1.6px solid var(--text-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.qa[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--accent);
}

.qa__body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.qa__body > * + * {
  margin-top: var(--sp-3);
}

/* -----------------------------------------------------------------------------
   17. FORMULAIRES
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--sp-5);
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field > label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}

.field .req {
  color: var(--accent);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.78rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--ink-950);
  color: var(--text-1);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: rgba(94, 231, 255, 0.55);
  background: var(--ink-900);
  box-shadow: 0 0 0 4px rgba(94, 231, 255, 0.1);
}

.textarea {
  min-height: 168px;
  resize: vertical;
  line-height: 1.65;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.select option {
  background: var(--ink-850);
  color: var(--text-1);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.field__error {
  display: none;
  font-size: var(--fs-xs);
  color: var(--err);
}

.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select {
  border-color: rgba(251, 113, 133, 0.6);
}

.field.is-invalid .field__error {
  display: block;
}

/* Pot de miel : invisible pour l'humain, atteignable pour un robot */
.honey {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.6;
}

.form__note a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert {
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.alert.is-shown {
  display: flex;
}

.alert--ok {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.07);
  color: #bbf7d0;
}

.alert--err {
  border-color: rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.07);
  color: #fecdd3;
}

/* Mise en page de la page contact */
.contact-grid {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 1.4fr 0.85fr;
    gap: var(--sp-7);
    align-items: start;
  }
}

.panel {
  display: grid;
  gap: var(--sp-4);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}

.panel .card p {
  margin-top: 0;
}

.panel__mail {
  margin-top: var(--sp-4) !important;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  word-break: break-word;
}

.panel__mail a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(94, 231, 255, 0.4);
}

.panel__mail a:hover {
  text-decoration-color: var(--accent);
}

.panel .cluster {
  margin-top: var(--sp-4);
}

.panel__foot {
  margin-top: var(--sp-4);
}

.panel__steps {
  display: grid;
  gap: var(--sp-3);
  counter-reset: pstep;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.65;
}

.panel__steps li {
  position: relative;
  counter-increment: pstep;
  padding-left: 2rem;
}

.panel__steps li::before {
  content: counter(pstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
}

/* -----------------------------------------------------------------------------
   18. PIED DE PAGE
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  padding-block: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--ink-950);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  margin-bottom: var(--sp-8);
}

@media (min-width: 780px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-6);
  }
}

/* Intitulés de colonne du pied de page.
   Balisés en <h2> et non en <h4> : le dernier titre du contenu principal est un
   <h2>, et sauter au niveau 4 casserait la hiérarchie annoncée aux lecteurs
   d'écran. L'apparence est portée par cette classe, pas par le niveau. */
.footer__head {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}

.footer__links {
  display: grid;
  gap: var(--sp-3);
}

.footer__links a {
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
  width: fit-content;
}

.footer__links a:hover {
  color: var(--accent);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer__legal a:hover {
  color: var(--text-2);
}

.footer__id {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-3);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   19. PAGES DE TEXTE
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
  overflow: hidden;
}

.page-head h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  margin-top: var(--sp-4);
  max-width: 18ch;
}

.page-head p {
  margin-top: var(--sp-5);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.prose p,
.prose ul,
.prose ol,
.prose dl {
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}

.prose ul li,
.prose ol li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.prose ol {
  counter-reset: li;
}

.prose ol li {
  counter-increment: li;
  padding-left: var(--sp-6);
}

.prose ol li::before {
  content: counter(li, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(94, 231, 255, 0.4);
  transition: text-decoration-color var(--t-fast) var(--ease);
}

.prose a:hover {
  text-decoration-color: var(--accent);
}

.prose strong {
  color: var(--text-1);
}

/* Bloc d'identité légale */
.identity {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-950);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.identity dl {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
}

.identity dt {
  color: var(--text-3);
}

.identity dd {
  margin: 0;
  color: var(--text-1);
}

@media (max-width: 560px) {
  .identity dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .identity dd {
    margin-bottom: var(--sp-3);
  }
}

/* Encart d'attention */
.callout {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--veil);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Bloc d'appel final */
.cta {
  position: relative;
  padding: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--ink-900), var(--ink-1000) 65%);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Le halo se glisse entre le fond du bloc et son contenu. */
.cta > .aura {
  z-index: -1;
}

.cta > *:not(.aura) {
  position: relative;
  z-index: 1;
}

.cta h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.cta p {
  max-width: 52ch;
  margin: var(--sp-5) auto 0;
  color: var(--text-2);
  font-size: var(--fs-lg);
}

.cta .cluster {
  justify-content: center;
  margin-top: var(--sp-6);
}

/* Page 404 */
.notfound {
  display: grid;
  place-items: center;
  min-height: min(72svh, 620px);
  text-align: center;
  padding: calc(var(--header-h) + var(--sp-8)) var(--sp-4) var(--sp-8);
}

.notfound h1 {
  margin-top: var(--sp-4);
}

.notfound__lead {
  margin: var(--sp-5) auto 0;
}

.notfound__actions {
  justify-content: center;
  margin-top: var(--sp-6);
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------------------------------
   20. RÉVÉLATIONS AU DÉFILEMENT
   -------------------------------------------------------------------------- */
/* Principe de sûreté : le contenu est VISIBLE par défaut.
   Il n'est masqué pour animation que si la classe `js` est présente sur <html>,
   laquelle est posée par assets/js/boot.js puis retirée automatiquement si
   main.js n'a pas confirmé son démarrage dans les 2,5 secondes.
   Conséquence : une erreur JavaScript ne peut pas rendre le site illisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

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

html:not(.js) .reveal-word > span {
  transform: none;
  opacity: 1;
  animation: none;
}

/* -----------------------------------------------------------------------------
   21. MOUVEMENT RÉDUIT ET IMPRESSION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .reveal-word > span {
    transform: none;
    opacity: 1;
  }

  .marquee__track {
    animation: none;
    transform: none;
  }

  .tilt {
    transform: none !important;
  }
}

@media print {
  .header,
  .drawer,
  .progress,
  .grain,
  .hero__canvas,
  .scroll-hint,
  .marquee,
  .burger {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
  }

  .prose a::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
  }
}