/* ==========================================================================
   Orbe This — vitrine orbethis.com
   Direction "Transmission" : la messagerie inter-IA.
   Palette bi-température : espace indigo profond + orbe à cœur chaud.
   Règle porteuse de sens : chaud = le geste humain / le message,
   iris (froid) = l'IA / le protocole.
   Statique pur. Aucune ressource externe. Aucune police distante.
   ========================================================================== */

/* ---- Thème : sombre par défaut (mode héros), clair complet ------------- */
:root {
  color-scheme: dark;
  --bg:        #0a0b16;
  --bg-2:      #0e1022;
  --panel:     #14172a;
  --panel-2:   #1a1e36;
  --line:      #262b45;
  --line-soft: #1d2138;
  --ink:       #eceefa;
  --muted:     #9aa0c2;
  --faint:     #6b7096;
  --iris:      #8a97ff;   /* accent froid — l'IA, le protocole */
  --iris-2:    #b3bcff;
  --signal:    #ff9b6b;   /* accent chaud — le geste, le message */
  --signal-2:  #ffb894;
  --on-signal: #1a0e06;   /* texte sur bouton chaud */
  --on-iris:   #0a0b16;
  --atmos:     .55;       /* intensité de l'ambiance spatiale */
  --card-glow: 0 22px 60px -34px rgba(10,10,30,.9);

  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 18px;
  --radius-sm: 11px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:        #f3f4fc;
    --bg-2:      #eceef9;
    --panel:     #ffffff;
    --panel-2:   #f7f8fe;
    --line:      #e0e3f2;
    --line-soft: #eaecf7;
    --ink:       #121531;
    --muted:     #565c82;
    --faint:     #868bb0;
    --iris:      #4b57d6;
    --iris-2:    #3a45c0;
    --signal:    #c7492a;
    --signal-2:  #b03f24;
    --on-signal: #ffffff;
    --on-iris:   #ffffff;
    --atmos:     .16;
    --card-glow: 0 20px 44px -30px rgba(40,50,120,.4);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #f3f4fc;
  --bg-2:      #eceef9;
  --panel:     #ffffff;
  --panel-2:   #f7f8fe;
  --line:      #e0e3f2;
  --line-soft: #eaecf7;
  --ink:       #121531;
  --muted:     #565c82;
  --faint:     #868bb0;
  --iris:      #4b57d6;
  --iris-2:    #3a45c0;
  --signal:    #c7492a;
  --signal-2:  #b03f24;
  --on-signal: #ffffff;
  --on-iris:   #ffffff;
  --atmos:     .16;
  --card-glow: 0 20px 44px -30px rgba(40,50,120,.4);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0a0b16;  --bg-2: #0e1022; --panel: #14172a; --panel-2: #1a1e36;
  --line:      #262b45;  --line-soft: #1d2138; --ink: #eceefa; --muted: #9aa0c2;
  --faint:     #6b7096;  --iris: #8a97ff; --iris-2: #b3bcff;
  --signal:    #ff9b6b;  --signal-2: #ffb894; --on-signal: #1a0e06; --on-iris: #0a0b16;
  --atmos:     .55;      --card-glow: 0 22px 60px -34px rgba(10,10,30,.9);
}

/* ---- Base ------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambiance spatiale : deux nébuleuses douces derrière tout le contenu. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 82% 4%, rgba(138,92,224,var(--atmos)) 0%, transparent 60%),
    radial-gradient(40% 46% at 6% 82%, rgba(90,110,255,calc(var(--atmos) * .8)) 0%, transparent 62%),
    radial-gradient(30% 26% at 50% -6%, rgba(255,155,107,calc(var(--atmos) * .35)) 0%, transparent 60%);
  filter: saturate(1.05);
}

a { color: var(--iris); text-decoration: none; }
a:hover { color: var(--iris-2); }

img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.04; letter-spacing: -0.02em; margin: 0; font-weight: 640; }

p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* Étiquette mono — registre "protocole". Structure porteuse de sens. */
.label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
}
.label.cool::before { background: var(--iris); box-shadow: 0 0 10px var(--iris); }

/* ---- Boutons ---------------------------------------------------------- */
.btn {
  --_bg: transparent;
  --_fg: var(--ink);
  --_bd: var(--line);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .8em 1.25em;
  border-radius: 999px;
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  font: inherit;
  font-weight: 560;
  font-size: .98rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }

/* Primaire = geste humain (chaud). */
.btn.primary {
  --_bg: var(--signal);
  --_fg: var(--on-signal);
  --_bd: transparent;
  font-weight: 620;
  box-shadow: 0 14px 34px -14px rgba(255,120,60,.55);
}
.btn.primary:hover { box-shadow: 0 20px 44px -14px rgba(255,120,60,.7); color: var(--on-signal); }

/* Secondaire = protocole (froid, fantôme). */
.btn.ghost { --_bd: color-mix(in srgb, var(--iris) 42%, var(--line)); color: var(--ink); }
.btn.ghost:hover { --_bd: var(--iris); color: var(--ink); }

.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Navigation ------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 1.06rem;
}
.brand:hover { color: var(--ink); }
.brand .glyph {
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff2df 0%, #ffb27a 26%, #e8698f 48%, #8a5ce0 72%, #3a2a8c 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 4px 14px -4px rgba(138,92,224,.8);
  flex: none;
}
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
}
.nav-links a {
  color: var(--muted);
  font-size: .94rem;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-links a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--iris) 60%, transparent); }
.nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--signal); }

.theme-toggle {
  width: 38px; height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--iris); transform: rotate(18deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="light"] .theme-toggle .sun,
:root:not([data-theme]) .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon,
:root:not([data-theme]) .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .sun { display: none; }
  :root:not([data-theme]) .theme-toggle .moon { display: block; }
}

/* ---- Sections --------------------------------------------------------- */
main { display: block; }
.section { padding-block: clamp(56px, 9vw, 108px); }
.section-head { max-width: 640px; margin-bottom: clamp(28px, 5vw, 52px); }
.section-head .label { margin-bottom: 16px; }
.section-head h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.08rem; }

/* ==== L'ORBE — élément signature ======================================= */
.orbe {
  position: relative;
  width: clamp(230px, 42vw, 440px);
  aspect-ratio: 1;
  margin-inline: auto;
  isolation: isolate;
}
/* halo / bloom extérieur */
.orbe::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -1;
  background:
    radial-gradient(circle at 46% 44%, rgba(138,92,224,.55) 0%, rgba(138,151,255,.28) 38%, transparent 66%);
  filter: blur(14px);
  opacity: .9;
}
.orbe-sphere {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%,
      #fff4e2 0%,
      #ffd3a0 9%,
      #ff9e7a 22%,
      #e8698f 40%,
      #8a5ce0 61%,
      #4a34a6 80%,
      #281c5e 100%);
  box-shadow:
    inset -14px -18px 46px rgba(16,9,50,.72),
    inset 12px 14px 34px rgba(255,255,255,.10),
    0 34px 90px -22px rgba(138,92,224,.6),
    0 0 130px -34px rgba(138,151,255,.55);
}
/* reflet spéculaire */
.orbe-sphere::after {
  content: "";
  position: absolute;
  top: 12%; left: 16%;
  width: 30%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%);
  filter: blur(1px);
}
/* terminateur / rim froid en bas à droite (iridescence contrôlée) */
.orbe-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 74% 78%, rgba(138,151,255,.4) 0%, transparent 40%);
  mix-blend-mode: screen;
}

/* système orbital */
.orbe-system { position: absolute; inset: 0; z-index: 2; }
.orbit {
  position: absolute;
  inset: 0;
  transform: rotate(var(--tilt, 0deg));
}
.orbit .ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 90%; height: 36%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--iris) 34%, transparent);
  border-radius: 50%;
}
.orbit .sat {
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  margin: -5.5px;
  border-radius: 50%;
  background: var(--iris-2);
  box-shadow: 0 0 12px 1px var(--iris);
  display: none; /* activé seulement si offset-path est supporté (sinon : rings seuls) */
}
.orbit .sat.warm { background: var(--signal-2); box-shadow: 0 0 14px 1px var(--signal); }
@keyframes orbit { to { offset-distance: calc(var(--start, 0%) + 100%); } }

/* trois orbites distinctes : inclinaison + taille de l'anneau */
.orbit.a { --tilt: 8deg;   }
.orbit.a .sat { --dur: 15s; --start: 5%;  }
.orbit.b { --tilt: 62deg;  }
.orbit.b .sat { --dur: 22s; --start: 55%; --dir: reverse; }
.orbit.b .ring { width: 84%; height: 34%; border-color: color-mix(in srgb, var(--signal) 30%, transparent); }
.orbit.c { --tilt: -46deg; }
.orbit.c .sat { --dur: 29s; --start: 30%; }
.orbit.c .ring { width: 96%; height: 30%; }

/* Satellites en orbite — chaque point suit exactement son propre anneau. */
@supports (offset-path: ellipse(45% 18% at 50% 50%)) {
  .orbit .sat {
    display: block;
    offset-distance: var(--start, 0%);
    animation: orbit var(--dur, 16s) linear infinite;
    animation-direction: var(--dir, normal);
  }
  .orbit.a .sat { offset-path: ellipse(45% 18% at 50% 50%); }
  .orbit.b .sat { offset-path: ellipse(42% 17% at 50% 50%); }
  .orbit.c .sat { offset-path: ellipse(48% 15% at 50% 50%); }
}

/* ---- Hero d'accueil --------------------------------------------------- */
.hero { position: relative; padding-top: clamp(28px, 5vw, 56px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.hero .label { margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(2.7rem, 8.4vw, 6.1rem);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: .96;
}
.hero h1 .warm {
  background: linear-gradient(96deg, var(--signal), #ff7ea6 60%, var(--iris));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead {
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  max-width: 40ch;
  margin: 22px 0 28px;
  line-height: 1.5;
}
.hero-art { position: relative; display: grid; place-items: center; }

/* ---- Bandeau manifeste ------------------------------------------------ */
.manifesto {
  border-block: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, transparent), transparent);
}
.manifesto .wrap { padding-block: clamp(44px, 7vw, 80px); }
.manifesto p {
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 20ch;
  font-weight: 560;
  color: var(--ink);
}
.manifesto .sub { max-width: 60ch; }
.manifesto .sub p { font-size: 1.1rem; font-weight: 400; color: var(--muted); line-height: 1.6; }
.manifesto .cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.strike { color: var(--faint); }
.keep { color: var(--signal); font-weight: 600; }

/* ---- Diagramme de transmission (signature 2) -------------------------- */
.transmit {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.node {
  text-align: center;
  padding: 20px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--card-glow);
}
.node .role { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.node .who { font-weight: 600; margin-top: 8px; font-size: 1.02rem; }
.node.center { border-color: color-mix(in srgb, var(--iris) 40%, var(--line)); }
.node-orbe {
  width: 58px; height: 58px;
  margin: 8px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff2df 0%, #ffb27a 24%, #e8698f 46%, #8a5ce0 70%, #3a2a8c 100%);
  box-shadow: 0 0 26px -4px rgba(138,92,224,.85), inset -4px -5px 12px rgba(16,9,50,.6);
}
.wire { position: relative; height: 2px; min-width: 34px; align-self: center; overflow: hidden; border-radius: 2px; background: var(--line); }
.wire::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  width: 60%;
  animation: flow 2.4s linear infinite;
}
.wire.back::after { background: linear-gradient(90deg, transparent, var(--iris), transparent); animation-direction: reverse; animation-duration: 3.2s; }
@keyframes flow { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
.transmit-caption { color: var(--muted); margin-top: 22px; max-width: 62ch; }

/* ---- Étapes "3 minutes" ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--card-glow);
  overflow: hidden;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--signal);
  font-weight: 600;
}
.step h3 { font-size: 1.28rem; margin: 14px 0 8px; }
.step p { color: var(--muted); }
.step .glow-line { position: absolute; left: 0; top: 0; height: 3px; width: 46%; background: linear-gradient(90deg, var(--signal), transparent); }

/* ---- Grille de cartes (démos / cas d'usage) --------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--card-glow);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card h3 { font-size: 1.3rem; }
.card p { color: var(--muted); }
.card.link:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--iris) 45%, var(--line)); }
.card .kicker { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.card .go { margin-top: auto; color: var(--iris); font-weight: 560; font-size: .95rem; display: inline-flex; align-items: center; gap: .4em; }
.card-badge {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff2df, #ffb27a 26%, #e8698f 50%, #8a5ce0 76%, #3a2a8c);
  box-shadow: 0 0 20px -4px rgba(138,92,224,.8);
}
a.card { color: inherit; }
a.card:hover { color: inherit; }

/* ---- "Charger dans mon IA" (pages démo) ------------------------------- */
.load-panel {
  border: 1px solid color-mix(in srgb, var(--iris) 30%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--card-glow);
}
.load-panel h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.load-panel > p { color: var(--muted); margin-top: 10px; max-width: 56ch; }
.ai-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.15em;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-weight: 560;
  text-decoration: none;
  transition: transform .18s ease, border-color .2s ease, box-shadow .25s ease;
}
.ai-btn:hover { transform: translateY(-2px); color: var(--ink); box-shadow: var(--card-glow); }
.ai-btn .dot { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; }
.ai-btn .dot.gpt { background: #10a37f; }
.ai-btn .dot.claude { background: #d97757; }
.ai-btn .dot.gemini { background: linear-gradient(135deg, #4285f4, #9b72cb 60%, #d96570); }
.ai-note { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--faint); margin-top: 18px; }
.sub-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; font-size: .92rem; }

/* ---- Ruban de confiance ---------------------------------------------- */
.trust-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 16px 20px;
  border: 1px dashed color-mix(in srgb, var(--iris) 40%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--muted);
}
.trust-ribbon span { display: inline-flex; align-items: center; gap: .5em; }
.trust-ribbon span::before { content: "✓"; color: var(--iris); font-weight: 700; }

.trust-band {
  border-block: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 40%, transparent), transparent);
}
.trust-band .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: clamp(32px, 5vw, 56px); }
.trust-band .pledge { font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 560; letter-spacing: -0.01em; max-width: 24ch; }
.trust-band .pledge b { color: var(--iris); font-weight: 640; }

/* ---- Liste de promesses (page Confiance) ------------------------------ */
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.promise {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 24px;
}
.promise .no { font-family: var(--mono); color: var(--iris); font-weight: 600; font-size: .85rem; }
.promise h3 { font-size: 1.16rem; margin: 10px 0 8px; }
.promise p { color: var(--muted); font-size: .98rem; }

/* ---- Pricing / Founder ------------------------------------------------ */
.pass {
  border: 1px solid color-mix(in srgb, var(--signal) 34%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 8%, var(--panel)), var(--panel));
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--card-glow);
  max-width: 560px;
}
.pass .price { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 18px; }
.pass .price b { font-size: 2.6rem; letter-spacing: -0.03em; }
.pass .price s { color: var(--faint); }
.pass ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.pass li { display: flex; gap: .7em; color: var(--muted); }
.pass li::before { content: "◍"; color: var(--signal); }

/* ---- Pied de page (identique partout) --------------------------------- */
.footer {
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(40px, 6vw, 80px);
}
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 34px 46px; }
.footer .sig { display: inline-flex; align-items: center; gap: .6em; color: var(--muted); font-size: .95rem; }
.footer .sig .glyph {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff2df, #ffb27a 28%, #e8698f 52%, #8a5ce0 76%, #3a2a8c);
  flex: none;
}
.footer .foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: .92rem; }
.footer .foot-links a { color: var(--muted); }
.footer .foot-links a:hover { color: var(--ink); }

/* ---- Utilitaires ------------------------------------------------------ */
.eyebrow-inline { color: var(--muted); }
code {
  font-family: var(--mono);
  font-size: .88em;
  background: color-mix(in srgb, var(--iris) 12%, var(--panel-2));
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: 6px;
}
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .orbe { width: clamp(200px, 62vw, 320px); }
  .steps, .cards, .cards.two, .promises, .manifesto .cols { grid-template-columns: 1fr; }
  .transmit { grid-template-columns: 1fr; gap: 4px; }
  .wire { min-height: 26px; width: 2px; min-width: 0; height: auto; margin: 2px auto; justify-self: center; }
  .wire::after { inset: 0; width: 100%; height: 60%; background: linear-gradient(180deg, transparent, var(--signal), transparent); animation-name: flowv; }
  .wire.back::after { background: linear-gradient(180deg, transparent, var(--iris), transparent); }
  @keyframes flowv { from { transform: translateY(-120%);} to { transform: translateY(220%);} }
}

@media (max-width: 560px) {
  .nav-links { gap: 12px; }
  .nav-links a { font-size: .88rem; }
  .footer .wrap { flex-direction: column; align-items: flex-start; }
}

/* ---- Accessibilité : mouvement réduit --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto; }
  .orbit .sat { animation: none; }
  .wire::after { display: none; }
  .btn:hover, .card.link:hover, .ai-btn:hover, .theme-toggle:hover { transform: none; }
}