:root {
  color-scheme: dark;
  /* OLED palette — one accent, high contrast. */
  --waf-bg: #000;
  --waf-panel: #0a0a0b;
  --waf-panel2: #101012;
  --waf-line: #222226;
  --waf-line2: #34343a;
  /* Type hierarchy colours. */
  --waf-hi: #ffffff;     /* titles, primary text */
  --waf-desc: #c9c9d1;   /* descriptions — light grey, well legible */
  --waf-mid: #8e8e96;    /* secondary UI text */
  --waf-low: #5c5c64;    /* recessed technical data (mono) */
  --waf-orange: #f59e0b;
  --waf-orange-h: #ffb938;
  /* Soft-rounded corners (revised 2026-06-03 — Toutou heritage, no longer flat). */
  --waf-r: 8px;          /* panels, buttons */
  --waf-r-sm: 5px;       /* chips, comment bubbles, badges */
  --waf-r-lg: 16px;      /* big cards, the WeTransfer dropzone */
  /* Subtle glow. On OLED black a dark shadow reads as depth; a faint orange halo
     reads as "glow". Keep alphas low — discreet, never neon. */
  --waf-glow: 0 10px 40px rgba(0,0,0,0.6);
  --waf-glow-accent: 0 0 26px rgba(245,158,11,0.10);
  /* Piles SYSTÈME d'abord servies localement. Le @import Google Fonts a été
     RETIRÉ (DA 2026-08) : c'était la seule requête sortante d'une page WAF, et
     elle bloquait le rendu de CHAQUE surface (3 aller-retours cross-origin :
     la feuille + deux .woff2). « La vitesse est la marque » — Inter et
     JetBrains Mono restent en tête de pile pour ceux qui les ont installées,
     sinon on tombe sur system-ui / ui-monospace, sans saut de rendu. */
  --waf-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --waf-mono: 'JetBrains Mono', ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ───────────────────────────────────────────────────────────────────────
     DA « Verre nuit » (validée Cédric, 2026-08-05 — mètre-étalon :
     orchestration/da-lab/landing/hybride.html). Vocabulaire PARTAGÉ par
     toutes les surfaces ; le contrat d'usage est décrit dans
     orchestration/outbox/da-socle-api.md.

     Ces tokens s'AJOUTENT aux --waf-bg/--waf-panel/… historiques, ils ne les
     remplacent pas : une surface bascule en DA quand elle le décide (le
     socle ne peut pas repeindre le widget Miro par surprise).
     ─────────────────────────────────────────────────────────────────────── */
  /* Le sol : nuit bleutée unie. AUCUNE texture, AUCUNE photo — la « lave » a
     été rejetée en revue (« Restons KISS, sobre et élégant »). La matière
     vient du verre et de la lumière. */
  --waf-night: #0b0e13;
  --waf-night-2: #0d1119;      /* haut du dégradé de page */
  --waf-night-deep: #07090d;   /* bas du dégradé de page */
  /* Verre : opaque par défaut, translucide seulement si backdrop-filter existe
     (voir .waf-glass dans le shell — @supports, jamais de coût imposé). */
  --waf-glass: #10141c;
  --waf-glass-blur: rgba(17,22,31,0.52);
  /* Hairlines — des filets de lumière, pas des bordures. */
  --waf-hair: rgba(255,255,255,0.08);
  --waf-hair-soft: rgba(255,255,255,0.05);
  /* Encre (3 niveaux, nuit) — l'équivalent DA de hi/desc/mid/low.
     ink-3 tient AA sur le pire fond réel : ne pas le rabaisser (docblock). */
  --waf-ink: #f4f6fa;
  --waf-ink-2: #a6adbb;
  --waf-ink-3: #7f8899;
  /* Lumière ambre — même accent #f59e0b, décliné. */
  --waf-amber: #f59e0b;
  --waf-amber-hi: #ffb938;
  --waf-amber-deep: #c47607;
  --waf-amber-ink: #221503;    /* texte SUR aplat ambre (contraste AA) */
  /* Rayons de la DA (plus généreux que les rayons historiques). */
  --waf-r-glass: 18px;
  --waf-r-drop: 24px;
  --waf-r-ctrl: 11px;
  /* Ombres : profondeur + liseré de lumière en haut du verre. */
  --waf-lift: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 70px rgba(0,0,0,0.45);
  --waf-lift-hero: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 90px rgba(0,0,0,0.55), 0 0 90px rgba(245,158,11,0.07);
  --waf-halo: 0 0 34px rgba(245,158,11,0.28);
  /* Focus visible — un seul contour dans tout le produit (le shell l'applique
     globalement, les surfaces qui ne consomment pas le shell le posent à la
     main : outline: var(--waf-focus); outline-offset: var(--waf-focus-off)). */
  --waf-focus: 2px solid var(--waf-amber);
  --waf-focus-off: 3px;
  /* Rythme vertical / gouttière de page. */
  --waf-gap: 20px;
  --waf-pad: 28px;
  --waf-col: 1060px;
}

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

.waf-title {
  font-family: var(--waf-font);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--waf-hi);
  overflow-wrap: anywhere;
}

.waf-desc {
  font-family: var(--waf-font);
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.4;
  color: var(--waf-desc);
  overflow-wrap: anywhere;
}

/* Recessed technical data: filenames, tokens, timecodes, version timestamps. */
.waf-mono {
  font-family: var(--waf-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: var(--waf-low);
  overflow-wrap: anywhere;
}

.waf-panel {
  background: var(--waf-panel);
  border: 1px solid var(--waf-line);
  border-radius: var(--waf-r);
  box-shadow: var(--waf-glow);
}

/* Opt-in glow utilities — apply to hero elements (wave panel, primary button). */
.waf-glow { box-shadow: var(--waf-glow); }
.waf-glow-accent { box-shadow: var(--waf-glow), var(--waf-glow-accent); }

/* Buttons — square, flat. */
.waf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--waf-font);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 8px 13px;
  border-radius: var(--waf-r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.waf-btn svg { width: 14px; height: 14px; display: block; }

.waf-btn-primary {
  background: var(--waf-orange);
  color: #000;
  border-color: var(--waf-orange);
}
.waf-btn-primary:hover { background: var(--waf-orange-h); border-color: var(--waf-orange-h); box-shadow: var(--waf-glow-accent); }

.waf-btn-ghost {
  background: transparent;
  color: var(--waf-hi);
  border-color: var(--waf-line2);
}
.waf-btn-ghost:hover { border-color: var(--waf-orange); color: var(--waf-orange); }

.waf-btn[disabled], .waf-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.waf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--waf-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--waf-low);
  background: transparent;
  border: 1px solid var(--waf-line);
  border-radius: var(--waf-r-sm);
  padding: 3px 8px;
}


/* ── Reset minimal + sol de page ──────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--waf-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--waf-ink);
  background-color: var(--waf-night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Le sol : nuit unie + trois halos très bas en opacité. Aucun fichier image,
   aucune requête — un dégradé peint par le compositeur. */
body.waf-ground {
  background-image:
    radial-gradient(1000px 560px at 50% -120px, rgba(245,158,11,0.10), transparent 65%),
    radial-gradient(760px 560px at 88% 22%, rgba(64,110,255,0.055), transparent 62%),
    radial-gradient(900px 640px at 4% 78%, rgba(245,158,11,0.045), transparent 60%),
    linear-gradient(180deg, var(--waf-night-2) 0%, var(--waf-night) 40%, var(--waf-night-deep) 100%);
  background-attachment: fixed;
}
a { color: inherit; }
svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: rgba(245,158,11,0.32); color: #fff; }
:focus-visible { outline: var(--waf-focus); outline-offset: var(--waf-focus-off); border-radius: 6px; }

/* ── Colonne ──────────────────────────────────────────────────────────────── */
.waf-wrap { max-width: var(--waf-col); margin: 0 auto; padding: 0 var(--waf-pad); }
.waf-wrap-read { max-width: 760px; }

/* ── Verre — opaque par défaut, translucide SI le navigateur sait le faire ── */
.waf-glass {
  background: var(--waf-glass);
  border: 1px solid var(--waf-hair);
  border-radius: var(--waf-r-glass);
  box-shadow: var(--waf-lift);
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
  .waf-glass {
    background: var(--waf-glass-blur);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.waf-top { position: relative; z-index: 30; }
.waf-top-float { position: absolute; top: 0; left: 0; right: 0; }
.waf-top-line { border-bottom: 1px solid var(--waf-hair-soft); }
.waf-top-in {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.waf-lockup { display: inline-flex; align-items: center; text-decoration: none; }
/* Bouton de contrôle discret (« Se connecter », « Retour au site »). Hauteur
   44 px = cible tactile, décidée une fois pour tout le site. */
.waf-ctrl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 550;
  color: var(--waf-ink);
  text-decoration: none;
  border: 1px solid var(--waf-hair);
  border-radius: var(--waf-r-ctrl);
  background: rgba(255,255,255,0.03);
  transition: border-color .18s ease, background-color .18s ease;
}
.waf-ctrl:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .waf-ctrl { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* ── Bouton primaire — le seul aplat ambre du site ────────────────────────── */
.waf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--waf-font);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--waf-amber-ink);
  text-decoration: none;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--waf-amber-hi), var(--waf-amber) 60%, #e08b06);
  box-shadow: var(--waf-halo), inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease;
}
.waf-cta:hover { transform: translateY(-1px); box-shadow: 0 0 48px rgba(245,158,11,0.4), inset 0 1px 0 rgba(255,255,255,0.4); }
.waf-cta[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ── Numérotation « fiche technique » (01 / 02 / 03) ──────────────────────── */
.waf-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11.5px/1 var(--waf-mono);
  letter-spacing: .2em;
  color: var(--waf-amber);
}
.waf-num::before { content: "/"; color: var(--waf-ink-3); font-weight: 500; }
.waf-num::after { content: ""; flex: 1; height: 1px; background: var(--waf-hair-soft); }

/* ── Pastille mono (méta, formats, badges) ────────────────────────────────── */
.waf-chip {
  display: inline-flex;
  align-items: center;
  font: 500 11px/1 var(--waf-mono);
  font-style: normal;
  color: var(--waf-ink-2);
  border: 1px solid var(--waf-hair-soft);
  border-radius: 999px;
  padding: 6px 10px;
}
.waf-kicker {
  display: inline-block;
  font: 600 10.5px/1 var(--waf-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--waf-amber-hi);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.waf-foot { border-top: 1px solid var(--waf-hair-soft); padding: 22px 0 30px; }
.waf-foot-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.waf-foot-nav { display: flex; flex-wrap: wrap; }
.waf-foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  font-size: 13.5px;
  color: var(--waf-ink-2);
  text-decoration: none;
  transition: color .15s ease;
}
.waf-foot-nav a:hover { color: var(--waf-ink); }
.waf-foot-nav a[aria-current="page"] { color: var(--waf-ink); }
.waf-foot-tag { font: 500 11px/1 var(--waf-mono); letter-spacing: .06em; color: var(--waf-ink-3); }

/* ── Animation d'entrée — transform/opacity uniquement, une seule passe ───── */
@media (prefers-reduced-motion: no-preference) {
  .waf-rise { animation: waf-rise .7s cubic-bezier(.2,.7,.3,1) both; }
  .waf-rise-1 { animation-delay: .08s; }
  .waf-rise-2 { animation-delay: .16s; }
}
@keyframes waf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .waf-rise { animation: none; }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --waf-pad: 20px; }
  .waf-top-in { height: 64px; }
  .waf-foot-in { flex-direction: column; gap: 4px; }
  .waf-foot-nav { justify-content: center; }
  /* background-attachment: fixed est coûteux (repaint au scroll) sur mobile. */
  body.waf-ground { background-attachment: scroll; }
}