@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Layout : accueil de la marque. Le haut de page est un système d'orbites : chaque orbite est
   la piste d'un potard du logo, chaque plugin un corps qui la parcourt. Puis le rack, le
   manifeste qui s'éclaire au défilement, ce qui ne change pas, la liste, les notes. */
:root {
  color-scheme: dark;
  --void: #07070A;
  --deep: #0C0C11;
  --nebula: #15151C;
  --line: #22222C;
  --orbit: #33333F;
  --dust: #868896;
  --haze: #B9BBC6;
  --star: #ECEDF2;
  --light: #FFFFFF;
  --evolve: #62CFAE;
  --warn: #FF9F8A;      /* messages d'erreur */

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-cap: 0.6875rem;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: 1.25rem;
  --t-h3: 1.375rem;
  --t-h2: clamp(2rem, 4.2vw, 3.5rem);
  --t-h1: clamp(2.5rem, 5.2vw, 4.75rem);
  --t-manifest: clamp(1.5rem, 3.2vw, 2.6rem);

  --gutter: clamp(16px, 4vw, 48px);
  --bar-h: 60px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-stopped { overflow: hidden; }

body {
  background: var(--void);
  color: var(--star);
  font: 400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-block: calc(var(--bar-h) + env(safe-area-inset-top, 0px)) 0;
  overflow-x: clip;
}
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-size: var(--t-h3); font-weight: 400; letter-spacing: -0.01em; }
a { color: var(--star); text-underline-offset: 3px; text-decoration-color: var(--orbit); }
a:hover { text-decoration-color: var(--star); }
:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; display: block; }
.wrap { max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.cap { font-family: var(--mono); font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--haze); max-width: 44ch; }
.prose { color: var(--haze); max-width: 60ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 15px/1 var(--sans); padding: 14px 20px; border-radius: 999px;
  border: 1px solid var(--star); background: var(--star); color: var(--void);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--light); }
.btn.ghost { background: transparent; color: var(--star); border-color: var(--orbit); }
.btn.ghost:hover { border-color: var(--star); }

/* Barre du haut */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar-in { max-width: 1200px; margin-inline: auto; height: var(--bar-h); display: flex; align-items: center; gap: 20px; }
.bar .logo { display: block; line-height: 0; }
.bar .logo svg { height: 21px; width: auto; }
.bar .tag { font: 500 10px/1 var(--mono); letter-spacing: 0.16em; color: var(--dust); border: 1px solid var(--orbit); border-radius: 999px; padding: 5px 8px; }
.bar nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.bar nav a { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dust); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--star); }
.bar .cta { padding: 10px 16px; font-size: 13.5px; }
@media (max-width: 860px) { .bar nav a:not(.cta) { display: none; } }
@media (max-width: 420px) { .bar .tag { display: none; } }

/* Haut de page : le système d'orbites */
.hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 { font-size: var(--t-h1); font-weight: 250; line-height: 1; letter-spacing: -0.045em; max-width: 13ch; font-kerning: none; }
.hero h1 em { font-style: normal; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.perk { font-size: var(--t-small); color: var(--dust); max-width: 44ch; }
.perk b { color: var(--star); font-weight: 500; }

.system { min-width: 0; display: grid; gap: 14px; }
.system canvas { display: block; width: 100%; max-width: 100%; aspect-ratio: 1 / 1; cursor: default; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.legend a {
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--dust); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line);
}
.legend a:hover, .legend a.hot { color: var(--star); border-color: var(--orbit); }
.legend a.live { color: var(--star); border-color: var(--star); }
@media (max-width: 899px) { .hero { grid-template-columns: minmax(0, 1fr); } .system { order: -1; } .system canvas { max-width: 560px; margin-inline: auto; } }

/* Le rack */
.rack { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 104px); overflow-x: clip; }
.rack-rail { padding-inline: max(var(--gutter), calc((100% - 1200px) / 2)); }
.rack-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.rack-head .prose { max-width: 42ch; }
.rack-track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.unit {
  width: clamp(280px, 30vw, 400px); flex: none; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px;
  background: var(--nebula); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 16px;
}
.unit-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.unit figure { border-radius: 9px; overflow: hidden; background: var(--void); aspect-ratio: 3 / 2; border: 1px solid var(--line); }
.unit figure img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.unit figure.blank { display: grid; place-items: center; }
.unit figure.blank svg { width: 34%; height: auto; opacity: 0.85; }
.unit h3 span { color: var(--dust); }
.unit p { color: var(--haze); font-size: var(--t-small); line-height: 1.55; }
.unit .go { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--star); text-decoration: none; justify-self: start; border-bottom: 1px solid var(--orbit); padding-bottom: 4px; }
.unit .go:hover { border-color: var(--star); }
.unit .soon { font: 400 12px/1.4 var(--mono); color: var(--dust); }
.status { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; padding: 6px 9px; border-radius: 999px; border: 1px solid var(--orbit); color: var(--dust); white-space: nowrap; }
.status.first { color: var(--void); background: var(--star); border-color: var(--star); }
@media (min-width: 900px) and (min-height: 660px) {
  .rack.pinnable { min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--bar-h) + 24px) 32px; }
}
.rack.stacked .rack-track { width: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rack.stacked .unit { width: auto; }

/* Manifeste : les phrases s'éclairent au passage, comme sous la ligne NOW */
.manifest { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 112px); }
.manifest-in { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.manifest-side { display: grid; gap: 16px; align-content: start; position: sticky; top: calc(var(--bar-h) + 32px); height: max-content; }
.lines { display: grid; gap: clamp(10px, 1.6vw, 18px); }
.lines li {
  font-size: var(--t-manifest); font-weight: 300; line-height: 1.18; letter-spacing: -0.025em;
  color: var(--dust); padding-left: 26px; position: relative; transition: color 0.35s ease; text-wrap: balance;
}
.lines li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--orbit); transition: background 0.35s, border-color 0.35s, box-shadow 0.35s; }
.lines li.lit { color: var(--star); }
.lines li.lit::before { background: var(--star); border-color: var(--star); box-shadow: 0 0 14px color-mix(in srgb, var(--light) 60%, transparent); }
@media (max-width: 899px) { .manifest-in { grid-template-columns: minmax(0, 1fr); } .manifest-side { position: static; } }

/* Ce qui ne change pas */
.facts { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 104px); }
.facts-in { display: grid; gap: clamp(28px, 4vw, 48px); }
.facts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; }
.facts li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid var(--orbit); min-width: 0; }
.facts li p { color: var(--haze); font-size: var(--t-small); line-height: 1.6; }
@media (max-width: 899px) { .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .facts ul { grid-template-columns: minmax(0, 1fr); } }

/* Liste */
.orbit { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 112px); }
.orbit-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.orbit form { display: grid; gap: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row input { flex: 1 1 240px; min-width: 0; font: 400 16px var(--sans); color: var(--star); background: var(--deep); border: 1px solid var(--orbit); border-radius: 999px; padding: 13px 18px; }
.row input::placeholder { color: var(--dust); }
.row input:focus { outline: none; border-color: var(--star); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--haze); line-height: 1.5; }
.consent input { margin-top: 4px; accent-color: var(--star); flex: none; }
.form-msg { font: 400 13px/1.5 var(--mono); color: var(--dust); min-height: 1.5em; }
.form-msg.ok { color: var(--evolve); }
@media (max-width: 899px) { .orbit-in { grid-template-columns: minmax(0, 1fr); } }

/* Pied de page */
.foot { border-top: 1px solid var(--line); }
.foot-in { padding-block: 28px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--dust); }
.foot svg { height: 16px; width: auto; }
.foot .links { display: flex; flex-wrap: wrap; gap: 18px; }

/* Notes de concept */
.notes-sec { padding-block: 8px 72px; }
.notes { background: var(--nebula); border: 1px solid var(--orbit); border-radius: 20px; padding: clamp(22px, 4vw, 48px); display: grid; gap: clamp(28px, 4vw, 44px); }
.notes-head { display: grid; gap: 14px; }
.notes-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
.map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.idea { background: var(--void); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.idea p { color: var(--haze); font-size: var(--t-small); line-height: 1.6; }
.idea .where { font: 400 11.5px/1.5 var(--mono); color: var(--dust); }
.idea a { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; justify-self: start; }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.cols > div { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cols li { color: var(--haze); font-size: var(--t-small); line-height: 1.55; padding: 8px 0; border-top: 1px solid var(--line); }
.cols li b { color: var(--star); font-weight: 500; }
@media (max-width: 899px) { .map, .cols { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { .lines li, .lines li::before { transition: none; } }

/* ── Ajouts du site (formulaire réel, langue, utilitaires) ───────────── */
.stack { display: grid; gap: 16px; }
.stack.l { gap: 18px; }
.r { text-align: right; }
.lang { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dust); text-decoration: none; border: 1px solid var(--orbit); border-radius: 999px; padding: 8px 11px; white-space: nowrap; }
.lang:hover { color: var(--star); border-color: var(--star); }
.signup { display: grid; gap: 14px; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .cf-turnstile { min-height: 65px; }
.signup .status { font: 400 13px/1.5 var(--mono); color: var(--dust); min-height: 1.5em; }
.signup .status.ok { color: var(--evolve); }
.signup .status.err { color: var(--warn); }
.signup .btn[disabled] { opacity: 0.6; cursor: progress; }
.consent a { color: var(--haze); }
.foot .links a { color: var(--dust); text-decoration: none; }
.foot .links a:hover { color: var(--star); }
/* Téléphone : le lien Cozmic Pulse reste dans le haut de page ; l'en-tête garde le logo et la langue. */
@media (max-width: 520px) { .bar .cta { display: none; } }