/* ==========================================================================
   STRIKOR — site public. Design system v5.

   Couleurs RELEVÉES dans le produit réel, jamais inventées :
     --strikor #5E17EB  couleur de marque (table app_branding)
     --call    #22C55E  vert du dialer collaborateur (394 usages, PhoneTab)
     étapes    #3B82F6 Nouveau · #F59E0B Contacté · #7C3AED Opportunité
               #0EA5E9 RDV · #22C55E Client        (PIPELINE_STAGES)
   Le bleu #2050E0 porte l'action. Le violet signe la marque sans jamais agir.
   Le vert ne dit qu'une chose : ça appelle, c'est disponible, c'est réussi.

   v5 — la profondeur est travaillée par paliers (surface / carte / flottant /
   modal) plutôt qu'une ombre unique répétée, et le mouvement RACONTE : chaque
   animation explique une mécanique produit, sinon elle n'existe pas.
   ========================================================================== */

:root {
  --paper:        #FFFFFF;
  --sky:          #F6F8FE;
  --surface:      #FFFFFF;
  --surface-sunk: #EFF3FD;

  --navy:         #070E24;
  --navy-soft:    #101A3E;
  --ink:          #080D1B;
  --slate:        #434D64;
  --muted:        #737D95;
  --line:         #E5EAF8;
  --line-strong:  #C6D0EA;

  --blue:         #2050E0;
  --blue-deep:    #1538B4;
  --blue-soft:    #EAF0FF;
  --blue-line:    #BCCDFA;

  --strikor:      #5E17EB;
  --strikor-deep: #4A0FC4;
  --strikor-soft: #F2EBFE;
  --strikor-line: #D8C5FB;

  --call:         #22C55E;
  --call-deep:    #16A34A;
  --cta-green:    #15803D;  --cta-green-h: #126B33;  /* aplat portant du texte blanc : 5,0:1 */
  --call-soft:    #E7FAEE;
  --call-line:    #A8E9C1;

  --st-new: #3B82F6;  --st-con: #F59E0B;  --st-opp: #7C3AED;
  --st-rdv: #0EA5E9;  --st-cli: #22C55E;

  --warn:      #92610F;  --warn-soft:   #FDF3E0;
  --danger:    #BE3226;  --danger-soft: #FCEDEB;

  --console-bg:   #070E24;
  --console-card: #101A3E;
  --console-line: #1E2A58;
  --console-text: #ECF1FF;
  --console-mute: #8593C1;

  /* Profondeur par paliers : chaque niveau dit « je suis plus près » */
  --d1: 0 1px 2px rgba(7,14,36,.04);
  --d2: 0 1px 2px rgba(7,14,36,.05), 0 8px 20px -12px rgba(7,14,36,.15);
  --d3: 0 2px 5px rgba(7,14,36,.07), 0 18px 38px -16px rgba(7,14,36,.24);
  --d4: 0 3px 9px rgba(7,14,36,.09), 0 40px 80px -28px rgba(7,14,36,.42);
  --glow-blue:   radial-gradient(46% 44% at 68% 32%, rgba(32,80,224,.22), transparent 70%);
  --glow-purple: radial-gradient(38% 40% at 16% 72%, rgba(94,23,235,.18), transparent 72%);

  --r-sm: 8px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 26px;  --r-pill: 999px;

  --step--1: clamp(.8rem, .78rem + .1vw, .85rem);
  --step-0:  clamp(.95rem, .92rem + .14vw, 1rem);
  --step-1:  clamp(1.08rem, 1.02rem + .3vw, 1.22rem);
  --step-2:  clamp(1.4rem, 1.22rem + .7vw, 1.8rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.1vw, 2.3rem);
  --step-4:  clamp(2.35rem, 1.9rem + 2.3vw, 3.55rem);

  --gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #050916; --sky: #080D1E; --surface: #0D152C; --surface-sunk: #0A1024;
    --navy: #030711; --navy-soft: #0D1636; --ink: #EAEFFA; --slate: #B0BBD5; --muted: #7F8CAA;
    --line: #19224200; --line: #192242; --line-strong: #273258;
    --blue: #5B87FF; --blue-deep: #7AA0FF; --blue-soft: #0D1B40; --blue-line: #263A76;
    --strikor: #9A6BFF; --strikor-deep: #B18CFF; --strikor-soft: #160A30; --strikor-line: #321E67;
    --call: #3DD37D; --call-deep: #5BE096; --call-soft: #062617; --call-line: #1A5234;
    --st-new: #60A5FA; --st-con: #FBBF24; --st-opp: #A78BFA; --st-rdv: #38BDF8; --st-cli: #4ADE80;
    --warn: #D9A650; --warn-soft: #241B0C; --danger: #E58274; --danger-soft: #2A1512;
    --console-bg: #020610; --console-card: #0B142E; --console-line: #1A244A;
    --d1: 0 1px 2px rgba(0,0,0,.4);
    --d2: 0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.7);
    --d3: 0 2px 5px rgba(0,0,0,.55), 0 18px 38px -16px rgba(0,0,0,.75);
    --d4: 0 3px 9px rgba(0,0,0,.6), 0 40px 80px -28px rgba(0,0,0,.85);
    --glow-blue: radial-gradient(46% 44% at 68% 32%, rgba(91,135,255,.2), transparent 70%);
    --glow-purple: radial-gradient(38% 40% at 16% 72%, rgba(154,107,255,.17), transparent 72%);
  }
}
:root[data-theme="dark"] {
  --paper: #050916; --sky: #080D1E; --surface: #0D152C; --surface-sunk: #0A1024;
  --navy: #030711; --navy-soft: #0D1636; --ink: #EAEFFA; --slate: #B0BBD5; --muted: #7F8CAA;
  --line: #192242; --line-strong: #273258;
  --blue: #5B87FF; --blue-deep: #7AA0FF; --blue-soft: #0D1B40; --blue-line: #263A76;
  --strikor: #9A6BFF; --strikor-deep: #B18CFF; --strikor-soft: #160A30; --strikor-line: #321E67;
  --call: #3DD37D; --call-deep: #5BE096; --call-soft: #062617; --call-line: #1A5234;
  --st-new: #60A5FA; --st-con: #FBBF24; --st-opp: #A78BFA; --st-rdv: #38BDF8; --st-cli: #4ADE80;
  --warn: #D9A650; --warn-soft: #241B0C; --danger: #E58274; --danger-soft: #2A1512;
  --console-bg: #020610; --console-card: #0B142E; --console-line: #1A244A;
  --d1: 0 1px 2px rgba(0,0,0,.4);
  --d2: 0 1px 2px rgba(0,0,0,.5), 0 8px 20px -12px rgba(0,0,0,.7);
  --d3: 0 2px 5px rgba(0,0,0,.55), 0 18px 38px -16px rgba(0,0,0,.75);
  --d4: 0 3px 9px rgba(0,0,0,.6), 0 40px 80px -28px rgba(0,0,0,.85);
  --glow-blue: radial-gradient(46% 44% at 68% 32%, rgba(91,135,255,.2), transparent 70%);
  --glow-purple: radial-gradient(38% 40% at 16% 72%, rgba(154,107,255,.17), transparent 72%);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -.032em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -.036em; line-height: 1.06; max-width: 13ch; }
h2 { font-size: var(--step-3); letter-spacing: -.028em; line-height: 1.12; }
h3 { font-size: var(--step-1); letter-spacing: -.018em; }
p { margin: 0; }
a { color: inherit; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }

:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-sm); }

/* Mouvement reduit : la sortie n'existe pas, tout reste en place. */
@media (prefers-reduced-motion: reduce) {
  .hero { --exit: 0 !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .pipe__card, .flow__i { opacity: 1 !important; transform: none !important; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

/* Révélation au scroll — départ visible dès que l'observateur manque */
.reveal { opacity: .001; transform: translateY(16px); transition: opacity .42s var(--ease), transform .42s var(--ease); }
.reveal[data-shown="true"] { opacity: 1; transform: none; }
.reveal > * { transition: opacity .42s var(--ease) calc(var(--i, 0) * 70ms), transform .42s var(--ease) calc(var(--i, 0) * 70ms); }

/* ---- Signature STRIKOR -------------------------------------------------- */
.orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 34% 30%, var(--strikor), transparent 72%); opacity: .5; }
.orb--drift { animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14px,-20px,0) scale(1.05); } }
.orb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--strikor); flex: none; }

/* ---- Boutons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; line-height: 1; padding: .9rem 1.45rem; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--d2), 0 10px 24px -12px rgba(32,80,224,.7); }
.btn--primary:hover { background: var(--blue-deep); box-shadow: var(--d3), 0 14px 30px -12px rgba(32,80,224,.8); }
:root[data-theme="dark"] .btn--primary { color: #04091A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--primary { color: #04091A; } }
.btn--call { background: var(--call); color: #06240F; box-shadow: var(--d2), 0 10px 24px -12px rgba(34,197,94,.65); }
.btn--call:hover { background: var(--call-deep); color: #fff; }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--d1); }
.btn--secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn--ghost { background: transparent; color: var(--slate); padding-inline: .6rem; }
.btn--ghost:hover { color: var(--blue); transform: none; }
.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--step-1); }
.btn--sm { padding: .5rem .9rem; font-size: var(--step--1); }

/* ---- Champs ------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field > label { font-size: var(--step--1); font-weight: 600; color: var(--slate); }
.input { width: 100%; font-family: var(--font-body); font-size: var(--step-1); padding: .95rem 1.05rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input--code { font-family: var(--font-mono); font-size: var(--step-3); letter-spacing: .38em; text-align: center; padding-inline: .5rem; }
.hint { font-size: var(--step--1); color: var(--muted); }
.select { width: 100%; font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; padding: .82rem 2.2rem .82rem .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.select:hover { border-color: var(--blue-line); }
.select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }

/* Segmenté : mobile / fixe */
.seg { display: flex; gap: .25rem; background: var(--surface-sunk); border-radius: var(--r-md); padding: .25rem; }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: inherit; font-size: var(--step--1); font-weight: 600; padding: .55rem .4rem; border: 0; border-radius: calc(var(--r-md) - 4px); background: transparent; color: var(--muted); cursor: pointer; transition: all .18s var(--ease); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--blue); box-shadow: var(--d2); }
.seg svg { flex: none; }

/* ---- Cartes ------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem; }
.card--lift { box-shadow: var(--d2); }

.choice { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: .8rem 1rem; cursor: pointer; font-family: inherit; font-size: var(--step-0); color: var(--ink); transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.choice:hover { border-color: var(--blue); transform: translateX(2px); }
.choice[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue) inset; }
.choice__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.choice__title { font-weight: 600; }
.choice__meta { font-size: var(--step--1); color: var(--muted); }
.choice__mark { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; }
.choice[aria-pressed="true"] .choice__mark { border-color: var(--blue); background: var(--blue); }
.choice[aria-pressed="true"] .choice__mark::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); }

.numcard { display: flex; align-items: center; gap: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .85rem 1rem; box-shadow: var(--d1); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); animation: rise .3s var(--ease) both; }
.numcard:hover { border-color: var(--call-line); box-shadow: var(--d2); transform: translateY(-1px); }
.numcard__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--step-1); font-weight: 500; }
.numcard__c { font-size: var(--step--1); color: var(--muted); }
.numcard[data-locked="true"] { border-color: var(--call); background: var(--call-soft); box-shadow: var(--d2); }
@keyframes rise { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Badges & alertes --------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); font-weight: 600; line-height: 1; padding: .32rem .62rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--slate); background: var(--surface); }
.badge--call    { color: var(--call-deep); border-color: var(--call-line); background: var(--call-soft); }
.badge--blue    { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.badge--strikor { color: var(--strikor); border-color: var(--strikor-line); background: var(--strikor-soft); }
.badge--wait    { color: var(--warn); border-color: transparent; background: var(--warn-soft); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge__dot--pulse { animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .28; } }

.alert { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-md); font-size: var(--step--1); line-height: 1.5; }
.alert--info { background: var(--blue-soft); color: var(--blue); }
.alert--warn { background: var(--warn-soft); color: var(--warn); }
.alert--danger { background: var(--danger-soft); color: var(--danger); }
.alert--ok { background: var(--call-soft); color: var(--call-deep); }

.skeleton { background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--line) 37%, var(--surface-sunk) 63%); background-size: 400% 100%; border-radius: var(--r-md); animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skeleton--row { height: 60px; }

/* ---- Progression -------------------------------------------------------- */
.progress { display: flex; align-items: center; gap: .5rem; }
.progress__seg { display: flex; align-items: center; gap: .5rem; }
.progress__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.progress__seg[data-state="done"] .progress__dot { background: var(--strikor); }
.progress__seg[data-state="current"] .progress__dot { background: var(--strikor); box-shadow: 0 0 0 4px var(--strikor-soft); }
.progress__label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.progress__seg[data-state="current"] .progress__label { color: var(--strikor); font-weight: 700; }
.progress__seg[data-state="done"] .progress__label { color: var(--slate); }
.progress__line { width: 26px; height: 1px; background: var(--line-strong); }

/* ---- En-tête ------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; gap: 1.4rem; height: 66px; }
.brand {
  /* Le logo public EST celui du produit : meme actif SVG, meme police (Onest,
     app/src/index.css), meme nom (brand_name = « Strikor »). Aucune capitale
     ajoutee, aucun tracking invente. */
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: 1.26rem; letter-spacing: -.014em;
}
.brand__mark { display: block; flex: none; }
.site-nav { display: flex; gap: 1.3rem; margin-left: auto; align-items: center; }
.site-nav a { font-size: var(--step--1); font-weight: 500; color: var(--slate); text-decoration: none; transition: color .18s var(--ease); }
.site-nav a:hover { color: var(--blue); }
@media (max-width: 900px) { .site-nav a[data-opt] { display: none; } }
@media (max-width: 560px) { .site-header .btn { display: none; } }
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.lang button { font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: .3rem .55rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--strikor); color: #fff; }

/* ---- Sections ----------------------------------------------------------- */
.section--navy + .section { padding-block-start: clamp(2rem, 1rem + 2vw, 3rem); }
.section { padding-block: clamp(3.4rem, 2rem + 5vw, 6.5rem); position: relative; overflow: hidden; }
/* Apres le moment sombre, la lumiere revient et les tarifs arrivent vite :
   le vide qui les precedait cassait le rythme de la page. */
.section--navy + .section { padding-block-start: clamp(2.2rem, 1.2rem + 2.4vw, 3.4rem); }
.section--sky { background: var(--sky); }
.section--navy { position: relative; background: var(--navy); color: var(--console-text); }
/* L'entree et la sortie du moment sombre : la lumiere se refroidit, puis
   revient. Deux voiles, aucun effet visible de coupure. */
.section--navy::before, .section--navy::after {
  content: ""; position: absolute; left: 0; right: 0; height: 86px; pointer-events: none; z-index: 1;
}
.section--navy::before { top: 0; background: linear-gradient(180deg, var(--sky), transparent); opacity: .16; }
.section--navy::after { bottom: 0; background: linear-gradient(0deg, var(--sky), transparent); opacity: .16; }
.section--navy > * { position: relative; z-index: 2; }
.section--navy h2 { color: var(--console-text); }
.section--navy .lede { color: var(--console-mute); }
.section__head { display: flex; flex-direction: column; gap: .75rem; max-width: 58ch; position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--strikor); }
.lede { font-size: var(--step-1); color: var(--slate); max-width: 48ch; }

/* ---- Héros -------------------------------------------------------------- */
/* ---- Atmosphère continue ───────────────────────────────────────────────
   Le defaut le plus visible de la page etait son rythme : bloc, vide, bloc.
   On remplace les fonds de section par UNE nappe lumineuse qui court sur toute
   la page et change d'intensite. Les sections ne portent plus de couleur : la
   lumiere fait le decoupage. */
#marketing { position: relative; isolation: isolate; }
#marketing::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 22% at 78% 6%,  rgba(32, 80, 224, .07), transparent 70%),
    radial-gradient(42% 18% at 18% 30%, rgba(94, 23, 235, .04), transparent 72%),
    radial-gradient(52% 16% at 82% 56%, rgba(32, 80, 224, .05), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--sky) 34%, var(--bg) 58%, var(--sky) 78%, var(--bg) 100%);
}
/* Une trame technique, a la limite du perceptible : elle donne une assise sans
   jamais se lire comme un motif. */
#marketing::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 34% at 74% 8%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 34% at 74% 8%, #000 0%, transparent 72%);
}
/* Les sections deviennent transparentes : c'est la nappe qui les distingue. */
.section--sky { background: transparent; }

.hero { --exit: 0; position: relative; padding-block: clamp(2.4rem, 1.5rem + 3.5vw, 4rem) clamp(2.8rem, 1.5rem + 4vw, 5rem); overflow: hidden; }
/* La sortie se joue sur deux proprietes seulement — transform et opacity — et
   sur une variable mise a jour par un observateur. Aucun calcul continu. */
.hero__grid { will-change: transform; }
.hero::before {
  content: ""; position: absolute; inset: -30% -25% -10% -25%; pointer-events: none; z-index: 0;
  opacity: calc(1 - var(--exit) * .55);
  background:
    /* nappe froide derriere le produit, a droite */
    radial-gradient(60% 52% at 78% 34%, rgba(32, 80, 224, .085), transparent 72%),
    /* souffle violet, presque imperceptible, decale pour ne jamais faire cercle */
    radial-gradient(52% 46% at 64% 72%, rgba(94, 23, 235, .05), transparent 70%),
    /* clarte centrale qui garde le texte lisible a gauche */
    radial-gradient(70% 60% at 22% 40%, rgba(255, 255, 255, .9), transparent 66%),
    /* refroidissement des bords, tres progressif */
    radial-gradient(120% 90% at 50% 0%, transparent 52%, rgba(24, 40, 82, .05));
}
/* Le bas du heros se dissout dans la section suivante : aucune coupure nette. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, transparent, var(--sky)); pointer-events: none; z-index: 0;
  opacity: calc(1 - var(--exit) * .35);
}
/* Deux colonnes : le message a gauche, le premier pas du tunnel a droite.
   En dessous d'une certaine largeur elles s'empilent, et l'ordre du DOM place
   naturellement l'action avant la demonstration. */
.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.2rem); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero__copy { display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; transform: translateY(calc(var(--exit) * -4px)); }
.hero__sub { font-size: var(--step-1); color: var(--slate); max-width: 34ch; line-height: 1.5; margin-top: -.3rem; }
/* Une seule encre, une seule police. L'impact ne vient pas d'une couleur mais
   du rythme : la premiere ligne pose le nom, la seconde le tient d'un cran en
   dessous, un peu plus resserree. Ni violet, ni italique, ni degrade. */
.h1__a { font-weight: 700; color: var(--ink); letter-spacing: -.034em; }
.h1__b { font-weight: 700; color: var(--ink); letter-spacing: -.038em; font-size: .88em; opacity: .92; }

/* Trois benefices, dits une fois, sans microcopie. */
.assure { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.assure__i { display: flex; align-items: center; gap: .6rem; font-size: var(--step-0); font-weight: 500; color: var(--ink); }
.assure__b { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--call-soft); color: var(--call-deep); }

.hero__pick {
  transform: translateY(calc(var(--exit) * -8px));
  width: 100%; max-width: 480px; justify-self: end; display: flex; flex-direction: column; gap: .6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.15rem, .8rem + 1vw, 1.55rem); position: relative;
  /* Presente, jamais pesante : une ombre large et tres peu opaque, plus un
     leger contact au ras de la carte. Ni halo, ni verre depoli. */
  box-shadow: 0 1px 2px rgba(16, 24, 48, .04), 0 18px 48px -24px rgba(16, 24, 48, .22);
}
.hero__pick::after { content: ""; position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--strikor); box-shadow: 0 2px 8px -2px rgba(94, 23, 235, .5); }
.hero__pick-t { font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.hero__pick-s { font-size: var(--step--1); color: var(--muted); margin-top: -.35rem; }
.hero__pick-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.hero__pick-row .select { flex: 1; min-width: 128px; width: auto; }
.hero__pick-m { font-size: 11px; color: var(--muted); text-align: center; }
/* Le pied de carte : le reglage du type, puis la microcopie. Secondaires tous
   les deux, ils viennent APRES le produit. */
.hero__foot { display: flex; flex-direction: column; gap: .55rem; margin-top: .35rem; padding-top: .75rem; border-top: 1px solid var(--line); }

/* ---- Les trois numéros, dans le héros ──────────────────────────────────
   Trois lignes, jamais une liste. Chacune se lit d'un coup : le numero, son
   origine, et le geste qui la retient. « Choisir » vaut decision — il n'y a
   pas de second bouton a presser ensuite. */
.nums { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }
.numrow { display: flex; align-items: center; gap: .7rem; padding: .62rem .62rem .62rem .9rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .18s var(--ease), background-color .25s var(--ease), box-shadow .18s var(--ease); }
.numrow:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 48, .06); }
.numrow__i { display: flex; flex-direction: column; align-items: flex-start; gap: .22rem; min-width: 0; }
/* Un choix commercial, pas une valeur de base de donnees : la police du
   produit, pas le chasse-fixe. */
.numrow__n { font-family: var(--font-body); font-size: var(--step-1); font-weight: 600; color: var(--ink); letter-spacing: -.012em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.numrow__c { font-size: 11px; color: var(--muted); }
/* La ville est deja choisie plus haut : ce qui manque sous un numero, c'est
   son etat. Rassurant, mais secondaire — jamais un second bouton. */
.avail { display: inline-flex; align-items: center; gap: .34rem; align-self: flex-start; font-size: 10px; font-weight: 600; color: var(--call-deep); background: var(--call-soft); border: 1px solid var(--call-line); border-radius: var(--r-sm); padding: .12rem .42rem; }
.avail i { width: 5px; height: 5px; border-radius: 50%; background: var(--call-deep); flex: none; }
/* « Je reserve » : vert franc, texte blanc, cible confortable. Assez present
   pour etre l'action evidente de la ligne, assez sobre pour rester B2B. */
.numrow__go {
  margin-left: auto; flex: none; font-family: inherit; font-size: var(--step--1); font-weight: 600;
  min-height: 40px; min-width: 116px; padding: .5rem 1.05rem; border-radius: var(--r-md); border: 0;
  background: var(--cta-green); color: #fff; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), transform .16s var(--ease);
}
.numrow__go:hover { background: var(--cta-green-h); transform: translateY(-1px); }
/* La confirmation dure juste assez pour etre vue, pas pour faire attendre. */
.numrow[data-state="chosen"] { border-color: var(--call); background: var(--call-soft); box-shadow: 0 0 0 2px var(--call-soft); }
.numrow[data-state="chosen"] .numrow__go { background: var(--cta-green-h); color: #fff; }
.numrow[data-state="taken"] { border-color: var(--danger); background: var(--danger-soft); }
.numrow[data-state="taken"] .numrow__go { background: var(--danger); color: #fff; }

/* Action secondaire : elle rafraichit, elle ne decide pas. */
.nums__note { font-size: 11px; color: var(--danger); margin-top: .1rem; }
.nums__more { align-self: center; display: inline-flex; align-items: center; gap: .4rem; font-family: inherit; font-size: var(--step--1); color: var(--muted); background: none; border: 0; padding: .3rem .2rem; cursor: pointer; transition: color .2s var(--ease); }
.nums__more:hover { color: var(--blue); }
.nums__ic { display: inline-block; transition: transform .45s var(--ease); }
.nums__more:hover .nums__ic { transform: rotate(180deg); }

/* Le curseur de demonstration : il montre le geste que le visiteur peut faire
   lui-meme. Purement decoratif, il s'efface des qu'on prend la main. */
.ghost { position: absolute; z-index: 5; width: 17px; height: 17px; margin: -3px 0 0 -3px; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M2 1.4v12l3.1-3.1h4.4z' fill='%23fff' stroke='%23111' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 2px 4px rgba(16,24,48,.3)); }
.ghost[data-on="true"] { opacity: 1; }
.ghost[data-tap="true"]::after { content: ""; position: absolute; left: -5px; top: -5px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--strikor); animation: tap .45s var(--ease) forwards; }
@keyframes tap { from { transform: scale(.3); opacity: .9; } to { transform: scale(1); opacity: 0; } }
[data-touched="true"] .ghost { opacity: 0 !important; }

/* Un lien de texte, souligne a distance lisible. */
.link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---- La démonstration : un vrai softphone, qui se transforme ────────────
   UNE seule surface raconte toute l'histoire. Elle garde la proportion d'un
   telephone — pas d'une barre etiree — parce que le message est justement
   « STRIKOR EST le telephone de l'entreprise ». Le plateau ci-dessous est la
   consequence : on ne dessine aucun faux pipeline ici. */
.demo { display: grid; gap: 1.2rem; align-items: center; margin: 1.6rem 0 1.8rem; }
@media (max-width: 719px) { .phone { margin-inline: auto; } }
@media (min-width: 720px) { .demo { grid-template-columns: 296px 1fr; } .phone { max-width: none; } }

.phone { max-width: 340px; width: 100%; display: flex; flex-direction: column; gap: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.05rem 1.1rem 1.15rem; box-shadow: var(--d3); }
.phone__lab { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.phone__hd { display: flex; align-items: center; gap: .6rem; }
.phone__av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--strikor); color: #fff; font-weight: 700; font-size: 11px; }
.phone__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.phone__who b { font-size: var(--step-0); }
.phone__who .num { font-size: 12px; color: var(--muted); }
.phone__live { display: flex; align-items: center; gap: .6rem; }
/* L'etat de l'appel : gris tant qu'il sonne, vert quand la ligne est ouverte. */
.callstate { display: inline-flex; align-items: center; gap: .4rem; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; transition: color .3s var(--ease); }
.callstate[data-s="ringing"] { color: var(--muted); }
.callstate[data-s="connected"] { color: var(--call); }
.callstate[data-s="ended"] { color: var(--muted); }
.callstate i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.demo:not([data-phase="live"]) .callstate i { animation: none; }
.phone__timer { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--step-1); color: var(--call-deep); transition: color .35s var(--ease); }
.demo:not([data-phase="live"]) .phone__timer { color: var(--muted); }
.phone .wave { width: 100%; height: 18px; margin: 0; }
.phone .wave i { background: var(--call); }
.demo:not([data-phase="live"]) .wave { opacity: .14; }

/* Le pave est reel, et se replie quand l'appel n'a plus cours. */
.phone__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .32rem; overflow: hidden; max-height: 210px; opacity: 1; transition: max-height .5s var(--ease), opacity .3s var(--ease), margin .5s var(--ease); }
.phone__pad button { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 500; color: var(--ink); background: var(--sky); border: 1px solid var(--line); border-radius: var(--r-md); padding: .34rem 0 .26rem; cursor: default; line-height: 1.15; display: flex; flex-direction: column; align-items: center; }
.phone__pad small { font-size: 7px; letter-spacing: .1em; color: var(--muted); font-family: var(--font-body); }
.phone__ctrls { display: flex; justify-content: center; gap: .55rem; overflow: hidden; max-height: 48px; opacity: 1; transition: max-height .5s var(--ease), opacity .3s var(--ease); }
.phone__c { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); border: 1px solid var(--line); color: var(--slate); }
.phone__c--end { background: var(--danger); border-color: transparent; color: #fff; transform: rotate(134deg); }
.demo:not([data-phase="live"]) .phone__pad,
.demo:not([data-phase="live"]) .phone__ctrls { max-height: 0; opacity: 0; }

/* La meme surface enchaine sur la question : aucune nouvelle carte n'apparait. */
.phone__ask { display: flex; flex-direction: column; gap: .5rem; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s var(--ease), opacity .35s var(--ease); }
.demo[data-phase="ask"] .phone__ask, .demo[data-phase="done"] .phone__ask { max-height: 130px; opacity: 1; }
.phone__askt { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }

/* Confirmations : secondaires. La carte qui bouge reste l'explication. */
.demo__ok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.demo__ok li { display: flex; align-items: center; gap: .55rem; font-size: var(--step-0); font-weight: 500; color: var(--slate); opacity: 0; transform: translateY(5px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.demo__ok li[data-on="true"] { opacity: 1; transform: none; }
.demo__ok li span:first-child { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--call-soft); color: var(--call-deep); font-size: 11px; font-weight: 700; }

/* ---- Statuer l'appel : la seule saisie humaine de toute la scène --------
   Le bloc reste en retrait tant que l'appel n'est pas fini ; il ne reclame
   l'attention qu'au moment ou il a un sens. Les options sont de VRAIS boutons :
   le visiteur peut statuer lui-meme, et la demonstration lui cede la main. */
.statuer { display: flex; flex-direction: column; gap: .5rem; }
.statuer__opts { display: flex; flex-wrap: wrap; gap: .3rem; }
.statuer__o { font-family: inherit; font-size: 11px; padding: .34rem .62rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--slate); white-space: nowrap; cursor: pointer; transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), opacity .28s var(--ease), transform .18s var(--ease); }
.statuer__o:hover { border-color: var(--blue); transform: translateY(-1px); }
.statuer__o[data-on="true"] { border-color: transparent; color: #fff; font-weight: 600; }
.statuer__o[data-on="true"][data-st="contacte"] { background: var(--st-con); }
.statuer__o[data-on="true"][data-st="qualifie"] { background: var(--st-opp); }
.statuer__o[data-on="true"][data-st="rdv"]      { background: var(--st-rdv); }
.statuer__opts:has([data-on="true"]) .statuer__o:not([data-on="true"]) { opacity: .5; }

/* ---- Le fil des suites automatiques ------------------------------------- */

/* ---- Choix de l'offre dans le tunnel ------------------------------------ */
.choice__title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.choice__price { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; padding-right: .5rem; }
.choice__price b { font-family: var(--font-display); font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.choice__price small { font-size: 10px; color: var(--muted); }

/* Le nombre de collaborateurs : posé seulement quand l'offre se facture par tête. */
.seats { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--d1); }
.seats__q { font-weight: 600; font-size: var(--step-0); }
.seats__row { display: flex; align-items: center; gap: .8rem; }

/* ---- Trois étapes ------------------------------------------------------- */
.steps { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; grid-template-rows: auto auto 1fr auto; gap: .5rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--d1); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.step:hover { box-shadow: var(--d2); transform: translateY(-2px); }
.step__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--strikor); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 500; box-shadow: 0 0 0 4px var(--strikor-soft); }
.step__t { font-weight: 600; font-size: var(--step-1); align-self: start; }
.step__d { font-size: var(--step--1); color: var(--muted); align-self: start; }

/* ---- Boutique ----------------------------------------------------------- */
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1.6rem; }
.tab { font-family: inherit; font-size: var(--step--1); font-weight: 600; padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--slate); cursor: pointer; transition: all .18s var(--ease); }
.tab:hover { border-color: var(--blue); color: var(--blue); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: var(--d2); }
.shop { display: grid; gap: 1rem; margin-top: 1.1rem; }
@media (min-width: 880px) { .shop { grid-template-columns: 260px 1fr; align-items: start; } }
.shop__cities, .shop__list { display: flex; flex-direction: column; gap: .5rem; }
.shop__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }

@media (min-width: 640px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mods { grid-template-columns: repeat(3, 1fr); } }
.chip { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: .14rem .45rem; border-radius: var(--r-pill); font-weight: 700; }

/* ---- Pipeline vivant ---------------------------------------------------- */
.pipe { display: grid; gap: .6rem; margin-top: 2rem; }
@media (min-width: 760px) { .pipe { grid-template-columns: repeat(5, 1fr); } }
.pipe__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 0 .6rem; display: flex; flex-direction: column; gap: .45rem; min-height: 148px; overflow: hidden; box-shadow: var(--d1); }
.pipe__top { height: 3px; }
.pipe__h { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; display: flex; align-items: center; gap: .35rem; padding: .55rem .6rem 0; }
.pipe__count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.pipe__card { margin-inline: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .6rem; font-size: 11px; display: flex; flex-direction: column; gap: .25rem; box-shadow: var(--d1); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.pipe__card b { font-weight: 600; font-size: 11px; }
.pipe__card span { color: var(--muted); font-size: 10px; }
.pipe__card[data-in="false"] { opacity: 0; transform: translateY(10px); }
/* La carte qui voyage d'une colonne à l'autre : c'est elle qui explique le pipeline */
.pipe__card--move { box-shadow: var(--d3); border-color: var(--st-opp); }
.pipe__card--move[data-moved="true"] { animation: handoff .6s var(--ease) both; }
@keyframes handoff { 0% { transform: translateY(-6px) scale(.97); opacity: .4; } 60% { transform: translateY(2px) scale(1.02); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ---- Automatisation ----------------------------------------------------- */
.flow { display: grid; gap: .5rem; margin-top: 2rem; }
@media (min-width: 820px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow__i { display: flex; align-items: center; gap: .7rem; background: var(--console-card); border: 1px solid var(--console-line); border-radius: var(--r-md); padding: .85rem .95rem; font-size: var(--step--1); color: var(--console-text); opacity: .35; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.flow__i[data-on="true"] { opacity: 1; transform: none; }
.flow__i[data-active="true"] { border-color: var(--strikor); box-shadow: 0 0 0 1px var(--strikor) inset, var(--d3); }
.flow__n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--console-line); color: var(--console-mute); font-family: var(--font-mono); font-size: 11px; font-weight: 500; transition: background-color .4s var(--ease), color .4s var(--ease); }
.flow__i[data-on="true"] .flow__n { background: var(--strikor); color: #fff; }
.flow__tag { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--call); border: 1px solid var(--console-line); border-radius: var(--r-pill); padding: .1rem .42rem; }

/* ---- Confiance ---------------------------------------------------------- */
.trust { display: grid; gap: 1.2rem 1.8rem; margin-top: 2.2rem; }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .trust { grid-template-columns: repeat(5, 1fr); } }
.trust__t { font-weight: 600; font-size: var(--step-0); display: flex; align-items: center; gap: .45rem; }
.trust__d { font-size: var(--step--1); color: var(--muted); margin-top: .2rem; }

/* ---- Tarifs ------------------------------------------------------------- */
.plans { display: grid; gap: 1rem; margin-top: 2.2rem; align-items: start; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; gap: .8rem; position: relative; box-shadow: var(--d1); }
.plan[data-recommended="true"] { border-color: var(--blue); box-shadow: var(--d4); }
.plan__name { font-weight: 700; font-family: var(--font-display); font-size: var(--step-1); }
.plan__price { display: flex; flex-direction: column; gap: .05rem; }
.plan__amount { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__unit { font-size: 11px; color: var(--muted); }
/* Trois offres, trois colonnes : aucune ne se retrouve seule sur sa ligne. */
@media (min-width: 900px) { .plans--3 { grid-template-columns: repeat(3, 1fr); } }
.plans__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-top: 1.1rem; font-size: var(--step--1); }
.plans__note { color: var(--muted); }
.plan__for { font-size: var(--step--1); color: var(--muted); }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: var(--step--1); color: var(--slate); }
.plan__list li { display: flex; gap: .5rem; align-items: flex-start; }
.plan__list svg { flex: none; margin-top: .25rem; color: var(--call-deep); }

/* ---- CTA final ---------------------------------------------------------- */
.cta-final { position: relative; overflow: hidden; background: var(--navy); color: var(--console-text); border-radius: var(--r-xl); padding: clamp(2rem, 1rem + 4vw, 3.6rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; box-shadow: var(--d4); }
.cta-final h2 { color: var(--console-text); }
.cta-final p { color: var(--console-mute); max-width: 42ch; font-size: var(--step-1); }
.cta-final .orb { opacity: .55; }

.site-footer { border-top: 1px solid var(--line); padding-block: 2.2rem 2.8rem; }
.site-footer__in { display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; font-size: var(--step--1); color: var(--muted); }

.sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 55; display: none; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .sticky-cta { display: block; } body { padding-bottom: 4.6rem; } }

/* ==========================================================================
   Tunnel
   ========================================================================== */
.funnel { min-height: 100vh; display: flex; flex-direction: column; background: var(--sky); }
.funnel__top { border-bottom: 1px solid var(--line); background: var(--paper); }
.funnel__topin { display: flex; align-items: center; gap: 1rem; height: 62px; }
.funnel__body { flex: 1; display: flex; justify-content: center; padding: clamp(1.5rem, 1rem + 3vw, 2.8rem) var(--gutter) 6rem; }
.funnel__col { width: 100%; max-width: 510px; display: flex; flex-direction: column; gap: 1.4rem; }
.funnel__q { display: flex; flex-direction: column; gap: .5rem; }
.funnel__q h2 { font-size: var(--step-2); }
.funnel__q p { color: var(--slate); font-size: var(--step-0); }
.funnel__actions { display: flex; flex-direction: column; gap: .7rem; }
.funnel__back { background: none; border: 0; color: var(--muted); font-family: inherit; font-size: var(--step--1); cursor: pointer; padding: .3rem 0; align-self: flex-start; }
.funnel__back:hover { color: var(--blue); }
.saved { display: inline-flex; align-items: center; gap: .3rem; font-size: 11px; color: var(--call-deep); margin-left: auto; opacity: 0; transition: opacity .3s var(--ease); }
.saved[data-on="true"] { opacity: 1; }
@media (max-width: 640px) { .funnel__body { padding-bottom: 7rem; } }

.checklist { display: flex; flex-direction: column; gap: .05rem; }
.check { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: var(--step-0); }
.check:last-child { border-bottom: 0; }
.check__mark { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line-strong); color: var(--muted); }
.check[data-state="done"] .check__mark { background: var(--call); border-color: var(--call); color: #06240F; }
.check[data-state="active"] .check__mark { border-color: var(--strikor); color: var(--strikor); }
.check[data-state="todo"] .check__label { color: var(--muted); }
.check__label { flex: 1; }

.dash__grid { display: grid; gap: 1rem; }
@media (min-width: 740px) { .dash__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.numbercard { position: relative; overflow: hidden; background: var(--navy); color: var(--console-text); border-color: var(--console-line); display: flex; flex-direction: column; gap: .4rem; box-shadow: var(--d3); }
.numbercard .kv { border-bottom-color: var(--console-line); }
.numbercard .kv__k { color: var(--console-mute); }
.numbercard .kv__v { color: var(--console-text); }
.numbercard__n { font-family: var(--font-mono); font-size: var(--step-2); font-variant-numeric: tabular-nums; color: var(--call); }
.numbercard__lbl { font-size: var(--step--1); color: var(--console-mute); }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--muted); }
.kv__v { font-weight: 600; text-align: right; }

/* ---- Utilitaires -------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.gap-05 { gap: .5rem; } .gap-075 { gap: .75rem; } .gap-1 { gap: 1rem; }
.row { display: flex; align-items: center; }
.row-gap { gap: .6rem; }
.wrapflex { flex-wrap: wrap; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.hidden { display: none !important; }

/* ==========================================================================
   v6 — couche de mouvement. Uniquement transform et opacity : rien qui force
   un recalcul de mise en page pendant l'animation.
   ========================================================================== */

/* Bouton décrocher : il vit pendant la sonnerie, se calme une fois en ligne */
.answer {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--call); color: #06240F;
}

.pipe__slot { display: flex; flex-direction: column; gap: .45rem; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); border-radius: var(--r-md); }
.pipe__slot[data-drop="true"] { background: var(--blue-soft); box-shadow: 0 0 0 2px var(--blue); }
/* Le glisser doit fonctionner au doigt : le navigateur ne doit pas prendre le geste. */
.pipe__card { touch-action: none; cursor: grab; }
.pipe__card[data-lift="true"] { cursor: grabbing; }
.pipe__card[data-moved="true"] { border-color: var(--st-opp); box-shadow: var(--d3); }

/* Le signal STRIKOR qui parcourt la chaîne d'automatisation */
.flow__signal {
  position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--strikor-deep), var(--strikor) 60%, transparent 72%);
  box-shadow: 0 0 22px 6px rgba(94,23,235,.45);
  opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), opacity .35s var(--ease);
}
.flow__signal[data-on="true"] { opacity: .95; }

/* Les modules : la carte se pose, puis ses lignes se complètent */

/* Mouvement réduit : tout est là, tout de suite, rien ne dépend d'une animation */
@media (prefers-reduced-motion: reduce) {
  .flow__signal { display: none; }
}

/* ==========================================================================
   v7 — passe de finition. Rien de structurel : densité, profondeur, focale.
   ========================================================================== */

/* ---- Le bouton d'appel devient le point focal de la console ------------- */

/* ---- Segmenté fixe / mobile : plus tactile, micro-icônes ---------------- */
.seg { padding: .28rem; border: 1px solid var(--line); }
.seg button { padding: .58rem .5rem; gap: .45rem; }
.seg button svg { opacity: .7; transition: opacity .18s var(--ease); }
.seg button[aria-pressed="true"] svg { opacity: 1; }
.seg button:hover:not([aria-pressed="true"]) { color: var(--slate); background: color-mix(in srgb, var(--surface) 60%, transparent); }

/* ---- Trois étapes : un micro-visuel par étape, pas une illustration ----- */
.step__viz {
  height: 54px; align-self: end; margin-top: .2rem; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--sky); display: flex; align-items: center; gap: .5rem;
  padding: 0 .7rem; font-size: 11px; color: var(--muted); overflow: hidden;
}
.step__viz .num { font-size: 12px; color: var(--ink); font-weight: 500; }
.step__viz .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* L'etape passe de « en attente » a « atteint » : le visuel le dit avant le texte. */
.step__viz { opacity: .55; transition: opacity .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease); }
.step__viz[data-done="true"] { opacity: 1; border-color: var(--line-strong); background: var(--surface); }

/* ---- Tarifs : trois offres, et ce qui les separe vraiment -------------- */
.plan__more { font-family: inherit; font-size: var(--step--1); color: var(--blue); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plan__more::after { content: " ↓"; }
.plan__more[aria-expanded="true"]::after { content: " ↑"; }
.plan__extra { border-top: 1px solid var(--line); padding-top: .7rem; }
/* La frontiere entre les offres, dite meme quand la reponse est non. */
.plan__admin, .plan__sms { display: flex; align-items: baseline; gap: .5rem; font-size: var(--step--1); padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); }
.plan__sms { padding-top: .35rem; border-top: 0; }
.plan__admin b, .plan__sms b { margin-left: auto; text-align: right; }
.plan__admin[data-v="yes"] b { color: var(--call-deep); }
.plan__admin[data-v="no"] b { color: var(--muted); font-weight: 500; }
.plans__foot { margin-top: 1.4rem; font-size: var(--step-0); }
.plans__note { margin-top: .5rem; font-size: 11px; color: var(--muted); max-width: 62ch; }

/* Chaque offre a son ton — une seule couleur chacune, pas une palette. */
.plan[data-tone="team"] { border-color: var(--blue); }
.plan[data-tone="ai"] { border-color: var(--strikor-soft); box-shadow: 0 0 0 1px var(--strikor-soft), var(--d2); }
.plan__promise { font-size: var(--step-0); font-weight: 600; color: var(--ink); }
.plan__for { margin-top: -.55rem; }
.badge--ai { background: var(--strikor-soft); color: var(--strikor); border-color: transparent; }

/* ---- Comparateur : six lignes, le strict necessaire pour trancher -------- */
.cmp__wrap { margin-top: 1.6rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 480px; }
.cmp th, .cmp td { padding: .62rem .9rem; text-align: center; border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-weight: 600; color: var(--ink); background: var(--sky); }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--slate); }
.cmp__y { color: var(--call-deep); font-weight: 700; }
.cmp__n { color: var(--muted); }

/* ---- Effectif par tranches dans le tunnel ------------------------------- */
.seats { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--d1); }
.seats__q { font-weight: 600; font-size: var(--step-0); }
.seats__row { display: flex; flex-wrap: wrap; gap: .4rem; }
.seats__r { font-family: inherit; font-size: var(--step--1); padding: .5rem .95rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg); color: var(--slate); cursor: pointer; transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease); }
.seats__r:hover { border-color: var(--blue); }
.seats__r[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 600; }

.pipe[data-x] { touch-action: pan-y; }

/* ---- Solution 360° : un système vivant ─────────────────────────────────
   Huit modules autour d'un cœur, et tout passe par le centre. La grille 3 × 3
   ne peut pas se chevaucher, quelle que soit la largeur ; sous 820 px elle se
   deplie en deux colonnes, le centre d'abord. */
.o { position: relative; margin-top: 2.2rem; display: grid; gap: .7rem; }
@media (min-width: 560px) { .o { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) {
  .o { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(108px, auto)); gap: .9rem; }
  .o__core { grid-area: 2 / 2; }
  .o__n[data-n="phone"]  { grid-area: 1 / 1; } .o__n[data-n="sms"]  { grid-area: 1 / 2; }
  .o__n[data-n="mail"]   { grid-area: 1 / 3; } .o__n[data-n="agenda"] { grid-area: 2 / 1; }
  .o__n[data-n="pipe"]   { grid-area: 2 / 3; } .o__n[data-n="flow"] { grid-area: 3 / 1; }
  .o__n[data-n="ai"]     { grid-area: 3 / 2; } .o__n[data-n="rep"]  { grid-area: 3 / 3; }
}
/* Sur mobile, le centre passe en premier : c'est lui qui raconte. */
@media (max-width: 819px) { .o__core { order: -1; grid-column: 1 / -1; } }

/* Les liaisons : presque invisibles au repos, revelees une seule a la fois. */
.o__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.o__links line { stroke: var(--line-strong); stroke-width: 1; opacity: .22; transition: opacity .35s var(--ease), stroke .35s var(--ease); }
.o__links line[data-on="true"] { stroke: var(--strikor); opacity: .55; }
@media (max-width: 819px) { .o__links { display: none; } }

/* L'impulsion qui relie un module au centre. */
.o__sig { position: absolute; z-index: 3; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--strikor); box-shadow: 0 0 0 4px var(--strikor-soft); pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.o__sig[data-on="true"] { opacity: 1; }
[data-touched="true"] .o__sig { opacity: 0 !important; }

/* Un module : une icone, un nom, une microcopie qui dit ce qui vient de s'y
   passer. Cliquable au clavier comme a la souris. */
.o__n { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left; font-family: inherit; padding: .95rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(16,24,48,.04); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.o__n[data-shown="true"] { opacity: 1; transform: none; }
.o__n:hover { border-color: var(--line-strong); }
.o__n[data-on="true"] { border-color: var(--strikor); box-shadow: 0 0 0 2px var(--strikor-soft), 0 6px 18px -10px rgba(16,24,48,.28); transform: translateY(-2px); }
.o__i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background-color .3s var(--ease), color .3s var(--ease); }
.o__n[data-on="true"] .o__i { background: var(--strikor); color: #fff; }
.o__t { font-weight: 600; font-size: var(--step-0); color: var(--ink); }
.o__m { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.o__n[data-on="true"] .o__m { color: var(--strikor); font-weight: 500; }

/* ---- Le cœur : une seule surface, plusieurs états ─────────────────────── */
.o__core { position: relative; z-index: 2; display: grid; padding: .5rem; background: var(--surface); border: 1px solid var(--strikor-soft); border-radius: var(--r-xl); box-shadow: 0 0 0 4px var(--strikor-soft), 0 2px 6px rgba(16,24,48,.06), 0 22px 50px -30px rgba(16,24,48,.3); transition: transform .4s var(--ease); }
.o[data-live="true"] .o__core { transform: scale(1.015); }
/* Les vues se superposent dans la meme case : aucune ne pousse la grille. */
.core__v { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .4rem; padding: .55rem .6rem; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s; }
.o__core[data-view="phone"]  .core__v[data-v="phone"],
.o__core[data-view="status"] .core__v[data-v="status"],
.o__core[data-view="agenda"] .core__v[data-v="agenda"],
.o__core[data-view="mail"]   .core__v[data-v="mail"],
.o__core[data-view="sms"]    .core__v[data-v="sms"],
.o__core[data-view="flow"]   .core__v[data-v="flow"],
.o__core[data-view="ai"]     .core__v[data-v="ai"],
.o__core[data-view="rep"]    .core__v[data-v="rep"] { opacity: 1; visibility: visible; transform: none; }
.core__lab { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.core__big { font-family: var(--font-body); font-size: var(--step-2); font-weight: 700; color: var(--ink); line-height: 1; }
.core__opts { display: flex; flex-wrap: wrap; gap: .28rem; }
.o__o { font-family: inherit; font-size: 10px; padding: .3rem .55rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--slate); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease); }
.o__o:hover { border-color: var(--blue); }
.o__o[data-on="true"] { background: var(--st-rdv); border-color: transparent; color: #06121F; font-weight: 700; }
.core__opts:has([data-on="true"]) .o__o:not([data-on="true"]) { opacity: .45; }
.core__ev { display: flex; align-items: baseline; gap: .45rem; font-size: var(--step--1); color: var(--ink); }
.core__ev b { font-weight: 600; }
.core__ev--sub { color: var(--muted); font-size: 11px; }
.core__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-rdv); flex: none; align-self: center; }
.core__d { margin-left: auto; }
.core__kv { display: flex; align-items: baseline; gap: .45rem; font-size: 11px; color: var(--muted); }
.core__kv b { margin-left: auto; text-align: right; color: var(--ink); font-size: var(--step--1); font-weight: 600; }
.core__msg { font-size: var(--step--1); color: var(--slate); line-height: 1.45; margin: 0; }
.core__ok { font-size: 11px; font-weight: 600; color: var(--call-deep); margin-top: auto; }
.core__flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.core__flow li { display: flex; align-items: baseline; gap: .45rem; font-size: 11px; }
.core__flow span { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); flex: none; }
.core__flow b { color: var(--ink); font-size: var(--step--1); font-weight: 500; }
.core__n { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .5rem; }
.core__n li { display: flex; align-items: baseline; gap: .35rem; font-size: 10px; color: var(--muted); }
.core__n b { font-family: var(--font-body); font-size: var(--step-1); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Le poste d'appel, au centre ──────────────────────────────────────── */
.dial2 { display: flex; flex-direction: column; gap: .5rem; background: var(--navy); border-radius: var(--r-lg); padding: .7rem .75rem .8rem; color: #fff; }
.dial2__scr { display: flex; flex-direction: column; gap: .1rem; }
.dial2__who { font-size: var(--step-0); font-weight: 600; }
.dial2__num { font-size: 11px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.dial2__row { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; }
.dial2__st { display: inline-flex; align-items: center; gap: .3rem; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .3s var(--ease); }
.dial2__st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.dial2__st[data-s="live"] { color: var(--call); }
.dial2__st[data-s="live"] i { animation: pulse 1.6s ease-in-out infinite; }
.dial2__timer { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: rgba(255,255,255,.85); }
.dial2 .wave { height: 13px; margin: 0; opacity: .16; transition: opacity .3s var(--ease); }
.dial2 .wave i { background: var(--call); }
.o[data-live="true"] .dial2 .wave { opacity: 1; }
.dial2__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .22rem; }
.dial2__pad button { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-sm); padding: .24rem 0 .2rem; cursor: pointer; line-height: 1.1; display: flex; flex-direction: column; align-items: center; transition: background-color .14s var(--ease), transform .12s var(--ease); }
.dial2__pad button:hover { background: rgba(255,255,255,.11); }
.dial2__pad button:active, .dial2__pad button[data-lit="true"] { background: rgba(94,23,235,.45); transform: scale(.95); }
.dial2__pad small { font-size: 6px; letter-spacing: .1em; color: rgba(255,255,255,.4); font-family: var(--font-body); }
.dial2__ctrls { display: flex; justify-content: center; gap: .45rem; }
.dial2__c { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.8); cursor: pointer; transition: background-color .16s var(--ease); }
.dial2__c--go { background: var(--call-deep); border-color: transparent; color: #fff; }
.o[data-live="true"] .dial2__c--go { background: var(--danger); transform: rotate(134deg); }

/* ---- Cartes pipeline : plus denses, plus proches du CRM réel ------------ */
.pipe__card { gap: .3rem; padding: .55rem .62rem; }
.pipe__who { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: 10px; }
.pipe__ava {
  width: 15px; height: 15px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); font-size: 7px; font-weight: 700;
}
.pipe__last { font-size: 10px; color: var(--muted); }
.pipe__card .chip { align-self: flex-start; }
/* Le soulèvement avant le voyage : la carte se décolle, puis se repose */
.pipe__card[data-lift="true"] { box-shadow: var(--d4); transform: translateY(-3px) scale(1.015); z-index: 4; }
.pipe__card { transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }

/* ---- Automation : un halo plus fin, plus fluide ------------------------- */
.flow__signal { width: 14px; height: 14px; box-shadow: 0 0 18px 4px rgba(94,23,235,.38); transition: transform .62s var(--ease), opacity .4s var(--ease); }
.flow__i[data-active="true"] { box-shadow: 0 0 0 1px var(--strikor) inset, 0 10px 26px -12px rgba(94,23,235,.6); }

/* ---- Tunnel : plus calme que le marketing ------------------------------- */
.funnel__col { gap: 1.25rem; }
.funnel__q h2 { font-size: var(--step-2); letter-spacing: -.024em; }
.funnel .progress { padding-bottom: .2rem; }
.numcard { padding: .9rem 1rem; }
.numcard[data-locked="true"] { box-shadow: 0 0 0 1px var(--call) inset, var(--d2); }
.numcard__ok { display: inline-flex; align-items: center; gap: .3rem; }

/* ---- Mobile : le pipeline défile horizontalement, proprement ------------ */
@media (max-width: 760px) {
  .pipe {
    grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: .5rem;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .pipe__col { scroll-snap-align: start; }
  .hero { padding-block: 1.8rem 2.4rem; }
  .hero__pick { max-width: none; }
  .step__viz { height: 48px; }
}
@media (max-width: 420px) {
}