/* VibesMoney · site v6 (oct. 2026)
   Direction : toujours noir, quel que soit le réglage de l'appareil (le site ne suit plus le mode clair : le halo de la scène 3D
   ne se fondait pas dans le blanc). Minimalisme façon Apple, « Mac en brillance » : un seul accent orange, lumineux ; des surfaces
   sombres qui accrochent la lumière (reflet en haut, bord qui s'allume sous le curseur), des boutons laqués, du verre pour ce qui flotte.
   Satoshi, vraies photos sans retouche. Derrière : un grain fin, une trame de points, des auras orange, de la poussière lumineuse
   et un horizon qui s'embrase sous le hero. Aucune animation ne déplace la mise en page (transform et opacité seulement). */

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/site/fonts/satoshi-variable.woff2") format("woff2");
}

/* Le temps que Satoshi arrive (première visite, réseau lent), le texte s'affiche en Arial réglé à la même largeur : mesuré, la largeur moyenne de
   Satoshi vaut celle d'Arial à ±2 % près (texte courant : 100 %, titres en gras : 98 %). Quand la police arrive, les lignes passent à la ligne
   presque au même endroit : le saut de mise en page (CLS) devient négligeable. */
@font-face {
  font-family: "Satoshi Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 300 600;
  size-adjust: 100%;
}
@font-face {
  font-family: "Satoshi Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 601 900;
  size-adjust: 98%;
}

/* Propriétés typées : CSS sait les animer (le remplissage des boutons, la lumière sous le curseur) */
@property --fr { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --ga { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  /* le noir et ses surfaces */
  --bg: #040405;
  --bg-2: #08080A;
  --surface: #0E0E11;
  --surface-2: #151519;
  --ink: #F5F5F7;
  --ink-2: #A1A1A6;
  --ink-3: #86868C;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --hl: rgba(255, 255, 255, 0.07);
  /* l'accent : un orange lumineux, et sa lumière (de l'ambre au corail) */
  --accent: #FF8A3D;
  --accent-hi: #FFC46B;
  --accent-lo: #FF5A1F;
  --accent-ink: #1A0B02;
  --grad: linear-gradient(120deg, #FFD08A 0%, #FFA552 26%, #FF8A3D 52%, #FF5A1F 100%);
  --title-grad: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #B4B4BB 100%);
  --word-grad: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 26%, #B4B4BB 80%);   /* pour un mot découpé : sa boîte est plus haute (place des jambages), le dégradé est recalé dessus */
  --btn: #F5F5F7;
  --btn-ink: #0B0B0D;
  --ok: #30D158;
  /* le verre : ce qui flotte (navigation, cartes posées sur la scène, pastilles) */
  --glass: rgba(24, 24, 28, 0.62);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --nav-glass: rgba(16, 16, 19, 0.66);
  /* les fenêtres (terminal) */
  --win-bg: #0B0B0E;
  --win-bar: #151518;
  --win-line: rgba(255, 255, 255, 0.08);
  --win-ink: #F2F2F4;
  --win-dim: #8E8E93;
  --term-accent: #FF9A4D;
  --term-ok: #30D158;
  /* WhatsApp, fidèle à l'app en mode sombre */
  --wa-bg: #0B141A;
  --wa-head: #1F2C34;
  --wa-line: rgba(255, 255, 255, 0.06);
  --wa-in: #1F2C34;
  --wa-out: #005C4B;
  --wa-ink: #E9EDEF;
  --wa-time: #8696A0;
  --wa-tick: #53BDEB;
  --wa-chip: #182229;
  --wa-ava: #6A7175;
  --wa-ava-ink: #E9EDEF;
  --wa-typing: #00A884;
  /* le fond : grain, trame de points, auras */
  --grain: 0.055;
  --grain-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --dot: rgba(255, 255, 255, 0.1);
  --glow: rgba(255, 138, 61, 0.16);
  --shadow-photo: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 48px -32px rgba(0, 0, 0, 0.9);
  --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.95);
  --shadow-win: 0 40px 80px -36px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --r-lg: 24px;
  --r-md: 14px;
  --r-pill: 999px;
  --font: "Satoshi", "Satoshi Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wrap: 1180px;
  --gutter: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(255, 138, 61, 0.32); color: #FFFFFF; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a, button, summary, .btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
section[id], [id="les-agents"], [id="appel"] { scroll-margin-top: 96px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 48px; pointer-events: none; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 20px; } }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--btn); color: var(--btn-ink);
  padding: 10px 16px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px;
  transition: top 160ms var(--ease);
}
.skip:focus { top: 12px; }

.ico { width: 20px; height: 20px; flex: none; }

/* ─── Boutons ────────────────────────────────────────────────────────────
   Au repos : une pilule et, à droite, une pastille qui porte la flèche.
   Au survol (ou au focus clavier) : la couleur de la pastille inonde le bouton depuis son centre, le libellé roule et ressort,
   la flèche traverse la pastille, un reflet balaie la laque. Le bouton principal est laqué orange : reflet en haut, ombre en bas,
   lueur dessous. `translate` (aimant du curseur, site.js) reste séparé de `transform` (survol, appui). */
.btn {
  --h: 52px;
  --pad: 6px;
  --disc: calc(var(--h) - 2 * var(--pad));
  --face: var(--btn);
  --face-ink: var(--btn-ink);
  --edge: transparent;
  --flood: var(--accent);
  --flood-ink: var(--accent-ink);
  --disc-bg: var(--accent);
  --disc-ink: var(--accent-ink);
  --disc-bg-2: var(--btn);
  --disc-ink-2: var(--btn-ink);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --lift: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  --lift-on: 0 16px 30px -14px rgba(255, 138, 61, 0.45);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  padding: 0 calc(var(--pad) + var(--disc) + 16px) 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--face);
  color: var(--face-ink);
  box-shadow: inset 0 0 0 1px var(--edge), var(--gloss), var(--lift);
  font: 700 16px/1 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: transform 520ms var(--ease-back), box-shadow 300ms ease, translate 500ms var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--flood);
  clip-path: circle(var(--fr) at calc(100% - var(--pad) - var(--disc) / 2) 50%);
  transition: --fr 560ms var(--ease-io);
}
/* le reflet qui balaie la laque */
.btn::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -34%;
  width: 26%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  transform: translateX(0) skewX(-20deg);
  opacity: 0;
}
.btn-roll { position: relative; display: inline-grid; clip-path: inset(0 -8px); }
.btn-roll > span { grid-area: 1 / 1; padding-block: 2px; transition: transform 600ms var(--ease-back); }
.btn-roll > span + span { transform: translateY(125%); color: var(--flood-ink); }
.btn-disc {
  position: absolute;
  top: 50%;
  right: var(--pad);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--disc);
  height: var(--disc);
  margin-top: calc(var(--disc) / -2);
  border-radius: 50%;
  overflow: hidden;
  background: var(--disc-bg);
  color: var(--disc-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: color 300ms ease;
}
.btn-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--disc-bg-2);
  transform: scale(0);
  transition: transform 380ms var(--ease-io);
}
.btn-disc .ico { grid-area: 1 / 1; position: relative; width: 17px; height: 17px; transition: transform 560ms var(--ease-back); }
.btn-disc .ico + .ico { transform: translateX(-190%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--edge), var(--gloss), var(--lift-on); }
  .btn:hover::before { --fr: 150%; }
  .btn:hover::after { animation: btn-shine 950ms var(--ease) 1; }
  .btn:hover .btn-roll > span:first-child { transform: translateY(-125%); }
  .btn:hover .btn-roll > span + span { transform: translateY(0); }
  .btn:hover .btn-disc { color: var(--disc-ink-2); }
  .btn:hover .btn-disc::before { transform: scale(1); transition-timing-function: var(--ease-back); }
  .btn:hover .btn-disc .ico:first-child { transform: translateX(190%); }
  .btn:hover .btn-disc .ico + .ico { transform: translateX(0); }
}
.btn:focus-visible { outline-offset: 4px; border-radius: var(--r-pill); }
.btn:focus-visible::before { --fr: 150%; }
.btn:focus-visible .btn-roll > span:first-child { transform: translateY(-125%); }
.btn:focus-visible .btn-roll > span + span { transform: translateY(0); }
.btn:focus-visible .btn-disc { color: var(--disc-ink-2); }
.btn:focus-visible .btn-disc::before { transform: scale(1); }
.btn:focus-visible .btn-disc .ico:first-child { transform: translateX(190%); }
.btn:focus-visible .btn-disc .ico + .ico { transform: translateX(0); }
.btn:active { transform: scale(0.97); transition-duration: 140ms; }
@keyframes btn-shine {
  0% { transform: translateX(0) skewX(-20deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(620%) skewX(-20deg); opacity: 0; }
}
/* les deux grands appels (hero, dernier appel) : le reflet repasse de lui-même, toutes les 6 s */
.btn-shine::after { animation: btn-shine-loop 6.2s var(--ease-io) 2.4s infinite; }
@keyframes btn-shine-loop {
  0% { transform: translateX(0) skewX(-20deg); opacity: 0; }
  3% { opacity: 1; }
  17%, 100% { transform: translateX(620%) skewX(-20deg); opacity: 0; }
}

/* Principal : laque orange, la pastille noire ; au survol, une laque plus claire monte de la pastille */
.btn-primary {
  --face: linear-gradient(180deg, #FFB866 0%, #FF8F40 48%, #FF6A26 100%);
  --face-ink: var(--accent-ink);
  --flood: linear-gradient(180deg, #FFD597 0%, #FFAE5E 52%, #FF8436 100%);
  --flood-ink: var(--accent-ink);
  --disc-bg: #0B0B0E;
  --disc-ink: #FFFFFF;
  --disc-bg-2: #FFFFFF;
  --disc-ink-2: #0B0B0E;
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(150, 45, 0, 0.35);
  --lift: 0 0 0 1px rgba(255, 150, 80, 0.45), 0 12px 32px -12px rgba(255, 106, 38, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  --lift-on: 0 0 0 1px rgba(255, 180, 110, 0.7), 0 18px 46px -12px rgba(255, 106, 38, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.btn-primary .btn-disc { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(120, 30, 0, 0.5); }

/* Contour : du verre sombre ; le blanc inonde, la pastille passe à l'orange */
.btn-ghost {
  --face: rgba(255, 255, 255, 0.04);
  --face-ink: var(--ink);
  --edge: rgba(255, 255, 255, 0.16);
  --flood: var(--btn);
  --flood-ink: var(--btn-ink);
  --disc-bg: var(--btn);
  --disc-ink: var(--btn-ink);
  --disc-bg-2: var(--accent);
  --disc-ink-2: var(--accent-ink);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lift: 0 0 0 transparent;
  --lift-on: 0 16px 30px -16px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-sm { --h: 42px; --pad: 5px; padding: 0 calc(var(--pad) + var(--disc) + 12px) 0 18px; font-size: 15px; }
.btn-sm .btn-disc .ico { width: 15px; height: 15px; }

/* Lien texte : le trait se déroule au survol */
.link { position: relative; display: inline-flex; align-items: center; padding-block: 4px; font-weight: 700; font-size: 16px; color: var(--ink); }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; opacity: 0.3; transform: scaleX(0.4); transform-origin: left;
  transition: transform 450ms var(--ease), opacity 300ms ease;
}
.link:hover::after { opacity: 1; transform: scaleX(1); }
/* lien qui mène quelque part : une flèche qui avance */
.link-go { gap: 8px; color: var(--accent); }
.link-go .ico { width: 17px; height: 17px; transition: transform 450ms var(--ease-back); }
.link-go::after { right: 25px; }
.link-go:hover .ico { transform: translateX(4px); }
/* lien dans une phrase */
a.inline { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); transition: text-decoration-color 200ms ease; }
a.inline:hover { text-decoration-color: var(--accent); }

/* ─── Navigation : transparente sur le hero, une pilule de verre sombre dès qu'on défile ─── */
.nav { position: sticky; top: 0; z-index: 50; display: flow-root; padding-top: env(safe-area-inset-top, 0px); }
.nav-in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--wrap);
  height: 68px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  border: 1px solid transparent;
  border-radius: 0;
  transition: width 600ms var(--ease), max-width 600ms var(--ease), height 450ms var(--ease), margin 450ms var(--ease),
    padding 450ms var(--ease), border-radius 600ms var(--ease), background-color 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}
.nav.is-scrolled .nav-in {
  width: calc(100% - 24px);
  max-width: 1000px;
  height: 58px;
  margin-top: 10px;
  padding: 0 7px 0 20px;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: var(--r-pill);
  background: var(--nav-glass);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; padding-block: 9px; margin-block: -9px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }   /* (le rembourrage donne au logo une zone de toucher de 48 px) */

/* ─── Le logo : un cube-robot (blogkit.bot) ───
   L'épaisseur vient de tranches empilées en profondeur (--k : 1 = le fond, 0 = la face avant) ;
   la face avant porte une visière et deux yeux orange. nav.js pose --lx et --ly (de -1 à 1) :
   le cube se tourne vers le curseur, les yeux suivent, clignent, regardent autour d'eux. */
.bot {
  --s: 26px; --d: 0.46; --rx: -12deg; --ry: 22deg; --lx: 0; --ly: 0;
  position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s);
  perspective: calc(var(--s) * 6); perspective-origin: 50% 40%;
}
.bot-cube {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) + var(--ly) * -9deg)) rotateY(calc(var(--ry) + var(--lx) * 14deg));
  transition: transform 420ms var(--ease);
}
.bs {
  position: absolute; inset: 0; border-radius: 30%;
  transform: translateZ(calc(var(--s) * var(--d) * (0.5 - var(--k))));
  background: #1a1a1f;
  background: color-mix(in srgb, #34343c calc((1 - var(--k)) * 100%), #0b0b0e);
}
.bs.f {
  background: linear-gradient(150deg, #3c3c45 0, #1a1a20 46%, #0c0c0f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 calc(var(--s) * 0.05) calc(var(--s) * 0.1) rgba(255, 255, 255, 0.12);
}
.bs.f::before {
  content: ""; position: absolute; left: 17%; right: 17%; top: 22%; bottom: 24%; border-radius: 26%;
  background: #070709; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -2px 4px rgba(0, 0, 0, 0.6);
}
.eyes {
  position: absolute; left: 17%; right: 17%; top: 22%; bottom: 24%; display: flex; justify-content: center; align-items: center; gap: 22%;
  transform: translate3d(calc(var(--lx) * 9%), calc(var(--ly) * 12%), 1px); transition: transform 300ms var(--ease);
}
.eye {
  display: block; width: 21%; height: 56%; border-radius: 99px;
  background: linear-gradient(180deg, #ffd27a, #ff7a3c 70%, #ff4f6a);
  box-shadow: 0 0 calc(var(--s) * 0.22) calc(var(--s) * 0.02) rgba(255, 106, 61, 0.75);
  transform-origin: 50% 55%; animation: bot-blink var(--bt, 5.4s) infinite var(--bd, 0s);
}
.eye + .eye { margin-left: 0; animation-delay: calc(var(--bd, 0s) + 0.04s); }
@keyframes bot-blink { 0%, 91%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(0.08); } }
@keyframes bot-hop { 28% { transform: translateY(-16%) scale(1.07); } 58% { transform: translateY(2%) scale(0.97); } 100% { transform: none; } }
.brand .bot { --s: 30px; margin-right: 1px; }
.bot.is-hop { animation: bot-hop 700ms var(--ease-back); }
@media (hover: hover) and (pointer: fine) { .brand:hover .bot { animation: bot-hop 700ms var(--ease-back); } }
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav-links a { position: relative; z-index: 1; white-space: nowrap; padding: 8px 13px; border-radius: var(--r-pill); color: var(--ink-2); transition: color 200ms ease; }
.nav-links a:hover, .nav-links a.is-current { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); transform: scale(0); transition: transform 350ms var(--ease-back);
}
.nav-links a.is-current::after { transform: scale(1); }
.nav-hl {
  position: absolute; left: 0; top: 50%; height: 36px; margin-top: -18px;
  width: var(--w, 0px); transform: translateX(var(--x, 0px));
  border-radius: var(--r-pill); background: var(--hl); opacity: 0; pointer-events: none;
  transition: opacity 250ms ease, transform 400ms var(--ease), width 400ms var(--ease);
}
.nav-links.is-hl .nav-hl { opacity: 1; }
.nav-cta { flex: none; margin-left: 10px; }
.nav-toggle {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
}
@media (hover: hover) { .nav-toggle:hover { background: var(--hl); } }
.nav-toggle .ico { width: 24px; height: 24px; }
.nav-toggle .i-close { display: none; }
.nav[data-open="true"] .nav-toggle .i-open { display: none; }
.nav[data-open="true"] .nav-toggle .i-close { display: block; }
.nav-sheet { display: none; }
@media (max-width: 1120px) { .nav-links a { padding: 8px 10px; } .nav-links { font-size: 14.5px; } }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .nav-sheet {
    position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
    display: grid; gap: 2px; padding: 10px 18px 18px;
    border-radius: var(--r-lg); background: rgba(18, 18, 22, 0.94); border: 1px solid var(--line-2);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
    animation: sheet-in 350ms var(--ease) both;
  }
  .nav-sheet[hidden] { display: none; }
  .nav-sheet a:not(.btn) { padding: 13px 4px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--line); }
  .nav-sheet .btn { margin-top: 14px; width: 100%; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .nav-toggle { margin-left: auto; }
}
@media (max-width: 400px) { .nav-sheet .btn { font-size: 15px; padding-left: 18px; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
/* menu ouvert (téléphone) : le reste de la page s'assombrit et se floute, un toucher à côté ferme le menu */
@media (max-width: 960px) {
  .nav[data-open="true"]::before {
    content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: scrim-in 300ms ease both;
  }
}
@keyframes scrim-in { from { opacity: 0; } }

/* ─── Fond : un grain très fin sur toute la page ─── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: var(--grain);
  background: var(--grain-img) 0 0 / 220px 220px;
}
/* le grain est une couche plein écran au-dessus de tout : agréable sur ordinateur, coûteux sur un téléphone d'entrée de gamme, et à peine visible sur un petit écran */
@media (pointer: coarse) { body::before { display: none; } }
main { overflow-x: clip; }

/* ─── Hero : le titre au centre, nos deux visages de chaque côté ───
   Derrière (.hero-fx, posé sous la navigation) : une aura orange qui respire, une trame de points que le curseur allume (--mx, --my
   posés par site.js), de la poussière lumineuse (un canvas, site.js) et l'horizon d'une planète dont le bord s'embrase. */
.hero { position: relative; isolation: isolate; padding-block: clamp(30px, 5vh, 60px) clamp(96px, 13vh, 150px); }
.hero-fx {
  position: absolute; z-index: -1; inset: -68px 0 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}
.hero-aura {
  --aw: min(1180px, 130vw);
  position: absolute; left: calc(50% - var(--aw) / 2); top: -260px; width: var(--aw); height: 900px;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(255, 138, 61, 0.30), rgba(255, 106, 38, 0.10) 46%, transparent 78%),
    radial-gradient(closest-side at 78% 62%, rgba(255, 196, 107, 0.10), transparent 70%);
  animation: aura 16s ease-in-out infinite alternate;
}
@keyframes aura { from { transform: scale(1) rotate(0deg); opacity: 0.85; } to { transform: scale(1.12) rotate(6deg); opacity: 1; } }
.hero-dots {
  position: absolute; inset: 0;
  background: radial-gradient(var(--dot) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(75% 85% at 50% 32%, #000 22%, transparent 76%);
  mask-image: radial-gradient(75% 85% at 50% 32%, #000 22%, transparent 76%);
}
.hero-dots--lit {
  background-image: radial-gradient(rgba(255, 170, 100, 0.95) 1.15px, transparent 1.7px);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, -40%), #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 72%);
  mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, -40%), #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 72%);
  opacity: 0; transition: opacity 600ms ease;
}
.hero.is-lit .hero-dots--lit { opacity: 1; }
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.hero-dust.is-on { opacity: 1; }
/* l'horizon : un disque immense, de la couleur du fond, dont le bord haut s'allume (un liseré clair, puis la lueur orange) */
.hero-horizon {
  --hd: max(2400px, 200vw);
  position: absolute; left: calc(50% - var(--hd) / 2); top: calc(100% - clamp(70px, 9vh, 104px)); width: var(--hd); height: var(--hd);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg) 99%, transparent 100%);
  box-shadow:
    0 -1.5px 0 0 rgba(255, 214, 160, 0.8),
    0 -10px 34px -6px rgba(255, 150, 80, 0.55),
    0 -60px 140px -30px rgba(255, 106, 38, 0.38),
    inset 0 2px 10px rgba(255, 150, 80, 0.22);
}
.hero-grid {
  display: grid;
  grid-template-columns: clamp(146px, 16vw, 212px) minmax(0, 1fr) clamp(146px, 16vw, 212px);
  grid-template-areas: "l copy r";
  gap: clamp(20px, 3.2vw, 48px);
  align-items: center;
  text-align: center;
}
.hero-copy { grid-area: copy; display: flex; flex-direction: column; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--ink-2);
}
.eyebrow .live-dot { background: var(--accent); }
.hero-title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.03; letter-spacing: -0.045em; }
/* Un mot = un masque (le mot monte en sortant du bas) + le mot lui-même. Le dégradé n'est peint que dans la boîte du mot : avec un interlignage serré,
   les jambages (g, p, q, y, j) dépassaient de la boîte et étaient coupés. Le mot et son masque gardent donc de la place en haut et en bas
   (padding), reprise par une marge négative : la hauteur de la ligne ne change pas. */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.06em 0.3em; margin: -0.08em -0.06em -0.3em; }
.hero-title .w > span { display: inline-block; padding: 0.08em 0 0.3em; margin: -0.08em 0 -0.3em; background: var(--word-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-title .w > span.grad { background-image: var(--grad); }
.sub { color: var(--ink-2); }
.hero .sub { margin-top: 22px; max-width: 40ch; font-size: clamp(17px, 1.42vw, 19.5px); line-height: 1.52; }
.hero .cta { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.hero-note { margin-top: 20px; max-width: 46ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 640px) { .hero .link { padding-block: 12px; } }

/* les portraits : penchés l'un vers l'autre (rotate et translate sont des propriétés à part : GSAP ne les touche pas) ; un reflet de vitre */
.hero-photo { perspective: 900px; }
.hero-photo--l { grid-area: l; rotate: -3deg; translate: 0 -10px; }
.hero-photo--r { grid-area: r; rotate: 3deg; translate: 0 22px; }
.photo { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-photo), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hero-photo .photo { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform 600ms var(--ease); }
.hero-photo figcaption { margin-top: 14px; display: grid; gap: 2px; font-size: 15px; }
.hero-photo figcaption span { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }

@media (max-width: 960px) {
  .hero { padding-block: 22px 92px; }
  .hero-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "l r"; gap: 46px 20px; }
  .hero-photo { width: 100%; max-width: 230px; }
  .hero-photo--l { justify-self: end; }
  .hero-photo--r { justify-self: start; }
}
@media (max-width: 420px) { .hero-photo figcaption span { font-size: 12.5px; } }

/* ─── Preuves, sous l'horizon ─── */
.proof {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr); align-items: center;
  margin-bottom: clamp(8px, 2vw, 24px); padding: 22px 8px;
  border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -40px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.proof > div { display: grid; justify-items: center; gap: 4px; padding-inline: clamp(14px, 3vw, 36px); text-align: center; }
.proof > div + div { border-left: 1px solid var(--line); }
.proof strong { display: block; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.proof-stat strong { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof strong.live { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(21px, 2.1vw, 26px); }
.proof > div > span { color: var(--ink-2); font-size: 14.5px; line-height: 1.42; }
.proof-ws > span { max-width: 36ch; }
.live-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@media (max-width: 760px) {
  .proof { grid-template-columns: 1fr 1fr; padding: 18px 6px; row-gap: 16px; }
  .proof-ws { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
  .proof > div.proof-ws { border-left: 0; }
  .proof strong { font-size: clamp(24px, 7vw, 30px); }
  .proof strong.live { font-size: 20px; }
  .proof > div > span { font-size: 13px; }
}

/* ─── Sections et têtes de section ─── */
.section { position: relative; isolation: isolate; padding-block: clamp(80px, 10vw, 128px); }
.section h2, .agents h2, .stack-title {
  max-width: 18ch; font-size: clamp(34px, 4.3vw, 56px); line-height: 1.04; letter-spacing: -0.04em;
}
/* les titres : un blanc qui descend vers l'argent, comme un métal poli (sur chaque mot une fois découpés par site.js) */
.section h2:not(.is-split), .agents h2:not(.is-split), .stack-title:not(.is-split), .trial-card h2:not(.is-split) {
  padding-block: 0.1em 0.2em; margin-block: -0.1em -0.2em;
  background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-split .w > span { background: var(--word-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head { margin-bottom: 52px; }
.section-head > .tag { display: inline-flex; margin-bottom: 16px; }
.section-head.center { display: grid; justify-items: center; gap: 16px; margin-bottom: 48px; text-align: center; }
.section-head.center h2 { margin-inline: auto; }
.section-head.center .lead { margin-top: 0; }
.section-head.center > .tag { margin-bottom: 0; }
.section .lead { margin-top: 20px; max-width: 58ch; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--ink-2); }
/* l'étiquette orange au-dessus de chaque titre : un point qui luit */
.tag { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.06em 0.3em; margin: -0.08em -0.06em -0.3em; }
[data-split] .w > span { display: inline-block; padding: 0.08em 0 0.3em; margin: -0.08em 0 -0.3em; }
@media (max-width: 640px) { .section-head { margin-bottom: 36px; } }

/* ─── Les cartes qui accrochent la lumière ───
   Sous le curseur (--gx, --gy posés par site.js), une lueur orange dans la carte et un bord qui s'allume. --ga (0 → 1) s'anime au survol. */
.card-glow { --spot: radial-gradient(460px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 138, 61, calc(var(--ga) * 0.11)), transparent 48%); transition: --ga 500ms ease, border-color 300ms ease, box-shadow 400ms ease; }
.card-glow::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 190, 130, 0.75), rgba(255, 138, 61, 0.2) 45%, transparent 70%);
  -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 exclude, linear-gradient(#000 0 0);
  opacity: var(--ga);
}
@media (hover: hover) and (pointer: fine) { .card-glow:hover { --ga: 1; } }

/* ─── Les agents, concrètement : deux chemins ───
   Deux cartes : à gauche « pour ta boîte » (les notifications de tes agents, ce matin), à droite « pour les vendre »
   (ton premier client, en trois étapes). Chaque carte porte un écart chiffré (la barre pleine, puis ce qui manque) et une petite scène
   de verre posée sur un halo orange que le verre floute. Sans JS ou avec « réduire les animations », tout est complet et immobile. */
.paths::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1100px, 100%); height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.paths .section-head { max-width: 820px; margin-inline: auto; }
.paths .section-head h2 { max-width: 19ch; }
.paths .section-head .lead { max-width: 56ch; }
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.path {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 34px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 30px; border: 1px solid var(--line);
  background: var(--spot), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008) 42%), var(--surface);
  box-shadow: var(--shadow-card);
}
/* le halo et la trame de points qui donnent au verre quelque chose à flouter */
.path::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 66%; pointer-events: none;
  background:
    radial-gradient(46% 52% at 30% 74%, rgba(255, 106, 38, 0.32), transparent 72%),
    radial-gradient(40% 46% at 78% 42%, rgba(255, 196, 107, 0.16), transparent 72%),
    radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36%);
  mask-image: linear-gradient(to bottom, transparent, #000 36%);
}
.path-k {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px;
  border-radius: var(--r-pill); background: rgba(255, 138, 61, 0.1); border: 1px solid rgba(255, 138, 61, 0.22); color: var(--accent);
  font-size: 13.5px; font-weight: 700; line-height: 1.2;
}
.path-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.path-copy { display: flex; flex-direction: column; }
.path h3 { margin-top: 18px; max-width: 18ch; font-size: clamp(25px, 2.5vw, 33px); line-height: 1.08; letter-spacing: -0.032em; }
.path-copy p { margin-top: 14px; max-width: 48ch; color: var(--ink-2); }
.path-copy p b { color: var(--ink); }
/* l'écart : ce qui est fait (plein, orange), ce qui manque (rayé) */
.gap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.gap-track { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); overflow: hidden; }
.gap-fill, .gap-ghost { position: absolute; top: 0; bottom: 0; transform-origin: 0 50%; }
.gap-fill { left: 0; width: calc(var(--a) * 1%); border-radius: inherit; background: var(--grad); box-shadow: 0 0 14px rgba(255, 138, 61, 0.7); }
.gap-ghost {
  left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-radius: 0 99px 99px 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 138, 61, 0.42) 0 4px, rgba(255, 138, 61, 0.1) 4px 8px);
  box-shadow: inset -1.5px 0 0 rgba(255, 196, 140, 0.9);
}
.gap-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.gap-at { display: inline-flex; align-items: baseline; gap: 7px; }
.gap-at::before { content: ""; align-self: center; width: 10px; height: 10px; border-radius: 3px; }
.gap-at--a::before { background: var(--grad); box-shadow: 0 0 8px rgba(255, 138, 61, 0.6); }
.gap-at--b::before { background: repeating-linear-gradient(-45deg, rgba(255, 138, 61, 0.75) 0 2px, rgba(255, 138, 61, 0.2) 2px 4px); }
.gap-at b { font-size: 17px; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.path-copy p.path-stat { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }
.path-stat a { color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; transition: color 200ms ease; }
.path-stat a:hover { color: var(--ink); }

/* la scène : un panneau de verre façon macOS */
.path-vis {
  position: relative; margin-top: auto; display: grid; gap: 8px; padding: 14px;
  border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(30, 30, 35, 0.5);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
.vis-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 6px 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.vis-k span:last-child { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }

/* les notifications de tes agents (comme celles de macOS, en mode sombre) */
.notif {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px 12px 11px;
  border-radius: 16px; background: rgba(52, 52, 58, 0.62); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.notif-ico { position: relative; width: 40px; height: 40px; }
.notif-ico > img:first-child { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 2px 8px -2px rgba(255, 106, 38, 0.55); }
.notif-ico .tool { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; padding: 3px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.notif .notif-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; font-size: 14px; line-height: 1.3; color: var(--ink); }
.notif-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-top time { flex: none; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.notif p { margin-top: 2px; font-size: 14.5px; line-height: 1.38; color: #C7C7CC; }

/* ton premier client, en trois étapes */
.flow-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 8px; }
.flow-ava { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, #F5F5F7, #CFCFD6); color: #0B0B0E; font-size: 15px; font-weight: 700; box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(0, 0, 0, 0.8); }
.flow-head b { display: block; font-size: 15px; line-height: 1.25; }
.flow-head div > span { display: block; font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.flow-steps { --p: 1; position: relative; display: grid; gap: 8px; }
/* le trait qui relie les étapes passe derrière les cartes : on ne le voit qu'entre elles */
.flow-steps::before, .flow-steps::after { content: ""; position: absolute; z-index: 0; left: 25px; top: 26px; bottom: 26px; width: 2px; border-radius: 2px; background: var(--line-2); }
.flow-steps::after { background: var(--grad); box-shadow: 0 0 10px rgba(255, 138, 61, 0.6); transform: scaleY(var(--p)); transform-origin: 50% 0; }
.flow-step {
  position: relative; z-index: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px 12px 11px;
  border-radius: 16px; background: rgba(40, 40, 46, 0.92); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.flow-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: var(--grad); color: var(--accent-ink); box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.18), 0 0 14px rgba(255, 138, 61, 0.45);
  transition: background-color 350ms ease, color 350ms ease, box-shadow 450ms var(--ease);
}
.flow-dot .ico { width: 15px; height: 15px; transition: transform 450ms var(--ease-back), opacity 250ms ease; }
.flow-step b { display: block; font-size: 14.5px; line-height: 1.3; }
.flow-step div > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.38; color: #C7C7CC; }
.flow-step.is-wait .flow-dot { background: #2A2A30; color: var(--ink-3); box-shadow: 0 0 0 1px var(--line-2); }
.flow-step.is-wait .flow-dot .ico { opacity: 0; transform: scale(0.4); }
.flow-done {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0 6px; padding: 7px 13px 7px 10px;
  border-radius: var(--r-pill); background: rgba(48, 209, 88, 0.14); border: 1px solid rgba(48, 209, 88, 0.25); color: #7EE59A;
  font-size: 13px; font-weight: 700;
}
.flow-done .live-dot { width: 8px; height: 8px; }

@media (max-width: 860px) { .path-grid { grid-template-columns: 1fr; } }
/* téléphone : pas de flou (coûteux, et le halo suffit) */
@media (max-width: 760px), (pointer: coarse) {
  .path-vis { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30, 30, 35, 0.78); }
}
@media (max-width: 400px) { .vis-k span:last-child { display: none; } }
@media (max-width: 560px) {
  .path { gap: 28px; border-radius: 24px; }
  .path-vis { padding: 10px; border-radius: 20px; }
  .notif, .flow-step { padding: 10px 12px 11px 10px; }
  .notif p:not(.notif-top), .flow-step div > span { font-size: 13.5px; }
}

/* ─── Ce que tu vas apprendre ───
   À gauche : le titre et quatre cartes de verre qui se relaient au défilement (la carte en cours s'ouvre, passe à l'orange,
   les précédentes se cochent). À droite : la scène 3D, collée à l'écran (sticky, pas de pin JS).
   Trois états, posés par site.js : sans JavaScript ni WebGL, quatre cartes lisibles ; .film-still (mouvement réduit) : la scène posée
   à côté des cartes ; .film-live : la scène pilotée par le défilement. */
.agents { position: relative; padding-top: 8px; }
.film { position: relative; }
.film-bg, .film-view { display: none; }
.film-grid { padding-block: 24px 72px; }
.agents h2 { max-width: 16ch; }
.agents .tag { display: inline-flex; margin-bottom: 14px; }
.agents .lead { margin-top: 18px; max-width: 54ch; font-size: 19px; color: var(--ink-2); }
.film-steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.film-step {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.step-head { display: flex; align-items: center; gap: 14px; padding: 24px 26px 0; }
.step-n {
  position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--hl); color: var(--accent); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 400ms ease, color 400ms ease, box-shadow 500ms var(--ease);
}
.step-n b { grid-area: 1 / 1; font-weight: 700; transition: opacity 250ms ease, transform 400ms var(--ease-back); }
.step-n .ico { grid-area: 1 / 1; width: 15px; height: 15px; opacity: 0; transform: scale(0.4) rotate(-30deg); transition: opacity 250ms ease, transform 450ms var(--ease-back); }
.film-step h3 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.12; letter-spacing: -0.03em; }
.step-body { display: grid; grid-template-rows: 1fr; }
.step-in { min-height: 0; overflow: hidden; padding: 0 26px 26px 70px; }
.step-in p { margin-top: 12px; max-width: 42ch; color: var(--ink-2); }
.step-in .btn { margin-top: 20px; }
.step-bar { display: none; }
/* ce que tu sais faire à la fin de l'étape : une pastille orange */
.step-in p.step-out { margin-top: 14px; }
.step-out > span {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px;
  border-radius: var(--r-pill); background: rgba(255, 138, 61, 0.12); border: 1px solid rgba(255, 138, 61, 0.24); color: var(--accent);
  font-size: 14px; font-weight: 700; line-height: 1.25;
}
.step-out .ico { width: 15px; height: 15px; }
@media (max-width: 760px) { .film-steps { grid-template-columns: 1fr; } .step-head { padding: 22px 22px 0; } .step-in { padding: 0 22px 22px 66px; } }

/* les étiquettes posées sur la scène (leur position vient de film.js) */
.film-label {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px;
  border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; will-change: transform, opacity;
}
.film-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.26), 0 0 10px var(--accent); }
.film-label small { display: none; margin-left: 1px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.film[data-step="2"] .film-label small, .film[data-step="3"] .film-label small { display: inline; }

/* mouvement réduit : la scène posée, une seule image, à côté des cartes (toutes ouvertes) */
.film-still .film-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.film-still .film-steps { grid-template-columns: 1fr; gap: 12px; }
.film-still .film-view { display: block; position: relative; height: min(66vh, 580px); }
.film-still .film-stage { position: absolute; inset: 0; }
.film-still .film-stage canvas { display: block; width: 100%; height: 100%; }
.film-still .film-labels { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 960px), (max-aspect-ratio: 5/4) {
  .film-still .film-grid { grid-template-columns: 1fr; }
  .film-still .film-view { order: -1; height: 340px; }
}

/* avec la scène : la section est haute, la scène reste collée à l'écran pendant que les cartes se relaient */
.film-live .film { height: 400vh; }
.film-live .film-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film-live .film-bg { display: block; position: absolute; inset: 0; pointer-events: none; }
.film-live .film-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(38% 46% at 74% 56%, rgba(255, 138, 61, 0.18), transparent 72%),
    radial-gradient(30% 40% at 18% 78%, rgba(255, 138, 61, 0.08), transparent 72%),
    radial-gradient(var(--dot) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(closest-side at 56% 52%, #000 38%, transparent 100%);
  mask-image: radial-gradient(closest-side at 56% 52%, #000 38%, transparent 100%);
}
.film-live .film-grid {
  position: relative; height: 100%;
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(16px, 3vw, 56px);
  padding-block: 84px 28px;
}
.film-live .film-copy { max-width: 540px; }
.film-live .agents h2, .film-live h2 { max-width: 20ch; font-size: clamp(30px, min(3.5vw, 5.8vh), 50px); }
.film-live .film-copy .lead { margin-top: 14px; font-size: clamp(15.5px, 1.4vw, 17.5px); }
.film-live .film-view { display: block; position: relative; height: 100%; min-height: 0; }
.film-live .film-stage { position: absolute; inset: 0; }
.film-live .film-stage canvas { display: block; width: 100%; height: 100%; }
.film-live .film-labels { position: absolute; inset: 0; pointer-events: none; }
/* en attendant la scène (réseau lent) : un anneau orange qui respire à sa place */
.film-live .film:not(.is-ready) .film-view::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 110px; height: 110px; border-radius: 50%;
  border: 1.5px solid rgba(255, 138, 61, 0.45);
  box-shadow: 0 0 60px rgba(255, 138, 61, 0.25), inset 0 0 30px rgba(255, 138, 61, 0.12);
  animation: film-wait 1.8s ease-in-out infinite;
}
@keyframes film-wait { 0%, 100% { transform: scale(0.82); opacity: 0.35; } 50% { transform: scale(1.08); opacity: 0.9; } }

/* les quatre cartes : du verre ; celle en cours s'ouvre, son bord passe à l'orange et un éclat la traverse.
   Rien ne déplace la mise en page (le « décalage cumulé » CLS reste nul) : sur ordinateur les cartes sont posées en absolu, leur place (--y)
   et leur hauteur (--h) viennent de site.js et ne changent que par transform et hauteur ; sur téléphone elles forment une pile
   (voir plus bas), animée par transform et opacité seulement. */
.film-live .film-steps { --gap: 10px; display: block; height: var(--ol-h, 340px); margin-top: clamp(18px, 3.2vh, 30px); }
.film-live .film-step {
  position: absolute; left: 0; right: 0; top: 0; height: var(--h, 56px); box-sizing: border-box; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  -webkit-tap-highlight-color: transparent;
  opacity: 0.62; transform: translateY(var(--y, 0px)) scale(0.985);
  transition: transform 700ms var(--ease), height 700ms var(--ease), opacity 500ms ease, border-color 500ms ease, background-color 500ms ease, box-shadow 600ms ease;
}
.film-live .film-step.is-done { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .film-live .film-step:not(.is-active):hover { opacity: 1; transform: translateY(var(--y, 0px)) translateX(5px); border-color: rgba(255, 138, 61, 0.35); }
}
.film-live .film-step.is-active {
  cursor: default; opacity: 1; transform: translateY(var(--y, 0px));
  border-color: rgba(255, 138, 61, 0.55);
  background: linear-gradient(135deg, rgba(255, 138, 61, 0.2) 0%, rgba(255, 138, 61, 0.06) 52%, rgba(24, 24, 28, 0.62) 100%);
  box-shadow: var(--glass-shadow), 0 24px 60px -24px rgba(255, 106, 38, 0.55);
}
.film-live .film-step::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(104deg, transparent 32%, rgba(255, 170, 110, 0.22) 48%, transparent 64%);
  transform: translateX(-130%);
}
.film-live .film-step.is-active::after { animation: step-sheen 1300ms var(--ease) 1 both; }
@keyframes step-sheen { to { transform: translateX(130%); } }
.film-live .step-head { padding: clamp(11px, 1.9vh, 16px) 20px; }
.film-live .film-step h3 { font-size: clamp(17px, min(1.5vw, 2.8vh), 22px); transition: color 400ms ease; }
.film-live .film-step:not(.is-active) h3 { color: var(--ink-2); }
.film-live .step-body { display: block; opacity: 0; transition: opacity 350ms ease; }
.film-live .is-active .step-body { opacity: 1; transition-delay: 120ms; }
.film-live .step-in { overflow: visible; padding: 0 22px 0 64px; }
.film-live .step-in p { margin-top: 0; padding-bottom: 6px; font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.5; }
.film-live .step-in .btn { margin-bottom: 18px; margin-top: 12px; }
.film-live .step-in p:last-child { padding-bottom: 18px; }
.film-live .step-in p.step-out { margin-top: 0; padding-top: 6px; }
.film-live .step-bar {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad); box-shadow: 0 0 10px rgba(255, 138, 61, 0.7); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity 400ms ease;
}
.film-live .is-active .step-bar { opacity: 1; }
.film-live .step-n { background: var(--hl); color: var(--ink-2); }
.film-live .is-active .step-n { background: var(--grad); color: var(--accent-ink); box-shadow: 0 0 0 5px rgba(255, 138, 61, 0.22), 0 0 18px rgba(255, 138, 61, 0.5); }
.film-live .is-done .step-n { background: rgba(255, 138, 61, 0.2); color: var(--accent); }
.film-live .is-done .step-n b { opacity: 0; transform: scale(0.4); }
.film-live .is-done .step-n .ico { opacity: 1; transform: none; }
/* le bord en dégradé (un trait de 1,5 px) sur la carte en cours */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .film-live .film-step::before {
    content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: linear-gradient(135deg, #FFD08A, var(--accent) 40%, rgba(255, 138, 61, 0.12) 78%, var(--accent));
    -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 exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity 600ms ease;
  }
  .film-live .film-step.is-active::before { opacity: 1; }
}

/* écrans bas (portables) : on resserre */
@media (min-width: 961px) and (min-aspect-ratio: 5/4) and (max-height: 900px) {
  .film-live .film-grid { padding-block: 76px 18px; }
  .film-live .film-copy .lead { display: none; }
  .film-live .film-steps { --gap: 8px; }
}

/* téléphone et tablette (ou fenêtre plus haute que large) : le titre en haut, la scène au milieu, une pile de cartes en bas.
   Les quatre cartes occupent la même case (la plus haute donne sa hauteur à toutes) ; la carte en cours est devant, les suivantes dépassent
   de quelques pixels en dessous, les faites s'envolent. --d est le rang de la carte par rapport à celle en cours (posé par site.js). */
@media (max-width: 960px), (max-aspect-ratio: 5/4) {
  .film-live .film { height: 360vh; }
  .film-live .film-grid { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding-block: 72px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 0; }
  .film-live .film-copy { display: contents; }
  .film-live .film-copy .tag { order: 1; margin-bottom: 4px; font-size: 13px; }
  .film-live .film-copy h2 { order: 2; max-width: none; font-size: clamp(25px, 7.2vw, 34px); line-height: 1.06; }
  .film-live .film-copy .lead { display: none; }
  .film-live .film-view { order: 3; flex: 1 1 0; min-height: 150px; margin-inline: calc(var(--gutter) * -1); }
  .film-live .film-stage { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%); mask-image: linear-gradient(to bottom, transparent 0, #000 13%); }   /* le cube qui tombe entre en fondu au lieu d'être coupé net */
  .film-live .film-steps { --peek: 9px; order: 4; display: grid; grid-template-columns: minmax(0, 1fr); height: auto; margin-top: 2px; padding-bottom: 20px; }
  .film-live .film-step {
    --d: 0;
    grid-area: 1 / 1; position: relative; left: auto; right: auto; top: auto; height: auto;
    display: flex; flex-direction: column; justify-content: center;
    border-radius: 20px; transform-origin: 50% 100%; will-change: transform, opacity;
    background: rgba(22, 22, 26, 0.94);
    -webkit-backdrop-filter: none; backdrop-filter: none;        /* pas de flou sur téléphone : coûteux, et il n'y a rien derrière à flouter */
    transform: translateY(calc(var(--d) * var(--peek))) scale(calc(1 - var(--d) * 0.05));
    opacity: calc(1 - (var(--d) - 1) * 0.3);
    z-index: calc(10 - var(--d));
  }
  .film-live .film-step.is-active {
    transform: none; opacity: 1; z-index: 10;
    background: linear-gradient(135deg, #3A2414 0%, #21160F 56%, #17171B 100%);
  }
  .film-live .film-step.is-done { opacity: 0; transform: translateY(-18px) scale(0.97); z-index: 1; pointer-events: none; }
  /* les cartes de la pile qui ne sont pas devant n'ont que leur coque : leur texte ne transparaît pas */
  .film-live .step-head, .film-live .step-body { transition: opacity 400ms ease; }
  .film-live .step-body { opacity: 1; }
  .film-live .film-step:not(.is-active) .step-head, .film-live .film-step:not(.is-active) .step-body { opacity: 0; }
  .film-live .step-head { gap: 11px; padding: 14px 16px 4px; }
  .film-live .step-head::after { content: ""; flex: none; margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .film-live .film-step:nth-child(1) .step-head::after { content: "1 / 4"; }
  .film-live .film-step:nth-child(2) .step-head::after { content: "2 / 4"; }
  .film-live .film-step:nth-child(3) .step-head::after { content: "3 / 4"; }
  .film-live .film-step:nth-child(4) .step-head::after { content: "4 / 4"; }
  .film-live .step-n { width: 26px; height: 26px; font-size: 12.5px; }
  .film-live .film-step h3, .film-live .film-step:not(.is-active) h3 { font-size: 17px; color: var(--ink); }
  .film-live .step-in { padding: 0 16px 0 53px; }
  .film-live .step-in p { font-size: 14.5px; line-height: 1.42; }
  .film-live .step-in p:last-child { padding-bottom: 16px; }
  .film-live .step-out > span { padding: 5px 11px 5px 8px; font-size: 13px; }
  .film-live .step-in .btn { margin-top: 10px; margin-bottom: 16px; }
  /* sur téléphone, la carte 4 s'arrête à sa pastille : son bouton la rendait (et toute la pile avec) trop haute ; la barre d'action revient juste après la scène */
  @media (max-width: 760px) { .film-live .step-in .btn { display: none; } }
  .film-live .film-bg::before {
    background:
      radial-gradient(60% 34% at 50% 40%, rgba(255, 138, 61, 0.2), transparent 72%),
      radial-gradient(var(--dot) 1px, transparent 1.5px) 0 0 / 26px 26px;
    -webkit-mask-image: radial-gradient(closest-side at 50% 40%, #000 40%, transparent 100%);
    mask-image: radial-gradient(closest-side at 50% 40%, #000 40%, transparent 100%);
  }
  .film-label small, .film[data-step="2"] .film-label small, .film[data-step="3"] .film-label small { display: none; }
}
/* tablette en hauteur : titre centré, cartes à largeur de lecture */
@media (min-width: 700px) and (max-aspect-ratio: 5/4) {
  .film-live .film-copy .tag { align-self: center; }
  .film-live .film-copy h2 { text-align: center; max-width: none; }
  .film-live .film-steps { width: 100%; max-width: 640px; margin-inline: auto; }
  .film-live .film-view { margin-inline: 0; }
}
@media (max-width: 560px) {
  .film-label--agent { display: none; }
  .film-label { padding: 5px 10px 5px 8px; font-size: 11.5px; gap: 6px; }
}
@media (max-width: 960px) and (max-height: 700px) {
  .film-live .film-copy .tag { display: none; }
  .film-live .film-grid { padding-top: 66px; }
  .film-live .step-head { padding-block: 10px 3px; }
}
/* petits téléphones (iPhone SE, Safari avec ses barres : 550 à 640 px de haut) : titre et cartes resserrés */
@media (max-width: 960px) and (max-height: 640px) {
  .film-live .film-copy h2 { font-size: 24px; }
  .film-live .film-view { min-height: 120px; }
  .film-live .film-steps { --peek: 7px; padding-bottom: 14px; }
  .film-live .step-head { padding-block: 8px 2px; }
  .film-live .step-in p { font-size: 13.5px; line-height: 1.38; }
  .film-live .step-in p:last-child { padding-bottom: 12px; }
}

/* ─── Les agents qu'on t'apprend à utiliser : une icône d'app laquée par agent ─── */
.stack { padding-block: clamp(72px, 9vw, 116px) clamp(24px, 4vw, 40px); }
.stack-head { display: grid; justify-items: center; margin-bottom: 44px; text-align: center; }
.stack-title { max-width: 20ch; font-size: clamp(30px, 3.6vw, 46px); }
.stack-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tool {
  position: relative; isolation: isolate; grid-column: span 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 28px 26px 26px; border-radius: 26px; border: 1px solid var(--line);
  background: var(--spot), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008) 50%), var(--surface);
  box-shadow: var(--shadow-card);
}
.tool--wide { grid-column: span 3; }
.tool h4 { margin-top: 6px; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-2); }
.tool h4 b { color: var(--ink); font-weight: 700; }
.tool h4 a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 138, 61, 0.5); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color 200ms ease; }
.tool h4 a:hover { text-decoration-color: var(--accent); }
.tool p { color: var(--ink-2); font-size: 15.5px; line-height: 1.58; }
.tool--next { border-style: dashed; border-color: var(--line-2); background: var(--spot), transparent; box-shadow: none; }
/* l'icône d'app : un carré à coins doux, laqué (reflet en haut, ombre dessous) */
.app {
  position: relative; display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 27%;
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}
.app::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.03) 46%, transparent 52%); }
.app img { width: 56%; height: 56%; object-fit: contain; }
.app--cc { background: linear-gradient(160deg, #34343B 0%, #141417 52%, #070709 100%); }
.app--cc img { width: 60%; height: 60%; filter: drop-shadow(0 0 10px rgba(217, 119, 87, 0.5)); }
.app--hm { background: linear-gradient(160deg, #FFFFFF 0%, #E6E7EC 100%); }
.app--hm img { width: 62%; height: 62%; }
.app--oa { background: linear-gradient(160deg, #FFFFFF 0%, #E9E9EE 100%); }
.app--gk { background: linear-gradient(160deg, #2E2E34 0%, #0E0E10 60%, #050506 100%); }
.app--next { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--accent); }
.app--next::after { display: none; }
.app--next .ico { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(255, 138, 61, 0.7)); }
.orbit { position: absolute; inset: -7px; border-radius: 50%; animation: orbit 5s linear infinite; }
.orbit i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (max-width: 960px) {
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool, .tool--wide { grid-column: span 1; }
  .tool--next { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .stack-grid { grid-template-columns: 1fr; gap: 12px; }
  .tool { padding: 22px 20px; }
  .app { width: 52px; height: 52px; }
}

/* ─── WhatSetter : la preuve, un téléphone allumé en pleine nuit ─── */
.ws { overflow: clip; }
.ws::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(34% 46% at 74% 52%, rgba(255, 138, 61, 0.2), transparent 72%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(60% 70% at 70% 50%, #000 30%, transparent 78%);
}
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.ws-copy { display: flex; flex-direction: column; align-items: flex-start; }
.ws-logo { width: auto; height: 30px; margin-bottom: 26px; }
.ws h2 { max-width: 15ch; }
.ws .lead { margin-top: 22px; color: var(--ink); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 40ch; }
.ws-text { margin-top: 14px; max-width: 52ch; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.ws-copy .link-go { margin-top: 26px; font-size: 17px; }
.ws-stage { position: relative; display: grid; place-items: center; padding: 24px 0; perspective: 1600px; }
.phone {
  position: relative; width: min(318px, 80vw); aspect-ratio: 9 / 18.4; padding: 10px; border-radius: 54px;
  background: linear-gradient(145deg, #8A8A92 0%, #34343A 14%, #121215 46%, #2A2A30 78%, #9A9AA2 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.65),
    0 60px 110px -50px rgba(0, 0, 0, 1),
    0 30px 120px -50px rgba(255, 120, 50, 0.45);
  transform: rotateY(var(--py, -12deg)) rotateX(var(--px, 5deg));
  transform-style: preserve-3d;
  transition: transform 900ms var(--ease);
}
/* le reflet sur la vitre */
.phone::after {
  content: ""; position: absolute; z-index: 4; inset: 10px; border-radius: 44px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 44%);
}
.phone-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 44px; background: var(--wa-bg); }
.phone-status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 4px 26px 0; color: #FFFFFF; font: 700 14px/1 var(--font); font-variant-numeric: tabular-nums; }
.island { width: 90px; height: 26px; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.ps-r { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.ps-r i { width: 3px; border-radius: 1px; background: #FFFFFF; }
.ps-r i:nth-child(1) { height: 5px; } .ps-r i:nth-child(2) { height: 8px; } .ps-r i:nth-child(3) { height: 11px; }
.ws-chip {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 12px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.13); background: rgba(30, 30, 35, 0.72);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--ink);
}
.ws-chip .ico { width: 17px; height: 17px; color: var(--accent); filter: drop-shadow(0 0 6px rgba(255, 138, 61, 0.6)); }
.ws-chip--cal { bottom: 6%; right: max(0px, calc(50% - 250px)); }
@media (max-width: 960px) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-stage { padding-top: 8px; }
}
/* téléphone : pas de place autour du téléphone, les deux pastilles passent dessous (leur place est réservée : rien ne saute quand elles s'allument) */
@media (max-width: 520px) {
  .ws-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .phone { width: min(300px, 76vw); }
  .ws-chip { position: relative; inset: auto; margin-top: 14px; font-size: 12.5px; padding: 8px 13px 8px 10px; }
}

/* la conversation (WhatsApp, mode sombre) */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--wa-bg); }
.chat-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; background: var(--wa-head); color: var(--wa-ink); border-bottom: 1px solid var(--wa-line); }
.chat-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wa-ava); color: var(--wa-ava-ink); font-size: 15px; font-weight: 700; }
.chat-head b { display: block; font-size: 15px; line-height: 1.2; }
.chat-status { display: block; font-size: 12.5px; line-height: 1.2; color: var(--wa-time); }
.chat-status.is-typing { color: var(--wa-typing); }
.chat-body {
  flex: 1; display: grid; align-content: start; gap: 6px; padding: 10px 11px 14px;
  background: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--wa-bg);
}
.chat-day { justify-self: center; margin-bottom: 4px; padding: 4px 10px; border-radius: 8px; background: var(--wa-chip); color: var(--wa-time); font-size: 11.5px; font-weight: 700; }
.bubble {
  justify-self: start; max-width: 88%; padding: 6px 9px 5px;
  border-radius: 10px; border-top-left-radius: 3px;
  background: var(--wa-in); color: var(--wa-ink); font-size: 13.5px; line-height: 1.36;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.bubble time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 1px; font-size: 10.5px; color: var(--wa-time); font-variant-numeric: tabular-nums; }
.slot { position: relative; display: grid; }
.bubble.out { justify-self: end; background: var(--wa-out); border-top-left-radius: 10px; border-top-right-radius: 3px; }
.bubble.out time { color: rgba(233, 237, 239, 0.6); }
.ticks { width: 15px; height: 15px; color: var(--wa-tick); transition: color 300ms ease; }
.bubble.is-unread .ticks { color: rgba(233, 237, 239, 0.55); }
.typing {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px;
  border-radius: 10px; border-top-right-radius: 3px; background: var(--wa-out);
  opacity: 0; visibility: hidden;
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(233, 237, 239, 0.7); animation: dot 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
.phone:not(.is-live) .typing i { animation-play-state: paused; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
.chat-event { justify-self: center; display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 7px 12px; border-radius: 10px; background: var(--wa-chip); color: var(--wa-ink); font-size: 12px; font-weight: 700; }
.chat-event .ico { width: 15px; height: 15px; color: var(--accent); }

/* ─── L'équipe : au survol, la photo se grise et propose son Instagram ─── */
.team-sec::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1100px, 100%); height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.person { display: grid; align-content: start; gap: 16px; }
.person-photo { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-photo), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease), filter 500ms ease; }
.person-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.12) 0%, transparent 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.person-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(4, 4, 5, 0.6), rgba(4, 4, 5, 0.14) 55%, rgba(4, 4, 5, 0.04)); opacity: 0; transition: opacity 450ms ease; }
.veil {
  position: absolute; left: 50%; bottom: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 18px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(24, 24, 28, 0.66); color: #FFFFFF; font-size: 15px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  opacity: 0; transform: translate(-50%, 14px) scale(0.94);
  transition: opacity 350ms ease, transform 550ms var(--ease-back);
}
.veil-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.veil-go .ico { width: 16px; height: 16px; transition: transform 500ms var(--ease-back); }
@media (hover: hover) and (pointer: fine) {
  .person-photo:hover img { transform: scale(1.04); filter: grayscale(0.5) brightness(0.9); }
  .person-photo:hover::after { opacity: 1; }
  .person-photo:hover .veil { opacity: 1; transform: translate(-50%, 0) scale(1); }
  .person-photo:hover .veil-go .ico { transform: rotate(45deg); }
}
.person-photo:focus-visible { outline-offset: 4px; border-radius: 26px; }
.person-photo:focus-visible::after { opacity: 1; }
.person-photo:focus-visible .veil { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (hover: none) {
  .veil { left: auto; right: 14px; bottom: 14px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transform: none; }
  .veil-label { display: none; }
}
.person-id h3 { font-size: 24px; letter-spacing: -0.025em; }
.role { margin-top: 2px; color: var(--accent); font-weight: 600; font-size: 15.5px; }
.bio { max-width: 48ch; color: var(--ink-2); }
.handle { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-left: -10px; padding: 8px 14px 8px 10px; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; transition: background-color 250ms ease, color 250ms ease; }
.handle .ico { width: 18px; height: 18px; }
.handle:hover { background: var(--hl); color: var(--accent); }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; gap: 52px; } .person-photo { aspect-ratio: 5 / 6; } }

/* ─── Les 7 jours gratuits : l'offre qui compte ─── */
.trial { padding-top: clamp(40px, 6vw, 72px); }
.trial-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 4.6vw, 64px);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 40%), #0B0B0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 60px 120px -60px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 138, 61, 0.05);
}
.trial-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(52% 72% at 100% 0%, rgba(255, 138, 61, 0.3), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(255, 138, 61, 0.1), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(90% 100% at 70% 20%, #000 20%, rgba(0, 0, 0, 0.35) 80%);
  mask-image: radial-gradient(90% 100% at 70% 20%, #000 20%, rgba(0, 0, 0, 0.35) 80%);
}
/* le bord qui s'allume en haut à droite, là où tombe la lumière */
.trial-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(210deg, rgba(255, 190, 130, 0.7), rgba(255, 138, 61, 0.15) 30%, transparent 55%);
  -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 exclude, linear-gradient(#000 0 0);
}
.trial-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.trial-side { display: grid; gap: 16px; align-content: center; }
/* l'offre : le prix, le bouton, ce qui se passe après le clic */
.trial-offer {
  position: relative; display: grid; gap: 18px; padding: 24px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}
.trial-offer .btn { width: 100%; }
.trial-offer .trial-note { max-width: none; }
.trial-card .tag { color: var(--accent); }
.trial-card h2 { max-width: 14ch; font-size: clamp(34px, 4vw, 52px); line-height: 1.03; letter-spacing: -0.04em; }
.trial-card .lead { margin-top: 0; max-width: 46ch; font-size: 17.5px; color: var(--ink-2); }
.price { display: grid; gap: 3px; }
.price strong { font-size: 26px; letter-spacing: -0.03em; }
.price > span { font-size: 15px; color: var(--ink-2); }
.trial-card .price strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 21px; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price .price-big { font-size: clamp(44px, 4.4vw, 56px); letter-spacing: -0.05em; line-height: 1; }
.trial-card .price > span { margin-top: 6px; }
/* ce qu'il y a dans la communauté */
.trial-list { display: grid; gap: 11px; }
.trial-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; color: #C7C7CC; }
.trial-list b { color: #FFFFFF; }
.trial-list .ico { width: 22px; height: 22px; margin-top: 0; padding: 4px; border-radius: 50%; background: rgba(255, 138, 61, 0.16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.25); }
.trial-note { max-width: 52ch; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.trial-note a { color: #D1D1D6; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 138, 61, 0.6); }
.trial-note a:hover { color: #FFFFFF; }
.trial-card .win { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.95), 0 0 90px -24px rgba(255, 138, 61, 0.35); }

/* pour qui, et pour qui pas */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.fit-col { position: relative; isolation: isolate; padding: 30px 32px; border-radius: var(--r-lg); background: var(--spot, none), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.fit-col h3 { font-size: clamp(20px, 1.8vw, 23px); line-height: 1.2; letter-spacing: -0.02em; }
.fit-col ul { display: grid; gap: 13px; margin-top: 18px; }
.fit-col li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); }
.fit-col li b { color: var(--ink); }
.fit-col .ico { width: 22px; height: 22px; margin-top: 2px; padding: 4px; border-radius: 50%; }
.fit-yes .ico { background: rgba(255, 138, 61, 0.15); color: var(--accent); }
.fit-no { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--line-2); }
.fit-no .ico { background: var(--hl); color: var(--ink-3); }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; } .fit-col { padding: 24px 22px; } }

/* sept jours : le trait orange se remplit au défilement */
.days { --p: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 60px; }
.days::before, .days::after { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--line-2); }
.days::after { background: var(--grad); box-shadow: 0 0 12px rgba(255, 138, 61, 0.6); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.day { position: relative; padding: 40px 32px 0 0; }
.day::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid rgba(255, 255, 255, 0.22);
  transition: background-color 350ms ease, border-color 350ms ease, box-shadow 450ms var(--ease);
}
.day.is-on::before { background: var(--accent); border-color: var(--accent-hi); box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.2), 0 0 16px rgba(255, 138, 61, 0.7); }
.day-k { display: block; font-size: 13px; font-weight: 700; color: var(--accent); }
.day h3 { margin-top: 6px; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.day p { margin-top: 8px; max-width: 34ch; color: var(--ink-2); }
@media (max-width: 960px) {
  .trial-card { grid-template-columns: 1fr; }
}
/* téléphone : la carte s'élargit, l'offre devient un simple bloc, et le bouton laisse tomber sa pastille pour que « Essayer gratuitement pendant 7 jours » tienne sur une ligne */
@media (max-width: 480px) {
  .trial-card { padding: 26px 16px 18px; border-radius: 26px; }
  .trial-offer { padding: 18px 0 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .trial-offer .btn { --h: 54px; padding: 0 16px; font-size: 15px; }
  .trial-offer .btn .btn-disc { display: none; }
}
@media (max-width: 760px) {
  .days { grid-template-columns: 1fr; gap: 30px; margin-top: 44px; padding-left: 38px; }
  .days::before, .days::after { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; }
  .days::after { transform: scaleY(var(--p)); transform-origin: 50% 0; }
  .day { padding: 0; }
  .day::before { top: 3px; left: -38px; }
}

/* Fenêtre façon Mac : les trois pastilles, un titre, et la scène */
.win { position: relative; overflow: hidden; border-radius: 16px; background: var(--win-bg); color: var(--win-ink); box-shadow: var(--shadow-win); }
.win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.win-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; background: var(--win-bar); border-bottom: 1px solid var(--win-line); font-size: 12.5px; font-weight: 700; color: var(--win-dim); }
.lights { display: flex; flex: none; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.win-title { flex: 1; min-width: 0; padding-right: 51px; overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; }

/* le terminal : on demande un agent, il se construit */
.term { display: grid; align-content: start; gap: 8px; min-height: 252px; padding: 20px 22px 22px; font: 13.5px/1.55 var(--mono); }
.t-in { display: flex; gap: 10px; margin-bottom: 6px; color: var(--win-ink); }
.t-pr { color: var(--term-accent); font-weight: 700; }
.t-cmd { display: grid; }
.t-cmd > span { grid-area: 1 / 1; }
.t-ghost { visibility: hidden; }
.t-typed::after { content: ""; display: inline-block; width: 0.55em; height: 1.15em; margin-left: 2px; vertical-align: -0.2em; background: var(--term-accent); opacity: 0; }
.term-win.is-live .t-typed::after { opacity: 1; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-line { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--win-dim); }
.t-mark { display: grid; place-items: center; width: 16px; height: 1.55em; }
.t-mark svg { grid-area: 1 / 1; width: 14px; height: 14px; }
.t-spin { visibility: hidden; fill: currentColor; color: var(--term-accent); }
.t-ok { color: var(--term-ok); }
.t-txt { display: grid; }
.t-txt > span { grid-area: 1 / 1; }
.t-wip { visibility: hidden; }
.t-done { color: var(--win-ink); }
.t-status {
  justify-self: start; display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 8px 14px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--win-line);
  font: 700 13px/1.2 var(--font); color: var(--win-ink);
}
.t-status .live-dot { background: var(--term-ok); }
@media (max-width: 560px) { .term { min-height: 0; padding: 16px; font-size: 12px; } }

/* ─── FAQ : le titre reste à gauche, les questions s'ouvrent en douceur ─── */
.faq-sec { background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq-wrap .section-head { position: sticky; top: 110px; margin-bottom: 0; }
.faq { display: grid; gap: 10px; }
.faq details {
  border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)), var(--surface);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color 250ms ease, background-color 250ms ease;
}
.faq details:hover { border-color: var(--line-2); }
.faq details.is-open { border-color: rgba(255, 138, 61, 0.32); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  border-radius: inherit; list-style: none; cursor: pointer;
  font-size: 18px; font-weight: 700; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 28px; height: 28px; padding: 5px; border-radius: 50%; color: var(--ink-2); transition: transform 450ms var(--ease-back), background-color 250ms ease, color 250ms ease; }
.faq summary:hover .ico { background: var(--hl); color: var(--ink); }
.faq details.is-open summary .ico { transform: rotate(45deg); color: var(--accent); background: rgba(255, 138, 61, 0.12); }
.faq-a { overflow: hidden; }
.faq-a p { max-width: 62ch; padding: 0 22px 22px; color: var(--ink-2); }
.faq-call {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 20px; padding: 18px 22px;
  border-radius: 16px; border: 1px dashed var(--line-2); color: var(--ink-2); font-size: 16.5px;
}
.faq-call .link-go { font-size: 16.5px; }
@media (max-width: 960px) {
  .faq-wrap { grid-template-columns: 1fr; gap: 0; }
  .faq-wrap .section-head { position: static; margin-bottom: 32px; }
}
@media (max-width: 560px) { .faq summary { font-size: 17px; padding: 18px 18px; } .faq-a p { padding: 0 18px 20px; } }

/* ─── Dernier appel : le robot sous une lumière, des ondes qui partent de lui ─── */
.final-sec { overflow: clip; padding-block: clamp(110px, 13vw, 170px); }
.final-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.final-glow { position: absolute; left: 50%; top: 0; width: min(1000px, 140vw); height: 760px; translate: -50% -24%; background: radial-gradient(closest-side, rgba(255, 138, 61, 0.24), rgba(255, 106, 38, 0.06) 55%, transparent 76%); }
.final-ring {
  position: absolute; left: 50%; top: calc(clamp(110px, 13vw, 170px) + 52px); width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border-radius: 50%; border: 1px solid rgba(255, 150, 80, 0.5); box-shadow: 0 0 24px rgba(255, 138, 61, 0.25), inset 0 0 24px rgba(255, 138, 61, 0.12);
  opacity: 0; animation: ring 4.2s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.final-ring:nth-child(3) { animation-delay: 1.4s; }
.final-ring:nth-child(4) { animation-delay: 2.8s; }
@keyframes ring { 0% { transform: scale(0.55); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: scale(4.4); opacity: 0; } }
.final-fx {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(150px, 16vw, 210px), #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(150px, 16vw, 210px), #000 calc(100% - 40px), transparent);
}
.final-horizon {
  --hd: max(2400px, 200vw);
  position: absolute; left: calc(50% - var(--hd) / 2); top: calc(100% - clamp(56px, 7vw, 92px)); width: var(--hd); height: var(--hd);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg) 99%, transparent 100%);
  box-shadow: 0 -1.5px 0 0 rgba(255, 214, 160, 0.7), 0 -10px 34px -6px rgba(255, 150, 80, 0.45), 0 -60px 140px -30px rgba(255, 106, 38, 0.3);
}
.final { display: grid; justify-items: center; gap: 24px; text-align: center; }
.final h2 { max-width: 20ch; margin-inline: auto; font-size: clamp(34px, 4.6vw, 60px); }
.final p { font-size: 15px; color: var(--ink-3); }
.final p.final-lead { max-width: 46ch; margin-top: -4px; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--ink-2); }
.final-bot { position: relative; width: 96px; height: 96px; margin-bottom: 10px; }
.final-bot .bot { --s: 92px; --d: 0.4; position: absolute; left: 2px; top: 2px; filter: drop-shadow(0 20px 30px rgba(255, 106, 61, 0.35)); }
.final-bot .tw { position: absolute; width: 16px; height: 16px; }
.final-bot .tw-1 { left: -30px; top: 4px; }
.final-bot .tw-2 { right: -34px; top: 30px; width: 12px; height: 12px; }
.final-bot .tw-3 { left: 2px; bottom: -20px; width: 10px; height: 10px; }

/* ─── Pied de page : les guides, le blog et nos Instagram ─── */
.footer { position: relative; padding-block: 64px 28px; border-top: 1px solid var(--line); font-size: 15px; }
.footer::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(700px, 90%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(255, 138, 61, 0.55), transparent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.f-brand p { max-width: 32ch; margin-top: 14px; color: var(--ink-2); }
.f-title { margin-bottom: 14px; font-size: 14px; letter-spacing: 0; }
.footer ul { display: grid; gap: 10px; }
.footer ul a { color: var(--ink-2); transition: color 200ms ease; }
/* la flèche du survol ne prend aucune place (marge droite négative) : sinon, dans une colonne étroite, elle passait seule à la ligne et laissait un trou sous le lien */
.footer ul a .ico { display: inline-block; width: 14px; height: 14px; margin-left: 5px; margin-right: -19px; vertical-align: -1px; opacity: 0; transform: translate(-4px, 3px); transition: opacity 250ms ease, transform 400ms var(--ease-back); }
.footer ul a:hover { color: var(--ink); }
.footer ul a:hover .ico { opacity: 1; transform: none; }
.f-legal { display: inline-flex; gap: 18px; }
.f-legal a, .f-legal button { transition: color 200ms ease; }
.f-legal button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.f-legal a:hover, .f-legal button:hover { color: var(--ink); }
.f-disclaimer { flex: 1 1 100%; max-width: 92ch; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.to-top { transition: color 200ms ease; }
.to-top:hover { color: var(--ink); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
/* téléphone : deux colonnes de liens, des zones de toucher de 44 px, les comptes Instagram en pastilles */
@media (max-width: 640px) {
  .footer { padding-block: 48px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .footer-grid { gap: 30px 20px; }
  .footer-grid > nav:last-child { grid-column: 1 / -1; }
  .footer ul { gap: 0; }
  .footer ul a { display: block; padding: 10px 0; line-height: 1.35; }
  .footer-grid > nav:last-child ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .footer-grid > nav:last-child ul a { padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); }
  .footer-bottom { margin-top: 36px; row-gap: 4px; }
  .footer-bottom > span:first-child { order: 1; padding: 11px 0; }
  .to-top { order: 2; margin-left: auto; }
  .f-legal { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 0 20px; }
  .f-disclaimer { order: 4; }
  .f-legal a, .f-legal button, .to-top { display: inline-block; padding: 11px 0; }
}
@media (max-width: 380px) { .footer-grid { grid-template-columns: 1fr; } }

/* ─── La progression de la page : un trait orange en haut de l'écran ─── */
.scroll-bar { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; }
.scroll-bar i { display: block; height: 100%; background: var(--grad); box-shadow: 0 0 10px rgba(255, 138, 61, 0.8); transform: scaleX(0); transform-origin: 0 50%; border-radius: 0 3px 3px 0; }

/* ─── La barre d'action du téléphone : « Essayer gratuitement pendant 7 jours » reste à portée de pouce quand aucun autre bouton n'est à l'écran ───
   site.js la montre après le hero et la cache pendant la scène, l'essai, le dernier appel, le menu et le bandeau cookies. */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
    transform: translateY(120%); visibility: hidden;
    transition: transform 650ms var(--ease), visibility 0s linear 650ms;
  }
  .dock::before { content: ""; position: absolute; inset: -30px 0 0; z-index: -1; background: linear-gradient(to top, var(--bg) 40%, rgba(4, 4, 5, 0)); }
  .dock.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .dock .btn { --h: 54px; pointer-events: auto; width: 100%; max-width: 440px; font-size: 15.5px; padding-left: 18px; }
  .dock .btn-roll { margin-inline: auto; }
}
@media (max-width: 360px) { .dock .btn { font-size: 14.5px; padding-left: 14px; } }

/* ─── Mouvement ───
   L'état de départ du hero n'est posé que si le mouvement est permis et que JS tourne ;
   tout le reste est caché puis révélé par site.js. Sans lui, la page est complète. */
.js-motion [data-hero] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .live-dot::after, .final-ring, .hero-dust { display: none; }
}