/* ==========================================================================
   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.

   v6 — PORTAGE DE LA TEMPLATE LOVABLE (design uniquement).
   Ce qui vient de Lovable : la typographie (Geist / Geist Mono), le rythme des
   rayons, les deux paliers d'ombre carte/flottant, le fond vivant (halo qui
   dérive + grille masquée), le traitement des cartes (soulèvement au survol),
   les sections numérotées, et la courbe de révélation.
   Ce qui N'EN VIENT PAS, et ne doit jamais être inversé : la doctrine de
   couleur. Lovable accentue toute son interface en bleu ciel et ne garde le
   violet que pour son logo ; STRIKOR conserve sa propre règle —
     violet #5E17EB = marque, jamais l'action
     bleu   #2050E0 = action principale
     vert           = appel, disponible, actif, succès
   Le moteur (providers, format, tunnel, états) n'est pas touché : seules ses
   surfaces sont rhabillées.
   ========================================================================== */

:root {
  --paper:        #FDFDFF;   /* oklch(0.995 0.002 280) */
  --sky:          #F6F8FE;
  --surface:      #FFFFFF;
  --surface-sunk: #EFF3FD;

  --navy:         #070E24;
  --navy-soft:    #101A3E;
  --ink:          #0E0E18;   /* oklch(0.17 0.02 285)   */
  --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%);

  /* Lovable : deux paliers seulement pour les cartes — posée, puis flottante.
     Ils coexistent avec --d1..--d4 qui gardent les surfaces du tunnel. */
  --shadow-card:  0 1px 2px rgba(7,14,36,.06), 0 12px 32px -16px rgba(7,14,36,.18);
  --shadow-float: 0 24px 70px -28px rgba(32,80,224,.42);

  /* Fond vivant : la grille technique et le halo de tête. */
  --grid-line:    color-mix(in srgb, var(--ink) 7%, transparent);
  --gradient-hero: radial-gradient(120% 90% at 50% -10%, rgba(32,80,224,.08), transparent 60%);

  /* Rythme de rayons repris de Lovable (base .875rem), converti en pixels
     pour rester cohérent avec le reste de la feuille. */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 30px;  --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);
  --ease-rev: cubic-bezier(.2,.7,.2,1);   /* courbe de révélation Lovable */

  /* Geist et Geist Mono viennent de la template Lovable. Les replis restent
     explicites : une police qui ne charge pas ne doit jamais casser la page. */
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist 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%);
    --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.72);
    --shadow-float: 0 24px 70px -28px rgba(91,135,255,.42);
    --grid-line: rgba(234,239,250,.05);
    --gradient-hero: radial-gradient(120% 90% at 50% -10%, rgba(91,135,255,.08), transparent 60%);
  }
}
: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%);
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.72);
  --shadow-float: 0 24px 70px -28px rgba(91,135,255,.42);
  --grid-line: rgba(234,239,250,.05);
  --gradient-hero: radial-gradient(120% 90% at 50% -10%, rgba(91,135,255,.08), transparent 60%);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-wrap: break-word; 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: -.045em; line-height: 1.02; max-width: 13ch; }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -.038em; line-height: 1.04; }
h3 { font-size: var(--step-1); letter-spacing: -.022em; }
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; }
}

.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: 1280px;   /* max-w-7xl, comme la template */ margin-inline: auto; padding-inline: var(--gutter); }

/* Révélation au scroll — départ visible dès que l'observateur manque.
   Courbe et amplitude reprises de Lovable (.reveal / .is-in), raccourcies :
   .9s traînait, .62s garde le glissé sans faire attendre. */
.reveal { opacity: .001; transform: translateY(26px); transition: opacity .62s var(--ease-rev), transform .62s var(--ease-rev); }
.reveal[data-shown="true"] { opacity: 1; transform: none; }
.reveal > * { transition: opacity .62s var(--ease-rev) calc(var(--i, 0) * 70ms), transform .62s var(--ease-rev) calc(var(--i, 0) * 70ms); }
@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; }


.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; }
/* Ces trois regles servent au TUNNEL (screenPlan, screenDashboard), pas a la
   page publique : elles survivent au retrait de Solution 360. */
.badge--strikor { color: var(--strikor); border-color: var(--strikor-line); background: var(--strikor-soft); }
.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; }
/* ---- CTA actif = VERT STRIKOR ------------------------------------------
   Regle Design System (MH) : action disponible/validee => vert STRIKOR, le
   MEME que « Je reserve » (.numrow__go). Un seul vert dans tout le tunnel :
   le token --cta-green. Aucun second vert n'est introduit ici.
   `.btn--go` etait deja ecrit dans cinq balises de app.js sans qu'aucune
   regle ne lui corresponde : ces boutons s'affichaient donc sans fond. */
.btn--go {
  background: var(--cta-green); color: #fff;
  box-shadow: var(--d2), 0 10px 24px -12px color-mix(in srgb, var(--cta-green) 62%, transparent);
}
.btn--go:hover {
  background: var(--cta-green-h);
  box-shadow: var(--d3), 0 14px 30px -12px color-mix(in srgb, var(--cta-green) 70%, transparent);
}
/* Enfonce : on retire l'elevation plutot que d'assombrir encore — le bouton
   s'enfonce vers la page au lieu de changer de couleur une deuxieme fois. */
.btn--go:active { background: var(--cta-green-h); box-shadow: var(--d1); }
.btn--go:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta-green) 30%, transparent), var(--d2);
}
/* Action NON disponible : gris premium, et reellement desactivee. Jamais le
   vert attenue — un vert pale laisserait croire que l'action est possible. */
.btn--go:disabled,
.btn--go[aria-disabled="true"] {
  background: color-mix(in srgb, var(--ink) 9%, var(--paper));
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  border-color: transparent; box-shadow: none; cursor: default;
  /* `.btn[disabled]` pose opacity .45 ; cumulee au gris elle delave le
     bouton. On rend sa pleine opacite au gris, qui porte deja l'etat. */
  opacity: 1;
}
.btn--go:disabled:hover,
.btn--go[aria-disabled="true"]:hover { background: color-mix(in srgb, var(--ink) 9%, var(--paper)); transform: none; }

.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%; }
/* Lovable arrondit completement ses CTA d'en-tete, de bas de page et de barre
   collante, et garde des angles doux dans les cartes. On reprend cette
   distinction : la pilule signale un appel a l'action de page. */
.btn--pill { border-radius: var(--r-pill); }
.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--step-1); }
.btn--sm { padding: .5rem .9rem; font-size: var(--step--1); }

/* ---- APRÈS L'OTP — bienvenue et compte ----------------------------------
   Continuité exacte avec le NumberPicker, l'email et l'OTP : même largeur,
   même rayon, même ombre, même typographie, même vert. Ce n'est pas un
   tableau de bord — c'est la suite du même parcours.

   Les règles du dashboard cadenassé (.mods, .mod, .ckl*) sont retirées avec
   lui : du CSS sans consommateur induit en erreur. Récupérables au commit
   7699c66d si le vrai produit les réutilise. */

.card--wlc { max-width: 30rem; margin: 2.5rem auto; padding: 2rem 1.9rem; }
.wlc { display: grid; gap: .45rem; }
.wlc__ok {
  margin: .4rem 0 0; font-size: var(--step--1); font-weight: 600;
  color: var(--cta-green);
}
.wlc__t { margin: .1rem 0 0; font-size: var(--step-2); font-weight: 600; letter-spacing: -.02em; }
.wlc__l {
  margin: 0 0 1.15rem; font-size: var(--step--1); line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.wlc__cta { margin-top: 1.25rem; }
.wlc__mail {
  margin: .8rem 0 0; font-size: var(--step--2); text-align: center;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ---- Bloc d'identité ---- */
.idb {
  display: grid; border: 1px solid var(--line); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink) 2%, var(--paper));
  padding: .3rem 1rem;
}
.idr {
  display: grid; gap: .1rem; padding: .7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.idr:last-child { border-bottom: 0; }
.idr__l {
  font-size: var(--step--2); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 52%, transparent);
}
.idr__v { font-size: var(--step-0); font-weight: 600; overflow-wrap: anywhere; }
.idr__v--mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: .07em;
}

/* Une ligne secrète : la valeur masquée, deux actions discrètes. */
.idr__row { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.idr__as { display: inline-flex; gap: .55rem; margin-left: auto; }
.idr__a {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--step--2); font-weight: 600;
  color: var(--blue); text-decoration: underline; text-underline-offset: 2px;
}
.idr__a:hover { color: var(--blue-deep); }
.idr__v--muted {
  font-weight: 500; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}
/* Un échec d'envoi se dit, il ne se déguise pas en succès. */
.wlc__mail--warn { color: color-mix(in srgb, #B42318 78%, var(--ink)); text-align: left; }

/* Le rappel du numéro : une ligne, pas une horloge. */
.spc__rsv {
  margin: 0; padding: .85rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--cta-green) 24%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cta-green) 4%, var(--paper));
  font-size: var(--step--1);
}
.spc__rsv b { font-variant-numeric: tabular-nums; }
.rsv__c { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.spc__lost {
  display: grid; gap: .6rem; justify-items: start; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.spc__lostt { margin: 0; font-weight: 600; }
.spc__lostl { margin: 0; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 62%, transparent); }

@media (max-width: 639px) {
  .card--wlc { margin: 1.25rem auto; padding: 1.5rem 1.25rem; }
  /* Les actions passent sous la valeur : « Afficher · Copier » ne doit pas
     comprimer un mot de passe de seize caractères. */
  .idr__as { margin-left: 0; }
}

/* ---- 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 */
/* Bascule Fixe / Mobile — Lovable NumberPicker.tsx : deux colonnes egales dans
   une gouttiere sombre, l'onglet actif remonte sur une carte claire. */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; background: var(--surface-sunk); border-radius: var(--r-lg); padding: .25rem; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: inherit; font-size: var(--step-0); font-weight: 600; padding: .5rem .4rem; border: 0; border-radius: calc(var(--r-lg) - 4px); background: transparent; color: var(--muted); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-card); }
.seg svg { flex: none; }

/* ---- Cartes ------------------------------------------------------------- */
/* Lovable donne aux cartes une ombre posee au repos et un leger soulevement au
   survol. Le mouvement porte sur transform et box-shadow seulement : rien qui
   oblige le navigateur a refaire la mise en page. */
.card { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.6rem; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.card--lift { box-shadow: var(--d2); }
@media (hover: hover) {
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card), var(--shadow-float); }
}

.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); }
@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--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 ------------------------------------------------------------ */
/* Lovable laisse l'en-tete transparent tant qu'on n'a pas defile, puis le pose
   sur un verre depoli. Le defilement est lu par app.js (data-scrolled), jamais
   par une media query : c'est un etat, pas une taille d'ecran. */
.site-header { position: sticky; top: 0; z-index: 60; background: transparent; border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); }
.site-header[data-scrolled="true"] { background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.6) blur(16px); border-bottom-color: var(--line); }
/* La sentinelle n'a rien a montrer : elle sert que de repere a l'observateur. */
.top-sentinel { position: absolute; top: 0; left: 0; width: 100%; height: 1px; pointer-events: none; }
.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: .25rem; margin-left: auto; align-items: center; }
/* Lovable pose ses liens de navigation dans des pastilles qui s'allument au
   survol, et separe « Se connecter » (discret) de « Creer mon compte » (plein). */
.site-nav a { font-size: var(--step--1); font-weight: 500; color: var(--muted); text-decoration: none; border-radius: var(--r-pill); padding: .45rem .8rem; transition: color .18s var(--ease), background-color .18s var(--ease); }
.site-nav a:hover { color: var(--ink); background: var(--surface-sunk); }
.site-nav__login { color: var(--ink) !important; font-weight: 500; }
.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; }
/* Sous 640px, le heros et la premiere section cumulaient leurs respirations :
   la suite arrivait trop tard au scroll. On resserre la premiere seulement. */
@media (max-width: 639px) { .hero + .section, .hero ~ span + .section { padding-block-start: 2.5rem; } }
/* 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--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 > * { 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-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--strikor); }
/* Lovable numerote ses sections (01 … 05). Le numero n'est pas un ornement :
   il dit que la page se lit dans l'ordre, du premier clic au premier appel. */
.eyebrow__n { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .16rem .34rem; flex: none; }
.section--navy .eyebrow__n { color: var(--console-mute); border-color: rgba(255,255,255,.16); }
.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; }
/* Le champ lumineux continu. `--bg` n'a jamais existe dans cette feuille : le
   var() sans repli rendait TOUTE la declaration `background` invalide, donc les
   quatre halos etaient perdus avec lui. Le jeton correct est `--paper`.
   La nappe de tete reprend --gradient-hero de Lovable. */
/* Une trame technique, a la limite du perceptible : elle donne une assise sans
   jamais se lire comme un motif. */
/* Grille technique. Trame et masque repris de Lovable (grid-backdrop) : 64px,
   masque centre en haut plutot que decale a droite — la page respire mieux. */
/* 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; }
/* Le bas du heros se dissout dans la section suivante : aucune coupure nette. */
/* 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; }
/* Hero.tsx — sous 640px la phrase est MASQUEE, et les etapes + garanties
   passent APRES la carte de choix (la template les duplique ; on les deplace,
   ce qui evite d'avoir deux fois le meme texte dans le document).
   Entre 640 et 1023px : une colonne, ordre naturel.
   A partir de 1024px : deux colonnes, la carte a droite sur les deux rangees. */
@media (max-width: 639px) {
  .hero__copy  { order: 1; }
  .hero__pick  { order: 2; }
  .hero__steps { order: 3; margin-top: 2rem; }
  .hero__lede  { display: none; }
  .hsteps      { margin-top: 0; }
}
/* Alignement vertical du héros, sur desktop.
   ──────────────────────────────────────────────────────────────────────────
   Le problème : `align-items: center` centre CHAQUE enfant dans SA ligne.
   Le sélecteur occupe les deux lignes ; dès qu'il est plus haut que la
   colonne gauche, la grille répartit l'excédent entre les deux lignes, et
   le titre et les étapes s'écartent l'un de l'autre au lieu de rester
   solidaires. Le bloc paraît alors flotter en haut.

   La correction : la colonne gauche se referme sur la frontière entre les
   deux lignes — le titre se pose au BAS de la première, les étapes en HAUT
   de la seconde. Le couple devient un bloc, et son centre tombe exactement
   sur le centre du sélecteur.

   Pourquoi c'est exact, et non approché : la grille répartit l'excédent de
   hauteur à parts égales entre les deux lignes auto. Le bloc commence donc
   à excédent/2 et mesure (titre + étapes) ; son centre vaut
   excédent/2 + (titre + étapes)/2, soit précisément la moitié de la hauteur
   totale. Aucun pixel codé en dur, et le résultat suit toute hauteur
   d'écran comme toute hauteur de sélecteur. */
@media (min-width: 1024px) {
  .hero__grid  { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .hero__copy  { grid-column: 1; grid-row: 1; align-self: end; }
  .hero__steps { grid-column: 1; grid-row: 2; align-self: start; }
  .hero__pick  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
/* En dessous de deux colonnes, le selecteur n'a plus de colonne a fermer :
   cale a droite, il laissait un vide a gauche sur toute la bande tablette. */
@media (max-width: 1023px) { .hero__pick { justify-self: center; } }
.hero__copy { display: flex; flex-direction: column; gap: 0; align-items: flex-start; transform: translateY(calc(var(--exit) * -4px)); }

/* Pastille d'ouverture — Lovable Hero.tsx : bord fin, fond de carte translucide,
   point vert, texte tres petit. Elle annonce a qui s'adresse la page. */
.hbadge { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 500; color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .38rem .75rem; backdrop-filter: blur(8px); }
.hbadge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--call); flex: none; }

/* Le titre en deux voix. Lovable pose « Pro » en graisse maximale sur la
   premiere ligne et tient la seconde en encre attenuee — c'est ce contraste,
   pas une couleur, qui porte l'impact. */
.h1__a { font-weight: 600; color: var(--ink); letter-spacing: -.045em; }
.h1__pro { font-weight: 900; color: var(--ink); }
.h1__b { font-weight: 600; color: var(--muted); letter-spacing: -.045em; }

.hero__lede { margin-top: 1.5rem; font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 36ch; }

/* Trois etapes numerotees, reliees par un filet qui s'efface — Lovable pose
   ici la promesse du parcours, avant meme la carte de choix. */
/* Les trois etapes — Hero.tsx, points de rupture de la template :
 *   base (< 640px)  : grid-cols-3, pastilles pleine largeur, 11px, coins doux,
 *                     connecteurs caches — trois colonnes, pas une ligne forcee
 *   sm   (>= 640px) : flex, pastilles en pilule, 13px, connecteurs visibles,
 *                     retour a la ligne autorise
 *   xl   (>= 1280px): flex-nowrap — les trois sur UNE ligne.
 * Entre 1024 et 1279px le retour a la ligne reste permis : c'est le
 * comportement de la template, pas un oubli. */
.hsteps { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; }
.hsteps__i { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.hsteps__c { display: flex; width: 100%; align-items: center; gap: .375rem; font-size: 11px; line-height: 1.25; font-weight: 500; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: .375rem .5rem .375rem .375rem; box-shadow: var(--shadow-card); backdrop-filter: blur(8px); }
.hsteps__n { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.hsteps__l { display: none; width: 12px; height: 1px; flex: none; background: linear-gradient(to right, color-mix(in srgb, var(--blue) 60%, transparent), transparent); }
@media (min-width: 640px) {
  .hero__pick { padding: 1.5rem; }
  .numrow__n { font-size: var(--step-1); }
  .hsteps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .hsteps__c { display: inline-flex; width: auto; gap: .625rem; white-space: nowrap; font-size: 13px; border-radius: var(--r-pill); padding: .375rem .875rem .375rem .375rem; }
  .hsteps__n { width: 24px; height: 24px; }
  .hsteps__l { display: block; }
}
@media (min-width: 1280px) { .hsteps { flex-wrap: nowrap; } }

/* Trois garanties, sur une seule ligne, en retrait — Lovable les met en petit
   texte attenue avec une coche fine, pas en pastilles vertes. */
.assure { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }
.assure__i { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); color: var(--muted); }
.ck { flex: none; color: var(--blue); }

.hero__pick {
  transform: translateY(calc(var(--exit) * -8px));
  width: 100%; max-width: 480px; justify-self: end; display: flex; flex-direction: column; gap: .6rem;
  background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 1.25rem; position: relative;
  /* Presente, jamais pesante : une ombre large et peu opaque, plus le halo
     violet que Lovable pose DERRIERE la carte — la marque eclaire le produit
     au lieu de le decorer. Le halo passe par l'ombre : un ::before en z-index
     negatif serait peint par dessus le fond, le parent ayant deja un contexte
     d'empilement (transform). Toujours pas de verre depoli. */
  box-shadow: 0 1px 2px rgba(16, 24, 48, .04), 0 18px 48px -24px rgba(16, 24, 48, .22),
              0 0 70px -12px color-mix(in srgb, var(--strikor) 26%, transparent);
}
.hero__pick-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero__pick-t { font-size: var(--step-1); font-weight: 600; color: var(--ink); letter-spacing: -.022em; }
/* « Etape 1/3 » : chasse fixe, capitales, tres espace — la signature technique
   de Lovable sur ses libelles de progression. */
.hero__pick-step { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); white-space: nowrap; }
.hero__pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.hero__pick-row .select { width: 100%; min-width: 0; }
.hero__pick-foot { margin-top: .2rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-align: center; }

/* ---- 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; }
/* Ligne de numero — Lovable NumberPicker.tsx : coin large, bord qui vire au
   bleu et ombre qui se pose au survol. */
.numrow { display: flex; flex-wrap: wrap; row-gap: .5rem; align-items: center; gap: .7rem; padding: .78rem .78rem .78rem .95rem;  border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover: hover) { .numrow:hover { border-color: color-mix(in srgb, var(--blue) 60%, transparent); box-shadow: var(--shadow-card); } }
.numrow__i { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
/* Chasse fixe pour le numero : c'est la regle typographique de la template, et
   celle que MH a fixee — Geist Mono porte les chiffres. */
.numrow__n { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 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: 11px; font-weight: 500; color: var(--call-deep); background: var(--call-soft); border: 0; border-radius: var(--r-sm); padding: .14rem .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__gol { white-space: nowrap; }
.numrow__go { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.numrow__go:hover { background: var(--cta-green-h); transform: translateY(-1px); }
.numrow__go .ar { transition: transform .22s var(--ease); }
.numrow:hover .numrow__go .ar { transform: translateX(3px); }
/* 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; }
/* RESERVING — entre le clic et la reponse du serveur. UNE seule carte, et
   l'impossibilite de recliquer doit SE VOIR : sans cela le visiteur reclique,
   et c'est precisement ce qu'on vient de verrouiller. */
.numrow[data-state="reserving"] { border-color: var(--call); }
.numrow[data-state="reserving"] .numrow__go { opacity: .62; cursor: progress; }
.numrow__go[disabled] { opacity: .62; cursor: progress; }
.numrow__go[disabled]:hover { background: var(--cta-green); transform: none; }
.numrow[data-state="taken"] { border-color: var(--danger); background: var(--danger-soft); }
.numrow[data-state="taken"] .numrow__go { background: var(--danger); color: #fff; }

/* Sous 640px, le numero en chasse fixe plus un bouton de 116px frolent la
   largeur d'un ecran de 360px. La ligne se plie donc au lieu de deborder :
   une seule ligne des que la place existe, deux sinon. La cible tactile du
   bouton n'est jamais reduite. */
@media (max-width: 639px) {
  .numrow__n { font-size: clamp(13px, 3.4vw, 15px); }
}

/* 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{ 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)); }
/* 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{ display: grid; gap: 1.2rem; align-items: center; margin: 1.6rem 0 1.8rem; }
/* L'etat de l'appel : gris tant qu'il sonne{ 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); }

/* Le pave est reel{ 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); }

/* ---- 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{ display: flex; flex-direction: column; gap: .5rem; }

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

/* ---- Choix de l'offre dans le tunnel ------------------------------------ */
.choice__title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Le nombre de collaborateurs : posé seulement quand l'offre se facture par tête. */

/* ---- 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: 1024px) { .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; }

.chip { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: .14rem .45rem; border-radius: var(--r-pill); font-weight: 700; }
/* ---- Confiance ---------------------------------------------------------- */
.trust { display: grid; gap: .9rem; margin-top: 2.2rem; }
.trust > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.2rem; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) { .trust > div:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), var(--shadow-float); } }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(5, 1fr); } }

/* ---- Tarifs ------------------------------------------------------------- */
.plans { display: grid; gap: 1rem; margin-top: 2.2rem; align-items: start; }
@media (min-width: 1024px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; gap: .8rem; position: relative; box-shadow: var(--shadow-card); }
.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__unit { font-size: 11px; color: var(--muted); }
.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); }


/* ==========================================================================
   PORTAGE LOVABLE — composants de Home.tsx
   Transcription des classes Tailwind du projet source en CSS natif. Chaque
   bloc cite le fichier dont il vient. Les couleurs passent par les jetons
   STRIKOR : la doctrine de marque n'est jamais inversee.
   ========================================================================== */

/* ---- Fond global ---------------------------------------------------------
 * LiveBackground.tsx. UNE seule surface pour toute la page : aucune section
 * ne porte de fond, aucune bande ne se forme entre deux blocs. Deux calques
 * seulement — un halo bleu tres lent, une grille technique masquee — poses en
 * `fixed` sous le contenu et inertes au pointeur.
 *
 * Le halo n'utilise PAS filter: blur() : le radial-gradient suffit, et il ne
 * cree pas de couche composee a repeindre a chaque image. */
.livebg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.livebg__mesh {
  position: absolute; top: -33%; left: 50%; width: 1400px; height: 900px;
  transform: translate(-50%, 0); opacity: .07; will-change: transform;
  /* oklch(0.55 0.22 258) — un bleu de fond, jamais une couleur d'action. */
  background: radial-gradient(closest-side, #0068EE, transparent);
  animation: strikor-drift 30s ease-in-out infinite;
}
.livebg__grid {
  position: absolute; inset: 0; opacity: .3;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 50% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(70% 50% at 50% 0%, #000, transparent);
}
@keyframes strikor-drift {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-46%, 3%); }
}
/* En mouvement reduit, SEUL le halo s'immobilise. La grille, elle, n'a jamais
   bouge : elle reste. */
@media (prefers-reduced-motion: reduce) { .livebg__mesh { animation: none; } }

/* Le contenu passe au-dessus du fond, d'un seul bloc. */
#marketing { position: relative; isolation: isolate; }
#marketing > *:not(.livebg) { position: relative; z-index: 10; }

/* ---- Nav.tsx — menu replie ----------------------------------------------- */
.site-nav__burger { display: none; width: 40px; height: 40px; margin-left: auto; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px; background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.site-nav__burger span { display: block; width: 15px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.site-nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.site-nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.site-nav__m { border-top: 1px solid var(--line); background: var(--paper); padding-block: .4rem 1.3rem; }
.site-nav__m a { display: block; padding: .85rem 0; font-size: var(--step-1); font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-nav__m .btn { margin-top: 1.1rem; }
/* Nav.tsx place le sélecteur de langue DANS le menu replié. Il y occupe toute
   la largeur : visible, atteignable au pouce, et les deux boutons agissent. */
.lang--m { display: flex; width: 100%; margin-top: 1.1rem; border-radius: var(--r-lg); overflow: hidden; }
.lang--m button { flex: 1; padding: .8rem 0; font-size: var(--step-0); }
.site-nav__mlogin { display: block; margin-top: .9rem; text-align: center; padding: .8rem 0 !important;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); border-bottom: 1px solid var(--line-strong) !important; }
@media (max-width: 1023px) {
  .site-nav { display: none; }
  .site-nav__burger { display: flex; }
}
@media (min-width: 1024px) { .site-nav__m { display: none !important; } }

/* ---- Section.tsx — en-tete centre (Pricing, FAQ) ------------------------- */
.section__head--c { max-width: 44ch; margin-inline: auto; text-align: center; align-items: center; }

/* ---- Motion.tsx › CtaRow ------------------------------------------------- */
.ctarow { display: flex; flex-direction: column; gap: .75rem; margin-top: 3rem; }
@media (min-width: 640px) { .ctarow { flex-direction: row; } }

/* Etiquette « Demo interactive » — Section.tsx › PreviewTag. */
.ptag { display: inline-flex; align-items: center; gap: .45rem; flex: none; font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .15em; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .22rem .6rem; }
.ptag__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: strikor-pulse 2s ease-in-out infinite; }
@keyframes strikor-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.35); } }

/* ---- Motion.tsx › KeypadPipeline ----------------------------------------
 * Clavier a gauche (300px fixes au-dela de 1040px), plateau a droite. */
.kp { display: grid; gap: 1.25rem; margin-top: 2.4rem; }
@media (min-width: 1024px) { .kp { grid-template-columns: 300px minmax(0, 1fr); } }
.kp__pad { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.25rem; box-shadow: var(--shadow-card), var(--shadow-float); align-self: start; }
.kp__who { display: flex; align-items: center; gap: .75rem; }
.kp__av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }
.kp__id { display: flex; flex-direction: column; min-width: 0; }
.kp__id b { font-size: var(--step-0); font-weight: 600; }
.kp__id .num { font-size: 12px; color: var(--muted); }
.kp__state { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1rem; }
.kp__st { display: inline-flex; align-items: center; gap: .4rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kp__st i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.kp__st[data-s="call"] { color: var(--call-deep); }
.kp__st[data-s="call"] i { background: var(--call); animation: strikor-pulse 2s ease-in-out infinite; }
.kp__timer { font-size: var(--step-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.kp__st[data-s="call"] ~ .kp__timer { color: var(--call-deep); }
.kp__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; }
.kp__keys button { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 48px;
  font-family: inherit; font-size: var(--step-1); font-weight: 500; line-height: 1; color: var(--ink);
  background: color-mix(in srgb, var(--surface-sunk) 50%, transparent); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); }
.kp__keys button small { font-size: 8px; letter-spacing: .14em; color: var(--muted); }
.kp__keys button:hover { background: var(--surface-sunk); }
.kp__keys button[data-hot="true"] { transform: scale(.95); border-color: var(--blue); background: var(--blue-soft); }
.kp__ctrls { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.kp__c { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease); }
.kp__c--go { width: 56px; height: 56px; border: 0; background: var(--call); color: #06240F; box-shadow: var(--shadow-float); }
.kp__c--go[data-end="true"] { background: var(--danger); color: #fff; }
.kp__c--void { width: 44px; border: 0; background: none; cursor: default; }
.kp__ask { margin-top: 1rem; animation: strikor-rise .7s cubic-bezier(.22,1,.36,1) both; }
.kp__askt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kp__opts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.kp__o { font-family: inherit; font-size: 12px; font-weight: 500; padding: .4rem .8rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: all .2s var(--ease); }
.kp__o:hover { border-color: var(--blue); }
.kp__o[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
@keyframes strikor-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* ---- KeypadPipeline › plateau ------------------------------------------- */
.kp__board { position: relative; min-width: 0; }
.kp__hint { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; font-size: var(--step--1); color: var(--muted); }
.kp__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.kp__col { display: flex; flex-direction: column; min-height: 380px; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.kp__col[data-over="true"] { border-color: color-mix(in srgb, var(--blue) 60%, transparent); background: color-mix(in srgb, var(--blue-soft) 45%, transparent); }
.kp__bar { display: block; height: 4px; border-radius: var(--r-pill); }
.kp__h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding-inline: .2rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kp__slot { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; flex: 1; }
.kp__card { touch-action: none; display: flex; flex-direction: column; gap: .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .6rem; box-shadow: var(--shadow-card); cursor: grab; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.kp__card b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.kp__card .num { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .kp__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), var(--shadow-float); } }
.kp__card[data-drag="true"] { opacity: .5; transform: rotate(2deg); }
.kp__card[data-sel="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.kp__tag { align-self: flex-start; margin-top: .3rem; border-radius: var(--r-sm); background: var(--blue); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .35rem; }
/* La confirmation reste DANS la zone du plateau : centree, bornee en largeur,
   et le texte passe a la ligne plutot que de sortir de l'ecran. Sous 640px elle
   quitte la superposition et se pose sous les colonnes. */
.kp__toast { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center;
  max-width: calc(100% - 1.5rem); white-space: normal;
  background: var(--ink); color: var(--paper); font-size: var(--step--1); font-weight: 500; border-radius: var(--r-lg); padding: .6rem 1rem; box-shadow: var(--shadow-float);
  animation: strikor-rise .7s cubic-bezier(.22,1,.36,1) both; }
@media (max-width: 639px) {
  .kp__toast { position: static; transform: none; margin: .9rem auto 0; max-width: 100%; }
}
.kp__toast .ck { color: var(--call); }
/* KeypadPipeline : grid-cols-2 sous 640px, grid-cols-5 au-dela. Sous 640px la
   template n'affiche QUE deux colonnes — la premiere et celle ou se trouve la
   fiche suivie — les autres portent `hidden sm:block`. C'est app.js qui pose
   l'etat, comme React le fait dans la source. */
@media (max-width: 639px) {
  .kp__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp__col { min-height: 220px; }
  .kp__col[data-hide="true"] { display: none; }
}

/* ---- Motion.tsx › FollowUpMotion ---------------------------------------- */
.fu { margin-top: 2.4rem; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card), var(--shadow-float); }
.fu__hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.4rem; border-bottom: 1px solid var(--line); }
.fu__t { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--step-0); font-weight: 600; color: var(--ink); }
.fu__t svg { color: var(--blue); flex: none; }
.fu__t b { border-radius: var(--r-pill); background: var(--surface-sunk); font-size: 11px; padding: .1rem .5rem; }
.fu__body { display: grid; }
@media (min-width: 1024px) { .fu__body { grid-template-columns: 320px minmax(0, 1fr); } }
.fu__queue { padding: .7rem; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .fu__queue { border-bottom: 0; border-right: 1px solid var(--line); } }
.fu__q { display: flex; align-items: center; gap: .75rem; padding: .7rem; border-radius: var(--r-lg); transition: background-color .4s var(--ease); }
.fu__q[data-on="true"] { background: color-mix(in srgb, var(--blue-soft) 70%, transparent); }
.fu__av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunk); font-size: 11px; font-weight: 700; }
.fu__qi { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fu__qi b { font-size: var(--step--1); font-weight: 600; }
.fu__qi span { font-size: 12px; color: var(--muted); }
.fu__urg { flex: none; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn); font-size: 10px; font-weight: 600; padding: .12rem .5rem; }
.fu__detail { padding: 1.5rem; }
@media (min-width: 640px) { .fu__detail { padding: 2rem; } }
.fu__last { font-size: var(--step--1); color: var(--muted); }
.fu__days { display: flex; align-items: flex-end; gap: .75rem; margin-top: .7rem; }
.fu__days b { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.fu__days span { padding-bottom: .4rem; color: var(--muted); }
.fu__bars { display: flex; gap: .3rem; margin-top: 1rem; }
.fu__bars i { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--surface-sunk); transition: background-color .5s var(--ease); }
.fu__bars i[data-on="true"] { background: var(--st-con); }
.fu__reco { margin-top: 1.5rem; border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); background: color-mix(in srgb, var(--blue-soft) 45%, transparent);
  border-radius: var(--r-lg); padding: 1rem; opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fu__reco[data-on="true"] { opacity: 1; transform: none; }
.fu__recot { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 600; }
.fu__recot svg { color: var(--blue); }
.fu__acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .75rem; }
.fu__a { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-size: var(--step--1); font-weight: 500;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: .55rem .4rem; transition: all .3s var(--ease); }
.fu__a[data-on="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.fu__done { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: var(--step--1); font-weight: 600; color: var(--call-deep); opacity: 0; transition: opacity .5s var(--ease); }
.fu__done[data-on="true"] { opacity: 1; }


/* ---- Motion.tsx › ImportMotion ------------------------------------------
 * Source a gauche, fleche au centre, pipeline a droite. */
.imp { display: grid; gap: 1rem; align-items: center; margin-top: 1.5rem; }
@media (min-width: 1024px) { .imp { grid-template-columns: 1fr auto 1fr; } }
.imp__src { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.5rem; box-shadow: var(--shadow-card); }
.imp__file { display: flex; align-items: center; gap: .75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: .9rem; transition: border-color .7s var(--ease), background-color .7s var(--ease); }
.imp__file[data-on="true"] { border-style: solid; border-color: var(--call-line); background: var(--call-soft); }
.imp__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--muted); transition: background-color .7s var(--ease), color .7s var(--ease); }
.imp__file[data-on="true"] .imp__ic { background: color-mix(in srgb, var(--call) 15%, transparent); color: var(--call-deep); }
.imp__fi { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.imp__fi b { font-size: var(--step--1); font-weight: 600; }
.imp__fi span { font-size: 12px; color: var(--muted); }
.imp__ok { color: var(--call-deep); opacity: 0; transition: opacity .4s var(--ease); }
.imp__file[data-on="true"] .imp__ok { opacity: 1; }
.imp__map { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.imp__row { display: flex; align-items: center; gap: .5rem; font-size: 12px; }
.imp__row .num { width: 96px; flex: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .6rem; }
.imp__line { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.imp__line i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--blue); transition: width .7s var(--ease); }
.imp__row[data-on="true"] .imp__line i { width: 100%; }
.imp__to { width: 96px; flex: none; text-align: center; border-radius: var(--r-sm); padding: .45rem .5rem; font-weight: 600;
  background: var(--surface-sunk); color: color-mix(in srgb, var(--muted) 70%, transparent); transition: background-color .5s var(--ease), color .5s var(--ease); }
.imp__row[data-on="true"] .imp__to { background: var(--blue-soft); color: var(--blue); }
.imp__arrow { display: grid; place-items: center; width: 48px; height: 48px; margin-inline: auto; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); transform: rotate(90deg); transition: all .5s var(--ease); }
@media (min-width: 1024px) { .imp__arrow { transform: none; } }
.imp__arrow[data-on="true"] { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: var(--shadow-float); }
.imp__dst { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: color-mix(in srgb, var(--surface-sunk) 50%, transparent); padding: 1.5rem; }
.imp__dh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.imp__dh b { border-radius: var(--r-pill); background: var(--surface); font-size: 12px; letter-spacing: 0; padding: .2rem .6rem; }
.imp__list { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; height: 210px; overflow: hidden; }
.imp__l { display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .6rem; box-shadow: var(--shadow-card); font-size: var(--step--1); font-weight: 500; opacity: 0; }
.imp__l[data-on="true"] { animation: strikor-rise .7s cubic-bezier(.22,1,.36,1) both; }
.imp__l em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--muted); }
.imp__av { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 700; }
.imp__done { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--paper); font-size: var(--step--1); font-weight: 600; border-radius: var(--r-lg); padding: .75rem 1rem; box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.imp__done[data-on="true"] { opacity: 1; transform: none; }
.imp__done .ck { color: var(--call); }

/* ---- PipelineStats › vue par commercial --------------------------------- */
.stats__sub { margin-top: 2.2rem; font-size: var(--step--1); font-weight: 500; color: var(--console-mute); }
.streps { display: grid; gap: .75rem; margin-top: .8rem; }
@media (min-width: 768px) { .streps { grid-template-columns: repeat(2, 1fr); } }
.strep { border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); background: rgba(255,255,255,.03); padding: 1.1rem; }
.strep__h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.strep__w { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--console-text); }
.strep__g { width: 80px; height: 6px; flex: none; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; }
.strep__g i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--st-rdv); }
.strep__c { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: 1rem; }
@media (min-width: 640px) { .strep__c { grid-template-columns: repeat(4, 1fr); } }
.strep__c span { display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--r-md); background: rgba(255,255,255,.06); color: var(--console-text); padding: .45rem .6rem; }
.strep__c svg { flex: none; color: var(--console-mute); }
.strep__c b { font-size: var(--step--1); font-weight: 600; }
.strep__k { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16); }
.strep__k span { display: flex; flex-direction: column; gap: .15rem; }
.strep__k b { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; letter-spacing: -.02em; color: var(--console-text); white-space: nowrap; }
.strep__k em { font-style: normal; font-size: 11px; color: var(--console-mute); }
.strep__ok { color: var(--call) !important; }
.strep__pend { color: var(--st-rdv) !important; }
.strep__cv { color: var(--st-con) !important; }

/* ---- Trust.tsx ----------------------------------------------------------- */
.trust { display: grid; gap: 2.4rem; margin-top: 0; }
@media (min-width: 1024px) { .trust { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.trust__g { display: grid; gap: 1rem; }
@media (min-width: 640px) { .trust__g { grid-template-columns: repeat(2, 1fr); } }
.trust__c { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.trust__c svg { color: var(--blue); }
.trust__c h3 { margin-top: 1rem; font-size: var(--step-0); font-weight: 600; }
.trust__c p { margin-top: .35rem; font-size: var(--step--1); color: var(--muted); }
@media (hover: hover) { .trust__c:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), var(--shadow-float); } }

/* ---- FinalCta.tsx + Footer + StickyCta ---------------------------------- */
.cta-final { align-items: center; text-align: center; }
.cta-final h2 { max-width: 22ch; margin-inline: auto; }
.cta-final p { margin-inline: auto; }
.cta-final__r { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .cta-final__r { flex-direction: row; justify-content: center; } }
.btn--ghostd { background: transparent; color: var(--console-text); border-color: rgba(255,255,255,.18); }
.btn--ghostd:hover { background: rgba(255,255,255,.06); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.site-footer__nav a { font-size: var(--step--1); color: var(--muted); text-decoration: none; transition: color .18s var(--ease); }
.site-footer__nav a:hover { color: var(--ink); }
.site-footer__m { margin-left: auto; font-size: var(--step--1); color: var(--muted); }
.sticky-cta[data-on="false"] { opacity: 0; transform: translateY(2rem); pointer-events: none; }
.sticky-cta[data-on="true"] { opacity: 1; transform: none; }

/* ---- Statistiques -------------------------------------------------------
 * Lovable PipelineStats : bascule de periode en pilule, quatre indicateurs
 * dont un plein, puis un tableau sobre. Bloc sombre — les jetons --console-*
 * et --ink portent deja ce registre dans la feuille. */
.stats { margin-top: 2.2rem; }
.stats__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.stats__per { display: inline-flex; gap: .2rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); padding: .25rem; }
.stats__per button { font-family: inherit; font-size: var(--step--1); font-weight: 500; color: var(--console-mute); background: transparent; border: 0; border-radius: var(--r-pill); padding: .4rem 1rem; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.stats__per button:hover { color: var(--console-text); }
.stats__per button[aria-pressed="true"] { background: var(--console-text); color: var(--navy); }
.stats__demo { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: var(--console-mute); }
.stats__kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1.1rem; }
@media (min-width: 1024px) { .stats__kpi { grid-template-columns: repeat(4, 1fr); } }
.stats__k { display: flex; flex-direction: column; gap: .4rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: .95rem 1.1rem; background: rgba(255,255,255,.03); }
.stats__k span { font-size: var(--step--1); color: var(--console-mute); }
.stats__k b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; letter-spacing: -.03em; color: var(--console-text); }
.stats__k--hi { background: var(--blue); border-color: transparent; }
.stats__k--hi span { color: rgba(255,255,255,.82); }
.stats__k--hi b { color: #fff; }
.stats__tbl { margin-top: .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); overflow: hidden; }
.stats__h, .stats__r { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 1rem; align-items: center; padding: .85rem 1.15rem; }
.stats__h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--console-mute); border-bottom: 1px solid rgba(255,255,255,.16); }
.stats__r { border-bottom: 1px solid rgba(255,255,255,.1); color: var(--console-text); font-size: var(--step--1); }
.stats__r:last-child { border-bottom: 0; }
.stats__who { display: flex; align-items: center; gap: .6rem; min-width: 0; font-weight: 500; }
.stats__av { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 11px; font-weight: 600; }
.stats__rate { display: flex; align-items: center; gap: .55rem; }
.stats__bar { display: none; width: 58px; height: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); overflow: hidden; }
.stats__bar i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--st-rdv); transition: width .9s var(--ease-rev); }
.stats__ca { text-align: right; font-weight: 600; }
@media (min-width: 640px) { .stats__bar { display: block; } }
@media (max-width: 639px) {
  .stats__h { display: none; }
  .stats__r { grid-template-columns: 1fr auto auto; gap: .7rem; }
  .stats__r [data-f="leads"], .stats__r [data-f="opp"] { display: none; }
}

/* ---- Options ------------------------------------------------------------
 * Lovable Options.tsx : quatre cartes de meme hauteur, etiquette en chasse
 * fixe, apercu anime dans une gouttiere en retrait. Sur mobile la rangee
 * devient un carrousel a accrochage — pas une pile de cartes ecrasees. */
.opts { display: grid; gap: .9rem; margin-top: 2.2rem; }
@media (min-width: 768px) { .opts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .opts { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
  .opts { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .opt { scroll-snap-align: center; }
}
.opt { display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.25rem; box-shadow: var(--shadow-card); backdrop-filter: blur(8px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) { .opt:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), var(--shadow-float); } }
.opt__tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--blue); }
.opt__t { margin-top: .45rem; font-size: var(--step-1); font-weight: 600; letter-spacing: -.022em; }
.opt__s { margin-top: .25rem; font-size: var(--step--1); color: var(--muted); }
.opt__v { display: flex; flex-direction: column; gap: .45rem; justify-content: center; flex: 1; min-height: 170px; margin-top: 1.1rem; padding: .9rem; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-sunk) 70%, transparent); }
.opt__bub { align-self: flex-end; max-width: 85%; background: var(--blue); color: #fff; font-size: 12px; line-height: 1.45; border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); padding: .5rem .7rem; }
.opt__sent { align-self: flex-end; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.opt__l { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--surface); border-radius: var(--r-sm); padding: .42rem .6rem; font-size: 12px; font-weight: 500; opacity: .7; transition: opacity .5s var(--ease), box-shadow .5s var(--ease); }
.opt__l[data-on="true"] { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 40%, transparent); }
.opt__st { font-style: normal; font-size: 11px; color: var(--muted); }
.opt__c { font-size: 11px; color: var(--muted); transition: color .4s var(--ease); }
.opt__l[data-on="true"] .opt__c { color: var(--blue); }
.opt__slots { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.opt__slots b { display: block; text-align: center; font-size: 12px; font-weight: 500; background: var(--surface); border-radius: var(--r-sm); padding: .42rem 0; transition: background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease); }
.opt__slots b[data-on="true"] { background: var(--blue); color: #fff; transform: scale(1.05); }
.opt__ok { margin-top: .55rem; font-size: 11px; font-weight: 600; color: var(--call-deep); }
.opt__src { display: flex; gap: .45rem; }
.opt__src b { font-size: 10px; font-weight: 500; background: var(--surface); border-radius: var(--r-sm); padding: .25rem .5rem; }


/* ---- Pricing.tsx ---------------------------------------------------------
 * Trois cartes au-dela de 1040px, l'offre mise en avant sur fond sombre avec
 * son badge. En dessous : trois onglets, puis UNE carte qui se retourne. */
.plans { display: grid; gap: 1rem; margin-top: 3.5rem; align-items: center; }
@media (max-width: 1023px) { .plans { display: none; } }
@media (min-width: 1024px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); padding: 2rem; box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) { .plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-card), var(--shadow-float); } }
.plan--pop { background: var(--navy); border-color: transparent; color: var(--console-text); box-shadow: var(--shadow-float); padding-block: 3rem; }

/* ---- Tarifs MONO-PRODUIT ------------------------------------------------
   La grille `.plans` d'origine etait masquee sous 1024px, parce qu'une
   variante a trois onglets prenait le relais sur mobile. Cette variante a
   disparu avec les trois forfaits : sans la regle ci-dessous, la section
   tarifaire serait INVISIBLE sur mobile.

   Une offre unique n'a pas besoin d'une grille : une seule colonne, centree
   et bornee en largeur, a toutes les tailles d'ecran. */
.plans--mono { display: grid !important; grid-template-columns: minmax(0, 28rem) !important;
  justify-content: center; margin-top: 2.5rem; }
.plans--mono .plan { padding-block: 2.5rem; }

/* Indisponibilite : visible UNIQUEMENT quand le catalogue ne resout aucune
   offre. Mieux vaut le dire que d'afficher un prix de repli. */
.plan__unavailable { margin: 1.5rem 0 0; font-size: var(--step--1); font-weight: 600; }
.plan--pop .plan__unavailable { color: var(--console-mute); }

/* Pendant le chargement, la carte ne doit pas sauter quand le prix arrive :
   on reserve la hauteur de la ligne de prix. */
.plans--mono[data-state="loading"] .plan__price { min-height: 3.75rem; }
.plans--mono[data-state="loading"] .plan__cta,
.plans--mono[data-state="unavailable"] .plan__cta { opacity: .5; cursor: not-allowed; }
.plan__cta[disabled] { opacity: .5; cursor: not-allowed; }

/* ↻ Recommencer — discret, sous le reste de l'ecran de bienvenue. Il ne doit
   jamais rivaliser avec « Acceder a mon espace » : c'est une sortie, pas la
   destination. */
/* ↻ Rafraichir la session — plus leger que « Recommencer », donc place avant
   lui et moins appuye. */
.wlc__refresh { margin-top: 1.1rem; }
.wlc__restart { margin-top: .35rem; }

/* Un Code STRIKOR absent se lit comme une absence, pas comme un tiret. */
.idr--warn .idr__v { color: var(--muted); font-style: italic; }
.plan__badge { position: absolute; top: -12px; left: 2rem; border-radius: var(--r-pill); background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 600; padding: .25rem .75rem; }
.plan__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.plan__tag { font-size: var(--step--1); color: var(--muted); }
.plan--pop .plan__tag, .plan--pop .plan__unit { color: var(--console-mute); }
.plan__price { display: flex; align-items: baseline; gap: .35rem; margin-top: 1.5rem; }
.plan__price b { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2.2vw, 3.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.plan__price span { font-size: var(--step--1); color: var(--muted); }
.plan--pop .plan__price span { color: var(--console-mute); }
.plan__unit { font-size: 12px; color: var(--muted); }
.plan__f { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; font-size: var(--step--1); }
.plan__f li { display: flex; gap: .6rem; align-items: flex-start; }
.plan__f .ck { flex: none; margin-top: .1rem; color: var(--blue); }
.plan--pop .plan__f .ck { color: var(--st-rdv); }
.plan__cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; padding-top: 0;
  font-family: inherit; font-size: var(--step--1); font-weight: 600; border: 0; border-radius: var(--r-lg); cursor: pointer;
  background: var(--ink); color: var(--paper); padding: 1rem; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.plan__f + .plan__cta { margin-top: 2rem; }
.plan--pop .plan__cta { background: var(--blue); color: #fff; }
.plan__cta:hover { transform: scale(1.02); }
.plan__cta .ar { transition: transform .25s var(--ease); }
.plan__cta:hover .ar { transform: translateX(4px); }

.plans__foot { margin-top: 2.5rem; text-align: center; font-size: var(--step--1); }
.plans__note { margin-top: .5rem; text-align: center; font-size: 12px; color: var(--muted); }

/* ---- FAQ ---------------------------------------------------------------- *
 * <details>/<summary> natifs : l'ouverture, le clavier et le lecteur d'ecran
 * sont deja corrects sans une ligne de JavaScript, sans ARIA a maintenir et
 * sans dependance. Le chevron est dessine en CSS — aucun fichier a charger. */
.faq { display: flex; flex-direction: column; gap: .6rem; margin-top: 2.2rem; max-width: 62rem; }
.faq__i { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.faq__i[open] { border-color: var(--line-strong); box-shadow: var(--shadow-card), var(--shadow-float); }
.faq__q { display: flex; align-items: center; gap: .75rem; padding: 1.05rem 1.1rem; font-size: var(--step-1); font-weight: 600; letter-spacing: -.012em; color: var(--ink); cursor: pointer; list-style: none; }
/* La question doit tenir sur UNE ligne tant que c'est lisible. Sous 640px la
   taille suit la largeur plutot que de casser la carte, le creux et le padding
   se resserrent, et la fleche garde sa place reservee a droite. */
@media (max-width: 639px) {
  .faq__q { gap: .6rem; padding: .95rem .9rem; font-size: clamp(12.5px, 3.3vw, var(--step-1)); letter-spacing: -.016em; }
  .faq__a { padding: 0 .9rem 1rem; }
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue); }
.faq__q::after {
  content: ""; flex: none; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.faq__i[open] .faq__q::after { transform: rotate(225deg) translateY(-3px); border-color: var(--blue); }
.faq__a { padding: 0 1.3rem 1.15rem; font-size: var(--step-0); line-height: 1.65; color: var(--slate); max-width: 68ch; }

/* ---- 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); }
/* Lovable pose une lueur diffuse sous son bloc sombre. Purement decorative. */
.cta-final::after {
  content: ""; position: absolute; left: 50%; bottom: -9rem; width: min(34rem, 88%); height: 18rem;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none; opacity: .38;
  background: radial-gradient(closest-side, var(--strikor), transparent);
  filter: blur(46px);
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 { color: var(--console-text); }
.cta-final p { color: var(--console-mute); max-width: 42ch; font-size: var(--step-1); }

.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: block;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* A partir de sm, elle quitte le bord bas pour flotter en bas a droite. */
@media (min-width: 640px) {
  .sticky-cta { inset: auto 1.5rem 1.5rem auto; padding: 0; }
}
@media (max-width: 639px) { body { padding-bottom: 4.8rem; } }

/* ==========================================================================
   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: 768px) { .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{
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--call); color: #06240F;
}

/* ==========================================================================
   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{
  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;
}

/* ---- Tarifs : trois offres{ 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; }
/* La frontiere entre les offres{ display: flex; align-items: baseline; gap: .5rem; font-size: var(--step--1); padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); }
.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); }
.badge--ai { background: var(--strikor-soft); color: var(--strikor); border-color: transparent; }

/* ---- Comparateur : six lignes{ margin-top: 1.6rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }

/* ---- Effectif par tranches dans le tunnel ------------------------------- */

/* ---- 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{ position: relative; margin-top: 2.2rem; display: grid; gap: .7rem; }

/* Les liaisons : presque invisibles au repos{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* Un module : une icone, un nom{ 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); }

/* ---- Le cœur : une seule surface{ 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); }

/* ---- Le poste d'appel{ display: flex; flex-direction: column; gap: .5rem; background: var(--navy); border-radius: var(--r-lg); padding: .7rem .75rem .8rem; color: #fff; }

/* ---- Cartes pipeline : plus denses{ gap: .3rem; padding: .55rem .62rem; }
/* Le soulèvement avant le voyage : la carte se décolle{ box-shadow: var(--d4); transform: translateY(-3px) scale(1.015); z-index: 4; }

/* ---- Automation : un halo plus fin{ width: 14px; height: 14px; box-shadow: 0 0 18px 4px rgba(94,23,235,.38); transition: transform .62s var(--ease), opacity .4s var(--ease); }

/* ---- 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; }

/* Heros : pt-28 pb-20, puis sm:pt-36 sm:pb-28 — les valeurs de Hero.tsx. */
@media (max-width: 639px) {
  /* Lovable met pt-28 parce que SON en-tete est `fixed` : le padding le degage.
     Le notre est `sticky`, donc deja dans le flux — reprendre 7rem creait
     112px de vide EN PLUS des 66px de l'en-tete. On degage ce qu'il faut. */
  .hero { padding-block: 2.25rem 2.5rem; }
  .hero__pick { max-width: none; }
  /* Sur une colonne, le bloc de texte se centre avec la carte. */
  .hero__copy { align-items: center; text-align: center; }
  .hero__lede { margin-inline: auto; }
  .hsteps, .assure { justify-items: center; justify-content: center; }
  .assure { text-align: left; }
}

/* ══ TUNNEL — verrou commercial, rupture de stock, facettes réelles ════════
   Rien de nouveau côté identité : on réutilise les tokens du Golden
   (--blue action, --green disponible, --shadow-card, --ease-rev). Le but est
   que le prospect ait l'impression de choisir sa ligne, pas de remplir un
   dossier — donc peu d'éléments, beaucoup d'air, une seule action évidente. */

.hold {
  border: 1px solid color-mix(in srgb, var(--cta-green) 28%, transparent);
  background: color-mix(in srgb, var(--cta-green) 5%, var(--paper));
  border-radius: var(--r-lg);
  padding: 1.15rem 1.1rem;
  box-shadow: var(--shadow-card);
  animation: hold-in .42s var(--ease-rev) both;
}
@keyframes hold-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hold { animation: none; } }

.hold__k {
  margin: 0 0 .35rem; font-size: var(--step--1); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cta-green) 72%, var(--ink));
}
.hold__k--out { color: color-mix(in srgb, var(--ink) 58%, transparent); }

.hold__num {
  margin: 0 0 .5rem; font-family: var(--font-mono);
  font-size: clamp(1.15rem, 5.2vw, 1.5rem); font-weight: 600;
  letter-spacing: .01em; color: var(--ink);
}
.hold__num--big { font-size: clamp(1.3rem, 6vw, 1.75rem); margin-bottom: .7rem; }

.hold__t { margin: 0; font-size: var(--step--1); color: color-mix(in srgb, var(--ink) 62%, transparent); }
.hold__t--dim { opacity: .75; margin-top: .35rem; }

/* Le compteur doit se lire d'un coup d'œil sans être anxiogène : chasse fixe
   pour que les chiffres ne dansent pas, mais pas de rouge, pas de clignotement. */
.hold__clock {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink);
}

.hold__warn {
  margin: .5rem 0 0; font-size: var(--step--1); font-weight: 500;
  color: color-mix(in srgb, #B45309 82%, var(--ink));
}

.hold__row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.hold__row .btn { flex: 1 1 auto; min-height: 40px; }
.hold__again { flex: 0 1 auto; }
.hold__soon { margin: .75rem 0 0; font-weight: 600; color: var(--ink); }

/* ── Rupture de stock ──────────────────────────────────────────────────── */

.nostock { text-align: center; padding: 1.4rem .9rem; }
.nostock__k { margin: 0 0 .4rem; font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.nostock__t {
  margin: 0 0 .9rem; font-size: var(--step--1); line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

/* ── Demande de numéro ─────────────────────────────────────────────────── */

.rq { display: grid; gap: .6rem; padding: .3rem 0; }
.rq__ctx {
  margin: 0 0 .2rem; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.rq__f { display: grid; gap: .25rem; }
.rq__f > span { font-size: var(--step--1); font-weight: 500; color: var(--ink); }
.rq__msg { margin: .2rem 0 0; font-size: var(--step--1); color: var(--ink); }
/* Piège à robot : hors écran, jamais masqué par `display:none` — certains
   automates ignorent ce qui est explicitement caché. */
.rq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Facettes réelles ──────────────────────────────────────────────────── */

.kseg { display: flex; flex-wrap: wrap; gap: .4rem; }
.kseg__b {
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: .34rem .72rem;
  font: inherit; font-size: var(--step--1); color: var(--ink);
  cursor: pointer; transition: border-color .18s var(--ease-rev), background .18s var(--ease-rev);
}
.kseg__b[aria-pressed="true"] {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--paper));
  font-weight: 600;
}
@media (hover: hover) { .kseg__b:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); } }

@media (max-width: 639px) {
  .hold { padding: 1rem .85rem; }
  .hold__row { flex-direction: column; }
  .hold__row .btn { width: 100%; }
}

/* ══ TUNNEL ÉTAPE 2/3 — compte et vérification d'email ═════════════════════
   Un objectif par sous-écran, beaucoup d'air, peu de texte. Le numéro réservé
   est rappelé en bas, en petit : le prospect vient de le choisir, son regard
   doit rester sur le formulaire. */

.card--st2 { max-width: 30rem; margin-inline: auto; }

.st2__hd { margin-bottom: 1.4rem; }
/* Presence de marque discrete : le MEME actif et le MEME lockup que l'en-tete
   du site, en reduit. Le titre ne repete donc plus « STRIKOR ». */
.st2__brand {
  display: inline-flex; align-items: center; gap: .42rem;
  margin: 0 0 .7rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  letter-spacing: -.012em; color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.st2__step {
  margin: 0 0 .45rem; font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--blue) 72%, var(--ink));
}
.st2__t { margin: 0 0 .4rem; font-size: var(--step-2); font-weight: 600; letter-spacing: -.015em; }
.st2__l { margin: 0; font-size: var(--step--1); line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 62%, transparent); }
.st2__q { margin: 0 0 .7rem; font-size: var(--step--1); font-weight: 500; }

/* ── Indépendant / Entreprise : deux cartes, rien de plus ──────────────── */


/* -- Vous etes ? -----------------------------------------------------------
   Deux choix, pas un formulaire. Les cartes sont assez grandes pour etre
   touchees au pouce (min-height 64px) et empilees sous 30rem : a cette
   largeur deux colonnes donneraient des libelles coupes. */






/* ── Formulaire ────────────────────────────────────────────────────────── */

.st2__form { display: grid; gap: .75rem; }
.st2__row { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.st2__f { display: grid; gap: .28rem; }
.st2__f > span { font-size: var(--step--1); font-weight: 500; }
.st2__err { margin: 0; min-height: 1.1em; font-size: var(--step--1);
  color: color-mix(in srgb, #B42318 84%, var(--ink)); }
.st2__act { display: flex; gap: .55rem; margin-top: .35rem; }
.st2__act .btn { flex: 1 1 auto; min-height: 44px; }
.st2__act .btn--ghost { flex: 0 1 auto; }

.st2__mail {
  margin: 0 0 .9rem; font-family: var(--font-mono);
  font-size: var(--step-0); font-weight: 600; word-break: break-all;
}
.st2__mail--s { font-family: inherit; font-weight: 400; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 62%, transparent); }

/* ── Code à six chiffres ───────────────────────────────────────────────── */

.otp { display: grid; gap: .8rem; }
.otp__in {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 600;
  letter-spacing: .34em; text-align: center; padding: .7rem .5rem;
  transition: border-color .18s var(--ease-rev);
}
.otp__in:focus-visible { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset; }
.otp .btn { min-height: 46px; }
.otp__h { margin: 0; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 58%, transparent); }
.otp__re {
  border: 0; background: none; padding: 0; font: inherit;
  font-size: var(--step--1); font-weight: 600; color: var(--blue);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.otp__re:disabled { color: color-mix(in srgb, var(--ink) 42%, transparent);
  cursor: default; text-decoration: none; }

/* ── Email vérifié ─────────────────────────────────────────────────────── */

.st2__ok { text-align: center; padding: .6rem 0 .2rem; }
.st2__okk {
  margin: 0 0 .7rem; font-size: var(--step-0); font-weight: 600;
  color: color-mix(in srgb, var(--cta-green) 78%, var(--ink));
}

/* ── Résumé discret du numéro réservé ──────────────────────────────────────
   Volontairement petit : pas de carte verte, pas de gros compteur. Le
   prospect peut vérifier son numéro, mais celui-ci ne capte pas l'attention. */

.rsv {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem;
  margin-top: 1.5rem; padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.rsv__t { margin: 0; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 64%, transparent); }
.rsv__ok { color: var(--cta-green); font-weight: 700; }
.rsv__n { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.rsv__clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink); }
.rsv__alt {
  border: 0; background: none; padding: 0; font: inherit;
  font-size: var(--step--1); color: color-mix(in srgb, var(--ink) 54%, transparent);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
@media (hover: hover) { .rsv__alt:hover { color: var(--blue); } }

.rsv--out { display: block; }
.rsv--out .rsv__t { font-weight: 600; color: var(--ink); }
.rsv__s { margin: .25rem 0 .8rem; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 62%, transparent); }
.rsv__pick { min-height: 42px; }

@media (max-width: 639px) {
  .st2__row { grid-template-columns: 1fr; }
  .st2__act { flex-direction: column-reverse; }
  .st2__act .btn { width: 100%; }
  .card--st2 { padding-inline: .9rem; }
}

/* ── Deux chemins de retour, une seule opération ──────────────────────────
   « ← Retour » et « ↻ Changer de numéro » libèrent tous deux le verrou côté
   serveur. Ils sont posés côte à côte sur une ligne propre : le retour en
   premier, à gauche, là où l'œil le cherche ; le changement de numéro après,
   parce qu'il est plus engageant. Les deux restent discrets — ce bloc est le
   RÉSUMÉ de la réservation, pas l'action principale de l'écran.             */
.rsv__acts {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem;
  margin-top: .55rem;
}
.rsv__back { align-self: center; padding: .3rem 0; }
.rsv__refresh { font-size: 1.05em; line-height: 1; }
/* Un bouton désactivé pendant la libération doit SE VOIR inactif : sans cela
   le visiteur reclique, et c'est exactement ce qu'on vient de verrouiller. */
.rsv__acts button[disabled] { opacity: .5; cursor: progress; }

/* Échec de libération : discret, mais jamais silencieux. On ne prétend pas
   que le numéro a été rendu au stock. */
.rsv__relerr {
  flex: 1 1 100%; margin: .4rem 0 0; font-size: var(--step--1); font-weight: 500;
  color: color-mix(in srgb, #B91C1C 86%, var(--ink));
}

/* Avertissement des deux dernières minutes : informatif, jamais alarmant. */
.rsv__warn {
  flex: 1 1 100%; font-size: var(--step--1); font-weight: 500;
  color: color-mix(in srgb, #B45309 82%, var(--ink));
}

/* ══ COMPOSANT DE CHAMP STRIKOR ════════════════════════════════════════════
   Règle anti-régression : aucun formulaire du tunnel ne retombe sur un look
   HTML standard. Ce composant sera réutilisé par les informations, le
   paiement, le KYC et le contrat — une seule définition, pas une par écran.

   Le formulaire porte `novalidate` : la bulle native du navigateur casse
   l'identité visuelle et dit « Veuillez renseigner ce champ » à la place de
   notre message. La validation reste faite, côté page ET côté serveur. */

.fld { display: grid; gap: .55rem; }

.fld__l {
  font-size: var(--step--1); font-weight: 500;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.fld__i {
  width: 100%; box-sizing: border-box;
  min-height: 56px; padding: .9rem 1.05rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--step-0);
  transition: border-color .18s var(--ease-rev), box-shadow .18s var(--ease-rev),
              background .18s var(--ease-rev);
}
.fld__i::placeholder { color: color-mix(in srgb, var(--ink) 34%, transparent); }
.fld__i:hover { border-color: color-mix(in srgb, var(--blue) 34%, var(--line)); }
.fld__i:focus-visible,
.fld__i:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
  background: var(--paper);
}

/* Le code : même champ, chasse fixe et chiffres espacés. On ne change pas
   de composant entre l'écran email et l'écran code. */
.fld__i--otp {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 6.5vw, 1.9rem); font-weight: 600;
  letter-spacing: .36em; text-align: center; padding-inline: .5rem;
}
.fld__i--otp::placeholder { letter-spacing: .3em; }

.fld__e {
  margin: 0; min-height: 1.15em; font-size: var(--step--1);
  color: color-mix(in srgb, #B42318 84%, var(--ink));
}

/* Le CTA dit ce qui va se passer, et refuse clairement tant que l'adresse
   n'est pas exploitable — sans jamais ressembler à une erreur. */
.fld__cta { min-height: 54px; font-size: var(--step-0); }
.fld__cta:disabled {
  background: color-mix(in srgb, var(--ink) 9%, var(--paper));
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  border-color: transparent; box-shadow: none; cursor: default;
}
.fld__cta:disabled:hover { transform: none; }

.fld__sent {
  margin: 0 0 1.1rem; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.fld__sent b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }

.fld__h {
  margin: 0; font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 56%, transparent);
}
.fld__link {
  border: 0; background: none; padding: 0; font: inherit;
  font-size: var(--step--1); font-weight: 600; color: var(--blue);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.fld__link:disabled {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  cursor: default; text-decoration: none; font-weight: 400;
}
.fld__link--mute { color: color-mix(in srgb, var(--ink) 54%, transparent); font-weight: 400; }
@media (hover: hover) { .fld__link--mute:hover { color: var(--blue); } }

@media (max-width: 639px) {
  .fld__i { min-height: 54px; font-size: 16px; }  /* 16px : pas de zoom iOS */
  .fld__cta { width: 100%; }
}