/* Direction : docs/design/direction.md (Nuit cinetique) */

@font-face {
  font-family: "Syne";
  src: url("/fonts/syne-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/syne-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleur */
  --bg: #07070B;
  --bg-raised: #0E0E15;
  --ink: #F2F1F7;
  --ink-dim: #9B98AD;
  --line: #1C1B26;
  --aurora-1: #7C5CFF;
  --aurora-2: #22D3EE;
  --aurora-3: #FF4D8D;
  --danger: #FF6B6B;
  --success: #4ADE80;

  /* Typographie */
  --font-display: "Syne", "Arial Black", sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-hero: clamp(2.5rem, 12vw, 8.5rem);
  --fs-section: clamp(2rem, 4.5vw, 3.5rem);
  --fs-body: 1.0625rem;
  --fs-detail: 0.78125rem;

  /* Espacement */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 160px;
  --gutter: 16px;
  --content: 1200px;
  --section-gap: var(--sp-9);

  /* Rayon */
  --r-card: 20px;
  --r-field: 12px;
  --r-pill: 999px;

  /* Courbes */
  --ease-snap: cubic-bezier(0.12, 0.9, 0.18, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
  /* spring(t, 2, 0.7), spring doux de la personnalite fluide, echantillonne sur sa pose et joue sur --dur-ui */
  --ease-spring: linear(0, 0.011, 0.039, 0.082, 0.136, 0.197, 0.263, 0.331, 0.4, 0.469, 0.535, 0.598, 0.657, 0.712, 0.762, 0.808, 0.849, 0.885, 0.917, 0.944, 0.968, 0.987, 1.003, 1.016, 1.026, 1.034, 1.039, 1.043, 1.045, 1.046, 1.046, 1.044, 1.043, 1.04, 1.037, 1.034, 1.031, 1.028, 1.025, 1.022, 1);

  /* Durees */
  --dur-fast: 200ms;
  --dur-ui: 400ms;
  --dur-reveal: 700ms;
  --dur-hero: 1200ms;
  /* vitesse constante voulue : rotation de l'indicateur d'envoi */
  --dur-spin: 800ms;

  /* Partition du hero */
  --t-silence: 150ms;
  --t-title: 250ms;
  --t-sub: 900ms;
  --t-cta: 1050ms;
  --t-follow: 140ms;
  --stagger-word: 70ms;
  --stagger-item: 60ms;

  /* Distances */
  --shift: 16px;
  --shift-sub: 12px;
  --lift: -4px;
  --nudge: 4px;
  --press: 0.97;

  color-scheme: dark;
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}
@media (min-width: 960px) {
  :root { --section-gap: var(--sp-10); }
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Grain fixe en surimpression */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--aurora-1); color: var(--ink); }

a { color: inherit; }
img, svg, canvas { display: block; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--aurora-1);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 60;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* En-tete */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aurora-1);
}
.nav {
  display: flex;
  gap: var(--sp-5);
}
.nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: var(--sp-2) 0;
  text-underline-offset: 6px;
}
.nav a:hover { text-decoration: underline; text-decoration-color: var(--aurora-1); }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 128px 0 var(--sp-9);
  overflow: hidden;
  background: var(--bg);
}
/* Degrade de repli : sans script, ou quand aurora.js ne trouve pas WebGL */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 66% 32%, color-mix(in oklab, var(--aurora-1) 46%, transparent), transparent 70%),
    radial-gradient(45% 40% at 88% 56%, color-mix(in oklab, var(--aurora-2) 26%, transparent), transparent 70%),
    radial-gradient(30% 30% at 48% 14%, color-mix(in oklab, var(--aurora-3) 18%, transparent), transparent 70%);
}
.js .hero::before { opacity: 0; }
.js .hero.no-webgl::before { transition: opacity var(--dur-hero) var(--ease-soft) var(--t-silence); }
.js .is-ready .hero.no-webgl::before { opacity: 1; }
.hero__aurora {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
/* Voile : assombrit le haut sous l'en-tete (liens a 4,5:1 au moins), rien a gauche sous 640 px */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0, color-mix(in oklab, var(--bg) 55%, transparent) 72px, transparent 150px);
}
@media (min-width: 640px) {
  .hero__veil {
    background:
      linear-gradient(to bottom, var(--bg) 0, color-mix(in oklab, var(--bg) 55%, transparent) 72px, transparent 150px),
      linear-gradient(to right, color-mix(in oklab, var(--bg) 30%, transparent) 0%, transparent 40%);
  }
}
.hero__content { position: relative; }
/* Horizon de l'aurore : le sous-titre et le bouton reposent sur le noir */
.hero__foot { position: relative; }
.hero__foot::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -128px;
  bottom: calc(-1 * var(--sp-9));
  left: -50vw;
  right: -50vw;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, color-mix(in oklab, var(--bg) 30%, transparent) 64px, color-mix(in oklab, var(--bg) 78%, transparent) 128px, var(--bg) 176px);
}
.hero__title {
  max-width: 11ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
}
.hero__lead {
  max-width: 30rem;
  margin-top: var(--sp-6);
  font-size: clamp(var(--fs-body), 1.4vw, 1.25rem);
  color: var(--ink);
  opacity: 0.86;
}
.hero__actions { margin-top: var(--sp-6); }

/* Mots reveles par masque */
.word {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.word__inner { display: inline-block; }

/* Bouton principal */
.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 56px;
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--bg);
  font: 500 var(--fs-body) / 1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-ui) var(--ease-spring);
}
.button::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--aurora-3), var(--aurora-1));
  filter: blur(18px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
/* Le fond plein passe au-dessus de la lueur, dans la pile isolee du bouton */
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
}
.button__arrow {
  width: 20px;
  height: 20px;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.button:hover::before { opacity: 0.85; }
.button:hover .button__arrow { transform: translateX(var(--nudge)); }
.button:active {
  transform: scale(var(--press));
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-snap);
}
.button:focus-visible { outline-offset: 4px; }

/* Sections */
.section { padding: var(--section-gap) 0; }
.section__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Services */
.cards {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .cards { gap: var(--sp-5); }
}
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-raised);
  transition:
    transform var(--dur-fast) var(--ease-soft),
    opacity var(--dur-reveal) var(--ease-soft);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid color-mix(in oklab, var(--aurora-1) 55%, transparent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.card__halo {
  position: absolute;
  top: -200px;
  left: -200px;
  z-index: -1;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--aurora-1) 34%, transparent), color-mix(in oklab, var(--aurora-2) 10%, transparent) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--mx, 50%), var(--my, 50%));
  transition:
    opacity var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}
@media (hover: hover) {
  .card:hover { transform: translateY(var(--lift)); }
  .card:hover::after,
  .card:hover .card__halo { opacity: 1; }
}
.card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.card__title {
  padding-top: var(--sp-9);
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.card__text {
  margin-top: var(--sp-3);
  color: var(--ink-dim);
}
@media (min-width: 720px) and (max-width: 1023px) {
  .card { min-height: 0; padding: var(--sp-5); }
  .card__title { padding-top: var(--sp-8); font-size: 1.25rem; }
  .card__text { font-size: 0.9375rem; }
}

/* Bandeau France */
.band {
  border-block: 1px solid var(--line);
  padding: var(--section-gap) 0;
  background:
    radial-gradient(50% 120% at 100% 50%, color-mix(in oklab, var(--aurora-1) 12%, transparent), transparent 70%),
    var(--bg);
}
.band__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aurora-3);
}
.band__title {
  max-width: 22ch;
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Contact */
.contact__grid {
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 960px) {
  .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--sp-9); }
}
.contact__alt {
  margin-top: var(--sp-5);
  color: var(--ink-dim);
}
.contact__alt a {
  color: var(--ink);
  text-decoration-color: var(--aurora-1);
  text-underline-offset: 4px;
}
.contact__panel { position: relative; }

.form__fields {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.field { display: grid; gap: var(--sp-2); }
.field__label {
  font-weight: 500;
  font-size: 0.9375rem;
}
.field__input {
  width: 100%;
  height: 56px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--bg-raised);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.4 var(--font-text);
  appearance: none;
}
.field__input--area {
  height: auto;
  min-height: 168px;
  padding: var(--sp-4);
  resize: vertical;
}
.field__input:hover { border-color: color-mix(in oklab, var(--ink-dim) 45%, var(--line)); }
.field__input:focus {
  outline: 2px solid var(--aurora-1);
  outline-offset: 0;
  border-color: transparent;
}
.field__input[aria-invalid="true"] { border-color: var(--danger); }
.field__input[aria-invalid="true"]:focus { outline-color: var(--danger); }
.field__error {
  color: var(--danger);
  font-size: 0.9375rem;
  animation: fade-in var(--dur-fast) var(--ease-soft) both;
}
@keyframes fade-in { from { opacity: 0; } }
.field__error:empty { display: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip { position: relative; cursor: pointer; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9375rem;
}
.chip:hover span { border-color: var(--ink-dim); }
.chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--aurora-1);
  outline-offset: 2px;
}
.field[data-invalid] .chip span { border-color: var(--danger); }

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile : sous le bouton, il ne pousse rien ; visible seulement quand une interaction est demandee */
.turnstile:not(.is-visible) { display: none; }
.turnstile {
  height: 65px;
  max-width: 400px;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--bg-raised);
  animation: fade-in var(--dur-ui) var(--ease-soft) both;
}
.turnstile iframe { display: block; margin: -1px; }

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}
.button--submit { min-width: 168px; }
.form__legal {
  flex: 1 1 14rem;
  color: var(--ink-dim);
  font-size: 0.875rem;
}
.form__legal a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, var(--ink-dim) 50%, transparent);
  text-underline-offset: 3px;
}
.form__legal a:hover { color: var(--ink); text-decoration-color: var(--aurora-1); }
.form__error {
  color: var(--danger);
  font-size: 0.9375rem;
}
.form__error:empty { display: none; }

.button__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin var(--dur-spin) linear infinite;
}
.form[data-state="sending"] .button__spinner { display: block; }
.form[data-state="sending"] .button__arrow { display: none; }
.form[data-state="sending"] .button--submit { cursor: progress; }
.form__fields:disabled .field__input,
.form__fields:disabled .chip { opacity: 0.6; }
@keyframes spin { to { transform: rotate(360deg); } }

.success {
  display: grid;
  justify-items: start;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-raised);
}
.success[hidden] { display: none; }
.success:focus { outline: none; }
.success__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--success) 16%, transparent);
  color: var(--success);
}
.success__mark svg { width: 26px; height: 26px; }
.success__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.success__text { color: var(--ink-dim); }
.success__text strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-7);
}
.logo--small { font-size: 1.125rem; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.footer-nav a {
  display: inline-block;
  padding: var(--sp-2) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  text-underline-offset: 6px;
}
.footer-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--aurora-1); }

/* Etats d'entree : caches seulement quand le script est la pour les reveler */
/* L'aurore se dessine dans le noir et s'ouvre dans son shader : le canvas n'apparait qu'a sa premiere image */
.js .hero__aurora {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.js .hero__aurora.is-lit { opacity: 1; }

/* Le titre reste cache tant qu'il n'est pas decoupe en mots (filet de securite dans index.html) */
.js [data-words]:not(.is-split) { opacity: 0; }

.js [data-words] .word__inner {
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform var(--dur-reveal) var(--ease-snap),
    opacity var(--dur-fast) var(--ease-soft);
  transition-delay: calc(var(--t-start, 0ms) + var(--i, 0) * var(--stagger-word));
}
.js [data-words="hero"] { --t-start: var(--t-title); }
.js .is-in .word__inner,
.js .is-ready [data-words="hero"] .word__inner { opacity: 1; transform: none; }

.js [data-intro="sub"] {
  opacity: 0;
  transform: translateY(var(--shift-sub));
  transition:
    transform var(--dur-reveal) var(--ease-soft) var(--t-sub),
    opacity var(--dur-reveal) var(--ease-soft) var(--t-sub);
}
.js [data-intro="cta"] {
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-soft) var(--t-cta);
}
.js .is-ready [data-intro] { opacity: 1; transform: none; }

.js [data-rise] {
  opacity: 0;
  transform: translateY(var(--shift));
  transition:
    transform var(--dur-reveal) var(--ease-soft),
    opacity var(--dur-reveal) var(--ease-soft);
  transition-delay: calc(var(--t-follow) + var(--i, 0) * var(--stagger-item));
}
.js [data-rise].is-in { opacity: 1; transform: none; }
.js .card[data-rise].is-settled {
  transition:
    transform var(--dur-fast) var(--ease-soft),
    opacity var(--dur-reveal) var(--ease-soft);
}
@media (hover: hover) {
  .js .card[data-rise].is-settled:hover { transform: translateY(var(--lift)); }
}

/* Mouvement reduit : tout se pose a sa place, seule l'opacite garde un fondu court */
@media (prefers-reduced-motion: reduce) {
  :root {
    --shift: 0px;
    --shift-sub: 0px;
    --lift: 0px;
    --nudge: 0px;
    --press: 1;
    --stagger-word: 0ms;
    --stagger-item: 0ms;
    --t-silence: 0ms;
    --t-title: 0ms;
    --t-sub: 0ms;
    --t-cta: 0ms;
    --t-follow: 0ms;
    --dur-fast: 150ms;
    --dur-ui: 150ms;
    --dur-reveal: 150ms;
    --dur-hero: 150ms;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-property: opacity !important;
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .card__halo { display: none; }
}

/* Pages legales : meme socle, sans aurore */
.site-header--static { position: relative; }
.legal-page { background: var(--bg); }
.legal-page .site-header {
  background:
    radial-gradient(60% 140% at 85% 0%, color-mix(in oklab, var(--aurora-1) 18%, transparent), transparent 70%);
}
.legal {
  max-width: 46rem;
  padding-block: var(--sp-8) var(--section-gap);
}
.legal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: -0.03em;
}
.legal__section { margin-top: var(--sp-7); }
.legal__section h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.legal__section p + p { margin-top: var(--sp-3); }
.legal__section a {
  color: var(--ink);
  text-decoration-color: var(--aurora-1);
  text-underline-offset: 4px;
}
.legal__facts {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4);
}
@media (min-width: 640px) {
  .legal__facts { grid-template-columns: minmax(12rem, auto) 1fr; }
}
.legal__facts dt { color: var(--ink-dim); }
.legal__facts dd { margin: 0 0 var(--sp-2); }
@media (min-width: 640px) {
  .legal__facts dd { margin: 0; }
}