/* ════════════════════════════════════════════════════════════════════════
   ALLOKALI — le call center incarné par Kalia — Landing V2
   Charte héritée de vokali.app v8.1 (fond sombre #080b12, or + cyan cockpit,
   glassmorphisme, police KaliKana pour les titres) + assets portés de
   vokali.app : orbe plasma WebGL (réglages cockpit exacts), onde de points,
   robot « Touch me » (réacteur plexus), bouton shiny, cartes magnétiques 3D
   (tilt ressort + glare), beams pricing. Identité téléphonie renforcée :
   anneaux de sonnerie, onde vocale, démonstration d'appel traité en live.
   Zéro dépendance externe. Corps de texte = stack système premium.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'KaliKana';
  src: url('assets/fonts/KaliKana.otf') format('opentype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ─── Vars & reset ──────────────────────────────────────────────────────── */
:root {
  --bg: #080b12;
  --panel: rgba(13, 18, 32, 0.72);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text: #eef2fc;
  --muted: rgba(220, 230, 248, 0.62);
  --muted2: rgba(220, 230, 248, 0.35);
  --cyan: #3fe3e6;               /* R2456g — même base, version plus lumineuse/joyau (Loris: « la même, en mieux ») */
  --cyan-orb: #1FD5F9;            /* cyan EXACT de l'orbe app/cockpit (R1883) */
  --cyan-dim: rgba(63, 227, 230, 0.16);
  --cyan-glow: rgba(63, 227, 230, 0.55);
  /* Allokali — accent PRINCIPAL violet électrique (distinct du cyan Vokali, R2412) */
  --violet: #7c5cff;
  --violet-bright: #9b86ff;
  --violet-dim: rgba(124, 92, 255, 0.16);
  --gold: #d4af60;
  --gold-bright: #e6c478;
  --gold-dim: rgba(212, 175, 96, 0.15);
  --gold-line: rgba(212, 175, 96, 0.18);
  /* Vert WhatsApp — accent fonctionnel (récap, notif), jamais décoratif */
  --wa: #25d366;
  --wa-dim: rgba(37, 211, 102, 0.12);
  --red: #f87171;
  --line: rgba(255, 255, 255, 0.07);
  --max: 1180px;
  --nav-h: 64px;
  --font-display: 'KaliKana', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg); color: var(--text);
  min-width: 320px; overflow-x: hidden;
  letter-spacing: -0.011em; text-rendering: optimizeLegibility;
}
h1, h2, h3, .nav-brand-name, .footer-brand { font-family: var(--font-display); }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
canvas { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.br-desk { display: none; }
@media (min-width: 720px) { .br-desk { display: inline; } }

/* Grille technique en fond (signature cockpit) */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 0%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, black 10%, transparent 75%);
}

/* ─── Reveal au scroll (JS ajoute .in) — invisible UNIQUEMENT si JS actif ── */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22,1,0.36,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ─── NAV ───────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(8, 11, 18, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: background 220ms ease;
}
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,96,0.55) 22%, rgba(246,231,176,0.65) 44%, rgba(58,110,255,0.45) 72%, rgba(23,52,140,0.4) 86%, transparent);
  opacity: 0; transition: opacity 240ms ease;
}
.nav.nav-scrolled { background: rgba(8, 11, 18, 0.95); }
.nav.nav-scrolled::after { opacity: 1; }
.nav-brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; overflow: hidden; }
/* R2456 — fine ligne dorée sous « Allokali » REMISE (Loris 19/06 la veut), + un peu d'air */
.nav-brand-name { font-size: 1.08rem; position: relative; display: inline-block; padding-bottom: 4px; margin-bottom: 1px; }
.nav-brand-name::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e6c478 16%, #f6e7b0 50%, #cda24e 84%, transparent); opacity: 0.92; }
.nav-brand-tag { font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
/* R2466 — VRAI or .kk-grad-text + contour doré PARTOUT (éradication du faux or plat #e8c66a) */
/* R4527 — les DEUX segments de marque en KaliKana (avant : seul « Kali » l'était, « Allo » restait en police body). */
.b-kali {
  font-family: var(--font-display);
  background: linear-gradient(100deg, #fff3cf 0%, #f1d182 22%, #e6b94f 46%, #f3d98a 68%, #c9982f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,245,200,0.45)) drop-shadow(0 1px 6px rgba(212,175,96,0.30));
}
.nav-brand-name .b-kali { -webkit-text-fill-color: transparent; }
/* R2467 — « llo » de AlloKali en BLEU (cohérence pré-page/matrice/header/titre, demandé maintes fois) */
.b-llo {
  font-family: var(--font-display);
  background: linear-gradient(100deg, #2563eb 0%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 4px rgba(37,99,235,0.28));
}
.nav-brand-name .b-llo { -webkit-text-fill-color: transparent; }
.page-brand .b-llo { color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(190,215,255,0.4)) drop-shadow(0 2px 14px rgba(37,99,235,0.4)); }

/* Mini-orbe vivante du logo nav — canvas WebGL 28px (moteur vokali.app).
   Fallback no-GL : point pulsé cyan. */
.nav-orb { position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-orb canvas { width: 100%; height: 100%; }
.nav-orb.no-gl canvas { display: none; }
.nav-orb.no-gl::after {
  content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #bdfdff, var(--cyan-orb) 55%, #0d5a5f);
  box-shadow: 0 0 14px rgba(31,213,249,0.7);
  animation: orb-pulse 3s ease-in-out infinite;
}
@keyframes orb-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.86); opacity: 0.72; } }

.nav-links { display: flex; gap: 22px; color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.nav-links a { position: relative; padding-bottom: 2px; transition: color 180ms ease; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: right 240ms cubic-bezier(0.22,1,0.36,1);
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a:hover::after { right: 0; }
.nav-cta-zone { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; }
.nav { max-width: 100vw; }
/* R9362 — la marque peut rétrécir, le CTA+burger ne débordent jamais (zéro scroll horizontal mobile) */
/* G342 FIX1 — overflow retiré du conteneur de marque (il rognait le halo de l'orbe header) ;
   le clip d'ellipse du texte vit désormais sur .nav-brand-text (voir plus haut). */
.nav-brand { min-width: 0; flex-shrink: 1; }
.nav-cta-zone .shiny-cta { flex-shrink: 0; }
.nav-burger { flex-shrink: 0; }

/* Burger mobile : menu déroulant glass sous la nav */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 9px; border-radius: 11px;
  background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer;
}
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 240ms ease, opacity 200ms ease; }
.nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 980px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 10px clamp(16px, 4vw, 48px) 18px;
    background: rgba(8, 11, 18, 0.97);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--gold-line);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22,1,0.36,1);
  }
  .nav.nav-open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 2px; font-size: 0.98rem; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a::after { display: none; }
}
/* ⚠️ spécificité .nav .btn-nav OBLIGATOIRE : .btn (défini plus bas) gagnerait la cascade sinon */
@media (max-width: 560px) { .nav .btn-nav { display: none; } .nav-brand-tag { display: none; } }
/* R8710 — très petits écrans (≤430px, iPhone 375-390px) : nav resserrée pour que
   marque + CTA « Essai gratuit 7 jours » + burger tiennent sur une ligne sans déborder. */
@media (max-width: 430px) {
  .nav { gap: 10px; padding: 0 12px; }
  .nav-brand { gap: 8px; }
  .nav-cta-zone { gap: 8px; }
  .nav-cta-zone .shiny-cta { padding: 0.5rem 0.7rem; font-size: 0.7rem; white-space: nowrap; }
}
/* R9362 — sous 370px (iPhone SE/mini) : on raccourcit le libellé du CTA pour ne JAMAIS déborder */
@media (max-width: 370px) {
  .nav-cta-zone .btn-nav-shiny .shiny-cta-content { font-size: 0; }
  .nav-cta-zone .btn-nav-shiny .shiny-cta-content::after { content: 'Essai 7j'; font-size: 0.7rem; }
}

/* ─── BOUTONS ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 22px; height: 48px; border-radius: 999px; border: none;
  font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn-primary {
  /* Allokali patte : or → violet premium (cohérent avec le titre, distinct du cyan Vokali) */
  background: linear-gradient(135deg, #e6c478 0%, #d4af60 38%, #7c5cff 100%); color: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(124,92,255,0.3), 0 16px 40px rgba(124,92,255,0.24);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(124,92,255,0.45), 0 24px 52px rgba(124,92,255,0.34); }
.btn-ghost { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,0.07); }
.btn-nav { height: 38px; padding: 0 17px; font-size: 0.82rem; background: var(--glass); border: 1px solid var(--gold-line); color: var(--text); }
.btn-nav:hover { background: rgba(212,175,96,0.1); border-color: rgba(212,175,96,0.45); color: var(--gold-bright); }
.btn-lg { height: 56px; padding: 0 30px; font-size: 0.98rem; }
.btn-full { width: 100%; }

/* ─── BOUTON « SHINY » — porté de vokali.app / kali-kana (animated-shiny-button)
   Bordure conic-gradient lumineuse rotative + points internes + shimmer.
   Variante bleue (lumière indigo/cyan qui tourne). ────────────────────── */
@property --gradient-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: '<percentage>'; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: '<color>'; initial-value: #ffffff; inherits: false; }

.shiny-cta {
  --shiny-bg: #0a0a1a; --shiny-bg-subtle: #12122a; --shiny-fg: #e0e7ff;
  --shiny-highlight: #6366f1; --shiny-highlight-subtle: #4f46e5;
  --shiny-duration: 3s; --shiny-shadow: 2px;
  --shiny-transition: 800ms cubic-bezier(0.25,1,0.5,1);
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  padding: 0.62rem 1.25rem; font-family: var(--font-display); font-size: 0.82rem;
  font-weight: 700; line-height: 1.2; letter-spacing: 0.02em;
  border: 1px solid transparent; border-radius: 0.6rem; color: var(--shiny-fg);
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle), 0 6px 20px rgba(0,0,0,0.4);
  transition: var(--shiny-transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.shiny-cta:active { translate: 0 1px; }
/* points internes (maille blanche balayée par l'arc rotatif)
   G342 §14 (fix TRANSVERSAL « carré lumineux aux bords visibles », ex. bouton « Écouter la
   conversation ») : le champ de points était un RECTANGLE 0.6rem centré dans un bouton PILULE
   (999px, posé plus bas) → ses bords/coins se voyaient au milieu du bouton. Il couvre désormais
   tout le bouton et ÉPOUSE sa forme (border-radius:inherit). Même fix côté React
   (components/ui/animated-shiny-button.tsx, repo principal). */
.shiny-cta::before {
  content: ''; pointer-events: none; position: absolute; z-index: -1;
  --size: calc(100% - var(--shiny-shadow)); --position: 2px; --space: calc(var(--position) * 2);
  width: var(--size); height: var(--size); inset: 50%; translate: -50% -50%;
  background: radial-gradient(circle at var(--position) var(--position), #fff calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space); background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit; opacity: 0.4; animation: shiny-gradient-angle var(--shiny-duration) linear infinite;
}
/* shimmer diagonal (bas du bouton) */
.shiny-cta::after {
  content: ''; pointer-events: none; position: absolute; z-index: -1;
  width: 100%; aspect-ratio: 1; inset: 50%; translate: -50% -50%;
  background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: 0.6; animation: shiny-shimmer var(--shiny-duration) linear infinite;
}
.shiny-cta-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.45rem; }
.shiny-cta-content::before {
  content: ''; pointer-events: none; position: absolute; inset: 50%; translate: -50% -50%; z-index: -1;
  --size: calc(100% + 1rem); width: var(--size); height: var(--size); border-radius: 999px; /* fini le rectangle moche au hover */
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-highlight); opacity: 0; transition: opacity var(--shiny-transition);
}
.shiny-cta { border-radius: 999px; outline: none; }
.shiny-cta:focus-visible { box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle), 0 0 0 2px var(--violet, #7c5cff); }
.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-highlight-subtle);
}
.shiny-cta:is(:hover, :focus-visible) .shiny-cta-content::before {
  opacity: 1; animation: shiny-breathe calc(var(--shiny-duration) * 1.5) linear infinite;
}
@keyframes shiny-gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shiny-shimmer { to { rotate: 360deg; } }
/* R2476 — FIX : le contour conique tournait seulement sur ::before (points internes), PAS sur le
   bouton → bordure figée. On anime --gradient-angle SUR le bouton = contour lumineux qui tourne. */
.shiny-cta { animation: shiny-gradient-angle var(--shiny-duration) linear infinite; }
@media (prefers-reduced-motion: reduce) { .shiny-cta { animation: none; } }
@keyframes shiny-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) { .shiny-cta::before, .shiny-cta::after { animation: none; } }

/* ─── HERO ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 56px) 24px 90px;
  text-align: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Onde de points (canvas 2D, vagues radiales sync énergie orbe — vokali.app R1880/R1883) */
.hero-dots { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
/* Orbe plasma plein cadre (canvas WebGL upscalé — le flou masque l'upscale)
   Opacité réduite : l'orbe reste spectaculaire mais ne brûle plus le texte du hero */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
/* Anneaux de sonnerie — la signature « standard » conservée par-dessus l'orbe */
.pulse-ring {
  position: absolute; top: 38%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(56,217,217,0.22);
  transform: translate(-50%, -50%);
  animation: hero-ring 5.2s ease-out infinite;
}
.pr-1 { width: 320px; height: 320px; }
.pr-2 { width: 320px; height: 320px; animation-delay: 1.7s; border-color: rgba(212,175,96,0.20); }
.pr-3 { width: 320px; height: 320px; animation-delay: 3.4s; }
@keyframes hero-ring {
  0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(3.4); opacity: 0; }
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 62% at 50% 45%, transparent 30%, var(--bg) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 880px; display: flex; flex-direction: column; align-items: center; }
/* Scrim de lisibilité (même pattern que .early-scrim) : voile radial derrière le bloc
   titre + sous-titre + CTA — le texte est protégé de l'orbe, l'orbe reste visible autour */
.hero-content::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -8% -14% 28%;
  background: radial-gradient(ellipse 58% 52% at 50% 42%, rgba(8,11,18,0.66), transparent 100%);
}
.hero-badge {
  /* R6393 — agrandie & améliorée drastiquement (Loris) : padding généreux, typo plus grande,
     quadrillage subtil, liseré doré net, glow discret. Hover magnétique conservé (script.js). */
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 13px;
  padding: 16px 26px; border-radius: 16px;
  background-image:
    linear-gradient(rgba(212,175,96,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,96,0.06) 1px, transparent 1px),
    linear-gradient(160deg, rgba(56,217,217,0.12) 0%, transparent 48%),
    linear-gradient(155deg, rgba(20,24,38,0.84) 0%, rgba(9,11,19,0.92) 60%, rgba(6,8,14,0.95) 100%);
  background-size: 15px 15px, 15px 15px, 100% 100%, 100% 100%;
  border: 1px solid rgba(212,175,96,0.44);
  box-shadow:
    0 14px 40px -16px rgba(0,0,0,0.82),
    inset 0 1px 0 rgba(252,246,186,0.26),
    0 0 30px -10px rgba(56,217,217,0.4);
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  font-size: 1rem; font-weight: 600; letter-spacing: 0.005em; color: rgba(168,240,247,0.99);
  margin-bottom: 24px;
  opacity: 0; animation: fade-up 0.6s 0.15s ease forwards;
}
.hero-badge::before {
  /* liseré doré net (ring 1px, indépendant du glow) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(150deg, rgba(212,175,96,0.55), rgba(212,175,96,0) 40%, rgba(56,217,217,0.35)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 9px var(--wa); animation: dot-pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* R4526 — Logo A + orbe AU-DESSUS du titre hero (demande Loris récurrente).
   R8641 (K1) — le cercle statique (.hero-logo-orb, ring bidon) est SUPPRIMÉ : remplacé par une
   VRAIE orbe plasma WebGL bleue (identique au moteur nav/data/cta), clippée en cercle net. */
.hero-logo-a {
  /* R6390 — le A vit À GAUCHE du wordmark AlloKali (plus au-dessus du titre) : espace hero libéré. */
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: clamp(52px, 6.5vw, 78px); height: clamp(52px, 6.5vw, 78px);
  margin: 0; flex-shrink: 0;
  /* G342 FIX1 — l'orbe plasma derrière le A ne doit plus être ROGNÉE en cercle net :
     on retire le clip (overflow:hidden) pour laisser respirer le halo complet de l'orbe. */
  border-radius: 50%; overflow: visible;
}
.hero-logo-orb-canvas {
  /* R9475 — orbe ×1,4 derrière le A (demande Loris run 15 item 5) */
  position: absolute; inset: -34%;
  width: calc(100% + 68%); height: calc(100% + 68%);
  pointer-events: none; z-index: 0;
  /* G342 FIX1 — bords fondus (masque radial doux) au lieu du clip dur : orbe visible en entier. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 50%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 50%, transparent 72%);
}
.hero-logo-a.no-gl { border: 1px solid rgba(56,217,217,0.24); box-shadow: inset 0 0 0 1px rgba(212,175,96,0.1); }
.hero-logo-img {
  position: relative; z-index: 2;
  height: 100%; width: auto; object-fit: contain;
  /* léger drop-shadow net, plus de disque radial derrière le A */
  filter: drop-shadow(0 2px 8px rgba(37,99,235,0.42));
}

.hero-title {
  font-size: clamp(2.8rem, 8vw, 6.2rem);
  font-weight: 800; letter-spacing: -0.05em; line-height: 1.0;
  margin-bottom: 26px;
  text-shadow: 0 2px 28px rgba(4,7,12,0.95);
}
.hero-line { display: block; opacity: 0; transform: translateY(24px); }
/* R2593 — « répond à chaque appel » (or) = la grosse ligne ; « commercial » (bleu) plus discret.
   opacity:1 forcé = FIX du bug « ligne or invisible » (.hero-line démarre opacity:0, hero-line-gold n'a
   pas l'animation line-reveal qui la révèle → restait masquée). */
.hero-line-sm { font-size: 0.82em !important; font-weight: 750 !important; opacity: 1 !important; transform: none !important; }
.hero-line-xl { font-size: 1.3em !important; opacity: 1 !important; transform: none !important; }
/* R2462 — hiérarchie typo : « Ton meilleur commercial » = surtitre PLUS PETIT, clair. */
.hero-line:nth-child(1) {
  font-size: 0.56em; font-weight: 700; letter-spacing: -0.02em;
  color: #e8eefb; margin-bottom: 0.05em;
  animation: line-reveal 0.7s 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
/* R2462 — ligne signature « répond à chaque appel » : BLEU AlloKali (secondaire),
   PLUS GROS que le surtitre. Dégradé #2563eb→#60a5fa + balayage lumineux lent + halo
   bleu doux. Fini le gold sur le héro AlloKali. */
.hero-line-grad {
  background: linear-gradient(100deg, #9cc6ff 0%, #60a5fa 24%, #2563eb 50%, #4f93f6 74%, #9cc6ff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 1.16em; letter-spacing: -0.055em; font-weight: 850;
  padding-bottom: 0.1em;
  filter: drop-shadow(0 1px 12px rgba(37,99,235,0.30)) drop-shadow(0 4px 30px rgba(96,165,250,0.16));
  animation: line-reveal 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) forwards, gold-shine 7s 1.4s ease-in-out infinite;
}
@keyframes gold-shine { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
@media (prefers-reduced-motion: reduce) { .hero-line-grad { animation: line-reveal 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) forwards; } }
@keyframes line-reveal { to { opacity: 1; transform: translateY(0); } }

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.16rem); color: var(--muted); line-height: 1.7;
  max-width: 62ch; margin-bottom: 36px;
  text-shadow: 0 1px 14px rgba(4,7,12,0.95), 0 0 28px rgba(4,7,12,0.85);
  opacity: 0; animation: fade-up 0.6s 0.75s ease forwards;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-sub em { font-style: normal; font-family: 'KaliKana', var(--font-display);
  background: linear-gradient(100deg, #bf953f 0%, #fcf6ba 22%, #b38728 42%, #fbf5b7 62%, #aa771c 82%, #fcf6ba 100%);
  background-size: 160% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 16px;
  opacity: 0; animation: fade-up 0.6s 0.9s ease forwards;
}
.hero-note {
  font-size: 0.8rem; color: var(--muted2); margin-bottom: 48px;
  text-shadow: 0 1px 10px rgba(4,7,12,0.9);
  opacity: 0; animation: fade-up 0.6s 1.0s ease forwards;
}

/* Carte d'appel vivante */
.hero-call-card {
  width: min(500px, 100%);
  text-align: left;
  background: linear-gradient(155deg, rgba(20,28,46,0.82), rgba(12,17,30,0.88));
  border: 1px solid var(--gold-line); border-radius: 18px;
  padding: 16px 18px 14px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 28px 60px -28px rgba(0,0,0,0.8), 0 0 0 1px rgba(56,217,217,0.05);
  opacity: 0; animation: fade-up 0.7s 1.15s ease forwards;
}
.hcc-row { display: flex; align-items: center; gap: 12px; }
.hcc-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #03161a;
  background: linear-gradient(135deg, var(--cyan), #1aa3b8);
  box-shadow: 0 0 18px rgba(56,217,217,0.4);
}
.hcc-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.hcc-name { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcc-status { font-size: 0.74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.hcc-live { width: 7px; height: 7px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 8px var(--wa); animation: dot-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
/* Onde vocale animée */
.hcc-wave { display: flex; align-items: center; gap: 3px; height: 26px; flex-shrink: 0; }
.hcc-wave span {
  width: 3px; border-radius: 2px;
  background: linear-gradient(to top, var(--cyan), var(--gold-bright));
  animation: wave 1.1s ease-in-out infinite;
}
.hcc-wave span:nth-child(1) { height: 30%; animation-delay: 0s; }
.hcc-wave span:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.hcc-wave span:nth-child(3) { height: 100%; animation-delay: 0.3s; }
.hcc-wave span:nth-child(4) { height: 60%; animation-delay: 0.45s; }
.hcc-wave span:nth-child(5) { height: 35%; animation-delay: 0.6s; }
@keyframes wave { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.15); } }
.hcc-transcript { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.hcc-quote { font-size: 0.84rem; color: var(--muted); font-style: italic; line-height: 1.55; }

/* Strip de preuve */
.hero-proof {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px;
  margin-top: 30px; font-size: 0.82rem; color: var(--muted);
  text-shadow: 0 1px 10px rgba(4,7,12,0.9);
  opacity: 0; animation: fade-up 0.6s 1.35s ease forwards;
}
.hero-proof strong { color: var(--gold-bright); font-weight: 700; }
.hp-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--muted2); }
@media (max-width: 560px) { .hp-sep { display: none; } .hero-proof { gap: 8px 16px; } }

.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted2); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; animation: fade-up 0.6s 1.7s ease forwards;
}
.scroll-arrow { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--muted2), transparent); animation: scroll-line 1.8s ease-in-out infinite; }
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── SECTIONS communes ─────────────────────────────────────────────────── */
.section { max-width: var(--max); margin: 0 auto; padding: 96px clamp(16px, 4vw, 48px); position: relative; z-index: 2; }
.section-narrow { max-width: 860px; }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
/* R2450 v4 — eyebrows en KaliKana + or (fini le cyan/turquoise) */
.eyebrow { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 14px; }
.eyebrow-gold { color: var(--gold); }
.section h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; margin-bottom: 16px; }
.section h2 em { font-style: normal; background: linear-gradient(110deg, var(--gold), var(--gold-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section-sub { color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.section-sub strong { color: var(--text); font-weight: 600; }
.section-sub em { color: var(--gold-bright); font-style: normal; }
/* R8641 (K7) — granularité de modulation de l'agent (ton/chaleur/humour/mémoire) */
.cap-modulate { margin-top: 10px; font-size: 0.94rem; }

/* ─── 2. PROBLÈME : stats + avant/après ─────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }
.stat-card {
  padding: 32px 26px; border-radius: 22px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(248,113,113,0.07), transparent 55%),
    linear-gradient(155deg, rgba(20,28,46,0.78), rgba(12,17,30,0.82));
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.stat-card:hover { border-color: rgba(248,113,113,0.3); }
.stat-num {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--red), var(--gold-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

.problem-vs {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 18px;
}
.pv-col {
  padding: 22px 24px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
}
.pv-bad { border-color: rgba(248,113,113,0.22); background: linear-gradient(150deg, rgba(248,113,113,0.05), rgba(12,17,30,0.6)); }
.pv-good { border-color: rgba(56,217,217,0.28); background: linear-gradient(150deg, rgba(56,217,217,0.07), rgba(212,175,96,0.04)); }
.pv-tag { align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); padding: 3px 11px; border-radius: 999px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); }
.pv-tag-good { color: var(--cyan); background: var(--cyan-dim); border-color: rgba(56,217,217,0.3); }
.pv-line { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }
.pv-good .pv-line { color: var(--text); }
.pv-arrow { display: flex; align-items: center; color: var(--gold); }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: 1fr; }
  .problem-vs { grid-template-columns: 1fr; }
  .pv-arrow { justify-content: center; transform: rotate(90deg); }
}

/* ─── 2bis. iPhone premium — preuve visuelle "un appel qui répond" (R8635) ── */
.pps { display: grid; grid-template-columns: 1fr 300px; gap: clamp(28px, 5vw, 56px); align-items: center; margin-top: 48px; }
.pps-tag { display: flex; align-items: center; gap: 9px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 14px; }
.pps-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 0 0 rgba(96,165,250,0.55); animation: pps-tag-pulse 2s ease-out infinite; flex: none; }
@keyframes pps-tag-pulse { 0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.55); } 70% { box-shadow: 0 0 0 7px rgba(96,165,250,0); } 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); } }
.pps-title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.32; margin-bottom: 12px; }
.pps-title em { font-style: normal; color: var(--blue-light); }
.pps-sub { color: var(--muted); font-size: 0.96rem; line-height: 1.7; max-width: 480px; }
/* R8641 (K2) — invite à cliquer « Répondre » sur l'iPhone live */
.pps-hint { margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 0.86rem; line-height: 1.55; max-width: 480px;
  color: rgba(215,251,255,0.85); background: linear-gradient(150deg, rgba(37,99,235,0.14), rgba(12,17,30,0.5)); border: 1px solid rgba(96,165,250,0.28); }
.pps-hint strong { color: var(--gold-bright); }
.pps-phone { display: flex; justify-content: center; }
@media (max-width: 760px) {
  .pps { grid-template-columns: 1fr; text-align: center; margin-top: 40px; }
  .pps-tag { justify-content: center; }
  .pps-sub { margin: 0 auto; }
  .pps-phone { margin-top: 8px; }
}

/* Composant iPhone vanilla (cf. components/ui/iphone-mockup.static.html — socle réutilisable) */
.kk-iphone { position: relative; width: 100%; max-width: var(--kk-iphone-w, 300px); margin: 0 auto; perspective: 1600px; }
.kk-iphone__glow { display: none; }
.kk-iphone[data-glow] .kk-iphone__glow {
  display: block; position: absolute; inset: -16% -12%; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(30px);
  background: radial-gradient(ellipse 62% 56% at 50% 42%,
    color-mix(in srgb, var(--kk-iphone-glow, #d4af60) 30%, transparent) 0%,
    color-mix(in srgb, var(--kk-iphone-glow, #d4af60) 9%, transparent) 46%, transparent 74%);
}
.kk-iphone__device {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 9 / 19.5;
  transform: rotateX(var(--kk-iphone-rx, 0deg)) rotateY(var(--kk-iphone-ry, 0deg));
  transition: transform 260ms ease-out; transform-style: preserve-3d; will-change: transform;
}
.kk-iphone__chassis {
  position: relative; width: 100%; height: 100%; border-radius: 15% / 6.6%;
  background: linear-gradient(150deg, #4a4a4f 0%, #232327 38%, #1a1a1d 62%, #302f33 100%);
  padding: 3.4%;
  box-shadow: 0 30px 70px -18px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.05) inset,
    inset 0 1px 1px rgba(255,255,255,0.14), 0 0 0 1.5px color-mix(in srgb, var(--kk-iphone-accent, transparent) 55%, transparent);
}
.kk-iphone__screen { position: relative; width: 100%; height: 100%; border-radius: 12% / 5.2%; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.9); }
.kk-iphone__island {
  position: absolute; left: 50%; top: 2.2%; transform: translateX(-50%); z-index: 20;
  width: 34%; height: 3.6%; min-height: 20px; border-radius: 999px; background: #000;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 12%;
}
.kk-iphone__cam { width: clamp(6px, 2.6%, 10px); height: clamp(6px, 2.6%, 10px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b4a6b 0%, #0a1520 60%, #000 100%);
  box-shadow: inset 0 0 2px rgba(80,140,200,0.65), 0 0 1px rgba(255,255,255,0.25); }
.kk-iphone__content { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #0b0e16, #06080e); }
.kk-iphone__reflection { position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: inherit;
  background: linear-gradient(122deg, rgba(255,255,255,0.08) 0%, transparent 26%, transparent 100%); mix-blend-mode: screen; }
.kk-iphone__btn { position: absolute; border-radius: 2px; background: linear-gradient(180deg, #5a5a60, #232327); z-index: 0; }
.kk-iphone__btn--mute { left: -0.6%; top: 17%; width: clamp(2px, 0.7%, 3.5px); height: 3.4%; border-radius: 2px 0 0 2px; }
.kk-iphone__btn--vol-up { left: -0.6%; top: 25%; width: clamp(2px, 0.7%, 3.5px); height: 6.2%; border-radius: 2px 0 0 2px; }
.kk-iphone__btn--vol-down { left: -0.6%; top: 34%; width: clamp(2px, 0.7%, 3.5px); height: 6.2%; border-radius: 2px 0 0 2px; }
.kk-iphone__btn--power { right: -0.6%; top: 22%; width: clamp(2px, 0.7%, 3.5px); height: 9%; border-radius: 0 2px 2px 0; }
@supports not (aspect-ratio: 9 / 19.5) { .kk-iphone__device { height: 0; padding-bottom: 216.6%; } }
@media (prefers-reduced-motion: reduce) { .kk-iphone__device { transition: none !important; transform: none !important; } }

/* Écran « appel entrant » AlloKali (contenu de .kk-iphone__content) */
/* R8641 (K2) — FIX : `.pcs{display:flex}` (règle auteur) neutralisait le `[hidden]{display:none}`
   du navigateur (règle user-agent, perdante face à l'auteur à spécificité égale) → #pcs-incoming
   restait visuellement affiché même avec l'attribut `hidden` posé en JS. Repasse `display:none`
   AUTHOR pour que le hidden fonctionne vraiment (bascule #pcs-incoming ↔ #pcs-live, K2). */
.pcs[hidden] { display: none; }
.pcs {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;
  padding: 15% 8% 8%; text-align: center; font-family: var(--font-body); color: #eef2fc;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(37,99,235,0.24), transparent 60%),
    linear-gradient(180deg, #0b0e18 0%, #070911 55%, #050609 100%);
}
.pcs-top { width: 100%; display: flex; justify-content: center; margin-bottom: 9%; }
.pcs-time { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(238,242,252,0.75); }
.pcs-status { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(238,242,252,0.52); text-transform: uppercase; margin-bottom: 8%; }
.pcs-avatar {
  width: 23%; aspect-ratio: 1; border-radius: 50%; margin-bottom: 6%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, rgba(37,99,235,0.24), rgba(212,175,96,0.14));
  border: 1px solid rgba(212,175,96,0.35);
  box-shadow: 0 0 0 1px rgba(96,165,250,0.16), 0 8px 24px -10px rgba(37,99,235,0.5);
}
.pcs-avatar img { width: 58%; height: 58%; object-fit: contain; }
.pcs-caller { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2%; }
.pcs-sub { font-size: 0.74rem; color: rgba(238,242,252,0.5); margin-bottom: 8%; }
.pcs-banner {
  display: flex; align-items: center; gap: 6px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; color: #f3dfa8;
  padding: 6px 12px; border-radius: 999px; background: rgba(212,175,96,0.12); border: 1px solid rgba(212,175,96,0.32); margin-bottom: auto;
}
.pcs-banner-dot { width: 5px; height: 5px; border-radius: 50%; background: #25d366; flex: none; animation: pps-tag-pulse 2s ease-out infinite; }
.pcs-actions { width: 100%; display: flex; justify-content: space-between; padding: 0 6% 6%; }
.pcs-act { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pcs-act-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.pcs-act-decline .pcs-act-btn { background: linear-gradient(160deg, #f87171, #dc2626); box-shadow: 0 8px 22px -8px rgba(220,38,38,0.6); }
.pcs-act-decline .pcs-act-btn svg { transform: rotate(135deg); }
.pcs-act-accept .pcs-act-btn { background: linear-gradient(160deg, #34d97a, #16a34a); animation: pcs-accept-pulse 1.8s ease-out infinite; }
.pcs-act-label { font-size: 0.6rem; color: rgba(238,242,252,0.55); font-weight: 600; }
@keyframes pcs-accept-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55), 0 8px 22px -8px rgba(22,163,74,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(37,211,102,0), 0 8px 22px -8px rgba(22,163,74,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 8px 22px -8px rgba(22,163,74,0.6); }
}
.pcs-act-accept, .pcs-act-decline { cursor: pointer; }
.pcs-shake { animation: pcs-shake-kf 0.42s cubic-bezier(0.36,0.07,0.19,0.97); }
@keyframes pcs-shake-kf { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }

/* R8641 (K2) — écran d'appel EN LIVE (clic « Répondre ») : transcript qui défile + « souffler ».
   Réutilise le langage visuel des bulles .lc-bubble (Démo live) en format compact iPhone. */
.pcs-live { padding: 11% 6% 6%; justify-content: flex-start; }
.pcs-live[hidden] { display: none; }
.pl-head { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4%; text-align: left; }
.pl-avatar { width: 15%; margin-bottom: 0; flex-shrink: 0; }
.pl-head-meta { min-width: 0; flex: 1; }
.pl-caller { font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pl-dot { width: 5px; height: 5px; border-radius: 50%; background: #25d366; box-shadow: 0 0 8px #25d366; animation: dot-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.pl-sub { font-size: 0.64rem; color: rgba(238,242,252,0.5); }
.pl-transcript { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 2% 0; justify-content: flex-end; min-height: 0; }
.pl-bubble { max-width: 92%; padding: 6px 10px; border-radius: 11px; font-size: 0.66rem; line-height: 1.4; text-align: left;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.pl-bubble.in { opacity: 1; transform: none; }
.pl-bubble-client { align-self: flex-start; color: #eef2fc; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); border-bottom-left-radius: 3px; }
.pl-bubble-agent { align-self: flex-end; color: #d7e8ff; background: linear-gradient(150deg, rgba(37,99,235,0.22), rgba(37,99,235,0.1)); border: 1px solid rgba(96,165,250,0.3); border-bottom-right-radius: 3px; }
.pl-whisper { width: 100%; margin: 3% 0; padding: 7px 10px; border-radius: 10px; text-align: left;
  background: linear-gradient(150deg, rgba(212,175,96,0.1), rgba(12,17,30,0.55)); border: 1px solid rgba(212,175,96,0.28); }
.pl-whisper-label { display: flex; align-items: center; gap: 5px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pl-whisper-msg { font-size: 0.62rem; color: var(--muted); line-height: 1.4; min-height: 1.6em; transition: color 0.3s ease; }
.pl-whisper-msg.is-live { color: #d7fbff; }
.pl-whisper-msg .pl-caret { display: inline-block; width: 2px; height: 0.9em; background: currentColor; vertical-align: -1px; margin-left: 1px; animation: lw-blink 0.9s steps(1) infinite; }
.pl-actions { padding: 0 6% 3%; justify-content: center; }

/* ─── 3. DÉMO LIVE — appel traité en direct ─────────────────────────────── */
.live-stage {
  position: relative;
  overflow: hidden; /* clippe les translateX d'entrée des .la-item (sinon overflow horizontal mobile) */
  border-radius: 28px;
  padding: clamp(18px, 3vw, 30px);
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(56,217,217,0.07), transparent 55%),
    radial-gradient(ellipse 60% 70% at 95% 100%, rgba(212,175,96,0.06), transparent 55%),
    linear-gradient(160deg, rgba(16,22,38,0.92), rgba(9,13,22,0.95));
  border: 1px solid var(--gold-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 50px 110px -45px rgba(0,0,0,0.9);
}
.live-replay { position: absolute; top: 18px; right: 18px; z-index: 6; }
.live-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(16px, 2.5vw, 26px); align-items: stretch; }

/* Colonne appel */
.live-call {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 20px; overflow: hidden;
  background: rgba(8, 11, 18, 0.65);
  border: 1px solid var(--glass-border);
}
.lc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 18, 32, 0.55);
}
.lc-phone {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-bright); background: var(--gold-dim); border: 1px solid rgba(212,175,96,0.35);
}
/* Anneaux quand ça sonne (classe .ringing posée par JS) */
.lc-phone::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(56,217,217,0.5); opacity: 0;
}
.lc-phone.ringing { animation: phone-shake 0.55s ease-in-out infinite; }
.lc-phone.ringing::after { animation: ring-pulse 1.1s ease-out infinite; }
@keyframes phone-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes ring-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.lc-phone.online { color: #03161a; background: linear-gradient(135deg, var(--cyan), #1aa3b8); border-color: transparent; box-shadow: 0 0 16px rgba(56,217,217,0.45); }
.lc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lc-num { font-size: 0.83rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-state { font-size: 0.72rem; color: var(--muted); }
.lc-state.live { color: var(--wa); }
.lc-wave { opacity: 0; transition: opacity 300ms ease; }
.lc-wave.on { opacity: 1; }
.lc-wave span { animation-play-state: paused; }
.lc-wave.on span { animation-play-state: running; }
.lc-timer { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted2); flex-shrink: 0; min-width: 44px; text-align: right; }

.lc-transcript {
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 16px; min-height: 320px; max-height: 380px; overflow: hidden;
  justify-content: flex-end; /* les bulles arrivent par le bas, comme une vraie conv */
}
.lc-bubble {
  max-width: 88%; padding: 10px 14px; border-radius: 15px;
  font-size: 0.86rem; line-height: 1.5;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.lc-bubble.in { opacity: 1; transform: none; }
.lc-bubble-client {
  align-self: flex-start; color: var(--text);
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  border-bottom-left-radius: 5px;
}
.lc-bubble-agent {
  align-self: flex-end; color: #d7fbff;
  background: linear-gradient(150deg, rgba(56,217,217,0.13), rgba(26,163,184,0.1));
  border: 1px solid rgba(56,217,217,0.28);
  border-bottom-right-radius: 5px;
}
.lc-bubble-agent .lcb-who { color: rgba(140,230,240,0.85); }
.lcb-who { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 3px; }

/* Colonne actions agent */
.live-actions {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 20px; padding: 16px;
  background: rgba(8, 11, 18, 0.65);
  border: 1px solid var(--glass-border);
}
.la-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.la-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: dot-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.la-feed { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.la-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 13px;
  font-size: 0.82rem; color: var(--muted); line-height: 1.4;
  background: var(--glass); border: 1px solid var(--glass-border);
  opacity: 0; transform: translateX(14px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
}
.la-item.in { opacity: 1; transform: none; }
.la-item .la-icon { flex-shrink: 0; font-size: 0.95rem; }
.la-item strong { color: var(--text); font-weight: 600; }
.la-item.la-ok { border-color: rgba(37,211,102,0.3); background: linear-gradient(150deg, rgba(37,211,102,0.07), rgba(12,17,30,0.5)); color: rgba(190,245,210,0.92); }
.la-item.la-data { border-color: rgba(56,217,217,0.26); }

/* Récap final WhatsApp */
.live-recap {
  margin-top: 12px; border-radius: 16px; padding: 13px 14px;
  background: linear-gradient(150deg, rgba(37,211,102,0.08), rgba(12,17,30,0.7));
  border: 1px solid rgba(37,211,102,0.3);
  box-shadow: 0 14px 36px -16px rgba(0,0,0,0.7);
  opacity: 0; transform: translateY(12px) scale(0.97);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.live-recap.show { opacity: 1; transform: none; }
html:not(.js) .live-recap { opacity: 1; transform: none; } /* visible sans JS */
.lr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.lr-wa {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wa);
}
.lr-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lr-body { font-size: 0.84rem; color: var(--muted); line-height: 1.6; }
.lr-body strong { color: var(--text); }
.lr-ok { color: var(--wa); font-weight: 700; }

@media (max-width: 880px) {
  .live-grid { grid-template-columns: 1fr; }
  .lc-transcript { min-height: 250px; max-height: 290px; }
  .live-replay { position: static; align-self: flex-end; margin-bottom: 14px; }
  .live-stage { display: flex; flex-direction: column; }
}

/* ─── 4. CAPACITÉS ──────────────────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1200px; }
.feature-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px 20px; border-radius: 20px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(56,217,217,0.05), transparent 55%),
    linear-gradient(155deg, rgba(20,28,46,0.72), rgba(12,17,30,0.78));
  border: 1px solid rgba(255,255,255,0.09);
  /* ⚠️ tilt 3D piloté par le JS (ressort) — ne PAS animer transform en CSS */
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.feature-card:hover { border-color: rgba(56,217,217,0.32); box-shadow: 0 22px 50px -26px rgba(0,0,0,0.7); }
.feature-card-gold { background: linear-gradient(150deg, rgba(212,175,96,0.07), rgba(12,17,30,0.6)); border-color: var(--gold-line); }
.feature-card-gold:hover { border-color: rgba(212,175,96,0.45); }
.feature-card-cyan { background: linear-gradient(150deg, rgba(56,217,217,0.06), rgba(12,17,30,0.6)); border-color: rgba(56,217,217,0.2); }
.feature-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan); background: var(--cyan-dim); border: 1px solid rgba(56,217,217,0.28);
}
.feature-icon-gold { color: var(--gold-bright); background: var(--gold-dim); border-color: rgba(212,175,96,0.32); }
.feature-icon-red { color: var(--red); background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); }
.feature-card h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.feature-card p { font-size: 0.87rem; color: var(--muted); line-height: 1.62; flex: 1; }
.feature-card p strong { color: var(--text); }

/* Mini-démo animée dans chaque carte : chip → flèche → résultat (boucle douce) */
.fc-demo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  min-height: 42px;
}
.fcd-chip {
  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: var(--muted);
}
.fcd-ok { color: var(--wa); background: var(--wa-dim); border-color: rgba(37,211,102,0.3); }
.fcd-mute { color: var(--muted2); }
.fcd-arrow { position: relative; width: 26px; height: 1px; background: rgba(255,255,255,0.12); flex-shrink: 0; overflow: visible; }
.fcd-arrow::after {
  content: ''; position: absolute; top: -2px; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 7px var(--cyan);
  animation: fcd-travel 2.2s ease-in-out infinite;
}
@keyframes fcd-travel { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 22px; opacity: 0; } }
/* Le résultat « respire » en phase avec le point qui voyage */
.fcd-ok, .fcd-mute { animation: fcd-glow 2.2s ease-in-out infinite; }
@keyframes fcd-glow { 0%, 60% { box-shadow: none; } 85% { box-shadow: 0 0 14px rgba(37,211,102,0.3); } 100% { box-shadow: none; } }
@media (max-width: 980px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }

/* AL4 (vague 13) — 11 cartes créaient un « trou » sur la dernière rangée (3 colonnes, 11 = 3+3+3+2).
   Ajout de 2 cartes (13 total) + repli par défaut sur 6 (2 rangées propres) : rangée suivante (7-9)
   visible en fondu dégressif (aperçu), le reste (10-13) masqué, jusqu'au clic « Voir plus ». */
.features-grid.fc-collapsed .feature-card:nth-child(n+7):nth-child(-n+9) {
  opacity: 0.32; filter: saturate(0.75); pointer-events: none; transition: opacity 0.5s ease, filter 0.5s ease;
}
.features-grid.fc-collapsed .feature-card:nth-child(n+10) { display: none; }
.features-grid:not(.fc-collapsed) .feature-card { opacity: 1; filter: none; pointer-events: auto; }
/* R9362 — MOBILE (1 colonne) : 3 cartes grisées empilées = moche. À la place : UNE SEULE carte
   d'aperçu (la 7e) en fondu PROGRESSIF vertical (haut opaque → bas ombré via mask-image), les
   autres masquées → invite au « Voir plus » proprement. Desktop inchangé. */
@media (max-width: 640px) {
  .features-grid.fc-collapsed .feature-card:nth-child(7) {
    opacity: 1; filter: none; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 26%, rgba(0,0,0,0.28) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 26%, rgba(0,0,0,0.28) 78%, transparent 100%);
  }
  .features-grid.fc-collapsed .feature-card:nth-child(n+8) { display: none; }
}
/* Carte 13 seule en dernière rangée (13 = 3×4+1) une fois déplié → centrée plutôt que collée à gauche */
@media (min-width: 981px) {
  .features-grid:not(.fc-collapsed) .feature-card:last-child:nth-child(3n+1) { grid-column: 2; }
}
.fc-more-wrap { display: flex; justify-content: center; margin: 8px 0 28px; }
.fc-more-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 10px 22px; font-size: 0.86rem; font-weight: 600; color: var(--muted);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.fc-more-btn:hover { border-color: rgba(56,217,217,0.4); color: var(--text); background: rgba(56,217,217,0.06); }
.fc-more-btn .caps-chev { transition: transform 0.3s ease; }
.fc-more-btn[aria-expanded="true"] .caps-chev { transform: rotate(180deg); }

/* ─── 5. CONNECTEZ VOS DONNÉES — robot + chips absorbées ────────────────── */
.data-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.data-copy h2 { margin-bottom: 18px; }
.data-points { margin: 26px 0 18px; display: flex; flex-direction: column; gap: 13px; }
.data-points li { display: flex; align-items: baseline; gap: 11px; font-size: 0.93rem; color: var(--muted); line-height: 1.6; }
.data-points strong { color: var(--text); }
.mp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--cyan), var(--gold)); transform: translateY(-1px); }
/* R2450 — pastille premium (verre + filet doré dégradé, fini le jaune plat « immonde ») */
.data-note {
  position: relative; margin-bottom: 28px; padding: 15px 18px; border-radius: 15px;
  font-size: 0.9rem; color: #f3e6c4; line-height: 1.65;
  background: linear-gradient(140deg, rgba(212,175,96,0.10), rgba(124,92,255,0.06));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 10px 30px -14px rgba(212,175,96,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.data-note::before {
  content: ''; position: absolute; inset: 0; border-radius: 15px; padding: 1px;
  background: linear-gradient(140deg, rgba(230,196,120,0.7), rgba(124,92,255,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.data-note strong { color: #fff7e2; }

.data-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.data-robot-zone { position: relative; width: min(420px, 100%); min-height: 400px; display: flex; align-items: center; justify-content: center; }

/* Chips sources de données — flottent autour de l'agent, un flux « s'absorbe »
   périodiquement vers le centre (point lumineux par chip, décalé en cascade) */
.data-chip {
  position: absolute; z-index: 3;
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(13,18,32,0.85); border: 1px solid rgba(56,217,217,0.25); color: var(--muted);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.8);
  animation: chip-bob 5.5s ease-in-out infinite;
}
.data-chip::after {
  /* point de données qui « part » vers le plexus du robot (vecteur --dx/--dy inverse) */
  content: ''; position: absolute; top: 50%; left: 50%; z-index: -1;
  width: 6px; height: 6px; border-radius: 50%; margin: -3px 0 0 -3px;
  background: var(--cyan-orb); box-shadow: 0 0 9px rgba(31,213,249,0.8);
  opacity: 0;
  animation: chip-feed 4.8s ease-in infinite;
}
/* Le vecteur d'absorption = l'opposé de la position de la chip (--dx/--dy posés dans le HTML) */
@keyframes chip-feed {
  0%, 55%  { transform: translate(0, 0) scale(1); opacity: 0; }
  60%      { opacity: 0.95; }
  88%      { transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(0.5); opacity: 0.6; }
  92%, 100%{ transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(0.3); opacity: 0; }
}
@keyframes chip-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
/* Position de chaque chip = centre + (--dx,--dy) ; cascade des flux */
.data-chip { top: 50%; left: 50%; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)); }
.dc-1 { animation-delay: 0.2s; } .dc-1::after { animation-delay: 0s; }
.dc-2 { animation-delay: 1.1s; } .dc-2::after { animation-delay: 0.8s; }
.dc-3 { animation-delay: 0.6s; } .dc-3::after { animation-delay: 1.6s; }
.dc-4 { animation-delay: 1.6s; } .dc-4::after { animation-delay: 2.4s; }
.dc-5 { animation-delay: 0.9s; } .dc-5::after { animation-delay: 3.2s; }
.dc-6 { animation-delay: 0.4s; } .dc-6::after { animation-delay: 4.0s; }

.data-caption { font-size: 0.86rem; color: var(--muted2); text-align: center; font-style: italic; }

@media (max-width: 920px) {
  .data-layout { grid-template-columns: 1fr; }
  .data-robot-zone { min-height: 360px; }
  .data-chip { font-size: 0.68rem; padding: 6px 10px; }
  /* on resserre les rayons sur mobile */
  .dc-1 { --dx: 92px !important; --dy: 78px !important; }
  .dc-2 { --dx: -98px !important; --dy: 62px !important; }
  .dc-3 { --dx: 88px !important; --dy: -56px !important; }
  .dc-4 { --dx: -92px !important; --dy: -72px !important; }
  .dc-5 { --dx: 112px !important; --dy: 12px !important; }
  .dc-6 { --dx: -114px !important; --dy: -6px !important; }
}

/* ─── ROBOT 2.5D — porté de vokali.app (eye-tracking + drag + réacteur) ──── */
.robot {
  /* R8710 — touch-action: pan-y → le scroll VERTICAL de la page passe toujours (jamais bloqué
     par le jouet draggable sur mobile) ; le drag reste dispo à la souris/pointeur. */
  position: relative; width: 200px; height: 290px; cursor: grab; touch-action: pan-y;
  will-change: transform; transform: translate3d(0,0,0); z-index: 2;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.5));
}
.robot.dragging { cursor: grabbing; }
/* R2450 — halo robot premium (or → violet, fini le blob cyan crade) */
.robot-halo { position: absolute; inset: -32% -22% -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(212,175,96,0.22), rgba(124,92,255,0.12) 46%, transparent 66%); filter: blur(10px);
  animation: robot-breathe 5.5s ease-in-out infinite; }
@keyframes robot-breathe { 0%,100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.robot-head {
  position: relative; width: 144px; height: 118px; margin: 0 auto; border-radius: 30px;
  background: linear-gradient(155deg, #16202f, #0c121d); border: 1px solid rgba(56,217,217,0.3);
  box-shadow: inset 0 2px 14px rgba(56,217,217,0.12), inset 0 -8px 22px rgba(0,0,0,0.5);
  transform: translateZ(0); transition: transform 120ms ease-out;
}
.robot-antenna { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 2px; height: 22px; background: linear-gradient(var(--cyan), transparent); }
.robot-antenna-dot { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: orb-pulse 2.4s ease-in-out infinite; }
.robot-face { position: absolute; inset: 19px 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-radius: 20px; background: radial-gradient(circle at 50% 40%, rgba(6,12,18,0.9), rgba(4,8,13,0.95)); border: 1px solid rgba(56,217,217,0.18); }
.robot-eyes { display: flex; gap: 23px; }
.robot-eye { position: relative; width: 29px; height: 29px; border-radius: 50%; background: rgba(56,217,217,0.1); border: 1px solid rgba(56,217,217,0.35); box-shadow: inset 0 0 10px rgba(56,217,217,0.2); display: flex; align-items: center; justify-content: center; }
.robot-pupil { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(56,217,217,0.5); transition: transform 90ms linear; }
.robot-mouth { width: 32px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); opacity: 0.85; }
.robot-ear { position: absolute; top: 44px; width: 10px; height: 30px; border-radius: 6px; background: linear-gradient(#16202f, #0c121d); border: 1px solid rgba(56,217,217,0.25); }
.robot-ear-l { left: -9px; } .robot-ear-r { right: -9px; }
.robot-body { position: relative; width: 116px; height: 120px; margin: 12px auto 0; border-radius: 26px 26px 32px 32px;
  background: linear-gradient(155deg, #131c2a, #0a1019); border: 1px solid rgba(56,217,217,0.22);
  box-shadow: inset 0 3px 16px rgba(56,217,217,0.1), inset 0 -10px 24px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
/* Réacteur « plexus » Iron Man (vokali.app R1885) : halo pulsé + anneau rotatif + orbe */
.tee-reactor { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
/* R2450 — halo + contour or (charte) au lieu du cyan ; un seul anneau « contour » conservé,
   plus de cercles concentriques parasites stressants. */
.tee-reactor::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,96,0.34) 0%, rgba(124,92,255,0.10) 48%, transparent 72%); filter: blur(3px); animation: tee-reactor-pulse 3.2s ease-in-out infinite; }
.tee-reactor::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(230,196,120,0.9), rgba(124,92,255,0.5), transparent 60%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); animation: tee-reactor-spin 4.4s linear infinite; }
.tee-reactor-orb { position: relative; width: 44px; height: 44px; filter: drop-shadow(0 2px 10px rgba(212,175,96,0.55)) drop-shadow(0 0 22px rgba(124,92,255,0.3)); }
.tee-label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; color: rgba(56,217,217,0.78); text-shadow: 0 0 12px rgba(56,217,217,0.5); animation: torso-pulse 2.6s ease-in-out infinite; pointer-events: none; user-select: none; }
.robot:hover .tee-label, .robot.dragging .tee-label { color: rgba(56,217,217,1); }
@keyframes torso-pulse { 0%,100% { opacity: 0.62; } 50% { opacity: 1; } }
@keyframes tee-reactor-pulse { 0%,100% { transform: scale(0.92); opacity: 0.7; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes tee-reactor-spin { to { transform: rotate(360deg); } }
.robot-hint { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted2); white-space: nowrap; opacity: 0; transition: opacity 220ms ease; }
.robot:hover .robot-hint { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tee-label, .tee-reactor::before, .tee-reactor::after, .data-chip, .data-chip::after { animation: none; }
  .robot-pupil { transform: none !important; }
}

/* ─── 6. COMMENT ÇA MARCHE ──────────────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; perspective: 1200px; }
.step-card {
  position: relative; padding: 36px 28px 28px; border-radius: 22px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(56,217,217,0.08), transparent 55%),
    linear-gradient(155deg, rgba(20,28,46,0.78), rgba(12,17,30,0.82));
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.step-card:hover { border-color: rgba(56,217,217,0.34); box-shadow: 0 22px 60px -26px rgba(56,217,217,0.3); }
.step-num {
  position: absolute; top: -16px; left: 26px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #1a1304;
  background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 28%, #B38728 52%, #FBF5B7 74%, #AA771C 100%);
  box-shadow: 0 6px 18px rgba(191,149,63,0.4);
}
.step-card h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.step-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.step-card em { color: var(--gold-bright); font-style: normal; }
.step-card strong { color: var(--text); }
.step-code {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600;
  color: var(--cyan); padding: 9px 15px; border-radius: 11px;
  background: rgba(56,217,217,0.07); border: 1px solid rgba(56,217,217,0.25);
}
.step-foot { margin-top: 13px; font-size: 0.78rem !important; color: var(--muted2) !important; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ─── 7. TARIFS ─────────────────────────────────────────────────────────── */
.billing-toggle {
  display: inline-flex; gap: 4px; margin-top: 30px; padding: 4px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border);
}
.bt-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 999px; border: none; background: transparent;
  font-size: 0.86rem; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.bt-opt.active { background: linear-gradient(135deg, rgba(56,217,217,0.16), rgba(212,175,96,0.1)); color: var(--text); box-shadow: 0 0 0 1px rgba(56,217,217,0.25); }
.bt-save { font-size: 0.68rem; font-weight: 700; color: #0d2b16; padding: 2px 8px; border-radius: 999px; background: var(--wa); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; perspective: 1400px; }
.pricing-card {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 28px 28px; border-radius: 24px;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.pricing-card:hover { border-color: rgba(255,255,255,0.18); }
.pricing-card-pop {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(56,217,217,0.1), transparent 60%),
    linear-gradient(160deg, rgba(20,28,46,0.85), rgba(12,17,30,0.9));
  border-color: rgba(56,217,217,0.35);
  box-shadow: 0 0 0 1px rgba(56,217,217,0.12), 0 30px 70px -30px rgba(56,217,217,0.3);
}
.pricing-card-pop:hover { border-color: rgba(56,217,217,0.55); }
/* BEAM — fin trait lumineux qui parcourt la bordure de la carte recommandée (vokali.app) */
@property --beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pricing-card-pop::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam-angle, 0deg), transparent 0deg, var(--cyan) 40deg, var(--gold) 80deg, transparent 120deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55; animation: beam-rotate 6s linear infinite;
}
@keyframes beam-rotate { to { --beam-angle: 360deg; } }
.pc-pop-badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: #1a1304;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 28%, #B38728 52%, #FBF5B7 74%, #AA771C 100%);
  box-shadow: 0 8px 22px rgba(191,149,63,0.45);
}
.pricing-card-pop { padding-top: 58px; }
.pricing-card h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.pc-for { font-size: 0.82rem; color: var(--muted2); margin-bottom: 22px; min-height: 2.4em; }
.pc-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.pc-amount { font-family: var(--font-display); font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.pc-eur { font-size: 1.5rem; font-weight: 700; color: var(--gold-bright); }
.pc-per { font-size: 0.82rem; color: var(--muted2); margin-left: 4px; }
.pc-quota { font-size: 0.9rem; color: var(--muted); margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pc-quota strong { color: var(--cyan); }
.pc-overage { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--muted2); }
.pc-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; flex: 1; }
.pc-features li { position: relative; padding-left: 24px; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.pc-features li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--cyan-dim); border: 1px solid rgba(56,217,217,0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d9d9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E");
  background-size: 8px; background-position: center; background-repeat: no-repeat;
}
.pc-features strong { color: var(--text); }
/* « Tout le plan X, plus : » — héritage explicite, jamais de feature grisée */
.pc-inherit { color: var(--gold-bright) !important; font-weight: 600; font-size: 0.8rem !important; padding-left: 0 !important; }
.pc-inherit::before { display: none; }
.pricing-foot { text-align: center; margin-top: 34px; font-size: 0.84rem; color: var(--muted2); }
.pricing-foot strong { color: var(--muted); }
@media (max-width: 920px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 30px; } }

/* ─── 8. MÉTIERS ────────────────────────────────────────────────────────── */
.verticals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; perspective: 1400px; }
.vertical-card {
  padding: 30px 28px; border-radius: 22px;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(212,175,96,0.06), transparent 55%),
    linear-gradient(155deg, rgba(20,28,46,0.72), rgba(12,17,30,0.78));
  border: 1px solid rgba(255,255,255,0.09);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.vertical-card:hover { border-color: rgba(212,175,96,0.4); }
.vertical-card-yours {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(56,217,217,0.09), transparent 60%),
    linear-gradient(155deg, rgba(20,28,46,0.85), rgba(12,17,30,0.9));
  border-color: rgba(56,217,217,0.3);
}
.vertical-card-yours:hover { border-color: rgba(56,217,217,0.5); }
.vc-emoji { font-size: 1.8rem; display: block; margin-bottom: 16px; }
.vertical-card h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.vertical-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.vertical-card p strong { color: var(--text); }
.vc-hook {
  margin-top: 14px; padding: 10px 14px; border-radius: 12px;
  font-size: 0.82rem !important; color: var(--gold-bright) !important;
  background: var(--gold-dim); border: 1px solid var(--gold-line);
}
.vc-hook a { font-weight: 700; }
.vc-hook a:hover { text-decoration: underline; }
@media (max-width: 720px) { .verticals-grid { grid-template-columns: 1fr; } }

/* ─── 8ter. POSITIONNEMENT HUMAIN (R8711) — augmente, ne remplace pas.
   Réutilise .vertical-card / .vc-emoji / .vc-hook ; ajoute une grille 3 colonnes,
   une variante « cœur » dorée et une ligne de clôture centrée. ─── */
.human-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1400px; }
.vertical-card-human {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,96,0.12), transparent 62%),
    linear-gradient(155deg, rgba(20,28,46,0.85), rgba(12,17,30,0.9));
  border-color: rgba(212,175,96,0.36);
}
.vertical-card-human:hover { border-color: rgba(212,175,96,0.55); }
.human-close {
  max-width: 760px; margin: 34px auto 0; text-align: center;
  font-size: 1.06rem; line-height: 1.7; color: var(--muted);
}
.human-close strong { color: var(--text); font-weight: 600; }
.human-close em { color: var(--gold-bright); font-style: normal; }
@media (max-width: 900px) { .human-grid { grid-template-columns: 1fr; } }

/* ─── 9. FAQ ────────────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border-radius: 16px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: border-color 240ms ease;
}
.faq-item[open] { border-color: rgba(56,217,217,0.3); background: rgba(56,217,217,0.025); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px;
  font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em;
  transition: color 180ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex-shrink: 0; width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af60' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-bright); }
.faq-item p { padding: 0 22px 21px; font-size: 0.9rem; color: var(--muted); line-height: 1.7; }
.faq-item p strong { color: var(--text); }
.faq-item code { font-family: var(--font-mono); font-size: 0.84em; color: var(--cyan); background: rgba(56,217,217,0.08); border: 1px solid rgba(56,217,217,0.2); border-radius: 6px; padding: 1px 7px; }
.faq-item em { color: var(--gold-bright); font-style: normal; }

/* ─── CTA / ACCÈS ANTICIPÉ ──────────────────────────────────────────────── */
.section-early { padding-top: 60px; }
.early-card {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px);
  border-radius: 30px;
  background:
    radial-gradient(ellipse 80% 90% at 50% -10%, rgba(56,217,217,0.12), transparent 60%),
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(212,175,96,0.1), transparent 60%),
    linear-gradient(165deg, rgba(18,25,42,0.9), rgba(10,14,24,0.95));
  border: 1px solid var(--gold-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 50px 110px -40px rgba(0,0,0,0.85);
}
/* Orbe libre fondue derrière le CTA (pattern vokali.app) */
.cta-orb-wrap { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cta-orb-wrap canvas { width: 100%; height: 100%; opacity: 0.85; }
/* Scrim de contraste : le texte reste parfaitement lisible par-dessus l'orbe */
.early-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 55% at 50% 50%, rgba(8,11,18,0.62), transparent 100%);
}
.early-rings { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; z-index: 1; }
.early-rings .pulse-ring { top: 50%; }
.early-card > .eyebrow, .early-card > h2, .early-card > .section-sub,
.early-card > .early-form, .early-card > .early-feedback, .early-card > .early-note { position: relative; z-index: 2; }
.early-card h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 16px; text-shadow: 0 2px 22px rgba(4,7,12,0.9); }
.early-card .section-sub { max-width: 52ch; margin: 0 auto 34px; text-shadow: 0 1px 14px rgba(4,7,12,0.9); }
.early-form {
  display: flex; gap: 10px; justify-content: center;
  max-width: 520px; margin: 0 auto 14px;
}
.early-form input {
  flex: 1; min-width: 0; height: 52px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--glass-border);
  background: rgba(8,11,18,0.7); color: var(--text);
  font: inherit; font-size: 0.92rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.early-form input::placeholder { color: var(--muted2); }
.early-form input:focus { outline: none; border-color: rgba(56,217,217,0.5); box-shadow: 0 0 0 3px rgba(56,217,217,0.12); }
.early-form input[aria-invalid="true"] { border-color: rgba(248,113,113,0.6); }
.early-form .btn { height: 52px; }
.early-feedback { min-height: 1.4em; font-size: 0.86rem; font-weight: 600; }
.early-feedback.ok { color: var(--wa); }
.early-feedback.err { color: var(--red); }
.early-note { font-size: 0.76rem; color: var(--muted2); margin-top: 6px; }
@media (max-width: 560px) {
  .early-form { flex-direction: column; }
  .early-form .btn { width: 100%; }
}

/* ─── CARTES MAGNÉTIQUES 3D « niveau vokali.app » (R1875) ───────────────────
   Le tilt 3D + scale vient du JS (ressort) ; on N'anime PAS transform en CSS
   (sinon ça fight le JS — bug « cartes mortes » R1876). Glare directionnel
   injecté par le JS (span.card-glare). */
.magnetic-3d { transform-style: preserve-3d; will-change: transform; }
.feature-card.magnetic-3d > *:not(.card-glare),
.vertical-card.magnetic-3d > *:not(.card-glare),
.step-card.magnetic-3d > *:not(.card-glare) { transform: translateZ(24px); }
.card-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 220ms ease; z-index: 2; mix-blend-mode: screen;
}

/* ─── FOOTER ────────────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--line); margin-top: 40px; background: rgba(6,9,15,0.6); }
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 64px clamp(16px, 4vw, 48px) 40px;
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr 1fr 1fr;
  gap: 40px clamp(24px, 3vw, 44px);
  align-items: start;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-brand { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }
.footer-brand-tag { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--gold); letter-spacing: 0.02em; }
.footer-tagline { font-size: 0.86rem; color: var(--muted); line-height: 1.6; max-width: 36ch; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foot-badge {
  font-size: 0.74rem; font-weight: 600; color: rgba(230,238,252,0.85);
  padding: 6px 13px; border-radius: 999px;
  background: rgba(13,18,32,0.6); border: 1px solid var(--gold-line);
}
.footer-head { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.footer-col a { font-size: 0.86rem; color: var(--muted); transition: color 160ms ease; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-legal {
  max-width: var(--max); margin: 0 auto;
  padding: 22px clamp(16px, 4vw, 48px) 36px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.footer-legal p { font-size: 0.74rem; color: var(--muted2); line-height: 1.6; }
@media (max-width: 1040px) {
  .footer-inner { grid-template-columns: repeat(4, 1fr); }
  .footer-col-brand { grid-column: 1 / -1; max-width: 44ch; }
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px clamp(20px, 5vw, 40px); }
  .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ═══ ÉCOSYSTÈME ALLINMYAPP + MACBOOK 3D (R2412) ═══ */
.section-eco { background: radial-gradient(900px circle at 80% 10%, var(--violet-dim), transparent 60%); }
.eco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.eco-kicker { display: inline-block; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-bright); margin-bottom: 14px; }
.eco-copy h2 em { font-style: normal; background: linear-gradient(110deg, var(--gold), var(--violet-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.eco-copy p { color: var(--muted); line-height: 1.7; font-size: clamp(1rem, 2vw, 1.1rem); margin-top: 8px; }
.eco-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.eco-link { font-size: 0.86rem; font-weight: 600; padding: 0.5rem 0.95rem; border-radius: 0.6rem; border: 1px solid var(--glass-border); color: var(--text); background: var(--glass); transition: all 0.2s; }
.eco-link:hover { border-color: var(--violet); color: var(--violet-bright); transform: translateY(-1px); }
.eco-link-primary { border-color: var(--violet); background: var(--violet-dim); color: var(--violet-bright); }

/* MacBook 3D — perspective + écran app écosystème */
.eco-device { display: flex; flex-direction: column; align-items: center; perspective: 1400px; }
.macbook { width: min(440px, 92%); transform: rotateX(12deg) rotateZ(-3deg); transform-style: preserve-3d; }
.macbook-screen { aspect-ratio: 16 / 10; border-radius: 16px 16px 4px 4px; background: #05070d; border: 2px solid rgba(124,92,255,0.35); box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 40px -10px var(--violet-dim); overflow: hidden; }
.macbook-base { height: 14px; width: 116%; margin: 0 -8% ; border-radius: 0 0 14px 14px; background: linear-gradient(#1a2233, #0c121d); box-shadow: 0 16px 30px rgba(0,0,0,0.5); position: relative; }
.macbook-base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22%; height: 5px; border-radius: 0 0 7px 7px; background: rgba(0,0,0,0.45); }
.mb-app { display: grid; grid-template-columns: 96px 1fr; height: 100%; font-size: 0.62rem; }
.mb-side { background: rgba(124,92,255,0.06); border-right: 1px solid var(--glass-border); padding: 12px 8px; display: flex; flex-direction: column; gap: 9px; }
.mb-item { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.mb-item.mb-on { color: var(--violet-bright); font-weight: 700; }
.mb-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.mb-item.mb-on .mb-dot { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.mb-main { padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.mb-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; padding: 9px 10px; color: var(--text); }
.mb-card-glow { border-color: var(--violet); box-shadow: 0 0 22px -6px var(--violet); color: var(--violet-bright); font-weight: 600; }
.eco-device-cap { margin-top: 26px; font-size: 0.82rem; color: var(--muted2); text-align: center; }
@media (max-width: 860px) { .eco-grid { grid-template-columns: 1fr; gap: 36px; } .macbook { transform: rotateX(8deg); } }

/* ═══ HERO 2 COLONNES PREMIUM (R2412 refonte — robot signature + matrice) ═══ */
.hero-grid { max-width: 1180px; width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; text-align: left; }
.hero-grid::before { display: none !important; }   /* retire le glow centré hérité */
.hero-main { display: flex; flex-direction: column; align-items: flex-start; max-width: 600px; }
.hero-main .hero-title { text-align: left; font-size: clamp(2.6rem, 6vw, 5.4rem); }
.hero-main .hero-sub { text-align: left; }
.hero-main .hero-actions { justify-content: flex-start; }
.hero-main .hero-proof { justify-content: flex-start; flex-wrap: wrap; }
.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.hero-visual .robot { margin: 0 auto; }
.hero-visual .hero-call-card { margin: 0; width: 100%; max-width: 430px; }
/* Matrice plus présente + halo doré/violet derrière le robot */
.hero-dots { opacity: 0.72; }
.hero-visual::before { content: ''; position: absolute; top: 8%; left: 50%; width: 360px; height: 360px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(124,92,255,0.16), rgba(212,175,96,0.07) 45%, transparent 70%); filter: blur(10px); }
.hero-visual .robot, .hero-visual .hero-call-card { position: relative; z-index: 1; }
/* R6320 — badge de statut discret au-dessus du robot (occupe l'espace vide sans surcharger) */
.hero-agent-badge {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 9999px;
  background: linear-gradient(158deg, rgba(30,26,16,0.72), rgba(16,14,10,0.78));
  border: 1px solid rgba(212,175,96,0.28);
  box-shadow: inset 0 1px 0 rgba(246,231,176,0.14), 0 10px 30px -18px rgba(212,175,96,0.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12.5px; letter-spacing: 0.01em; color: rgba(233,224,204,0.9);
  animation: hab-float 6s ease-in-out infinite;
}
.hero-agent-badge .hab-text strong { color: var(--gold-bright, #f6e7b0); font-weight: 700; }
.hero-agent-badge .hab-text sup { font-size: 0.62em; }
.hab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan, #38d9d9);
  box-shadow: 0 0 10px var(--cyan, #38d9d9), 0 0 0 0 rgba(56,217,217,0.5); flex-shrink: 0;
  animation: hab-pulse 2.4s ease-in-out infinite; }
@keyframes hab-pulse { 0%,100% { box-shadow: 0 0 10px rgba(56,217,217,0.9), 0 0 0 0 rgba(56,217,217,0.45); }
  50% { box-shadow: 0 0 14px rgba(56,217,217,1), 0 0 0 6px rgba(56,217,217,0); } }
@keyframes hab-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .hero-agent-badge, .hab-dot { animation: none; } }
@media (max-width: 900px) {
  /* G342 §12 — minmax(0,1fr) : la track ne s'élargit JAMAIS au-delà du viewport, même si un
     enfant a une largeur intrinsèque plus grande (canvas, carte, mot réservé) → hero centré. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; text-align: center; justify-items: center; }
  .hero-main { align-items: center; max-width: min(640px, 100%); }
  .hero-main .hero-title, .hero-main .hero-sub { text-align: center; }
  .hero-main .hero-actions, .hero-main .hero-proof { justify-content: center; }
  .hero-visual { order: 2; max-width: 100%; }
  .hero-visual .hero-call-card { max-width: min(430px, 100%); }
}
/* Cœur d'absorption (section Vos données) — orbe or→violet, les chips convergent dessus */
.data-core { display: grid; place-items: center; width: 150px; height: 150px; }
.tee-reactor-lg { width: 120px; height: 120px; }
.tee-reactor-lg .tee-reactor-orb { width: 120px; height: 120px; }
.tee-reactor-lg::before { inset: -22px; }
.tee-reactor-lg::after { inset: -8px; }

/* ═══ MATRICE hero (pluie de glyphes) ═══ */
.hero-matrix { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.40; z-index: 0; pointer-events: none; }

/* ═══ RÉACTEUR ROBOT riche (orbe plasma + 2 anneaux) — arc reactor Iron Man ═══ */
/* C5 (R9393) — RESTAURATION du robot d'origine : le réacteur revient EN HAUT du torse (arc reactor,
   top:30px) et à sa taille d'origine (46px), comme AVANT l'orbe R8710. L'orbe plasma WebGL (enfant)
   suit donc à 46px, discrète, en haut de poitrine → elle ne recouvre plus le corps ni la marque
   « TOUCH ME » (bottom:13px) et ne « casse » plus le robot. */
/* R9475 — orbe torse recentrée, un poil plus haute (Loris run 15 item 5) */
.robot-reactor { position: absolute; top: 27px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; display: grid; place-items: center; }
/* R8710 — vraie orbe plasma WebGL au cœur du réacteur (même moteur que le site, teinte cyan).
   Masque radial = disque net. Les anneaux (DOM après) restent par-dessus → look arc reactor. */
.robot-torso-orb-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 72%);
  opacity: 0; transition: opacity 0.5s ease;
  filter: drop-shadow(0 0 10px rgba(56,217,217,0.45));
}
.robot-reactor.orb-on .robot-torso-orb-canvas { opacity: 1; }
/* orbe plasma active → on éteint le cœur CSS (fallback), l'orbe le remplace ; anneaux gardés */
.robot-reactor.orb-on .robot-core { opacity: 0; transition: opacity 0.5s ease; }
/* R9362 — fallback CSS (WebGL indisponible OU prefers-reduced-motion) : PLUS de blanc cramé.
   Orbe bleu/cyan AlloKali doux, taille contrôlée, luminosité maîtrisée → rendu propre même sans WebGL. */
.robot-core { width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #a7d8ff 8%, #3d7fe0 46%, #123a7a 100%);
  box-shadow: 0 0 14px rgba(56,127,224,0.5), 0 0 26px rgba(37,99,235,0.28), inset 0 0 7px rgba(150,200,255,0.4);
  animation: robot-breathe 4s ease-in-out infinite; }
.robot-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.robot-ring-1 { inset: -2px; background: conic-gradient(from 0deg, transparent, rgba(212,175,96,0.9), transparent 50%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%);
  animation: tee-reactor-spin 5.5s linear infinite; }
.robot-ring-2 { inset: 4px; background: conic-gradient(from 180deg, transparent, rgba(124,92,255,0.95), transparent 45%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%);
  animation: tee-reactor-spin 3.6s linear infinite reverse; }
.robot-torso-mark { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(124,92,255,0.6); text-shadow: 0 0 10px rgba(124,92,255,0.45); pointer-events: none; user-select: none; }
.robot:hover .robot-torso-mark, .robot.dragging .robot-torso-mark { color: rgba(155,134,255,0.95); }

/* ═══ COPY marketing : rouge sang (problèmes) + vert (résolu) ═══ */
.txt-blood { color: #ff3b3b; }
.stats-legend { text-align: center; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 28px 0 12px; }
.stats-legend-bad { color: #ff4444; }
.stats-legend-good { color: #25d366; }
/* R2450 v4 — chiffres NETS : rouge sang (négatif) + vert naturel sombre (positif), AUCUN halo/glow */
.stat-bad .stat-num { background: none !important; -webkit-text-fill-color: #d61f2b !important; color: #d61f2b !important; text-shadow: none; }
.stat-good .stat-num { background: none !important; -webkit-text-fill-color: #1f9d57 !important; color: #1f9d57 !important; text-shadow: none; }
/* cartes : liseré coloré net, sans glow lumineux */
.stat-bad { border-color: rgba(214,31,43,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.stat-bad:hover { border-color: rgba(214,31,43,0.55); }
.stat-good { border-color: rgba(31,157,87,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.stat-good:hover { border-color: rgba(31,157,87,0.6); }

/* Texte dégradé or→violet (accents écosystème) */
/* R2450 — or métallique riche (fini le jaune→violet plat « dégueu ») */
.kk-grad-text { background: linear-gradient(100deg, #fff3cf 0%, #f1d182 22%, #e6b94f 46%, #f3d98a 68%, #c9982f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255,245,200,0.4)) drop-shadow(0 2px 10px rgba(212,175,96,0.25)); }

/* ═══ ROBOT 3D SPLINE (le vrai) + masquage du fallback CSS quand chargé ═══ */
.agents-robot-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; width: 100%; }
/* AL2 (vague 13) — l'orbe était centrée sur .agents-robot-stage (inset symétrique = centre à 50%
   de la hauteur), MAIS le robot (.robot, 290px) contient tête (118px, en haut) + corps (120px,
   en dessous) → le centre visuel de la TÊTE est ~26% de la hauteur du stage, pas 50%. L'orbe
   tombait donc bien plus bas que la tête. Recentrée sur la tête + agrandie (~+15%). */
.hero-robot-orb-glow { position: absolute; inset: -18% 9% 29% 9%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(37,99,235,0.22) 0%, rgba(37,99,235,0.08) 46%, transparent 72%);
  filter: blur(18px); animation: hero-robot-orb-breathe 4.6s ease-in-out infinite; }
/* AL2 fix (vague 13) — un <canvas> est un élément remplacé : SANS width/height explicites, il
   s'affiche à sa taille intrinsèque (300×150 par défaut), ancré en haut-gauche via inset (top/left
   respectés), et IGNORE bottom/right pour son DIMENSIONNEMENT → mesuré : centre du canvas 91px
   plus haut que la tête alors que le halo/glow (div, non-remplacé, s'étire correctement via
   inset) lui était bien centré. `width:100%` en % d'un absolu se résout contre le CONTENEUR
   (le stage), pas contre la boîte inset → inutilisable ici. Fix robuste : position par
   centre (left/top + translate(-50%,-50%), même recette que .bi-orb) + taille explicite carrée
   (vrai cercle sous le masque radial, au lieu d'une ellipse 300×150 accidentelle). */
.hero-robot-orb-canvas { position: absolute; left: 50%; top: 26%; transform: translate(-50%,-50%);
  width: clamp(200px,24vw,270px); height: clamp(200px,24vw,270px); z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 74%); opacity: 0.85; }
@keyframes hero-robot-orb-breathe { 0%,100% { transform: scale(0.97); opacity: 0.78; } 50% { transform: scale(1.05); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-robot-orb-glow { animation: none; } }
/* R8710 — le robot CSS est désormais LE robot (Spline désactivé : contexte WebGL qui saturait
   + échouait « Could not create a WebGL context » → robot invisible jusqu'à 10 s sur mobile).
   Visible IMMÉDIATEMENT, plus d'attente ni de dépendance externe unpkg/spline. */
.agents-robot-stage .robot { opacity: 1; transition: opacity 0.6s ease; }
.agents-robot-stage.spline-failed .robot { opacity: 1; }
.spline-robot-wrap { position: absolute; inset: -6% -4%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.7s ease; z-index: 2; }
.spline-robot-wrap.ready { opacity: 1; }
.spline-robot { width: 100%; height: 100%; min-height: 360px; }
.agents-robot-stage.spline-active .robot { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }

/* ════════════════════════════════════════════════════════════════════════
   X100 DESIGN — upgrades premium (audit Vokali/AllInMyApp 16/06)
   Overrides en fin de fichier = priorité. Or rayonnant, scrim, cartes feu,
   séparateurs, iridescent, ombres chaleureuses, espacements, bouton or.
   ════════════════════════════════════════════════════════════════════════ */

/* #1 — Titre OR RAYONNANT (relief massif embossé) */
/* R2450 v3 — OR LIQUIDE clair & lumineux (remplace les stops sombres #8a6d1f + l'ombre
   noire 0.85 qui faisaient « WordArt cheap »). Balayage shine + halo doux, zéro emboss noir. */
.hero-line-grad {
  /* R2462 — BLEU secondaire AlloKali #2563eb→#60a5fa (remplace le grad-iris gold). */
  background: linear-gradient(100deg, #9cc6ff 0%, #60a5fa 24%, #2563eb 50%, #4f93f6 74%, #9cc6ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)) drop-shadow(0 3px 22px rgba(37,99,235,0.18));
  animation: line-reveal 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) forwards, hero-gold-shine 7s 1.4s ease-in-out infinite;
}
@keyframes hero-gold-shine { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
@media (prefers-reduced-motion: reduce) { .hero-line-grad { animation: line-reveal 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) forwards; } }

/* #2 — Scrim de lisibilité (radial protecteur derrière le titre) */
.hero-content::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -8% -14% 28%;
  background: radial-gradient(ellipse 58% 52% at 50% 42%, rgba(8,11,18,0.82) 0%, rgba(8,11,18,0.46) 38%, transparent 72%);
  display: block !important;
}
.hero-grid::before { display: none !important; }

/* #5 — Dégradé iridescent (titres de section em) */
/* R2450 v4 — fini le violet+turquoise « ignoble ». Or métallique chaud harmonieux. */
:root { --grad-iris: linear-gradient(100deg, #fff7df 0%, #f4dca0 18%, #e9c879 38%, #fbeec0 56%, #dcb15f 78%, #cda24e 100%); }
.section-head h2 em, .section h2 em {
  background: var(--grad-iris); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal;
}

/* #3 + #6 — Cartes premium (feu au coin + ombre chaleureuse décentrée) */
.feature-card, .pricing-card, .stat-card {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(212,175,96,0.16), transparent 55%),
    radial-gradient(ellipse at 0% 0%, rgba(124,92,255,0.07), transparent 55%),
    linear-gradient(155deg, rgba(20,28,46,0.72), rgba(12,17,30,0.82));
  border: 1px solid rgba(212,175,96,0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 22px 50px -28px rgba(0,0,0,0.75);
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.feature-card:hover, .pricing-card:hover {
  border-color: rgba(212,175,96,0.45); transform: translateY(-3px);
  box-shadow: 0 28px 70px -30px rgba(212,175,96,0.36), 0 1px 0 rgba(255,255,255,0.07) inset, 0 0 0 1px rgba(212,175,96,0.28);
}

/* #4 — Séparateurs de section — CANONIQUE UNIFIÉ R6320 (1px · long · dégradé or qui s'éteint aux extrémités · zéro halo) */
.section { position: relative; }
.section + .section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(78%, 720px); height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,96,0.35) 25%, rgba(246,231,176,0.72) 50%, rgba(212,175,96,0.35) 75%, transparent 100%);
}

/* #8 — Espacements généreux (respiration) */
.section { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.section-head { margin-bottom: clamp(40px, 6vw, 64px); }
.hero-main .hero-title { margin-bottom: 30px; }

/* #9 — Bouton primaire OR massif (inset + reflet sheen) */
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fcf6ba 0%, #e8c56a 38%, #d4af60 62%, #bf953f 100%); color: #1a1408;
  box-shadow: 0 0 0 1px rgba(212,175,96,0.4), 0 16px 40px rgba(212,175,96,0.26), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 6px rgba(120,80,10,0.4);
}
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -120%; width: 60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent); transform: skewX(-18deg);
}
.btn-primary:hover { transform: translateY(-2px); filter: none;
  box-shadow: 0 0 0 1px rgba(212,175,96,0.55), 0 24px 48px rgba(212,175,96,0.36), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn-primary:hover::after { animation: btn-sheen 0.9s ease; }
@keyframes btn-sheen { from { left: -120%; } to { left: 150%; } }

/* ════════════════════════════════════════════════════════════════════════════
   R2450 — PERFECTION HALO KALI : intro welcome · scroll-top · cartes magnétiques · bouton or
   ════════════════════════════════════════════════════════════════════════════ */

/* ── INTRO MATRICE WELCOME ─────────────────────────────────────────────────── */
.hk-welcome {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #0a0e18 0%, #06080e 70%);
  opacity: 0; transition: opacity 0.6s ease; overflow: hidden;
}
.hk-welcome.in { opacity: 1; }
.hk-welcome.out { opacity: 0; }
.hk-welcome-rain { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent);
  opacity: 0.5; }
.hk-welcome-center { position: relative; z-index: 2; text-align: center; padding: 0 26px; max-width: 920px;
  transform: translateY(10px); animation: hk-welcome-rise 0.9s 0.15s cubic-bezier(0.22,1,0.36,1) forwards; opacity: 0; }
@keyframes hk-welcome-rise { to { opacity: 1; transform: translateY(0); } }
/* R8580 — ré-ordonné (Loris) : titre d'abord, PUIS petite ligne dorée, PUIS ce tag EN DESSOUS
   (ex-.hk-welcome-eyebrow, qui vivait au-dessus du titre — moins logique). */
.hk-welcome-line { display: block; width: 58px; height: 1.5px; margin: 20px auto 14px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e6c478 16%, #f6e7b0 50%, #cda24e 84%, transparent); opacity: 0.85; }
.hk-welcome-tagline { font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-bright); opacity: 0.9; }
.hk-welcome-title { font-family: var(--font-display); font-weight: 800; line-height: 1.02;
  font-size: clamp(1.6rem, 6vw, 4.2rem); letter-spacing: -0.04em;
  /* R2592 — « Bienvenue dans » en BLEU AlloKali (le brand « Allokali » garde l'or via .hk-welcome-brand) */
  background: linear-gradient(100deg, #9cc6ff 0%, #60a5fa 28%, #2563eb 52%, #4f93f6 76%, #9cc6ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(37,99,235,0.32));
  white-space: nowrap; /* R2456c — TOUJOURS sur une seule ligne (fini le reflow multi→une ligne) */ }
.hk-welcome-brand {
  background: linear-gradient(105deg, #fbf0b0 0%, #e6c478 30%, #d4af60 52%, #f3d98a 72%, #9b86ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 26px rgba(212,175,96,0.4)) drop-shadow(0 0 44px rgba(124,92,255,0.22));
  white-space: nowrap;
  /* R4527 — largeur RÉSERVÉE calée sur « AlloKali » (8 car.) : le décodage matrix change la métrique
     des glyphes → sans ça, toute la phrase centrée « Bienvenue dans » saute. inline-block + min-width
     + text-align:left = le mot animé occupe une largeur fixe, la phrase ne bouge plus. */
  display: inline-block; min-width: 5.6ch; text-align: left;
}
.hk-welcome-sub { margin: 22px auto 0; max-width: 36ch; font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: #c3cbe0; line-height: 1.6; }
.hk-welcome-sub strong { color: var(--gold-bright); font-weight: 700; }
.hk-welcome-skip { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 12px 26px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.96rem; letter-spacing: 0.01em;
  color: #1a1205; border: 1px solid rgba(255,240,190,0.7);
  background: linear-gradient(135deg, #f6e7b0, #e6c478 46%, #cda24e);
  box-shadow: 0 10px 30px -8px rgba(212,175,96,0.6), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hk-welcome-skip:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 16px 38px -8px rgba(212,175,96,0.7), inset 0 1px 0 rgba(255,255,255,0.8); }

/* ── BOUTON RETOUR EN HAUT ─────────────────────────────────────────────────── */
.hk-scrolltop {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--gold-bright); border: 1px solid var(--gold-line);
  background: rgba(6,8,14,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px -6px rgba(212,175,96,0.5);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, border-color 0.2s ease; }
.hk-scrolltop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hk-scrolltop:hover { transform: translateY(-3px) scale(1.06); border-color: rgba(212,175,96,0.6); background: rgba(212,175,96,0.14); }
@media (max-width: 640px) { .hk-scrolltop { bottom: 18px; right: 16px; width: 44px; height: 44px; } }

/* ── CARTES MAGNÉTIQUES (tilt 3D + glare) ──────────────────────────────────── */
.hk-mcard { transform-style: preserve-3d; transition: box-shadow 0.3s ease, border-color 0.3s ease; will-change: transform; }
.hk-mcard:hover { box-shadow: 0 26px 60px -22px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,96,0.25); }
.hk-mcard-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease; z-index: 2; mix-blend-mode: screen; }
/* R8643 (vague 12) — FIX magnétisme cassé/imperceptible : `.korp-plaque` (et toute carte magnétique
   qui a AUSSI la classe `.reveal`) hérite de `html.js .reveal { transition: opacity .65s, transform
   .65s cubic-bezier(...) }` — plus spécifique (2 classes) que `.hk-mcard`/`.korp-plaque` (1 classe) →
   CHAQUE frame du rAF magnétique se relance une transition CSS de 0.65s PAR-DESSUS le lissage JS déjà
   fait (lerp 0.18) → le tilt devient quasi invisible/à la traîne (prouvé : computed transition =
   « transform .65s cubic-bezier » sur .korp-plaque en prod, malgré `.hk-mcard`/`.korp-plaque` qui
   visaient un autre timing). `!important` reprend la main : SEULS box-shadow/border-color/opacity
   transitionnent en CSS, le `transform` est piloté ENTIÈREMENT par le rAF (déjà lissé) → réactivité
   immédiate + fluide, sur TOUTES les cartes magnétiques (pas seulement Kalikorp). */
.hk-mcard, .hk-mcard.reveal, .hk-mcard.reveal.in {
  transition: box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.5s ease !important; }

/* ── BOUTON OR PREMIUM (.btn-gold) — finition dorée travaillée ──────────────── */
.btn-gold {
  position: relative; overflow: hidden; border: 1px solid rgba(255,240,190,0.65); color: #1a1205;
  background: linear-gradient(135deg, #f6e7b0 0%, #e6c478 44%, #cda24e 100%);
  box-shadow: 0 12px 32px -10px rgba(212,175,96,0.6), inset 0 1px 0 rgba(255,255,255,0.7);
  font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.btn-gold::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-18deg); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -10px rgba(212,175,96,0.72), inset 0 1px 0 rgba(255,255,255,0.85); }
.btn-gold:hover::after { animation: btn-sheen 0.9s ease; }

/* ── R2450 — MODALE GLASSMORPHISME (détail capacité) ───────────────────────── */
.hk-modal-backdrop {
  position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 24px;
  background: rgba(4,6,12,0.66); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0; transition: opacity 0.3s ease;
}
.hk-modal-backdrop.in { opacity: 1; }
.hk-modal-card {
  position: relative; width: min(540px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 34px 30px 30px; border-radius: 22px; text-align: left;
  background: linear-gradient(155deg, rgba(22,28,42,0.92), rgba(10,13,22,0.94));
  border: 1px solid transparent; background-clip: padding-box;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(18px) scale(0.97); opacity: 0;
  transition: transform 0.36s cubic-bezier(0.22,1,0.36,1), opacity 0.36s ease;
}
.hk-modal-backdrop.in .hk-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.hk-modal-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 22px; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(230,196,120,0.6), rgba(124,92,255,0.4) 60%, rgba(56,217,217,0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.hk-modal-close {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; line-height: 1;
  color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--line); transition: all 0.2s ease;
}
.hk-modal-close:hover { color: #fff; background: rgba(255,255,255,0.12); transform: rotate(90deg); }
.hk-modal-icon { width: 52px; height: 52px; margin-bottom: 16px; }
.hk-modal-icon .feature-icon { width: 52px; height: 52px; }
.hk-modal-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.12; margin-bottom: 14px;
  background: linear-gradient(100deg, #fbf0b0, var(--gold-bright) 45%, var(--violet-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hk-modal-lead { font-size: 1.02rem; line-height: 1.62; color: var(--text); margin-bottom: 16px; }
.hk-modal-desc { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin-bottom: 24px; }
.hk-modal-desc strong { color: var(--gold-bright); }
.hk-modal-cta { display: inline-flex; }
@media (max-width: 560px) { .hk-modal-card { padding: 30px 20px 24px; } .hk-modal-title { font-size: 1.3rem; } }

/* ── R2450 — MacBook écosystème : maquette app premium adaptée centre d'appels ── */
.macbook-screen { display: flex; flex-direction: column; }
.mb-topbar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: linear-gradient(180deg, rgba(124,92,255,0.12), rgba(10,13,22,0.4)); border-bottom: 1px solid var(--glass-border); }
.mb-tl { width: 8px; height: 8px; border-radius: 50%; }
.mb-tl-r { background: #ff5f57; } .mb-tl-y { background: #febc2e; } .mb-tl-g { background: #28c840; }
.mb-winttl { margin-left: 8px; font-size: 0.56rem; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.mb-winttl-sep { color: var(--violet-bright); }
.mb-app { flex: 1; min-height: 0; }
.mb-ic { width: 14px; text-align: center; font-size: 0.72rem; filter: grayscale(0.1); }
.mb-item { letter-spacing: 0.01em; }
.mb-live { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; font-size: 0.6rem; color: var(--text);
  background: linear-gradient(120deg, rgba(46,230,118,0.12), rgba(124,92,255,0.06)); border: 1px solid rgba(46,230,118,0.3); }
.mb-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ee676; box-shadow: 0 0 0 0 rgba(46,230,118,0.6); animation: mb-live-pulse 1.8s ease-out infinite; }
.mb-live-t { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
@keyframes mb-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,230,118,0.55); } 70% { box-shadow: 0 0 0 7px rgba(46,230,118,0); } 100% { box-shadow: 0 0 0 0 rgba(46,230,118,0); } }
.mb-card-stat strong { color: #2ee676; }

/* ── R2450 v3 — ORBE DONNÉES plasma (remplace la sphère SVG « dégueulasse ») ── */
.data-core { position: relative; display: grid; place-items: center; width: 160px; height: 160px; }
.data-orb { position: relative; z-index: 2; width: 158px; height: 158px; display: block;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 72%); }
.data-orb-glow { position: absolute; inset: -26%; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(59,130,246,0.30), rgba(212,175,96,0.14) 46%, transparent 70%);
  filter: blur(13px); animation: robot-breathe 5.2s ease-in-out infinite; }
.data-orb-fallback { position: absolute; z-index: 2; width: 116px; height: 116px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 32%, #fff 2%, #fbf0b0 14%, #d4af60 44%, #8b5cf6 82%, #2a1d63 100%);
  box-shadow: 0 0 42px -6px rgba(212,175,96,0.55), inset -6px -9px 22px rgba(40,20,90,0.5), inset 6px 7px 16px rgba(255,255,255,0.4);
  animation: robot-breathe 4.6s ease-in-out infinite; }
.data-core.orb-on .data-orb-fallback { display: none; }

/* ── R2450 — TABLEAU COMPARATIF (Allokali vs concurrents) ──────────────────── */
/* R8641 (K8) — finitions : cadre doré net (comme AllInMyApp, sans copier), fond glass, lignes internes
   plus visibles, survol de ligne discret. */
.cmp-table-wrap { max-width: 1080px; margin: 8px auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px;
  border: 1px solid rgba(212,175,96,0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), rgba(10,13,20,0.4);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05); }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; font-size: 0.92rem; }
.cmp-table th, .cmp-table td { padding: 14px 14px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; transition: background 0.2s ease; }
.cmp-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--muted); background: rgba(255,255,255,0.02); position: sticky; top: 0; }
.cmp-table tbody tr:hover td:not(.cmp-win) { background: rgba(255,255,255,0.025); }
.cmp-row-label { text-align: left !important; color: var(--text); font-weight: 600; white-space: nowrap; }
.cmp-table tbody .cmp-row-label { color: var(--muted2, #aab3c5); font-weight: 500; }
/* Colonne Allokali mise en avant — filet doré + fond chaud */
.cmp-table th.cmp-win, .cmp-table td.cmp-win {
  background: linear-gradient(180deg, rgba(212,175,96,0.13), rgba(124,92,255,0.05));
  border-left: 1px solid rgba(212,175,96,0.4); border-right: 1px solid rgba(212,175,96,0.4);
  color: var(--text);
}
.cmp-table thead th.cmp-win { color: #fff7e2; border-top: 1px solid rgba(212,175,96,0.5); border-radius: 12px 12px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); text-shadow: 0 0 18px rgba(212,175,96,0.4); }
.cmp-table tbody tr:last-child td.cmp-win { border-bottom: 1px solid rgba(212,175,96,0.4); border-radius: 0 0 12px 12px; }
.cmp-table td.cmp-win strong { color: var(--gold-bright); }
/* R2450 v4 — vert naturel saillant + rouge sang saillant */
/* R2455b — deux tons seulement : « Oui »/positif en OR (partout, concurrents inclus),
   limites en gris neutre. Notre colonne ressort par son fond/liseré or (cmp-win). */
.cmp-yes { color: var(--gold-bright); font-weight: 700; }
.cmp-lim { color: #aeb4be; font-weight: 500; }
.cmp-warn, .cmp-no { color: #aeb4be; font-weight: 500; } /* legacy → neutre */
.cmp-roi { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.cmp-roi strong { color: var(--gold-bright); }
.cmp-disclaimer { max-width: 760px; margin: 12px auto 0; text-align: center; font-size: 0.78rem; color: var(--muted2, #8b94a8); line-height: 1.5; }
@media (max-width: 720px) { .cmp-table-wrap { border: 1px solid var(--line); } .cmp-table { font-size: 0.85rem; } }

/* ── R2450 — cartes cliquables (métiers/étapes) + badges modale ────────────── */
.hk-clickable { cursor: pointer; }
.hk-clickable::after { content: '＋'; position: absolute; top: 12px; right: 14px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; font-size: 0.95rem; line-height: 1;
  color: var(--gold-bright); background: rgba(212,175,96,0.12); border: 1px solid var(--gold-line);
  opacity: 0; transform: scale(0.8); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 3; pointer-events: none; }
.hk-clickable:hover::after, .hk-clickable:focus-visible::after { opacity: 1; transform: scale(1); }
.vertical-card, .step-card { position: relative; }
.hk-modal-emoji { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.hk-modal-num { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; color: #1a1205;
  background: linear-gradient(135deg, #f6e7b0, #e6c478 46%, #cda24e); box-shadow: 0 6px 18px -6px rgba(212,175,96,0.6); }

/* ── R2450 v4 — bouton menu « Essai gratuit » or métallique + hover doré riche ── */
.nav .btn-nav {
  position: relative; overflow: hidden; color: #1a1205; border: 1px solid rgba(255,240,190,0.6);
  background: linear-gradient(135deg, #f6e7b0 0%, #e6c478 46%, #cda24e 100%);
  box-shadow: 0 8px 22px -10px rgba(212,175,96,0.55), inset 0 1px 0 rgba(255,255,255,0.65);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav .btn-nav::after { content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-18deg); }
.nav .btn-nav:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(212,175,96,0.7), inset 0 1px 0 rgba(255,255,255,0.8); }
.nav .btn-nav:hover::after { animation: btn-sheen 0.9s ease; }
/* hover liens menu : or chaud (plus jaune plat) */
.nav-links a:hover { color: #f0d488; }
.nav-links a::after { background: linear-gradient(90deg, #e6c478, #f6e7b0); }

/* R2450 v4 — « LE TIEN » qui ressort */
/* R4527 — « LE TIEN ! » en mode TAMPON : légère rotation à droite, décalé du texte, contour cachet or. */
.le-tien { display: inline-block; font-family: var(--font-display); font-size: 1.5em; font-weight: 800; letter-spacing: 0.03em;
  font-style: normal;
  transform: rotate(5deg); transform-origin: left center; margin-left: 0.28em; margin-top: -0.06em;
  padding: 0.04em 0.34em; border-radius: 8px;
  background: linear-gradient(100deg, #fff7df, #e6c478 50%, #c9982f); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  position: relative;
  filter: drop-shadow(0 2px 6px rgba(212,175,96,0.32)); }
.le-tien::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px;
  border: 2px solid rgba(212,175,96,0.42); box-shadow: 0 0 0 3px rgba(212,175,96,0.10); pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════
   R2454 (18/06) — Écosystème souverain · stats "verre" premium · pricing
   tiers AllInMyApp (silver/gold/diamond) · early-bird · matrix decode
   ════════════════════════════════════════════════════════════════════════ */

/* ── A. ÉCOSYSTÈME — logo apps À GAUCHE · (kicker + AllInMyApp) À DROITE (Loris 19/06) ── */
.eco-brand-row { display: flex; align-items: center; gap: 26px; margin-bottom: 24px; }
.eco-logo-link { flex-shrink: 0; display: block; line-height: 0; }
.eco-brand-meta { display: flex; flex-direction: column; gap: 10px; }
.eco-brand-meta .eco-kicker { margin: 0; }
.eco-brand { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
/* fond noir du JPG effacé par MASQUE radial (fond) — plus de rectangle visible
   R8641 (K3) — la vidéo « resorbée » (icônes absorbées, fin de boucle) laisse un aplat sombre au
   repos ; l'ancien masque gardait une zone 100% opaque trop large (46% de rayon) → cet aplat
   restait visible en « pastille noire » derrière le A doré. Zone opaque réduite + fondu plus tôt :
   seul le halo/pyramide lumineux reste visible, le fond sombre se noie dans la page. */
/* AL6 (vague 13) — l'ellipse de masque était trop étroite (60%/66%, opaque jusqu'à 16% seulement)
   → elle coupait/estompait les bords du logo (icônes qui dépassent en boomerang). Agrandie pour
   laisser passer TOUT le logo, seul le fond noir résiduel de la vidéo est encore vignetté aux
   tout derniers % du cadre. */
.eco-brand-logo { height: 168px; width: auto; object-fit: contain; flex-shrink: 0;
  -webkit-mask: radial-gradient(ellipse 96% 96% at 50% 48%, #000 46%, transparent 92%);
  mask: radial-gradient(ellipse 96% 96% at 50% 48%, #000 46%, transparent 92%);
  filter: drop-shadow(0 8px 26px rgba(212,175,96,0.42)); animation: eco-logo-float 4.8s ease-in-out infinite; transition: transform 0.3s ease; }
@keyframes eco-logo-float { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
.eco-logo-link:hover .eco-brand-logo { transform: scale(1.05); }
.eco-brand-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  background: linear-gradient(100deg, #fff7df 0%, #f4dca0 20%, #e9c879 42%, #fbeec0 60%, #dcb15f 80%, #cda24e 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(212,175,96,0.34)); animation: eco-brand-shine 6.5s ease-in-out infinite; }
@keyframes eco-brand-shine { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.eco-brand:hover .eco-brand-logo { transform: scale(1.08); }
.eco-brand:hover .eco-brand-name { filter: drop-shadow(0 2px 18px rgba(212,175,96,0.6)); }
.eco-aima-inline { font-weight: 700; text-decoration: none; white-space: nowrap;
  background: linear-gradient(100deg, #fff3cf, #e6b94f 50%, #c9982f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  border-bottom: 1px solid rgba(212,175,96,0.45); transition: border-color 0.2s; }
.eco-aima-inline:hover { border-color: rgba(212,175,96,0.95); }
@media (prefers-reduced-motion: reduce) { .eco-brand-logo, .eco-brand-name { animation: none; } }

/* ── B. STATS « verre » 100% — fini le plat vieillot. Émeraude bombé + relief ── */
.stat-good {
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(45,222,120,0.20), transparent 62%),
    linear-gradient(162deg, rgba(16,42,33,0.94), rgba(8,17,15,0.97)) !important;
  border: 1px solid rgba(45,222,120,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(190,255,215,0.22),
    inset 0 -26px 54px -30px rgba(45,222,120,0.45),
    0 26px 56px -30px rgba(14,90,58,0.6) !important;
}
.stat-good::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 42% at 50% 0%, rgba(255,255,255,0.08), transparent 72%); }
.stat-good::after { content: ''; position: absolute; left: 50%; bottom: -45%; width: 135%; height: 85%; transform: translateX(-50%);
  pointer-events: none; background: radial-gradient(ellipse at center, rgba(45,222,120,0.24), transparent 70%); filter: blur(12px); }
.stat-good:hover { transform: translateY(-3px); border-color: rgba(45,222,120,0.55) !important; }
.stat-good .stat-num {
  background: linear-gradient(160deg, #e6fff0 0%, #5cf08f 36%, #28c55e 64%, #14a349 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(40,197,94,0.42)) drop-shadow(0 1px 0 rgba(214,255,230,0.5)); text-shadow: none; }
.stat-good .stat-num,
.stat-good > .stat-num { position: relative; z-index: 1; }
.stat-good .stat-label { position: relative; z-index: 1; }

/* ── C. PRICING — cartes métalliques façon AllInMyApp : SILVER / BRONZE / GOLD
   (Loris 19/06 : garder les cartes colorées, MAIS texte sobre — la couleur vit
   sur le LISERÉ de la carte, pas dans le texte). Liseré = ::before masqué AIMA. */
.pc-tier-label { display: inline-block; font-family: var(--font-display); font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Liseré métallique (anneau dégradé masqué — ne casse pas le glass) */
.pc-tier-silver::before, .pc-tier-bronze::before, .pc-tier-gold::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 3; animation: none; opacity: 1; }
.pc-tier-silver::before { background: linear-gradient(140deg, #ffffff, #9a9aa3 28%, #e8e8ed 52%, #6f6f77 76%, #dcdce1); }
.pc-tier-bronze::before { background: linear-gradient(140deg, #f4cfa3, #a86b3c 30%, #e8b88a 55%, #6f3f1c 80%, #d9a679); }
.pc-tier-gold::before   { background: linear-gradient(140deg, #fff7d6, #e8c56a 32%, #bf953f 58%, #fcf6ba 78%, #aa771c); }

/* labels teintés métal (seul texte coloré, discret) */
.pc-tier-silver .pc-tier-label { background: linear-gradient(120deg, #f6f9fd, #c8d2e1 55%, #9aa7bc); }
.pc-tier-bronze .pc-tier-label { background: linear-gradient(120deg, #f4cfa3, #c98a55 55%, #a86b3c); }
.pc-tier-gold   .pc-tier-label { background: linear-gradient(120deg, #fff7d6, #e8c56a 55%, #bf953f); }

/* halos sous la carte selon métal (subtils, AUCUNE animation criarde) */
.pc-tier-gold   { box-shadow: 0 22px 60px -36px rgba(212,175,96,0.45), 0 1px 0 rgba(255,255,255,0.05) inset; }
.pc-tier-bronze.pricing-card-pop {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168,107,60,0.12), transparent 60%),
    linear-gradient(160deg, rgba(24,20,14,0.9), rgba(12,11,9,0.94)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(168,107,60,0.10), 0 30px 70px -34px rgba(168,107,60,0.42) !important; }
.pc-tier-bronze.pricing-card-pop::after { content: none; }

/* TEXTE SOBRE — moins de couleurs : titres + prix en crème, pas de multicolore */
.pricing-card h3 { color: #f4f1ea; -webkit-text-fill-color: #f4f1ea; }
.pc-amount { color: #f7f3ea; -webkit-text-fill-color: #f7f3ea; background: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35)); }
.pc-eur { color: #cbb487; }
.pc-per { color: var(--muted2); }
.pc-ref { display: inline-flex; gap: 7px; align-items: baseline; margin-left: 9px; font-size: 0.82rem; }
.pc-ref s { color: var(--muted2); }
.pc-ref em { font-style: normal; font-weight: 700; color: #cbb487; }
.pc-hint { display: block; margin-top: 3px; font-size: 0.74rem; color: var(--muted2); }
.pc-quota strong { color: #e6dcc4; }
.pc-overage { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--muted2); }

/* ── D. EARLY BIRD — push à l'achat ─────────────────────────────────────── */
.early-bird-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
  max-width: 780px; margin: 0 auto 30px; padding: 16px 24px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(40,32,14,0.7), rgba(20,16,9,0.55));
  border: 1px solid rgba(230,196,120,0.34);
  box-shadow: inset 0 1px 0 rgba(255,240,190,0.14), 0 18px 44px -26px rgba(212,175,96,0.4); }
.ebb-flame { font-size: 1.5rem; line-height: 1; animation: ebb-flicker 1.6s ease-in-out infinite; }
@keyframes ebb-flicker { 0%,100% { transform: scale(1) rotate(-2deg); opacity: 0.95; } 50% { transform: scale(1.12) rotate(2deg); opacity: 1; } }
.ebb-text { flex: 1; min-width: 240px; font-size: 0.94rem; color: var(--muted); line-height: 1.55; }
.ebb-text strong { color: var(--text); }
.ebb-count { color: #cbb487; font-weight: 600; }

/* Palier Scale / gros volume (le moteur des millions) */
.pricing-scale { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  max-width: 920px; margin: 28px auto 0; padding: 16px 24px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(30,34,44,0.6), rgba(16,18,24,0.5));
  border: 1px solid rgba(255,255,255,0.09); }
.ps-text { flex: 1; min-width: 260px; font-size: 0.92rem; color: var(--muted); line-height: 1.55; }
.ps-text strong { color: var(--text); }
.ps-name { color: #cbb487 !important; }
.ps-cta { flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: 0.86rem; color: #1a1304;
  padding: 10px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #f6e7b0, #e6c478 52%, #cda24e); transition: transform 0.2s; }
.ps-cta:hover { transform: translateY(-2px); }
.ebb-cta { flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: 0.88rem; color: #1a1304;
  padding: 10px 20px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #f6e7b0, #e6c478 52%, #cda24e); box-shadow: 0 10px 26px -10px rgba(212,175,96,0.6);
  transition: transform 0.2s, box-shadow 0.2s; }
.ebb-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(212,175,96,0.75); }
@media (prefers-reduced-motion: reduce) { .ebb-flame { animation: none; } }

/* ── E. MATRIX DECODE — mots dorés (hero + welcome) : vert matrix → or ──────
   Chaque lettre porte SON propre dégradé or (inline-block casse le clip du
   parent). À la fin, le JS aplatit en texte simple → balayage doré parfait. */
.mxd-char { display: inline-block; will-change: transform, opacity;
  background: linear-gradient(160deg, #fff7df 0%, #f6e0a8 28%, #e9c879 58%, #d4af60 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 6px rgba(212,175,96,0.3)); }
.mxd-char.mxd-space { width: 0.3em; background: none; }
/* R2463 — scramble en BLEU ÉLECTRIQUE (fini le vert immonde, demande Loris 21/06) */
.mxd-char.mxd-on { background: none; -webkit-text-fill-color: #46c2f9; color: #46c2f9; filter: none;
  text-shadow: 0 0 9px rgba(70,194,249,0.85), 0 0 22px rgba(37,99,235,0.5); opacity: 0.96; }
.mxd-char.mxd-lock { animation: mxd-lock-pop 0.5s cubic-bezier(0.22,1,0.36,1); }
@keyframes mxd-lock-pop {
  0%  { background: none; -webkit-text-fill-color: #e6fff0; color: #e6fff0; text-shadow: 0 0 18px rgba(214,255,230,0.95), 0 0 32px rgba(92,240,143,0.65); transform: translateY(-3px) scale(1.1); }
  45% { background: none; -webkit-text-fill-color: #fff7df; color: #fff7df; text-shadow: 0 0 12px rgba(255,247,200,0.7); transform: translateY(-1px) scale(1.04); }
  100%{ transform: none; } }

/* ════════════════════════════════════════════════════════════════════════
   R2456d (19/06) — CARTES PRICING REFAITES : métal texturé, coins doux,
   finitions premium · badge AU-DESSUS de la carte · nombres OR.
   (override final = priorité absolue sur les blocs partagés au-dessus)
   ════════════════════════════════════════════════════════════════════════ */
.pricing-grid { margin-top: 36px; gap: 24px; }
.pricing-card {
  border-radius: 30px !important;
  padding: 40px 30px 30px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 16%),
    radial-gradient(130% 70% at 50% -12%, rgba(255,255,255,0.05), transparent 62%),
    linear-gradient(165deg, rgba(30,34,45,0.94), rgba(13,15,21,0.97)) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -44px 80px -52px rgba(0,0,0,0.7),
    0 34px 70px -34px rgba(0,0,0,0.72) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pricing-card:hover { transform: translateY(-4px); }
/* liseré métallique : coins doux + un poil plus présent */
.pc-tier-silver::before, .pc-tier-bronze::before, .pc-tier-gold::before { padding: 1.8px; }

/* Carte FEATURED (Business) : pastille AU-DESSUS, plus d'overflow qui coupe */
.pricing-card-pop { overflow: visible !important; padding-top: 40px !important; }
.pc-pop-badge {
  top: -18px !important; padding: 8px 20px !important; z-index: 6 !important;
  font-family: var(--font-display); letter-spacing: 0.04em;
  box-shadow: 0 12px 26px -8px rgba(191,149,63,0.55), inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
.pc-tier-bronze.pricing-card-pop {
  background:
    linear-gradient(180deg, rgba(255,236,200,0.08), transparent 16%),
    radial-gradient(130% 70% at 50% -12%, rgba(230,196,120,0.12), transparent 62%),
    linear-gradient(165deg, rgba(40,33,20,0.95), rgba(16,13,9,0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,0.20),
    0 34px 80px -34px rgba(168,107,60,0.5) !important;
}

/* NOMBRES en OR (les 3 prix — Loris 19/06) */
.pc-amount {
  background: linear-gradient(135deg, #fff3cf 0%, #f1d182 26%, #e6b94f 54%, #f3d98a 74%, #c9982f 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(255,245,200,0.35)) drop-shadow(0 2px 10px rgba(212,175,96,0.28)); }
@media (max-width: 920px) { .pricing-grid { margin-top: 42px; } }

/* ════════════════════════════════════════════════════════════════════════
   R2456f (19/06) — MÉGARUN embellissement : mots or, tampon VS, lignes dorées
   inter-sections, contours dorés cartes, boutons or premium, finitions.
   ════════════════════════════════════════════════════════════════════════ */
/* Mots en OR (réutilisable) */
.gw { background: linear-gradient(100deg, #fff3cf, #e6c478 48%, #c9982f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; }
/* « 42 capacités » en gros + or */
.cap-42 { font-family: var(--font-display); font-size: 1.55em; font-weight: 800; letter-spacing: -0.01em;
  background: linear-gradient(100deg, #fff7df, #e6c478 50%, #c9982f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(212,175,96,0.3)); }

/* R8641 (K8) — ancien tampon « VS » (design solide dark-on-gold) SUPPRIMÉ : dead code superposé à
   la règle R4527 (background-clip:text) plus bas, qui gagnait la cascade en specificité mais héritait
   quand même du border/box-shadow de CETTE règle (jamais neutralisés) → double contour + rendu terne.
   La règle canonique unique vit désormais à « R4527 — VS = TAMPON » (styles.css, section suivante). */

/* Lien Kalikorp footer */
.foot-korp { color: #e6c478 !important; font-weight: 700; }
.foot-korp:hover { color: #f3d98a !important; }

/* Séparateurs section — aligné sur le canonique R6320 (une seule source de vérité, valeurs identiques) */
.section { position: relative; }
.section + .section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(78%, 720px); height: 1px; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,96,0.35) 25%, rgba(246,231,176,0.72) 50%, rgba(212,175,96,0.35) 75%, transparent 100%); }

/* CONTOURS DORÉS sur les cartes (au repos + hover renforcé) */
.feature-card, .vertical-card, .step-card { border-color: rgba(212,175,96,0.26) !important; }
.feature-card:hover, .vertical-card:hover, .step-card:hover {
  border-color: rgba(230,196,120,0.6) !important;
  box-shadow: 0 28px 70px -30px rgba(212,175,96,0.42), 0 0 0 1px rgba(230,196,120,0.32) inset !important; }

/* BOUTONS OR premium — un beau doré profond, arête lumineuse, hover travaillé */
.btn-gold, .btn-primary, .ebb-cta, .ps-cta {
  background: linear-gradient(135deg, #fbf0b0 0%, #f6e09a 20%, #e6c478 48%, #cda24e 76%, #b8893a 100%) !important;
  color: #1a1304 !important; border: 1px solid rgba(255,244,200,0.7) !important;
  box-shadow: 0 10px 26px -10px rgba(212,175,96,0.6), inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -3px 8px -3px rgba(120,80,20,0.45) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.btn-gold:hover, .btn-primary:hover, .ebb-cta:hover, .ps-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px -10px rgba(212,175,96,0.78), inset 0 1px 0 rgba(255,255,255,0.88), inset 0 -3px 8px -3px rgba(120,80,20,0.4) !important; }

/* Kicker écosystème (maintenant SOUS le nom AllInMyApp) */
.eco-brand-meta .eco-kicker { color: #cbb487; margin-top: 2px; }

/* R2456g — cyan « la même, en mieux » : luminosité + glow doux sur les accents */
.pc-features li::before { box-shadow: 0 0 10px -2px var(--cyan-glow); }
.la-dot, .mp-dot { box-shadow: 0 0 11px var(--cyan-glow) !important; }
.pv-tag-good, .data-chip { box-shadow: inset 0 0 0 1px rgba(63,227,230,0.25), 0 0 14px -4px var(--cyan-glow); }

/* R2456j — hover de TOUS les boutons ghost travaillé (lift + bord doré + glow) */
.btn-ghost { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.btn-ghost:hover { background: rgba(212,175,96,0.09); border-color: rgba(230,196,120,0.55); color: #f0d488;
  transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(212,175,96,0.42), inset 0 1px 0 rgba(255,255,255,0.08); }

/* ════════════════════════════════════════════════════════════════════════
   R2456k — Carte ENTREPRISE = FULL GOLD premium, beam doré ROTATIF (tourniquet)
   + balayage doré. La meilleure carte, le meilleur effet (Loris 19/06).
   ════════════════════════════════════════════════════════════════════════ */
.pc-tier-gold {
  background:
    radial-gradient(130% 75% at 50% -8%, rgba(246,231,176,0.18), transparent 58%),
    linear-gradient(165deg, rgba(54,42,18,0.96), rgba(24,18,8,0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,242,205,0.25), 0 36px 90px -36px rgba(212,175,96,0.6) !important;
  overflow: hidden !important;
}
.pc-tier-gold::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--beam-angle,0deg), #cda24e, #fff7d6 12%, #e6c478 26%, #cda24e 40%, #7a5e28 52%, #fff7d6 66%, #e6c478 80%, #cda24e 92%, #fff7d6 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 1 !important; animation: beam-rotate 5s linear infinite !important;
}
.pc-tier-gold::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255,247,220,0.16) 48%, transparent 64%);
  background-size: 250% 100%; animation: pc-gold-sweep 4.5s ease-in-out infinite;
}
@keyframes pc-gold-sweep { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
.pc-tier-gold > * { position: relative; z-index: 1; }
.pc-tier-gold .pc-tier-label { z-index: 4; }
@media (prefers-reduced-motion: reduce) { .pc-tier-gold::before, .pc-tier-gold::after { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════
   R2456l (19/06) — logo nav A+orbe · vision AllInMyApp · PASTILLES tier
   métalliques travaillées (relief/texture/hover) · vert WhatsApp unifié
   ════════════════════════════════════════════════════════════════════════ */
/* Logo AlloKali (A + orbe) dans la nav, à gauche du titre */
/* R4527 — sizing/position canonique regroupé plus bas (1941). Le `filter: drop-shadow` sur le
   conteneur rasterisait l'ensemble canvas+img en composite basse résolution → A FLOU. Retiré. */
.nav-logo { transition: transform 0.25s ease; }
.nav-brand:hover .nav-logo { transform: scale(1.04); }

/* Première ligne = vision AllInMyApp (plus présente) */
.eco-vision { font-size: clamp(1.08rem, 2.3vw, 1.3rem) !important; line-height: 1.5 !important; margin-bottom: 14px !important; color: var(--text) !important; }

/* PASTILLES TIER = vraies pastilles métalliques (relief embossé, arrondies, hover) */
.pc-tier-label {
  display: inline-flex !important; align-items: center; padding: 6px 18px !important; border-radius: 999px !important;
  -webkit-text-fill-color: currentColor !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pc-tier-label:hover { transform: translateY(-1px); }
.pc-tier-silver .pc-tier-label { color: #272c34 !important;
  background: linear-gradient(135deg, #f8fafe, #c6d0dd 42%, #98a4b6 68%, #eaeff6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -2px 4px rgba(20,28,46,0.22), 0 5px 13px -4px rgba(150,165,190,0.55) !important; }
.pc-tier-bronze .pc-tier-label { color: #2a1c0e !important;
  background: linear-gradient(135deg, #f6d2a6, #cc8d57 42%, #8a5a30 68%, #ecbc8e) !important;
  box-shadow: inset 0 1px 0 rgba(255,238,214,0.75), inset 0 -2px 4px rgba(60,30,10,0.3), 0 5px 13px -4px rgba(168,107,60,0.55) !important; }
.pc-tier-gold .pc-tier-label { color: #2a1f06 !important;
  background: linear-gradient(135deg, #fff7d6, #e8c56a 42%, #bf953f 68%, #fcf6ba) !important;
  box-shadow: inset 0 1px 0 rgba(255,250,212,0.9), inset 0 -2px 4px rgba(90,65,15,0.3), 0 5px 15px -4px rgba(212,175,96,0.6) !important; }

/* VERT unifié = WhatsApp #25d366 PARTOUT (Loris) */
.stat-good .stat-num { background: linear-gradient(160deg, #d4f9e1, #25d366 46%, #15a34a 100%) !important; }
.stat-good { border-color: rgba(37,211,102,0.32) !important; }
.stats-legend-good { color: #25d366 !important; }
.lr-ok, .fcd-ok, .la-item.la-ok, .lc-state.live { color: #25d366 !important; }

/* Contour doré + magnétique : carte du bas (accès anticipé) */
.early-card { border: 1px solid rgba(212,175,96,0.3) !important; transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; }
.early-card:hover { border-color: rgba(230,196,120,0.6) !important; box-shadow: 0 30px 80px -34px rgba(212,175,96,0.45), 0 0 0 1px rgba(230,196,120,0.3) inset !important; }

/* R2456m — vrai screenshot Jarvis (cockpit pilote AlloKali) en cadre navigateur 3D */
.eco-shot { border-radius: 16px; overflow: hidden; border: 1px solid rgba(212,175,96,0.3);
  background: #0a0d14; box-shadow: 0 44px 100px -44px rgba(0,0,0,0.82), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(212,175,96,0.12);
  transform: perspective(1500px) rotateY(-5deg) rotateX(2deg); transition: transform 0.55s ease; }
.eco-shot:hover { transform: perspective(1500px) rotateY(0deg) rotateX(0deg); }
.eco-shot-bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: linear-gradient(180deg, rgba(30,34,44,0.96), rgba(16,20,28,0.96)); border-bottom: 1px solid rgba(255,255,255,0.06); }
.eco-shot-ttl { margin-left: 10px; font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.eco-shot-img { display: block; width: 100%; height: auto; }

/* ════════ R2462 — UPGRADE DESIGN AlloKali : bleu secondaire + marque + cartes ════════ */
:root {
  --blue: #2563eb; --blue-light: #60a5fa; --blue-dim: rgba(37,99,235,0.14);
  --blue-line: rgba(96,165,250,0.24); --grad-blue: linear-gradient(100deg, #2563eb, #60a5fa);
}
/* Marque AlloKali — GROS, début de page (pas le header), relief soigné */
.page-brand { margin: 2px 0 14px; line-height: 1; display: flex; align-items: center; gap: 16px; }
.page-brand .pb-word {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 4.8vw, 3.4rem); letter-spacing: -0.035em;
  color: #eef3ff; text-shadow: 0 1px 0 rgba(255,255,255,0.18), 0 3px 18px rgba(4,7,12,0.85);
}
.page-brand .b-kali { color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,245,200,0.5)) drop-shadow(0 2px 14px rgba(212,175,96,0.42)); }
@media (max-width: 640px) { .page-brand { margin-bottom: 14px; } }

/* Cartes « chaque friction résolue » — refonte propre (fini les rectangles bruts) :
   glass sombre, bord fin vert WhatsApp, coins arrondis, accent haut, lift hover. */
.stat-good {
  background: linear-gradient(162deg, rgba(18,30,24,0.74), rgba(11,16,15,0.74)) !important;
  border: 1px solid rgba(37,211,102,0.26) !important; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 42px -28px rgba(0,0,0,0.72) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: hidden; transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s !important;
}
.stat-good::before {
  content: ''; position: absolute !important; inset: 0 0 auto 0 !important; top: 0 !important; bottom: auto !important;
  height: 1px !important; width: 100% !important; opacity: .8 !important;
  background: linear-gradient(90deg, transparent, rgba(37,211,102,0.55), transparent) !important;
}
.stat-good::after { display: none !important; }
.stat-good:hover {
  transform: translateY(-4px) !important; border-color: rgba(37,211,102,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 26px 56px -26px rgba(37,211,102,0.26) !important;
}
.stat-good .stat-num {
  background: linear-gradient(160deg, #d4f9e1, #25d366 46%, #15a34a 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
.stat-good .stat-label { color: #cdd9d1 !important; }
/* Bouton secondaire : hover bleu AlloKali (cohérence couleur secondaire) */
.btn-ghost:hover { border-color: var(--blue-line) !important; color: var(--blue-light) !important; }

/* ════════ R2463 — passe finitions Loris 21/06 : bleu électrique + contour doré ════════ */
/* CONTOUR DORÉ — technique différente selon la taille :
   - petite phrase (.sec-blue) : text-stroke fin = net.
   - GROS héro (.hero-line-grad) : text-stroke FLOUTE le grand texte → contour via halo doré
     serré (drop-shadow 0 0 1px doré) qui reste NET. (régression blob illisible corrigée) */
.sec-blue {
  -webkit-text-stroke: 0.5px rgba(230,196,120,.5);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 2px 12px rgba(56,160,255,.18)) !important;
}
.hero-line-grad {
  /* R2463g — CAUSE RÉELLE DU FLOU : `filter` promeut le calque en composite → le GROS texte
     gradient-clip est rasterisé en basse résolution (la petite phrase .sec-blue restait nette
     car petite). Solution : ZÉRO filter sur le héro → rendu texte normal = NET. Glow via
     text-shadow (n'altère pas la rastérisation du masque). */
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  text-shadow: 0 2px 12px rgba(4,7,12,.8) !important; /* depth seul, zéro glow bleu qui bavait = NET */
}
.sec-blue {
  font-style: normal; font-weight: 800;
  background: linear-gradient(100deg,#9fe0ff 0%,#46c2f9 22%,#2f7bf6 46%,#2563eb 60%,#4f9cff 82%,#9fe0ff 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gold-shine 8s 1s ease-in-out infinite;
}
/* Héro « répond à chaque appel » — R2466 FIX DÉFINITIF du rectangle/blob bleu.
   CAUSE : -webkit-background-clip:text sur ce GÉANT texte (clamp ~6rem) se rasterise en blob
   illisible chez certains GPU (compositing du masque). SOLUTION : on ABANDONNE le clip →
   couleur bleue SOLIDE électrique + depth shadow (text-shadow ne promeut PAS le calque en
   composite = reste NET à toute taille). Plus aucune surface bleue parasite. */
.hero-line-grad {
  background: none !important; background-image: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: #5b9eff !important; color: #5b9eff !important;
  text-shadow: 0 2px 14px rgba(4,7,12,.85), 0 0 24px rgba(59,130,246,.28) !important;
  animation: line-reveal 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) forwards !important;
}
/* Lignes sous les titres du menu : hairline fine qui s'estompe (fini le bloc carré) */
.nav-links a::after {
  height: 1px !important; bottom: -3px !important;
  background: linear-gradient(90deg, transparent, var(--gold-bright) 30%, var(--gold) 70%, transparent) !important;
  opacity: .9;
}
/* Lien éco AlloKali (la marque courante) */
.eco-link-current { border-color: rgba(212,175,96,.34) !important; }
.eco-link-current .b-kali { -webkit-text-fill-color: transparent; }
/* Footer : « imaginé en France, par Kalikorp » tout en doré */
.foot-imagine, .foot-imagine .foot-korp { color: var(--gold-bright) !important; font-weight: 600; }
.foot-imagine .foot-korp { text-decoration: none; }
.foot-imagine .foot-korp:hover { color: #f3e0a8 !important; }
/* Accès anticipé : plus d'air, éléments espacés, orbe plus grosse + remontée */
.section-early { padding-top: clamp(30px,5vw,56px) !important; }
.early-card { padding: clamp(52px,7.5vw,92px) clamp(26px,5vw,74px) !important; }
.early-card .eyebrow { margin-bottom: 20px !important; }
.early-card h2 { margin-bottom: 20px !important; line-height: 1.12; }
.early-card .section-sub { margin: 0 auto 30px !important; max-width: 540px; }
.early-card .early-form { margin-top: 8px; }
.cta-orb-wrap { transform: translateZ(0) scale(1.22) !important; opacity: .92; } /* orbe + grosse + plus d'air */

/* ════════ R2464 — VRAIE ORBE WebGL cockpit (cyan #1FD5F9) dans le header, derrière le A doré ════════ */
/* R4527 — RÈGLE CANONIQUE UNIQUE .nav-logo (44px).
   G342 FIX1 — l'orbe ne doit plus être ROGNÉE : on retire le clip circulaire dur (overflow:hidden)
   et on remplace le « fini le carré visible » par un MASQUE radial doux sur le canvas (bords fondus,
   jamais de carré, orbe visible en entier). z-index : orbe DERRIÈRE le A (img au-dessus). */
.nav-logo { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; overflow: visible; }
.nav-orb-canvas { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%); mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%); }
.nav-logo-a {
  position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1;
  background: linear-gradient(158deg,#fff7df 0%,#e8c66a 52%,#c9a24e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
/* R2466 — VRAI logo A (image AllInMyApp) dans le header, devant l'orbe bleue */
.nav-logo-img { position: relative; z-index: 2; height: 30px; width: auto; display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.55)); }

/* ════════ R2464 — PLAQUETTE KALIKORP (fin de landing) : la carte la plus premium ════════ */
.section-korp { padding: clamp(36px,5vw,72px) 0 clamp(56px,8vw,104px); }
.korp-plaque {
  position: relative; max-width: 880px; margin: 0 auto; text-align: center;
  padding: clamp(54px,6vw,88px) clamp(28px,5vw,72px);
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 58% at 50% 0%, rgba(212,175,96,0.11), transparent 62%),
    linear-gradient(165deg, rgba(26,22,14,0.80), rgba(12,12,16,0.84));
  border: 1px solid rgba(212,175,96,0.30);
  box-shadow: inset 0 1px 0 rgba(255,240,200,0.10), 0 50px 100px -50px rgba(0,0,0,0.85), 0 0 0 1px rgba(212,175,96,0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.korp-plaque::before { content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(230,196,120,0.72), transparent); }
.korp-orb { position:absolute; top:-68px; left:50%; width:240px; height:240px; border-radius:50%; pointer-events:none; opacity:.55;
  background: radial-gradient(circle at 50% 45%, #fff3d4 0%, #e8c66a 30%, rgba(212,175,96,0.35) 55%, transparent 72%);
  filter: blur(6px); animation: korp-orb-pulse 4s ease-in-out infinite; }
@keyframes korp-orb-pulse { 0%,100%{ transform:translateX(-50%) scale(1); opacity:.48 } 50%{ transform:translateX(-50%) scale(1.08); opacity:.62 } }
/* R9362 — sur mobile l'orbe débordait en haut de la plaque = « gros rond blanc » envahissant.
   Réduite (taille/opacité), remontée moins haut, centre moins clair (fini le #fff3d4 cramé). */
@media (max-width: 640px) {
  .korp-orb { width:150px; height:150px; top:-38px; opacity:.34;
    background: radial-gradient(circle at 50% 45%, #ffe9b0 0%, #e8c66a 34%, rgba(212,175,96,0.24) 58%, transparent 74%);
    filter: blur(7px); }
  @keyframes korp-orb-pulse { 0%,100%{ transform:translateX(-50%) scale(1); opacity:.30 } 50%{ transform:translateX(-50%) scale(1.06); opacity:.4 } }
}
.korp-rings { position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:190px; height:190px; pointer-events:none; }
.korp-kicker { position:relative; z-index:1; display:inline-block; font-family:var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:14px; }
.korp-title { position:relative; z-index:1; font-family:var(--font-display); font-size:clamp(1.7rem,4.4vw,2.8rem); letter-spacing:-0.03em; margin-bottom:16px; color:#f3f6ff; }
.korp-name { background:linear-gradient(105deg,#fff7df 0%,#e8c66a 45%,#c9a24e 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.korp-sub { position:relative; z-index:1; max-width:580px; margin:0 auto 26px; color:var(--muted); line-height:1.7; }
.korp-sub em { color:var(--gold-bright); font-style:normal; }
.korp-brands { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px; }
.korp-chip { font-size:.82rem; font-weight:600; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid rgba(212,175,96,0.20); color:var(--text); transition:border-color .25s, background .25s, transform .25s; }
.korp-chip:hover { border-color:rgba(212,175,96,0.5); background:rgba(212,175,96,0.08); transform:translateY(-2px); }
.korp-chip-star { border-color:rgba(212,175,96,0.45); background:rgba(212,175,96,0.10); }
.korp-chip-current { border-color:rgba(96,165,250,0.42); }
.korp-chip-more { opacity:.6; border-style:dashed; }
.korp-cta { position:relative; z-index:1; }

/* R2465 — mot auto-évolutif fluide (badge héro) : largeur réservée = la phrase ne saute pas */
.evolve-word { display: inline-block; min-width: 7.4em; text-align: left; white-space: nowrap; }

/* ════════ R2467 — Finitions Loris 21/06 (orbe/wave pré-page sont inline ; ici : MacBook, AllInMyApp or/bleu, lignes dorées, contour bleu) ════════ */

/* MacBook mockup — modale Jarvis intégrée à l'écran (remplace le cadre navigateur) */
.mac-mock { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.mac-screen { position: relative; padding: 16px 12px 12px; background: linear-gradient(180deg,#1b1f27,#0e1117);
  border-radius: 16px 16px 5px 5px;
  box-shadow: 0 44px 100px -44px rgba(0,0,0,0.85), 0 0 0 1px rgba(212,175,96,0.16), inset 0 0 0 1px rgba(255,255,255,0.05); }
.mac-cam { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%;
  background: #070a0f; box-shadow: 0 0 0 2px rgba(0,0,0,0.5), inset 0 0 2px rgba(120,180,255,0.5); z-index: 2; }
.mac-shot-img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05); }
.mac-base { position: relative; height: 13px; width: 116%; left: -8%;
  background: linear-gradient(180deg,#2c313b 0%,#171b22 60%,#0c0f15 100%);
  border-radius: 0 0 14px 14px; box-shadow: 0 20px 34px -16px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.08); }
.mac-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 96px; height: 8px;
  background: linear-gradient(180deg,#0a0d12,#05070b); border-radius: 0 0 9px 9px; box-shadow: inset 0 -1px 1px rgba(255,255,255,0.04); }
@media (max-width: 640px) { .mac-screen { padding: 12px 9px 9px; } }

/* « AllInMyApp » : « All » OR + « InMyApp » BLEU (cohérence pré-page, demandé maintes fois) */
.aima-all { background: linear-gradient(100deg,#fff3cf,#e6b94f 52%,#c9982f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aima-rest { background: linear-gradient(100deg,#2563eb,#60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Lignes dorées fines sous les eyebrows (entre chaque section) + tagline pré-page */
.eyebrow { position: relative; }
.eyebrow::after { content: ''; display: block; width: 46px; height: 1.5px; margin-top: 9px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e6c478 14%, #f6e7b0 50%, #cda24e 86%, transparent); opacity: 0.92; }
.section-head-center .eyebrow::after, .section-head[style*="center"] .eyebrow::after { margin-left: auto; margin-right: auto; }

/* Contour doré subtil sur le texte secondaire bleu (.b-llo) — demandé plusieurs fois */
.b-llo { text-shadow: 0 0 0.6px rgba(230,196,120,0.55); }

/* R2468 — contour doré fin sur les cartes de plans (demandé, surtout la dernière) */
.pricing-card { position: relative; }
.pricing-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; background: linear-gradient(160deg, rgba(230,196,120,0.45), rgba(212,175,96,0.12) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.8; }
.pricing-card.pc-tier-gold::after { background: linear-gradient(160deg, rgba(255,240,200,0.7), rgba(212,175,96,0.3) 45%, rgba(212,175,96,0.1) 75%, transparent); opacity: 1; }
.pricing-card.pricing-card-pop::after { background: linear-gradient(160deg, rgba(96,165,250,0.5), rgba(37,99,235,0.18) 45%, transparent 72%); }

/* ════════ R2469 — boutons shiny bleus (tous les CTA principaux) · lignes dorées partout · maison mère · méga-MacBook démo ════════ */

/* Shiny retinté BLEU AlloKali + variantes de taille (réadapté forme/taille comme « rejouer l'appel ») */
.shiny-cta { --shiny-highlight: #2563eb; --shiny-highlight-subtle: #60a5fa; --shiny-fg: #eaf1ff; }
.shiny-cta:focus-visible { box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle), 0 0 0 2px #2563eb; }
.shiny-lg { padding: 0.92rem 1.7rem; font-size: 0.96rem; }
.shiny-sm { padding: 0.5rem 1.05rem; font-size: 0.78rem; }
.shiny-cta .shiny-cta-content svg { flex-shrink: 0; }

/* Ligne dorée entre CHAQUE section (partout) — fine, centrée */
.gold-sep { display: block; width: clamp(90px,12vw,150px); height: 1.5px; margin: 0 auto; border: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e6c478 16%, #f6e7b0 50%, #cda24e 84%, transparent); opacity: 0.9; }
main > .section::before { content: ''; display: block; width: clamp(90px,12vw,150px); height: 1.5px;
  margin: 0 auto clamp(26px,4vw,46px); border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e6c478 16%, #f6e7b0 50%, #cda24e 84%, transparent); opacity: 0.85; }
/* Ligne dorée en haut du footer aussi */
.footer { position: relative; }
.footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: clamp(120px,20vw,260px); height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e6c478 16%, #f6e7b0 50%, #cda24e 84%, transparent); opacity: 0.85; }

/* R8643 (vague 12) — FIX double soulignage : cette règle visait « la maison mère » mais ciblait par
   erreur la classe .korp-kicker PARTAGÉE avec « une création » (.korp-creation, qui a DÉJÀ son propre
   text-decoration:underline plus haut) → 2 traits superposés sous « une création ». Retargetée sur la
   nouvelle ligne bicolore .korp-title2 (« Imaginé en France par la maison mère »), qui n'a PAS d'autre
   soulignage. « une création » ne garde que SON unique trait (.korp-creation). */
.korp-title2 { font-size: clamp(0.9rem,2.1vw,1.08rem) !important; font-weight: 700; letter-spacing: 0.02em;
  position: relative; z-index: 1; display: inline-block; margin: 2px 0 0; }
/* AL7 (vague 13) — l'ancien ::after (sous-ligne collée au titre) créait une 3e ligne dorée
   quasi superposée au .korp-gold-rule juste en dessous (18px d'écart) → effet « lignes cassées »
   sur mobile (title2 pouvant wrapper 2 lignes, largeur % incohérente avec le gold-rule fixe).
   Retiré : il ne reste que les 2 .korp-gold-rule (identiques, largeur fixe, parfaitement
   symétriques) qui encadrent KALIKORP — structure propre, alignée, centrée. */
/* Ligne dorée fine — divise « Imaginé en France... » / KALIKORP / le clin d'œil Méta (miroir AllInMyApp) */
.korp-gold-rule { position: relative; z-index: 1; display: block; width: min(200px,50%); height: 1px; margin: 18px auto; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,197,106,0.75) 50%, transparent); opacity: 0.85; }
/* AL7 (vague 13) — « Imaginé en France » (.sec-blue générique) quasi illisible ici : le dégradé
   plonge jusqu'à #2563eb (bleu profond) sur un fond très sombre + petit texte → override local,
   plus clair/lumineux, lisible sans casser .sec-blue ailleurs sur la page. */
.korp-title2 .sec-blue {
  background: linear-gradient(100deg,#eaf6ff 0%,#bfe4ff 24%,#7ec8ff 48%,#9fd6ff 70%,#eaf6ff 100%) !important;
  -webkit-text-stroke: 0.4px rgba(230,196,120,.55) !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(126,200,255,.35)) !important;
}
/* KALIKORP — seul, géant, MAJUSCULES, encadré des 2 lignes dorées ci-dessus */
.korp-name-big { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  font-size: clamp(2.1rem,5.4vw,3.6rem); margin: 0;
  filter: drop-shadow(0 3px 18px rgba(212,175,96,0.42)); }
/* Quadrillage subtil derrière la plaque (miroir AllInMyApp — masqué en ellipse, ne gêne jamais le texte) */
.korp-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background-image: linear-gradient(rgba(212,175,96,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,96,0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 90% 78% at 50% 38%, #000 0%, transparent 82%);
  mask-image: radial-gradient(ellipse 90% 78% at 50% 38%, #000 0%, transparent 82%); }

/* Méga-MacBook autour de la démo live (on garde l'écran identique, on place juste le MacBook autour) */
.mac-mega { max-width: 1000px; margin: 0 auto; }
.mac-mega .mac-screen { padding: 22px 18px 16px; }
.mac-mega .live-stage { margin: 0; }
@media (max-width: 640px) { .mac-mega .mac-screen { padding: 12px 8px 8px; } }

/* R2470 — lecteur simulation vocale dans la démo */
.demo-audio-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; }
.demo-listen { font-size: 0.86rem; }
.demo-audio-note { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.01em; }

/* R2471 — bouton « Revoir l'intro » discret (footer) */
.foot-replay { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, rgba(20,24,34,0.7), rgba(12,15,22,0.7));
  border: 1px solid rgba(212,175,96,0.32); color: var(--gold-bright, #e6c478);
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.2s ease; }
.foot-replay:hover { border-color: rgba(230,196,120,0.6); color: #f3e0a8; transform: translateY(-1px); }
.foot-replay svg { opacity: 0.9; }

/* R2471 — zéro blanc PUR : titres de cartes en crème chaud (pas #fff cru), sans surcharge de couleur */
.feature-card h3, .vertical-card h3, .step-card h3, .pricing-card h3,
.fc-title, .step-card h4 { color: #f1ece1 !important; }

/* ════════ R2472 — TOURNIQUET 3D constellation Kalikorp (titres + cartes, auto-rotation) ════════ */
.korp-turn { position: relative; width: 100%; max-width: 480px; height: 200px; margin: 8px auto 30px; perspective: 1200px; }
.korp-turn-ring { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; animation: korp-spin 26s linear infinite; }
.korp-turn:hover .korp-turn-ring, .korp-turn:focus-within .korp-turn-ring { animation-play-state: paused; }
.korp-panel { position: absolute; top: 50%; left: 50%; width: 184px; height: 112px; margin: -56px 0 0 -92px;
  transform: rotateY(calc(var(--i) * 60deg)) translateZ(205px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border-radius: 16px; backface-visibility: hidden; text-decoration: none;
  background: linear-gradient(165deg, rgba(26,22,14,0.82), rgba(12,12,16,0.86));
  border: 1px solid rgba(212,175,96,0.30);
  box-shadow: inset 0 1px 0 rgba(255,240,200,0.10), 0 24px 50px -30px rgba(0,0,0,0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.korp-panel:hover { border-color: rgba(230,196,120,0.6); box-shadow: inset 0 1px 0 rgba(255,240,200,0.14), 0 26px 60px -26px rgba(212,175,96,0.42); }
.korp-panel-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1;
  background: linear-gradient(100deg,#fff3cf,#e6b94f 52%,#c9982f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.korp-panel-tag { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; }
.korp-panel-mother .korp-panel-name { font-size: 1.22rem; }
.korp-panel-current { border-color: rgba(96,165,250,0.5); }
.korp-panel-current .korp-panel-tag { color: #93b8f5; }
@keyframes korp-spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
@media (prefers-reduced-motion: reduce) { .korp-turn-ring { animation: none; transform: rotateY(-120deg); } }
@media (max-width: 640px) { .korp-turn { perspective: 900px; height: 180px; } .korp-panel { width: 158px; height: 104px; margin: -52px 0 0 -79px; transform: rotateY(calc(var(--i) * 60deg)) translateZ(176px); } }

/* ════════ R2476 — éradication du blanc, or métallique KaliKorp, shiny or, hero or ════════ */
/* R4527 — .hero-line-gold solide retiré (dead code : écrasé par la version gradient clip ligne 2240). */

/* Variante SHINY OR (bouton premium à contour lumineux doré) */
.shiny-gold { --shiny-bg: #140f04; --shiny-bg-subtle: #241a06; --shiny-fg: #fff3cf;
  --shiny-highlight: #e6c478; --shiny-highlight-subtle: #fcf6ba; }
.shiny-gold:focus-visible { box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle), 0 0 0 2px #e6c478; }

/* OR MÉTALLIQUE KaliKorp (porté à l'identique de kalikorp.css — aucun blanc/crème) */
.korp-grad-gold {
  background: linear-gradient(96deg,#6e4f12 0%,#a9781f 12%,#d9a93a 24%,#f4cd5e 33%,#ffd76a 41%,#e8b73e 52%,#bf8d1d 63%,#efc551 73%,#ffd169 82%,#cf9e2e 92%,#7a5712 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,214,120,0.45)) drop-shadow(0 2px 2px rgba(60,40,5,0.6)) drop-shadow(0 0 22px rgba(212,175,96,0.34));
  animation: korp-gold-flow 7s ease-in-out infinite; }
@keyframes korp-gold-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ÉRADICATION DU BLANC — tous les titres + le gras en OR (les accents bleus existants restent bleus) */
.section h2, .section-head h2, .section h3,
.feature-card h3, .vertical-card h3, .step-card h3, .pricing-card h3, .fc-title { color: #e9cb78 !important; }
.section p strong, .section li strong, .hero-sub strong, .pc-quota strong,
.eco-copy p strong, .footer strong, .data-cap strong, .ps-text strong { color: #e6c478; }
/* les morceaux qui DOIVENT rester bleus (marque/secondaire) priment */
.b-llo, .sec-blue, .aima-rest, .bi-inmyapp, .korp-panel-current .korp-panel-name { -webkit-text-fill-color: transparent; }

/* Ligne dorée sous les eyebrows — refonte ÉLÉGANTE (l'ancienne « moche » sous La plateforme) */
.eyebrow::after { width: 32px !important; height: 1px !important; margin-top: 8px !important; opacity: 0.7 !important;
  background: linear-gradient(90deg, #e6c478, #cda24e 70%, transparent) !important; }
.section-head-center .eyebrow::after { background: linear-gradient(90deg, transparent, #e6c478 50%, transparent) !important; }

/* ════════ R2476 — TOURNIQUET KaliKorp 3D (port IDENTIQUE landing Kali Korp) ════════ */
@property --korp-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes korp-border-rot { to { --korp-a: 360deg; } }
@keyframes korp-aurora-spin { to { transform: rotate(360deg); } }
@keyframes korp-pirouette { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } }

.korp3d { position: relative; margin: 0 auto 16px; width: 100%; display: flex; align-items: center; justify-content: center;
  perspective: 1600px; perspective-origin: 50% 44%; height: clamp(330px, 40vw, 450px); }
.korp3d-halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(800px,94vw); height: min(800px,94vw); pointer-events: none;
  background: radial-gradient(circle at center, rgba(212,175,96,0.13), rgba(168,85,247,0.07) 38%, transparent 68%); }
.korp3d-base { position: absolute; left: 50%; top: 60%; width: min(700px,86vw); height: 160px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%,0) rotateX(74deg);
  background: radial-gradient(ellipse at center, rgba(212,175,96,0.16), rgba(212,175,96,0.05) 45%, transparent 70%); box-shadow: 0 0 90px rgba(212,175,96,0.12); filter: blur(2px); }
/* R8710 — touch-action: pan-y : le drag HORIZONTAL du tourniquet est géré (pointer events),
   mais le scroll VERTICAL de la page n'est JAMAIS bloqué quand le doigt est dessus (mobile). */
.korp3d-ring { position: relative; width: 320px; height: 128px; transform-style: preserve-3d; will-change: transform; cursor: grab; touch-action: pan-y; }
.korp3d-ring:active { cursor: grabbing; }
.korp3d-slot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.korp3d-card { position: relative; width: 306px; height: 120px; display: flex; align-items: center; gap: 16px; padding: 0 22px; border-radius: 20px; text-decoration: none;
  transform-style: preserve-3d; transform: translateZ(0) scale(1);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 13%, transparent) 0%, transparent 44%), linear-gradient(155deg, rgba(26,28,40,0.96) 0%, rgba(13,14,22,0.98) 55%, rgba(8,9,15,0.99) 100%);
  border: 1.5px solid color-mix(in srgb, var(--c) 36%, transparent);
  box-shadow: 0 18px 42px -18px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s; }
.korp3d-card:hover { transform: translateZ(30px) scale(1.05); border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--c) 33%,transparent), 0 0 48px var(--g), 0 28px 52px -16px rgba(0,0,0,0.82), inset 0 1px 0 color-mix(in srgb,var(--b) 45%,transparent); }
.korp3d-current { border-color: color-mix(in srgb, var(--c) 55%, transparent); }

.kc-grid { position: absolute; inset: 0; border-radius: 20px; pointer-events: none; opacity: .26; transition: opacity .3s;
  background-image: linear-gradient(color-mix(in srgb,var(--c) 30%,transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb,var(--c) 30%,transparent) 1px, transparent 1px);
  background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%); }
.korp3d-card:hover .kc-grid { opacity: .5; }
.kc-aurora { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; pointer-events: none; }
.kc-aurora::before { content: ''; position: absolute; inset: -120%; opacity: .22; will-change: transform; animation: korp-aurora-spin 26s linear infinite;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, color-mix(in srgb,var(--c) 27%,transparent) 55deg, transparent 120deg, color-mix(in srgb,var(--b) 20%,transparent) 180deg, transparent 240deg, color-mix(in srgb,var(--c) 22%,transparent) 300deg, transparent 360deg); }
.korp3d-card:hover .kc-aurora::before { animation-duration: 7s; opacity: .9; }
.kc-glow { position: absolute; inset: 0; border-radius: 20px; pointer-events: none; opacity: .55;
  background: radial-gradient(circle at 26% 20%, color-mix(in srgb,var(--c) 30%,transparent) 0%, transparent 46%), radial-gradient(circle at 76% 82%, color-mix(in srgb,var(--b) 24%,transparent) 0%, transparent 46%); }
.korp3d-card:hover .kc-glow { opacity: .9; }
.kc-ring { position: absolute; inset: -1px; border-radius: 21px; padding: 1.6px; pointer-events: none; opacity: .45; animation: korp-border-rot 6s linear infinite;
  background: conic-gradient(from var(--korp-a,0deg), transparent 0deg, var(--b) 55deg, var(--c) 110deg, transparent 200deg, color-mix(in srgb,var(--c) 60%,transparent) 300deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.korp3d-card:hover .kc-ring { opacity: 1; }
.kc-sheen { position: absolute; inset: 0; border-radius: 20px; pointer-events: none; opacity: .5;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,0.11) 49%, transparent 60%); }
.korp3d-card:hover .kc-sheen { opacity: .95; }
.kc-bevel { position: absolute; left: 12px; right: 12px; top: 0; height: 1px; border-radius: 9999px; pointer-events: none; opacity: .5;
  background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--b) 67%,transparent), transparent); }
.korp3d-card:hover .kc-bevel { opacity: 1; }
.kc-orb { position: relative; z-index: 2; flex-shrink: 0; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 16px; transform: translateZ(20px);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb,var(--c) 30%,transparent) 0%, color-mix(in srgb,var(--c) 8%,transparent) 70%, transparent 100%);
  border: 1px solid color-mix(in srgb,var(--c) 30%,transparent); box-shadow: inset 0 0 10px color-mix(in srgb,var(--c) 14%,transparent), 0 4px 10px rgba(0,0,0,0.4); }
.kc-orb img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 2px color-mix(in srgb,var(--c) 44%,transparent)); }
.korp3d-card:hover .kc-orb img { filter: drop-shadow(0 0 9px var(--g)); }
/* G342 §13 — orbe « image d'ambiance » (Kali Events / Kali Krew : photos, pas des logos) :
   l'image REMPLIT l'orbe (cover arrondi) au lieu de flotter en contain. */
.kc-orb-cover { overflow: hidden; }
.kc-orb-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* G342 §13 — label long (HOLYSTIKA FESTIVAL) : réduit + 2 lignes, jamais tronqué ni débordant. */
.kc-label-long { font-size: 1.0rem !important; white-space: normal !important; line-height: 1.12 !important; }
.kc-txt { position: relative; z-index: 2; min-width: 0; text-align: left; transform: translateZ(16px); }
/* OR PLEIN (pas de background-clip — incassable sous transform 3D, cf composant d'origine) */
.kc-label { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: .07em; line-height: 1.05; white-space: nowrap;
  font-family: var(--font-display); color: #ecc987;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(212,175,96,0.3); transition: color .3s, text-shadow .3s; }
.korp3d-card:hover .kc-label { color: #fff7e2; text-shadow: 0 1px 1px rgba(0,0,0,0.55), 0 0 16px var(--g), 0 0 32px color-mix(in srgb,var(--c) 55%,transparent); }
.kc-filet { display: block; height: 1px; width: 48px; margin-top: 4px; border-radius: 9999px; opacity: .6; background: linear-gradient(90deg, var(--b), var(--c), transparent); }
.kc-tag { display: block; margin-top: 6px; font-size: .74rem; font-weight: 500; letter-spacing: .02em; color: color-mix(in srgb,var(--c) 60%, #d8c9a0); white-space: nowrap; }
.korp3d-card:hover .kc-tag { color: rgba(255,255,255,0.74); }
.kc-accent { position: absolute; left: 14%; right: 14%; bottom: 6px; height: 2px; border-radius: 9999px; pointer-events: none; opacity: .35; transition: opacity .3s;
  background: linear-gradient(90deg, transparent, var(--b), var(--c), var(--b), transparent); }
.korp3d-card:hover .kc-accent { opacity: 1; box-shadow: 0 0 10px var(--g); }
.kc-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.kc-tl { left: 0; top: 0; border-left: 2px solid; border-top: 2px solid; border-top-left-radius: 20px; border-color: color-mix(in srgb,var(--c) 40%,transparent); }
.kc-tr { right: 0; top: 0; border-right: 2px solid; border-top: 2px solid; border-top-right-radius: 20px; border-color: color-mix(in srgb,var(--c) 40%,transparent); }
.kc-bl { left: 0; bottom: 0; border-left: 2px solid; border-bottom: 2px solid; border-bottom-left-radius: 20px; border-color: color-mix(in srgb,var(--c) 28%,transparent); }
.kc-br { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; border-bottom-right-radius: 20px; border-color: color-mix(in srgb,var(--c) 28%,transparent); }
.korp3d-launch { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5; cursor: pointer; background: none; border: none; padding: 6px 10px;
  font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .26em; }
.korp-pirouette { display: inline-block; margin-right: 8px; animation: korp-pirouette 4.5s ease-in-out infinite; }
@media (max-width: 640px) { .korp3d { overflow-x: clip; } .korp3d-ring { width: 280px; } .korp3d-card { width: 230px; height: auto; min-height: 104px; gap: 11px; padding: 12px 16px; } .kc-label { font-size: 1.06rem; white-space: normal; line-height: 1.12; } .kc-tag { white-space: normal; line-height: 1.3; font-size: .7rem; } .kc-orb { width: 46px; height: 46px; } .kc-orb img { width: 33px; height: 33px; } }
/* G37 (14/07) : idem Vokali — nowrap + hauteur fixe = texte qui deborde des cartes tourniquet sur mobile. Wrap + hauteur auto. */
@media (prefers-reduced-motion: reduce) { .kc-aurora::before, .kc-ring, .korp-pirouette { animation: none; } }

/* ════════ R9377 — CONSTELLATION STATIQUE : liste des 10 univers en cartes glass, sous la plaque
   KaliKorp. Réutilise TEL QUEL le composant .korp3d-card/.kc-* (même visuel que le tourniquet),
   posé dans une grille responsive + flottement doux décalé (« gigote »). ════════════════════════ */
.korp-constel-wrap { max-width: 980px; margin: clamp(30px,5vw,54px) auto 0; text-align: center; }
.korp-constel-title { font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 clamp(18px,3vw,30px); }
.korp-constel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,2vw,22px); justify-items: center; }
.kkc-slot { width: 100%; display: flex; justify-content: center; will-change: transform;
  animation: kkc-float 6s ease-in-out infinite; }
@keyframes kkc-float { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-9px) rotate(.5deg); } }
/* chaque étoile flotte à son propre rythme (décalage « gigote ») */
.kkc-slot:nth-child(1) { animation-duration: 6.2s; animation-delay: 0s; }
.kkc-slot:nth-child(2) { animation-duration: 5.4s; animation-delay: -1.1s; }
.kkc-slot:nth-child(3) { animation-duration: 6.8s; animation-delay: -.5s; }
.kkc-slot:nth-child(4) { animation-duration: 5.8s; animation-delay: -1.8s; }
.kkc-slot:nth-child(5) { animation-duration: 6.4s; animation-delay: -.8s; }
.kkc-slot:nth-child(6) { animation-duration: 5.6s; animation-delay: -2.2s; }
/* G342 §transversal — les 4 univers ajoutés (10 au total) gardent le flottement décalé. */
.kkc-slot:nth-child(7) { animation-duration: 6.1s; animation-delay: -1.4s; }
.kkc-slot:nth-child(8) { animation-duration: 5.9s; animation-delay: -.3s; }
.kkc-slot:nth-child(9) { animation-duration: 6.6s; animation-delay: -1.9s; }
.kkc-slot:nth-child(10) { animation-duration: 5.5s; animation-delay: -.9s; }
/* la carte hérite du visuel .korp3d-card mais s'étire dans la grille (fini le 306px fixe du ring) */
.kkc-card { width: 100%; max-width: 320px; height: auto; min-height: 104px; padding-top: 15px; padding-bottom: 15px; }
.korp-constel .kc-txt { overflow: hidden; }
.korp-constel .kc-label { white-space: normal; }
.korp-constel .kc-tag { white-space: normal; line-height: 1.3; }
/* AlloKali = étoile courante · Holystika = à venir (non cliquable) */
.kkc-card.kkc-soon { cursor: default; opacity: .84; }
.kkc-card.kkc-soon:hover { transform: none; border-color: color-mix(in srgb, var(--c) 36%, transparent);
  box-shadow: 0 18px 42px -18px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.07); }
.kkc-badge { position: absolute; top: 8px; right: 10px; z-index: 3; font-family: var(--font-display);
  font-size: .52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--c) 32%, rgba(9,11,18,0.72));
  border: 1px solid color-mix(in srgb, var(--c) 48%, transparent); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
@media (max-width: 900px) { .korp-constel { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .korp-constel { grid-template-columns: 1fr; } .kkc-card { max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { .kkc-slot { animation: none; } }

/* ════════ R9387 — TUNNEL LIGHT-SPEED (phase 0 d'intro, Canvas 2D) ══════════════════════════════
   Overlay plein écran z AU-DESSUS DE TOUT (tourniquet=10000, brand-intro=9000, matrice=9999) le
   temps du voyage hyperespace (~2s), puis fondu et retrait du DOM par le JS inline. reduced-motion
   → jamais affiché (skip aussi côté JS). Sert d'écran noir de couverture dès le chargement. */
.kk-warp {
  position: fixed; inset: 0; z-index: 99999; background: #04060c; overflow: hidden;
  opacity: 1; transition: opacity 420ms ease, visibility 420ms ease;
}
.kk-warp-canvas { display: block; width: 100%; height: 100%; }
.kk-warp.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kk-warp { display: none !important; } }

/* ════════ AL1 (vague 13) — INTRO TOURNIQUET, port vanilla de KorpBrandIntro (kalikorp.com) ═══════
   Réutilise TEL QUEL le composant carte .korp3d-card/.kc-* (même visuel que la constellation
   KaliKorp plus bas sur la page) dans un nouveau tourniquet d'INTRO plein écran : colonne → cylindre
   → spin → settle sur AlloKali. z-index au-dessus de #brand-intro (9000) ET .hk-welcome (9999) pour
   que les deux jouent DERRIÈRE pendant que le tourniquet fond (crossfade propre à la fin). */
.ak-ti-root { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 46%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(ellipse at 58% 54%, rgba(212,175,96,0.08), transparent 62%), #06080e;
  transition: opacity 650ms cubic-bezier(.4,0,.2,1); }
.ak-ti-root::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(212,175,96,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,96,.06) 1px, transparent 1px);
  background-size: 62px 62px; mask-image: radial-gradient(circle at 50% 50%, #000 14%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 14%, transparent 90%); }
.ak-ti-out { opacity: 0; pointer-events: none; }
.ak-ti-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  perspective: 1500px; perspective-origin: 50% 46%; }
.ak-ti-halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(760px,92vw); height: min(760px,92vw);
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(212,175,96,0.14), rgba(37,99,235,0.06) 42%, transparent 70%); }
/* G342 FIX5 — le ring (et TOUTES ses cartes) passe AU-DESSUS du logo « A » central pour que les
   cartes ne disparaissent plus derrière lui pendant la rotation (cercle complet visible). */
.ak-ti-ring { position: relative; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none; z-index: 2; }
.ak-ti-slot { position: absolute; left: 50%; top: 50%; margin-left: -153px; margin-top: -60px;
  width: 306px; height: 120px; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.ak-ti-card.korp3d-card { pointer-events: none; }
.ak-ti-tagline { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display,'Inter',system-ui,sans-serif); font-size: clamp(.68rem,1.6vw,.88rem);
  letter-spacing: .18em; text-transform: uppercase; color: rgba(212,175,96,.6); white-space: nowrap; }
/* Mini orbe CSS (pas de canvas WebGL — évite d'ouvrir un 7e contexte GL sur une carte visible ~2s) :
   pulse bleu doux, écho du VRAI orbe plasma de la pré-page #brand-intro juste après. */
.ak-ti-mini-orb { background: none !important; border: none !important; box-shadow: none !important; overflow: visible; }
.ak-ti-mini-orb-core { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(96,165,250,0.55) 0%, rgba(37,99,235,0.28) 46%, transparent 74%);
  filter: blur(2px); animation: ak-ti-orb-pulse 2.6s ease-in-out infinite; }
@keyframes ak-ti-orb-pulse { 0%,100% { transform: scale(0.92); opacity: .82; } 50% { transform: scale(1.08); opacity: 1; } }
/* Carte AlloKali qui se pose : glow renforcé + halo doré, cf classe posée par le JS au settle */
.ak-ti-current.is-settled { border-color: color-mix(in srgb, var(--c) 85%, transparent) !important; }
.ak-ti-current.is-settled .kc-ring { opacity: 1 !important; animation-duration: 2.4s !important; }
.ak-ti-current.is-settled .kc-glow { opacity: 1 !important; }
.ak-ti-current.is-settled { box-shadow: 0 0 60px var(--g), 0 0 120px color-mix(in srgb, var(--c) 30%, transparent); }
@media (max-width: 640px) {
  .ak-ti-slot { margin-left: -131px; margin-top: -52px; width: 262px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) { .ak-ti-root { display: none !important; } }

/* R2478 — derniers gras blancs (bannière tarif fondateur) → or */
.ebb-text strong, .early-bird-banner strong { color: #e6c478 !important; }

/* ════════════ R2479 — VRAI OR + BLEU AllInMyApp (EXACT, avec reflet) — éradique le "jaune miteux" ════════════ */
@keyframes aima-shimmer-move { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* OR MÉTALLIQUE EXACT .aima-grad-gold (reflet #fff1b8) + sheen animé */
.gw, .kk-grad-text, .b-kali, .korp-grad-gold, .bi-all, .bi-kali, .aima-all, .korp-name,
.bi-tagline, .nav-brand-tag,
.section h2, .section-head h2, .section h2 em, .section-head h2 em, .section h2 .gw,
.feature-card h3, .vertical-card h3, .step-card h3, .pricing-card h3, .fc-title {
  background: linear-gradient(100deg, #bf953f 0%, #fcf6ba 22%, #b38728 42%, #fbf5b7 62%, #aa771c 82%, #fcf6ba 100%) !important;
  background-size: 160% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(60,40,5,0.55)) drop-shadow(0 0 18px rgba(212,175,96,0.22));
  animation: aima-shimmer-move 5s ease-in-out infinite;
}
/* BLEU ÉLECTRIQUE VIF EXACT .aima-grad-blue (reflet #a9c6ff) — « Allo » + secondaire, lu BLEU (fini le gris) */
.b-llo, .sec-blue, .aima-rest, .bi-inmyapp, .bi-llo {
  background: linear-gradient(100deg, #6ea0ff 0%, #a9c6ff 38%, #4f7ff0 72%, #3b63d8 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(91,140,255,0.34)) !important;
  text-shadow: none !important; animation: none !important;
}
/* hero 1re ligne : or gradient SANS filter (anti-blob sur gros texte) */
.hero-line-gold { background: linear-gradient(100deg, #bf953f 0%, #fcf6ba 22%, #b38728 42%, #fbf5b7 62%, #aa771c 82%, #fcf6ba 100%) !important;
  background-size: 160% 100% !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important; filter: none !important;
  text-shadow: 0 2px 14px rgba(4,7,12,0.7) !important; animation: aima-shimmer-move 6s ease-in-out infinite !important; }

/* R8641 (K10) — mot hero en boucle matrice (« commercial » → standardiste/secrétaire/agent/…).
   Le gradient est répété ICI (le fond ne cascade jamais aux enfants) : sans ça le mot serait
   invisible (color:transparent hérité du parent .hero-line-gold, sans fond à clipper). Même
   recette EXACTE que .hero-line-gold pour un flatten invisible en fin de décodage matrice. */
.hero-role-word {
  display: inline-block;
  background: linear-gradient(100deg, #bf953f 0%, #fcf6ba 22%, #b38728 42%, #fbf5b7 62%, #aa771c 82%, #fcf6ba 100%) !important;
  background-size: 160% 100% !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important; filter: none !important;
}
.hero-role-word .mxd-char.mxd-lock {
  background: linear-gradient(100deg, #bf953f 0%, #fcf6ba 22%, #b38728 42%, #fbf5b7 62%, #aa771c 82%, #fcf6ba 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* FIX bouton shiny cassé : était display:inline (1180px, contour éclaté) → inline-flex pill propre */
.shiny-cta { display: inline-flex !important; align-items: center; vertical-align: middle; }
.bi-tagline, .nav-brand-tag { font-family: var(--font-display) !important; }
.btn { font-family: var(--font-display); }

/* Carte KaliKorp trop grosse/vide → réduire (padding + hauteur tourniquet) */
.korp-plaque { padding: clamp(34px,4.2vw,54px) clamp(24px,4vw,56px) !important; }
.korp3d { height: clamp(280px, 34vw, 380px) !important; margin-bottom: 8px !important; }
.korp-sub { margin-bottom: 14px !important; }

/* Bleu contextuel dans les titres (bat .section h2 or) — logique bleu/or par phrase */
.section h2 .sec-blue, .section-head h2 .sec-blue, .section h2 .b-llo, .section-head h2 .b-llo {
  background: linear-gradient(100deg, #6ea0ff 0%, #a9c6ff 38%, #4f7ff0 72%, #3b63d8 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(91,140,255,0.34)) !important; animation: none !important;
}

/* ════════════ R2480 — VRAI MacBook 3D (porté de Vokali : perspective + capot incliné + base à plat) ════════════ */
.kkmac-stage { perspective: 1700px; perspective-origin: 50% 50%; width: 100%; max-width: 560px; margin: 0 auto clamp(-84px,-8vw,-46px); }
.kkmac-3d { position: relative; transform-style: preserve-3d; width: 100%; transform: rotateX(8deg) translateY(8px); transition: transform 240ms ease-out; }
.kkmac-stage:hover .kkmac-3d { transform: rotateX(4deg) translateY(4px); }
.kkmac-screen { position: relative; transform-style: preserve-3d; width: 100%; aspect-ratio: 16/10; transform-origin: 50% 100%; transform: rotateX(-10deg) translateZ(0.1px);
  border-radius: 18px 18px 6px 6px; padding: 11px 11px 14px;
  background: linear-gradient(155deg,#3c3f46 0%,#26282d 48%,#1a1c20 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.6) inset, 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,96,0.12); }
.kkmac-screen::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0.06), transparent 8%, transparent 92%, rgba(255,255,255,0.06)); }
.kkmac-notch { position:absolute; top:4px; left:50%; transform:translateX(-50%); width:108px; height:7px; border-radius:0 0 8px 8px; background:#0c0d10; z-index:6; }
.kkmac-cam { position:absolute; top:6px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #1d3340, #050606); box-shadow:0 0 3px rgba(120,180,255,0.5); z-index:7; }
.kkmac-glass { position:absolute; inset:11px 11px 14px; border-radius:11px 11px 3px 3px; overflow:hidden; background:#000;
  box-shadow:0 0 0 1px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.9) inset; }
.kkmac-glass::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:30; border-radius:inherit;
  background:linear-gradient(125deg, rgba(255,255,255,0.07) 0%, transparent 30%, transparent 100%); mix-blend-mode:screen; }
.kkmac-img { width:100%; height:100%; object-fit:cover; display:block; }
.kkmac-base { position:relative; transform-style:preserve-3d; width:104%; margin:-2px auto 0; left:-2%; aspect-ratio:16/7; transform-origin:50% 0%; transform:rotateX(80deg);
  border-radius:8px 8px 14px 14px; background:linear-gradient(180deg,#3a3d44 0%,#2a2c31 30%,#202227 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 40px 70px rgba(0,0,0,0.5); }
.kkmac-base::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:14%; height:8px; border-radius:0 0 10px 10px; background:#16181c; }
.kkmac-base::after { content:''; position:absolute; bottom:-7px; left:3%; right:3%; height:9px; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#1a1c20,#0d0e11); box-shadow:0 8px 22px rgba(0,0,0,0.5); }
.kkmac-trackpad { position:absolute; bottom:9%; left:50%; transform:translateX(-50%); width:30%; height:34%; border-radius:9px; background:linear-gradient(180deg,#34363b,#2a2c30); box-shadow:inset 0 1px 2px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.03); }
/* Variante DÉMO : la dalle s'adapte au contenu (live-stage) au lieu d'un ratio figé */
.kkmac-demo { max-width: 1000px; }
.kkmac-demo .kkmac-screen { aspect-ratio: auto; }
.kkmac-demo .kkmac-glass { position: relative; inset: 0; border-radius: 10px; background: transparent; box-shadow: none; }
.kkmac-demo .kkmac-glass::after { display: none; }
@media (prefers-reduced-motion: reduce) { .kkmac-3d { transition: none; } }

/* R2481 — clavier du MacBook 3D (était invisible) */
.kkmac-keys { position:absolute; top:11%; left:6%; right:6%; height:48%; display:grid;
  grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(5, 1fr); gap: clamp(1.5px,0.5%,4px); }
.kkmac-keys i { background: linear-gradient(180deg,#43464e,#26282d); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 1px rgba(0,0,0,0.45); }
.kkmac-keys i.kk-sp { grid-column: span 6; }
.kkmac-trackpad { bottom: 6%; }

/* ════════════ R2481 — cartes capacités : spotlight + bordure or rotative + 42 + pastilles 1 ligne ════════════ */
@property --ga { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes caps-border-rot { to { --ga: 360deg; } }
/* spotlight (lumière qui suit le curseur) */
.feature-card { position: relative; --mx: 50%; --my: 50%; isolation: isolate; }
.feature-card::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0; transition:opacity .3s;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(230,196,120,0.16), rgba(96,165,250,0.06) 40%, transparent 62%); }
.feature-card:hover::before { opacity:1; }
/* bordure dorée rotative au hover */
.feature-card::after { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none; z-index:2; opacity:0; transition:opacity .35s;
  background: conic-gradient(from var(--ga,0deg), transparent, #e6c478 16%, #fff1b8 28%, #e6c478 40%, transparent 58%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: caps-border-rot 4s linear infinite; }
.feature-card:hover::after { opacity:1; }
.feature-card > * { position: relative; z-index: 1; }

/* cartes plus compactes + pastilles TOUTES sur une seule ligne */
.feature-card { padding: 20px 20px 16px !important; }
.feature-card h3 { margin-bottom: 6px !important; }
.feature-card p { font-size: 0.92rem; line-height: 1.5; }
.fc-demo { display: flex; flex-wrap: nowrap !important; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.fcd-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* R8643 (vague 12) — mini-strip confiance (anti-insultes + alerte équipe), réutilise .ob-card */
.trust-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; max-width: 820px; margin: 30px auto 0; }
.trust-cards .ob-card h3 { font-size: 1rem; }
@media (max-width: 640px) { .trust-cards { grid-template-columns: 1fr; } }

/* voir les 42 : fondu d'ombre + bouton premium + grille compacte complète */
.caps-reveal { position: relative; margin-top: 30px; display: flex; flex-direction: column; align-items: center; }
.caps-reveal::before { content:''; position:absolute; top:-78px; left:-4%; right:-4%; height:78px; pointer-events:none; z-index:0;
  background: linear-gradient(180deg, transparent, #06080e 88%); }
.caps-toggle { z-index: 1; }
.caps-all { width: 100%; margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px,1fr)); gap: 10px;
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
/* R4527 — FERMÉ = hauteur 0 RÉELLE. Sans ça, `display:grid` écrasait l'attribut [hidden] → les 42
   chips restaient rendues (opacity:0) et réservaient toute la hauteur sous le bouton = espace vide géant. */
.caps-all[hidden] { display: none !important; }
.caps-all.is-open { opacity: 1; transform: none; }
.cap-chip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 14px; font-size: 0.85rem; color: #d6dce8;
  background: linear-gradient(155deg, rgba(22,26,40,0.78) 0%, rgba(10,12,20,0.86) 100%);
  border: 1px solid rgba(212,175,96,0.20);
  box-shadow: inset 0 1px 0 rgba(252,246,186,0.10), 0 8px 22px -14px rgba(0,0,0,0.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(155deg, rgba(20,24,34,0.72), rgba(12,15,22,0.72)); border: 1px solid rgba(212,175,96,0.18); transition: border-color .25s, transform .25s; }
.cap-chip b { color: #e6c478; font-size: 0.82rem; flex-shrink: 0; line-height: 1; }
.cap-chip:hover { border-color: rgba(230,196,120,0.55); box-shadow: inset 0 1px 0 rgba(252,246,186,0.16), 0 12px 30px -14px rgba(0,0,0,0.85), 0 0 22px -8px rgba(212,175,96,0.4); }
@media (prefers-reduced-motion: reduce) { .feature-card::after { animation: none; } }

/* ════════════ R2481 — section OUTBOUND + modale conformité ════════════ */
.section-outbound { text-align: center; }
.ob-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 840px; margin: 0 auto 28px; }
.ob-cloud span { padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-family: var(--font-display); letter-spacing: 0.02em;
  color: #9fb0c8; background: rgba(20,24,34,0.6); border: 1px solid rgba(96,165,250,0.18); }
.ob-cloud .ob-hot { border-color: rgba(212,175,96,0.45); box-shadow: 0 0 18px -6px rgba(212,175,96,0.45);
  background-image: linear-gradient(100deg, #d4af60, #fff1b8 40%, #d9b25a 70%, #e8c56a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; }
.ob-pitch { max-width: 760px; margin: 0 auto 30px; font-size: clamp(1rem,2.1vw,1.18rem); line-height: 1.6; color: var(--text); }
.ob-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 980px; margin: 0 auto 32px; }
.ob-card { text-align: left; padding: 24px 22px; border-radius: 18px; background: linear-gradient(155deg, rgba(20,24,34,0.72), rgba(12,15,22,0.78)); border: 1px solid rgba(96,165,250,0.2); }
.ob-card-gold { border-color: rgba(212,175,96,0.34); }
.ob-card-ico { font-size: 1.6rem; }
.ob-card h3 { margin: 10px 0 6px; }
.ob-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.ob-legal { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ob-legal-note { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }
.ob-legal-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  background: rgba(212,175,96,0.08); border: 1px solid rgba(212,175,96,0.42); color: #e9cb78; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em;
  transition: border-color .25s, background .25s, transform .2s; }
.ob-legal-btn:hover { border-color: rgba(230,196,120,0.75); background: rgba(212,175,96,0.15); transform: translateY(-1px); }
.ob-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ob-modal[hidden] { display: none; }
.ob-modal-backdrop { position: absolute; inset: 0; background: rgba(4,6,12,0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ob-modal-panel { position: relative; z-index: 1; max-width: 640px; width: 100%; max-height: 86vh; overflow-y: auto; text-align: left;
  padding: clamp(26px,4vw,40px); border-radius: 22px; background: linear-gradient(165deg, rgba(22,20,14,0.96), rgba(12,12,16,0.98));
  border: 1px solid rgba(212,175,96,0.3); box-shadow: 0 50px 110px -40px rgba(0,0,0,0.9); animation: ob-modal-in .35s cubic-bezier(.22,1,.36,1); }
@keyframes ob-modal-in { from { opacity:0; transform: translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.ob-modal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; z-index: 2;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #cdd4e0; font-size: 0.9rem; }
.ob-modal-x:hover { background: rgba(255,255,255,0.1); }
.ob-modal-panel h3 { font-size: clamp(1.2rem,3vw,1.5rem); margin: 6px 0 12px; }
.ob-modal-intro { color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
.ob-modal-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0 0 18px; padding: 0; }
.ob-modal-list li { position: relative; padding-left: 26px; font-size: 0.9rem; line-height: 1.5; color: #cdd4e0; }
.ob-modal-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #25d366; font-weight: 700; }
.ob-modal-list strong { color: #e9cb78; }
.ob-modal-ban { padding: 14px 16px; border-radius: 12px; background: rgba(220,40,40,0.08); border: 1px solid rgba(220,60,60,0.32); color: #f3c9c9; font-size: 0.88rem; line-height: 1.5; }
.ob-modal-ban strong { color: #ff8d8d; }
.ob-modal-foot { margin-top: 16px; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
body.ob-locked { overflow: hidden; }
@media (max-width: 720px) { .ob-cards { grid-template-columns: 1fr; } }

/* R2481b — MacBook 3D : clavier VISIBLE (base moins edge-on, on voit le deck en perspective) */
.kkmac-3d { transform: rotateX(13deg) translateY(2px) !important; }
.kkmac-stage:hover .kkmac-3d { transform: rotateX(9deg) translateY(0) !important; }
.kkmac-base { transform: rotateX(60deg) !important; aspect-ratio: 16/6.2 !important; }
.kkmac-keys { top: 14%; height: 56%; }
.kkmac-trackpad { bottom: 7%; }
.kkmac-stage { margin-bottom: clamp(-120px,-12vw,-64px) !important; }
.kkmac-demo { margin-bottom: clamp(-150px,-14vw,-80px) !important; }

/* ════════════ R2482 — clavier MacBook vanilla (touches labellisées) + glow ⌘C/⌘V AlloKali ════════════ */
.kk-kb-block { max-width: 900px; margin: 30px auto 0; text-align: center; }
.kk-kb-cap { font-size: clamp(0.95rem,2vw,1.12rem); color: var(--text); margin-bottom: 18px; }
.kk-kb-wrap { perspective: 900px; }
/* R8641 (K5/K6) — #kk-kb-big héberge désormais le clavier AZERTY porté (.ak-kbsolo, sa propre
   perspective 3D + tilt souris) : plus de rotateX statique en double ici. */
#kk-kb-big { transform-origin: top center; }
.kk-kb { display: flex; flex-direction: column; gap: clamp(3px,0.6vw,6px); padding: clamp(8px,1.4vw,14px); border-radius: 16px;
  background: linear-gradient(180deg,#26282d,#0c0d10); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06); }
.kk-row { display: flex; gap: clamp(3px,0.6vw,6px); }
.kk-key { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  height: clamp(26px,3.4vw,40px); border-radius: 6px; font-family: var(--font-display); font-size: clamp(0.6rem,1.1vw,0.8rem); color: #d4d8e0;
  background: linear-gradient(180deg,#44464e 0%,#2a2c31 60%,#1a1b20 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 3px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.5);
  transition: box-shadow .25s, transform .15s, color .25s, background .25s; }
.kk-key.kk-tx { font-size: clamp(0.5rem,0.9vw,0.64rem); color: #9aa0ac; }
.kk-key.kk-ar { font-size: 0.62rem; color: #9aa0ac; }
.kk-key.kk-sp { flex-grow: 5.6 !important; }
.kk-key.kk-mod { color: #e9cb78; }
.kk-key.kk-press { transform: translateY(1px) scale(0.97); }
.kk-key.kk-mod.kk-press { box-shadow: 0 0 0 1.5px #e6c478, 0 0 14px rgba(230,196,120,0.7), 0 0 26px rgba(230,196,120,0.4); color: #fff7e2; background: linear-gradient(180deg,#5a4a1e,#2a2410); }
.kk-key.kk-press:not(.kk-mod) { box-shadow: 0 0 0 1.5px #6ea0ff, 0 0 14px rgba(110,160,255,0.7), 0 0 26px rgba(110,160,255,0.4); color: #fff; background: linear-gradient(180deg,#1e3a6e,#0e1a36); }
/* mini : le clavier sur le deck du MacBook (synchronisé avec le grand) */
.kkmac-keys .kk-kb-mini { height: 100%; gap: clamp(1px,0.45%,3px); padding: 0; background: transparent; box-shadow: none; }
.kk-kb-mini .kk-row { flex: 1; gap: clamp(1px,0.45%,3px); }
.kk-kb-mini .kk-key { height: 100%; border-radius: 2.5px; font-size: clamp(3px,0.62vw,5.5px); box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.07), 0 0.5px 1px rgba(0,0,0,0.45); }
.kk-kb-mini .kk-key.kk-tx, .kk-kb-mini .kk-key.kk-ar { font-size: clamp(2.5px,0.5vw,4.5px); }
@media (max-width:640px){ .kk-key { height: clamp(20px,5vw,30px); font-size: clamp(0.5rem,2.2vw,0.7rem); } }

/* ════════════ R2483 — KaliKana sur or/spécial · ps-text vrai or · badge VS · clavier deck · orbe header ════════════ */
/* Tout élément or/bleu spécial en police KaliKana */
.gw, .b-kali, .b-llo, .kk-grad-text, .korp-grad-gold, .aima-all, .aima-rest, .korp-name, .eco-link, .eco-aima-inline, .ps-text, .cap-42,
.eco-link-current, .eco-brand-name, .hero-line-gold, .bi-tagline, .nav-brand-tag { font-family: var(--font-display) !important; }

/* « Gros volume / Scale… » en VRAI or (gradient AllInMyApp) + KaliKana — comme « les questions qu'on nous pose » */
.ps-text strong, .ps-name { font-family: var(--font-display) !important;
  background: linear-gradient(100deg, #bf953f 0%, #fcf6ba 22%, #b38728 42%, #fbf5b7 62%, #aa771c 82%, #fcf6ba 100%) !important;
  background-size: 160% 100% !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(60,40,5,.55)) drop-shadow(0 0 18px rgba(212,175,96,.22)); animation: aima-shimmer-move 5s ease-in-out infinite; }

/* R4527 — VS = TAMPON rectangulaire (glass + bordure or épaisse, « VS » gros incliné, effet cachet).
   R8641 (K8) — lettres trop sombres (gradient plat + double-border legacy neutralisée ci-dessus) :
   gradient éclairci (mêmes crêtes quasi-blanches que .hero-line-gold) + glow doré fort, rotation
   à DROITE (demande explicite Loris), tampon plus grand, mieux centré verticalement dans le titre. */
/* AL5 (vague 13) — le tampon « VS » était trop petit ET le texte manquait de relief (« on voit
   à peine les 2 lettres ») → agrandi (~+35%), line-height:1 pour un vrai centrage vertical (le
   line-height hérité du <h2> décalait le texte dans sa boîte flex), et un ::after dupliqué en
   bronze foncé, légèrement décalé, ajoute une VRAIE extrusion 3D (lettres qui « sortent »). */
.cmp-title .cmp-vs, .cmp-section .cmp-vs { position: relative; display: inline-flex !important; align-items: center; justify-content: center;
  min-width: clamp(90px,9.4vw,124px); height: clamp(66px,7.6vw,92px); margin: 0 16px; padding: 0 clamp(16px,2vw,24px);
  vertical-align: middle; border-radius: 15px; line-height: 1;
  /* R9362 — CENTRÉ (plus de rotate qui décalait) + plus gros + relief 3D doré via text-shadow multi-couches */
  transform: none; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem,4.6vw,3.5rem); letter-spacing: 0.05em;
  /* extrusion 3D dorée : couches or de plus en plus foncées vers le bas → lettres qui « sortent ».
     Rendu même sous -webkit-text-fill-color:transparent (text-shadow suit la géométrie du glyphe). */
  text-shadow:
    0 1px 0 #e6c478, 0 2px 0 #d4af60, 0 3px 0 #c19238,
    0 4px 0 #a5791f, 0 5px 1px rgba(0,0,0,0.35), 0 0 18px rgba(230,196,120,0.45);
  /* « VS » en or métallique clippé — crêtes quasi-blanches (fini le rendu terne) */
  background: linear-gradient(120deg,#fff7df 0%,#fff1b8 22%,#f1d182 40%,#e6b94f 58%,#f3d98a 78%,#d9b25a 100%) !important;
  background-size: 160% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  /* carte glass : le fond + la bordure épaisse via ::before (le texte reste clippé) */
  filter: drop-shadow(0 3px 12px rgba(212,175,96,0.6)) drop-shadow(0 0 20px rgba(230,196,120,0.4));
  animation: aima-shimmer-move 5s ease-in-out infinite; }
.cmp-title .cmp-vs::before, .cmp-section .cmp-vs::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: 15px;
  background: linear-gradient(150deg, rgba(30,26,16,0.72), rgba(14,13,18,0.82));
  border: 2.5px solid rgba(212,175,96,0.6); /* contour épais = tampon */
  box-shadow: inset 0 0 0 1px rgba(255,242,200,0.2), inset 0 1px 0 rgba(255,250,212,0.3),
    0 8px 24px -8px rgba(0,0,0,0.7), 0 0 0 3px rgba(212,175,96,0.12); /* double contour cachet */
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0.97; }
/* R9362 — l'ancien ::after bronze translaté (2.5px,3px) créait un « VS » fantôme doublé quasi
   invisible = doublon laid. Supprimé : le relief 3D est désormais porté par le text-shadow doré
   multi-couches (au-dessus), propre et centré. */
.cmp-title .cmp-vs::after, .cmp-section .cmp-vs::after { content: none; }

/* eco-links (Vokali / Kali Kana…) — cohérents + KaliKana */
.eco-link { letter-spacing: 0.01em; }

/* Clavier sur le deck du MacBook : remonté, trackpad descendu (n'interfère plus avec ⌘ droite / espace) */
.kkmac-keys { top: 7% !important; height: 52% !important; }
.kkmac-trackpad { bottom: 6% !important; width: 26% !important; height: 22% !important; }

/* Orbe header : petite ombre derrière le A (il ressort devant l'orbe) + header/orbe un poil plus grands */
/* R4527 — .nav-logo 44px désormais dans la règle canonique unique (1941). Ne reste que l'img. */
.nav-logo-img { height: 31px !important; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.75)) drop-shadow(0 0 3px rgba(0,0,0,0.6)) !important; }

/* ════════════════════════════════════════════════════════════════════════
   R2484 (22/06) — Override FINAL : pricing premium (bronze amplifié + boutons
   métal shiny par tier + carte Entreprise badge/mention/zoom lent), eco-links
   harmonisés, bouton « Découvrir KaliKorp » indépendant du tilt magnétique.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1A. CARTE BUSINESS = VRAI BRONZE CUIVRÉ (nettement éloigné de l'or) ── */
.pc-tier-bronze.pricing-card-pop {
  background:
    radial-gradient(130% 72% at 50% -10%, rgba(201,122,62,0.22), transparent 58%),
    linear-gradient(165deg, rgba(48,30,16,0.96), rgba(22,14,8,0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(240,185,122,0.22),
    0 34px 82px -34px rgba(176,92,42,0.58) !important;
}
.pc-tier-bronze::before {
  background: linear-gradient(140deg,#f0b97a,#b05c2a 28%,#e89a5a 52%,#5e3414 78%,#d98a4a) !important;
}
/* contour de carte (était BLEU) → bronze cuivré */
.pricing-card.pc-tier-bronze.pricing-card-pop::after {
  background: linear-gradient(160deg, rgba(240,185,122,0.72), rgba(201,122,62,0.30) 45%, transparent 72%) !important;
}
/* beam tournant du pop (était cyan/gold) → bronze */
.pc-tier-bronze.pricing-card-pop::before {
  background: conic-gradient(from var(--beam-angle,0deg), transparent 0deg, #c97f3e 40deg, #f0b97a 80deg, transparent 120deg, transparent 360deg) !important;
}
.pc-tier-bronze.pricing-card-pop:hover { border-color: rgba(201,122,62,0.55) !important; }

/* ── 1B. PASTILLE « ★ Le plus choisi » → BRONZE (même cuivré que la carte) ── */
.pc-pop-badge {
  color: #2a1606 !important;
  background: linear-gradient(135deg,#f6d2a6 0%,#e8a061 26%,#a8602f 52%,#f0b97a 74%,#8a4d22 100%) !important;
  box-shadow: 0 10px 26px -8px rgba(176,92,42,0.6), inset 0 1px 0 rgba(255,236,210,0.7) !important;
}

/* ── 1C. BOUTONS PRICING = shiny métal animé par tier (style du header) ── */
.pc-cta { display: flex !important; justify-content: center; width: 100%; margin-top: 10px;
  padding-top: 0.82rem !important; padding-bottom: 0.82rem !important; text-decoration: none; }
.shiny-silver { --shiny-bg:#0e1014; --shiny-bg-subtle:#1a1d23; --shiny-fg:#eef3f9;
  --shiny-highlight:#c2cdde; --shiny-highlight-subtle:#f6f9fd; }
.shiny-bronze { --shiny-bg:#150d06; --shiny-bg-subtle:#251809; --shiny-fg:#fbe6cd;
  --shiny-highlight:#c97f3e; --shiny-highlight-subtle:#f0b97a; }
/* .shiny-gold est défini plus haut (R2466) */

/* ── 1D. CARTE ENTREPRISE : pastille premium (en flux) + mention + zoom lent ── */
.pc-crown-badge {
  display: flex; width: -webkit-fit-content; width: fit-content; align-items: center; gap: 7px;
  margin: 0 auto 16px; padding: 7px 22px; border-radius: 999px; position: relative; z-index: 4;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: #2a1f06; white-space: nowrap;
  background: linear-gradient(135deg,#fff7d6 0%,#ffe9a0 24%,#e6b94f 52%,#fff1b8 74%,#c9982f 100%);
  background-size: 180% 100%;
  box-shadow: 0 12px 28px -8px rgba(212,175,96,0.7), inset 0 1px 0 rgba(255,250,220,0.92), inset 0 -2px 5px rgba(120,85,20,0.35);
  animation: pc-crown-sheen 4s ease-in-out infinite;
}
.pc-crown-badge::before { content: '✦'; font-size: 0.92em; }
@keyframes pc-crown-sheen { 0%,100%{ background-position: 0 0; } 50%{ background-position: 100% 0; } }
.pc-mention { position: relative; z-index: 1; margin: 2px 0 14px; font-size: 0.82rem; font-weight: 600;
  line-height: 1.4; color: #f3d98a; }
/* zoom/dézoom lent en boucle au repos (le tilt magnétique reprend la main au survol) */
@keyframes pc-gold-breathe { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.028); } }
.pc-tier-gold { animation: pc-gold-breathe 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pc-tier-gold { animation: none; } }

/* ── 5. ECO-LINKS harmonisés (même gabarit/hauteur que le bouton shiny au-dessus) ── */
.eco-links { align-items: center; gap: 12px; margin-top: 26px; }
.eco-link { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 1.2rem !important;
  font-size: 0.84rem; font-weight: 600; border-radius: 999px !important; line-height: 1;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.035);
  color: var(--text); transition: transform .2s, border-color .2s, background .2s, color .2s; }
.eco-link:hover { transform: translateY(-2px); border-color: rgba(230,196,120,0.5) !important;
  background: rgba(212,175,96,0.08); color: #f0d488 !important; }
.eco-shiny { height: 42px; display: inline-flex; align-items: center; }
.eco-link-current { border-color: rgba(212,175,96,.45) !important; background: rgba(212,175,96,0.08) !important; }

/* ── 4. BOUTON « Découvrir KaliKorp » hors du tilt, ancré bas-droite de la plaque ── */
.korp-wrap { position: relative; max-width: 880px; margin: 0 auto; }
.korp-cta { position: absolute !important; right: clamp(18px,3vw,34px); bottom: clamp(18px,3vw,34px);
  z-index: 6; }
@media (max-width: 760px) {
  .korp-cta { position: static !important; display: flex; justify-content: center; margin: 22px auto 0; }
}

/* ════════ R4527 — REFONTE cartes stats : glass · ROUGE métallisé · VERT JUNGLE #6fa845 · bord fin lumineux · magnétique ════════ */
/* Base glass commune (le tilt magnétique vient du JS magneticCards — pas de transform !important au hover). */
.stat-bad, .stat-good {
  position: relative; overflow: hidden; border-radius: 18px !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s !important;
}
/* — Négatif : ROUGE métallisé (dégradé riche, jamais plat) — */
.stat-bad {
  background:
    radial-gradient(130% 82% at 50% -14%, rgba(224,64,72,0.18), transparent 60%),
    linear-gradient(158deg, rgba(48,20,22,0.78), rgba(18,12,13,0.82)) !important;
  border: 1px solid rgba(224,64,72,0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,190,190,0.16), inset 0 -24px 50px -32px rgba(224,64,72,0.40),
    0 20px 46px -30px rgba(120,20,26,0.6) !important;
}
.stat-bad::before { content:''; position:absolute; inset:0 0 auto 0; top:0; height:1px; width:100%; opacity:.85;
  background: linear-gradient(90deg, transparent, rgba(240,90,96,0.6), transparent); }
.stat-bad .stat-num {
  background: linear-gradient(158deg, #ffd9d0 0%, #f0555a 32%, #d61f2b 62%, #8f1119 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 2px 9px rgba(214,31,43,0.4)) drop-shadow(0 1px 0 rgba(255,210,205,0.45)) !important; text-shadow: none !important; }
.stat-bad:hover { border-color: rgba(240,90,96,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,190,190,0.2), 0 26px 56px -26px rgba(214,31,43,0.28) !important; }
/* — Positif : VERT ÉMERAUDE « VALIDÉ » #10b981/#22c55e (métallisé, franc, pas fluo, pas olive) — R6320 */
.stat-good {
  background:
    radial-gradient(130% 82% at 50% -14%, rgba(16,185,129,0.22), transparent 60%),
    linear-gradient(158deg, rgba(15,38,30,0.80), rgba(10,18,15,0.84)) !important;
  border: 1px solid rgba(16,185,129,0.34) !important;
  box-shadow: inset 0 1px 0 rgba(167,243,208,0.20), inset 0 -24px 50px -32px rgba(16,185,129,0.44),
    0 20px 46px -30px rgba(4,120,87,0.62) !important;
}
.stat-good::before { content:''; position:absolute; inset:0 0 auto 0; top:0; bottom:auto; height:1px; width:100%; opacity:.9;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.65), transparent) !important; }
.stat-good::after { display:none !important; }
.stat-good .stat-num {
  background: linear-gradient(158deg, #d1fae5 0%, #34d399 30%, #10b981 58%, #047857 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(16,185,129,0.48)) drop-shadow(0 1px 0 rgba(190,245,220,0.5)) !important; text-shadow: none !important; }
.stat-good .stat-label { color: #a7d8c4 !important; }
.stat-good:hover { border-color: rgba(52,211,153,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(167,243,208,0.24), 0 26px 56px -26px rgba(16,185,129,0.34) !important; }
.stats-legend-good { color: #34d399 !important; }


/* ── R6392 — plaque KaliKorp : textes « création » fusionnés (Loris 03/07) ── */
.korp-creation { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(212,175,96,0.5); text-decoration-thickness: 1px; letter-spacing: 0.34em; }
.korp-meta { position: relative; z-index: 1; margin: 4px 0 10px; font-size: 0.82rem; color: rgba(238,234,214,0.6); font-family: var(--font-display); }
.korp-meta-hint { position: relative; cursor: help; font-weight: 600; color: var(--gold-bright, #e6c478); }
.korp-meta-tip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); width: 250px;
  padding: 8px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: #fff7e2;
  background: rgba(8,9,15,0.97); border: 1px solid rgba(212,175,96,0.4); opacity: 0; pointer-events: none;
  transition: opacity .25s ease; z-index: 30; }
.korp-meta-hint:hover .korp-meta-tip, .korp-meta-hint:focus .korp-meta-tip { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   R8580 — VAGUE 8 (Loris, punch-list démo dimanche) : hero, intro, AllInMyApp,
   méga-ordinateur (souffler à l'agent + relais live), lignes dorées, halo orbe,
   carte signature réutilisable (FAQ + cadre légal).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Item 6e — le clavier (déplacé sous le méga-ordinateur) compense le margin-bottom
   négatif de .kkmac-demo (prévu à l'origine pour le cas « rien ne suit »). Sans ça, le
   clavier se ferait bouffer par la base 3D du Mac. Calculé pour laisser +20/40px net.
   R8641 (K5) — Loris : « trop petit et trop éloigné » → rapproché (le clavier étant aussi
   agrandi, ce resserrement le rapporte visuellement plus près du Mac). ── */
.kkmac-demo + .kk-kb-block { margin-top: clamp(40px, 7vw, 96px); }
/* Item 6e — un peu moins de vide au-dessus de la démo (espace libéré pour les ajouts) */
#live .section-head { margin-bottom: clamp(28px, 4vw, 46px); }

/* ── Item 6d — bouton info DYNAMIQUE (pulse) sur le méga-ordinateur → modale « Relais live » ── */
.live-info-btn {
  position: absolute; top: 18px; left: 18px; z-index: 6;
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a1408; background: linear-gradient(135deg, #fcf6ba, #e8c56a 55%, #bf953f);
  border: 1px solid rgba(255,240,190,0.75);
  box-shadow: 0 0 0 0 rgba(212,175,96,0.55), 0 10px 24px -8px rgba(212,175,96,0.5);
  animation: live-info-pulse 2.6s ease-in-out infinite;
  transition: transform 0.2s ease;
}
.live-info-btn:hover { transform: scale(1.1); }
@keyframes live-info-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,96,0.5), 0 10px 24px -8px rgba(212,175,96,0.5); }
  50%      { box-shadow: 0 0 0 9px rgba(212,175,96,0), 0 10px 30px -6px rgba(212,175,96,0.8); }
}
@media (prefers-reduced-motion: reduce) { .live-info-btn { animation: none; } }
@media (max-width: 880px) { .live-info-btn { top: 12px; left: 12px; width: 30px; height: 30px; } }

/* ── Item 6b/6c — « Souffler à ton agent » : bloc live dans l'écran, comble la zone vide
   sous le récap. Le rôle défile en effet matrice (matrixDecode) → « n'importe quel agent ».
   Le clic sur le clavier ci-dessous type une consigne dedans (script.js). ── */
.live-whisper {
  margin-top: 12px; border-radius: 16px; padding: 12px 14px;
  background: linear-gradient(150deg, rgba(212,175,96,0.10), rgba(12,17,30,0.62));
  border: 1px solid rgba(212,175,96,0.30);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,0.65), inset 0 1px 0 rgba(252,246,186,0.08);
}
.lw-label { display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.lw-ico { font-size: 0.95rem; filter: saturate(1.1); }
.lw-role.mxd { color: var(--gold-bright, #e6c478); font-family: var(--font-display); font-weight: 800; text-transform: none; letter-spacing: 0; }
.lw-role .mxd-char { background: linear-gradient(160deg, #fff7df 0%, #f6e0a8 28%, #e9c879 58%, #d4af60 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lw-msg { font-size: 0.82rem; color: var(--muted); line-height: 1.5; min-height: 2.6em; transition: color 0.3s ease; }
.lw-msg.is-live { color: #d7fbff; }
.lw-msg .lw-caret { display: inline-block; width: 2px; height: 0.95em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: lw-blink 0.9s steps(1) infinite; }
@keyframes lw-blink { 50% { opacity: 0; } }

/* ── Item 6a — caption du clavier déplacé (réutilise .kk-kb-cap, ex-orpheline depuis R4527) ── */
.kk-kb-block .kk-kb-cap { font-size: clamp(0.82rem, 1.6vw, 0.94rem); color: var(--muted); margin-bottom: 14px; }
.kk-kb-wrap { cursor: pointer; }
.kk-key { transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease; }

/* ════════════════════════════════════════════════════════════════════════════
   R8641 (K6) — CLAVIER AZERTY porté fidèlement de Vokali (vorb/Website, .vk-kbsolo),
   réthémé bleu AlloKali (--kbs-accent). Remplace l'ancien clavier QWERTY .kk-kb sur
   #kk-kb-big (les mini-claviers .kkmac-keys embarqués dans les Mac 3D restent inchangés,
   décoratifs, QWERTY). Construit en JS (initAkKeyboard, script.js).
   ════════════════════════════════════════════════════════════════════════════ */
.ak-kbsolo { --kbs-accent: #2563eb; width: min(100%, 900px); margin: 8px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ak-kbsolo .kbs-screen { position: relative; width: min(100%, 600px); min-height: 52px; padding: 14px 18px; border-radius: 12px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 1px; font-size: 1rem; color: #f3f1e6; line-height: 1.5;
  font-family: var(--font-display);
  background: linear-gradient(180deg, rgba(10,14,22,0.92), rgba(6,9,15,0.96));
  border: 1px solid color-mix(in srgb, var(--kbs-accent) 30%, transparent);
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--kbs-accent) 8%, transparent), 0 12px 30px rgba(0,0,0,0.4); }
.ak-kbsolo .kbs-ph { color: rgba(235,240,250,0.34); }
.ak-kbsolo .kbs-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--kbs-accent); margin-left: 1px; vertical-align: -2px; animation: kbs-blink 1s steps(1) infinite; }
@keyframes kbs-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
.ak-kbsolo .kbs-3d { perspective: 1400px; perspective-origin: 50% 30%; width: 100%; display: flex; justify-content: center; }
.ak-kbsolo .kbs-keyboard { transform: rotateX(17deg); transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.22,1,0.36,1); will-change: transform;
  width: min(100%, 900px); padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 7px;
  border-radius: 16px 16px 22px 22px;
  background: linear-gradient(180deg,#3c3f47 0%,#22242a 70%,#191b20 100%); border: 1px solid rgba(0,0,0,0.55);
  box-shadow: 0 -2px 0 rgba(255,255,255,0.07) inset, 0 1px 0 color-mix(in srgb, var(--kbs-accent) 20%, transparent) inset, 0 34px 60px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--kbs-accent) 12%, transparent); }
.ak-kbsolo .mbp-row { display: flex; gap: 6px; justify-content: center; }
.ak-kbsolo .mbp-key { cursor: pointer; position: relative; flex: 1 1 0; min-width: 0; height: clamp(30px,4.8vw,48px); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 2px;
  font-size: clamp(0.62rem,1.5vw,0.92rem); font-weight: 500; color: rgba(220,226,238,0.86);
  background: linear-gradient(180deg,#16151a 0%,#0A090D 100%); border: 1px solid rgba(0,0,0,0.7);
  box-shadow: 0 3px 0 #050507, 0 4px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 220ms cubic-bezier(0.22,1,0.36,1), box-shadow 260ms ease, background 260ms ease, color 260ms ease, border-color 260ms ease; }
.ak-kbsolo .mbp-key .k-sub { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ak-kbsolo .mbp-key .k-sub small { font-size: 0.62em; opacity: 0.6; }
.ak-kbsolo .mbp-key svg { width: 1.1em; height: 1.1em; }
.ak-kbsolo .mbp-key::after { content: ''; position: absolute; inset: -38%; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--kbs-accent) 70%, transparent) 0%, color-mix(in srgb, var(--kbs-accent) 30%, transparent) 38%, color-mix(in srgb, var(--kbs-accent) 6%, transparent) 62%, transparent 78%);
  opacity: 0; transform: scale(0.55); mix-blend-mode: screen; filter: blur(1px);
  transition: opacity 440ms ease, transform 440ms cubic-bezier(0.22,1,0.36,1); }
.ak-kbsolo .mbp-key.pressed { transform: translateY(1.5px) scale(0.965);
  box-shadow: 0 0.5px 0 #0a1420, 0 1px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 16px color-mix(in srgb, var(--kbs-accent) 40%, transparent);
  background: linear-gradient(180deg,#101820 0%,#050a10 100%); color: #d7e8ff; border-color: color-mix(in srgb, var(--kbs-accent) 55%, transparent); }
.ak-kbsolo .mbp-key.pressed::after { opacity: 1; transform: scale(1); transition: opacity 120ms ease, transform 180ms cubic-bezier(0.22,1,0.36,1); }
.ak-kbsolo .mbp-key.k-cmd { color: var(--gold-bright); }
.ak-kbsolo .k-back { flex: 1.7 1 0; } .ak-kbsolo .k-tab { flex: 1.4 1 0; } .ak-kbsolo .k-caps { flex: 1.6 1 0; }
.ak-kbsolo .k-shift { flex: 2 1 0; } .ak-kbsolo .k-enter { flex: 1.7 1 0; } .ak-kbsolo .k-space { flex: 6 1 0; }
.ak-kbsolo .k-mod { flex: 1.1 1 0; font-size: clamp(0.48rem,1.1vw,0.68rem); } .ak-kbsolo .k-mic { flex: 1.1 1 0; color: var(--kbs-accent); }
@media (prefers-reduced-motion: reduce) { .ak-kbsolo .kbs-keyboard { transform: none; } .ak-kbsolo .mbp-key::after { display: none; } }
@media (max-width: 640px) { .ak-kbsolo .kbs-keyboard { transform: rotateX(12deg); padding: 10px 8px 14px; } .ak-kbsolo .kbs-screen { font-size: 0.9rem; } }

/* ── Item 7 — lignes dorées : harmonisation tailles/largeurs (trop petites/« cassées » partout) ──
   L'ancienne refonte (ligne 2210 historique) avait réduit TOUTES les lignes sous eyebrow à 32×1px,
   opacity .7 → lues comme cassées/riquiqui. Remise à une taille nette, cohérente avec .gold-sep. */
.eyebrow::after {
  width: 56px !important; height: 2px !important; margin-top: 10px !important; opacity: 0.95 !important;
  background: linear-gradient(90deg, transparent, #e6c478 12%, #f6e7b0 50%, #cda24e 88%, transparent) !important;
}
.section-head-center .eyebrow::after { background: linear-gradient(90deg, transparent, #f6e7b0 50%, transparent) !important; }
/* Ligne universelle entre CHAQUE section : élargie + plus visible (ex 90-150px → 130-220px)
   R8641 (K5) — Loris : « MÊME taille partout ». Les lignes au-dessus de « Inbound + Outbound »
   (et donc juste sous le bouton « Voir les 42 capacités » — c'est LA MÊME ligne, le séparateur
   #capacites→#outbound) étaient plus petites que le « modèle parfait » repéré au-dessus de
   « La plateforme » (ex #donnees, 220-420px). Le modèle parfait devient le défaut UNIQUE partout
   → suppression de l'exception #donnees (désormais identique à toutes les autres). */
main > .section::before {
  width: clamp(220px, 30vw, 420px) !important; height: 2px !important; opacity: 0.95 !important;
}

/* ── Item 8 — halo derrière l'orbe « connecte tes données » : le gold→violet (perçu « rouge
   bizarre » par Loris) → un halo CLAIR de la couleur de l'orbe (cyan #1FD5F9, identique aux
   autres orbes de la page + référence Vokali), plus propre et cohérent. ── */
.data-orb-glow {
  background: radial-gradient(circle at 50% 46%, rgba(31,213,249,0.38), rgba(31,213,249,0.10) 48%, transparent 72%) !important;
}
.data-orb-fallback {
  background: radial-gradient(circle at 38% 32%, #fff 2%, #eafeff 12%, #8fe9fb 32%, #1fd5f9 58%, #0f7a99 86%, #062733 100%) !important;
  box-shadow: 0 0 42px -6px rgba(31,213,249,0.55), inset -6px -9px 22px rgba(6,40,50,0.5), inset 6px 7px 16px rgba(255,255,255,0.4) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Item 9 — CARTE SIGNATURE réutilisable (base = .hero-badge : grille subtile,
   liseré doré net, glow discret). Variantes couleur via --sig-tint/--sig-glow.
   Appliquée : FAQ (toutes les questions) + carte « cadre légal & conformité ».
   ════════════════════════════════════════════════════════════════════════════ */
.kk-sig-card {
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(rgba(212,175,96,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,96,0.055) 1px, transparent 1px),
    linear-gradient(160deg, var(--sig-tint, rgba(56,217,217,0.12)) 0%, transparent 48%),
    linear-gradient(155deg, rgba(20,24,38,0.86) 0%, rgba(9,11,19,0.93) 60%, rgba(6,8,14,0.96) 100%);
  background-size: 16px 16px, 16px 16px, 100% 100%, 100% 100%;
  box-shadow: 0 14px 36px -18px rgba(0,0,0,0.78), inset 0 1px 0 rgba(252,246,186,0.14), 0 0 22px -12px var(--sig-glow, rgba(56,217,217,0.28));
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.kk-sig-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(150deg, rgba(212,175,96,0.5), rgba(212,175,96,0) 40%, var(--sig-tint, rgba(56,217,217,0.35))) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.kk-sig-card--cyan { --sig-tint: rgba(56,217,217,0.34); --sig-glow: rgba(56,217,217,0.32); }
.kk-sig-card--gold { --sig-tint: rgba(212,175,96,0.30); --sig-glow: rgba(212,175,96,0.34); }

/* FAQ — chaque question devient une carte signature (variante cyan, cohérente avec le focus [open] déjà cyan) */
.faq-item.kk-sig-card { border-radius: 16px; border-color: transparent; background-color: transparent; }
.faq-item.kk-sig-card[open] { box-shadow: 0 14px 36px -18px rgba(0,0,0,0.78), inset 0 1px 0 rgba(252,246,186,0.14), 0 0 26px -10px rgba(56,217,217,0.42); }

/* Cadre légal & conformité — même recette, variante or (thème « légal », distincte du cyan FAQ) */
.ob-legal.kk-sig-card { padding: 26px clamp(20px, 5vw, 40px); border-radius: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TUNNEL LIGHT-SPEED (R8703) — saut d'univers sur les liens INTER-MARQUES.
   Shader WebGL2 (Matthias Hurrle @atzedent) porté vanilla dans script.js.
   Overlay plein écran créé à la volée : canvas light-speed en fond + carte
   centrale premium. Contexte WebGL créé/détruit à la volée (pas de saturation).
   ═══════════════════════════════════════════════════════════════════════════ */
.ls-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; cursor: pointer;
  background: #05060a;
  transition: opacity 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ls-overlay.is-in { opacity: 1; pointer-events: auto; }
.ls-overlay.is-out { opacity: 0; transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1); }
.ls-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ls-fallback {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, #101425, #050609);
}
.ls-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: clamp(28px, 5vw, 44px) clamp(30px, 6vw, 58px);
  border-radius: 22px;
  background: rgba(9, 12, 20, 0.60);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 30px 90px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 62px -20px color-mix(in srgb, var(--ls-accent, #7c5cff) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  text-align: center;
  opacity: 0; transform: translateY(16px) scale(0.92);
}
.ls-overlay.is-in .ls-card { animation: ls-card-pop 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes ls-card-pop {
  0%   { opacity: 0; transform: translateY(16px) scale(0.92); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ls-logo {
  width: clamp(56px, 10vw, 82px); height: auto; display: block;
  filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--ls-accent, #7c5cff) 55%, transparent));
}
.ls-logo-fallback {
  font-family: var(--font-display, system-ui); font-weight: 800;
  font-size: clamp(32px, 6vw, 46px); line-height: 1;
  color: var(--ls-accent, #7c5cff);
  text-shadow: 0 4px 24px color-mix(in srgb, var(--ls-accent, #7c5cff) 60%, transparent);
}
.ls-welcome {
  font-family: var(--font-display, system-ui); font-weight: 700;
  font-size: clamp(1.02rem, 2.6vw, 1.42rem); letter-spacing: 0.01em;
  color: #eef2fc; line-height: 1.32;
}
.ls-welcome b {
  color: var(--ls-accent, #7c5cff); font-weight: 800;
  text-shadow: 0 0 26px color-mix(in srgb, var(--ls-accent, #7c5cff) 55%, transparent);
}
.ls-hint {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(220, 230, 248, 0.38); margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ls-overlay.is-in .ls-card { animation: none; opacity: 1; transform: none; }
}

/* ═══ R9362 — BOUTON D'APPEL FLOTTANT (fixed) + MODALE « Réserve un appel démo » ═══ */
.call-fab {
  position: fixed; z-index: 9400;
  right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 15px; border: none; cursor: pointer;
  border-radius: 999px; color: #eaf1ff; font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.01em; max-width: calc(100vw - 32px);
  background: linear-gradient(135deg, #2563eb 0%, #1e4fd6 52%, #123a7a 100%);
  box-shadow: 0 10px 30px -8px rgba(37,99,235,0.6), 0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1.5px rgba(230,196,120,0.35);
  transition: transform 200ms cubic-bezier(0.22,1,0.36,1), box-shadow 220ms ease;
}
.call-fab:hover { transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(37,99,235,0.72), 0 4px 12px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 1.5px rgba(230,196,120,0.6); }
.call-fab:active { transform: translateY(0); }
.call-fab:focus-visible { outline: none; box-shadow: 0 10px 30px -8px rgba(37,99,235,0.6), 0 0 0 3px rgba(230,196,120,0.7); }
.call-fab-icon { position: relative; z-index: 1; flex-shrink: 0; }
.call-fab-label { position: relative; z-index: 1; white-space: nowrap; }
/* halo pulsant (arrêté hors-écran / reduced-motion via garde perf globale) */
.call-fab-ring { position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,99,235,0.5); animation: call-fab-pulse 2.6s ease-out infinite; }
@keyframes call-fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45); } 70%,100% { box-shadow: 0 0 0 16px rgba(37,99,235,0); } }
@media (prefers-reduced-motion: reduce) { .call-fab-ring { animation: none; } }
/* mobile : bouton compact icône-seule sous 480px pour ne jamais gêner (zéro scroll horizontal) */
@media (max-width: 480px) {
  .call-fab { right: 14px; bottom: 14px; padding: 14px; gap: 0; }
  .call-fab-label { display: none; }
}
.call-modal-perks { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 4px 0 20px; padding: 0; }
.call-modal-perks li { position: relative; padding-left: 26px; font-size: 0.92rem; line-height: 1.5; color: #cdd4e0; }
.call-modal-perks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--gold-bright, #f0d488); font-weight: 800; }
.call-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.call-modal-secondary { color: var(--muted); font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; transition: color 180ms ease; }
.call-modal-secondary:hover { color: var(--gold-bright, #f0d488); }
.call-modal-panel { max-width: 520px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   WORKLIST GOD 21 — R9393 (C1/C2/C3/C6/C9/C11). Bloc consolidé, ajouté en fin de feuille
   pour gagner l'ordre-source sur les règles antérieures sans les réécrire.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── C1 — logo « A » AlloKali au-dessus des cartes du tourniquet (ancre stable) ── */
/* G38 (14/07) — LOCKUP D'INTRO, calqué sur l'intro Kali Korp que Loris valide comme LA référence :
   logo GRAND + nom de la marque, EN HAUT, dans une zone qui lui est RÉSERVÉE. Les cartes démarrent
   dessous (cf. STACK_TOP dans le script) → le logo n'est PLUS JAMAIS recouvert.
   Avant : logo petit, à 7,5 % du haut, et z-index:1 = DERRIÈRE les cartes → la 1re carte le mangeait.
   Loris : « INTERDIT DE CACHER LE LOGO ». */
.ak-ti-lockup {
  position: absolute; top: 4%; left: 0; right: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.28em;
}
.ak-ti-logo {
  display: block; width: clamp(104px, 12.5vw, 150px); height: auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.55)) drop-shadow(0 0 26px rgba(37,99,235,0.42));
  opacity: 0; animation: ak-ti-logo-in 0.9s 0.3s ease forwards, ak-ti-logo-float 5.5s 1.2s ease-in-out infinite;
}
.ak-ti-word {
  font-family: var(--font-display, inherit); font-weight: 800; letter-spacing: 0.02em;
  font-size: clamp(26px, 3.1vw, 40px); line-height: 1; white-space: nowrap;
  opacity: 0; animation: ak-ti-logo-in 0.9s 0.55s ease forwards;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
.ak-ti-word .ak-w-allo { color: #eaf0ff; }
.ak-ti-word .ak-w-kali { color: #60a5fa; text-shadow: 0 0 22px rgba(37,99,235,0.55); }
@keyframes ak-ti-logo-in { to { opacity: 1; } }
@keyframes ak-ti-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .ak-ti-logo, .ak-ti-word { animation: none; opacity: 1; } }
@media (max-width: 640px) {
  .ak-ti-lockup { top: 3.5%; }
  .ak-ti-logo { width: clamp(84px, 22vw, 112px); }
  .ak-ti-word { font-size: clamp(22px, 6.4vw, 30px); }
}

/* ── C2 — sélection AlloKali : ZOOM-IN + design « hover dynamique » activé au settle ── */
.ak-ti-current.is-settled {
  transform: translateZ(46px) scale(1.14) !important;
  transition: transform 0.62s cubic-bezier(.2,1,.3,1), box-shadow 0.62s ease !important;
}
.ak-ti-current.is-settled .kc-aurora::before { animation-duration: 7s !important; opacity: 0.9 !important; }
.ak-ti-current.is-settled .kc-sheen { opacity: 0.95 !important; }
.ak-ti-current.is-settled .kc-bevel { opacity: 1 !important; }
.ak-ti-current.is-settled .kc-accent { opacity: 1 !important; box-shadow: 0 0 10px var(--g) !important; }
.ak-ti-current.is-settled .ak-ti-mini-orb-core { animation-duration: 1.6s !important; }

/* ── C3 — logo « A » au-dessus de « Bienvenue » (la ligne dorée existe déjà : .hk-welcome-line) ── */
.hk-welcome-logo {
  display: block; width: clamp(68px, 12vw, 96px); height: auto; margin: 0 auto 18px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 24px rgba(37,99,235,0.4));
  animation: hk-welcome-logo-in 0.9s 0.1s cubic-bezier(.2,1,.3,1) both;
}
@keyframes hk-welcome-logo-in { from { opacity: 0; transform: translateY(-12px) scale(0.9); } to { opacity: 1; transform: none; } }
/* la ligne dorée (déjà présente) — un poil plus affirmée sous le titre welcome */
.hk-welcome-line { width: 66px; height: 2px; opacity: 0.95; }

/* ── C6 — logo « A » DEVANT, orbe DERRIÈRE (header + titre principal), façon « V » de Vokali ──
   z-index déjà img > orbe, mais l'orbe trop lumineuse débordait devant le A. Fix : plaque radiale
   sombre intercalée (z1, clippée par overflow:hidden) + halo sombre net autour du A (z3). */
.hero-logo-a::before, .nav-logo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 52%, rgba(4,6,12,0.5) 0%, rgba(4,6,12,0.22) 44%, transparent 66%);
}
.hero-logo-orb-canvas, .nav-orb-canvas { z-index: 0 !important; opacity: 0.9; }
.hero-logo-img { z-index: 3 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)) drop-shadow(0 2px 9px rgba(37,99,235,0.42)) drop-shadow(0 0 3px rgba(0,0,0,0.7)) !important; }
.nav-logo-img { z-index: 3 !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)) drop-shadow(0 0 4px rgba(0,0,0,0.7)) !important; }

/* ── C9 — carte « VS » : finition définitive (½ taille, rotation droite, or affirmé, magnétique, glass max) ── */
.cmp-title .cmp-vs, .cmp-section .cmp-vs {
  min-width: clamp(46px, 4.8vw, 66px) !important; height: clamp(34px, 3.9vw, 50px) !important;
  margin: 0 10px !important; padding: 0 clamp(8px, 1vw, 14px) !important; border-radius: 12px !important;
  font-size: clamp(1.35rem, 2.5vw, 1.95rem) !important; letter-spacing: 0.04em;
  transform: rotate(5.5deg) translate(var(--vsx, 0px), var(--vsy, 0px)) !important; will-change: transform;
  background: linear-gradient(120deg,#fff8e4 0%,#ffefb0 20%,#f1d182 40%,#e6b94f 58%,#f3d98a 78%,#d9b25a 100%) !important;
  background-size: 170% 100% !important;
}
.cmp-title .cmp-vs::before, .cmp-section .cmp-vs::before {
  border-radius: 12px !important;
  background:
    linear-gradient(160deg, rgba(255,247,220,0.12), transparent 42%),
    linear-gradient(150deg, rgba(30,26,16,0.60), rgba(12,11,16,0.74)) !important;
  border: 1.6px solid rgba(240,214,140,0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,250,220,0.45), inset 0 0 12px rgba(230,196,120,0.18),
    0 10px 26px -10px rgba(0,0,0,0.72), 0 0 0 2px rgba(212,175,96,0.14) !important;
  -webkit-backdrop-filter: blur(9px) !important; backdrop-filter: blur(9px) !important; opacity: 1 !important;
}

/* ── C11 — note de réassurance sous les actions de la modale « Parler à Kalia » ── */
.call-modal-note { margin: 12px 0 0; text-align: center; font-size: 0.82rem; color: rgba(190,200,220,0.72); }
.call-modal-note::before { content: '🔒 '; opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   WORKLIST GOD 21 — R9399 (run3). Overrides en fin de feuille (ordre-source = priorité).
   1: logo A intro anti-collision · 3: matrice confinée · 5: capture écosystème · 6: orbe nav
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1a — logo « A » de l'intro : ANCRÉ au-dessus de la pile de cartes (marge nette à TOUTE hauteur
   d'écran). bottom:calc(50% + Npx) suit le centre du tourniquet ; la carte KALI KORP (haut de pile)
   est à ~center-239px → l'écart reste CONSTANT (~19px), plus jamais de chevauchement. Rétréci. ── */
.ak-ti-logo {
  top: auto !important;
  bottom: calc(50% + 258px);
  width: clamp(56px, 7vw, 88px);
}
@media (max-width: 640px) { .ak-ti-logo { width: clamp(48px, 14vw, 70px); } }
@media (max-height: 720px) { .ak-ti-logo { width: clamp(44px, 5vw, 64px); } }

/* ── 3 — pluie matrice confinée à gauche : elle n'empiète plus sur le robot (colonne droite) ── */
.hero-matrix {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, rgba(0,0,0,0.28) 64%, transparent 80%);
  mask-image: linear-gradient(90deg, #000 0%, #000 44%, rgba(0,0,0,0.28) 64%, transparent 80%);
}
@media (max-width: 900px) {
  /* layout empilé : plus de colonne robot à droite → matrice quasi pleine largeur, bord droit atténué */
  .hero-matrix {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent 100%);
  }
}

/* ── 6 — logo nav : R9399 éteignait l'orbe WebGL (display:none) au profit d'un halo CSS… que la
   plaque sombre C6 (.nav-logo::before) écrasait → pastille éteinte = « orbe header cassée » (G39).
   L'orbe WebGL revit (initNavOrb, masque radial G342 FIX1 déjà posé plus haut) ; le halo CSS ne
   sert plus que de FALLBACK sans WebGL (.no-gl, posé par le JS). ── */
.nav-logo.no-gl .nav-orb-canvas { display: none !important; }
/* G39.2 — le fallback aussi passe au bleu charte AlloKali pur (le rgba(31,213,249,…) était le
   cyan Vokali #1FD5F9) : #2563eb + #60a5fa, cohérent avec l'orbe hero. */
.nav-logo.no-gl::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(37,99,235,0.6) 0%, rgba(96,165,250,0.32) 38%, rgba(37,99,235,0.1) 60%, transparent 78%);
}

/* ── 5 — CAPTURE ÉCOSYSTÈME : carte glass premium (niveau AllInMyApp) + bouton or ── */
.section-eco-notify { padding: clamp(18px,3.5vw,46px) 0 clamp(40px,6vw,84px); }
.eco-notify-card {
  position: relative; overflow: hidden; text-align: center;
  max-width: 760px; margin: 0 auto;
  padding: clamp(38px,5vw,60px) clamp(22px,4vw,56px);
  border-radius: 26px;
  background:
    radial-gradient(ellipse 78% 90% at 50% -12%, rgba(212,175,96,0.13), transparent 60%),
    radial-gradient(ellipse 70% 80% at 50% 116%, rgba(37,99,235,0.1), transparent 62%),
    linear-gradient(165deg, rgba(16,22,38,0.92), rgba(9,13,22,0.96));
  border: 1px solid rgba(212,175,96,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 40px 100px -44px rgba(0,0,0,0.85);
}
.eco-notify-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 42%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 42%, #000 18%, transparent 78%);
}
.eco-notify-orb {
  position: absolute; top: -70px; left: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  width: 220px; height: 220px; border-radius: 50%; opacity: 0.5;
  background: radial-gradient(circle at 50% 50%, rgba(212,175,96,0.34) 0%, rgba(37,99,235,0.12) 46%, transparent 72%);
  filter: blur(14px);
}
.eco-notify-card > :not(.eco-notify-grid):not(.eco-notify-orb) { position: relative; z-index: 1; }
.eco-notify-title { font-size: clamp(1.5rem,3.6vw,2.4rem); margin: 6px 0 0; line-height: 1.12; }
.eco-notify-sub { max-width: 52ch; margin: 4px auto 26px; color: rgba(206,216,234,0.82); font-size: clamp(0.92rem,1.7vw,1.02rem); line-height: 1.5; }
.eco-notify-form { display: flex; gap: 10px; justify-content: center; max-width: 520px; margin: 0 auto 12px; }
.eco-notify-form input {
  flex: 1; min-width: 0; height: 52px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: rgba(8,11,18,0.72);
  color: var(--text); font: inherit; font-size: 0.92rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.eco-notify-form input::placeholder { color: var(--muted2); }
.eco-notify-form input:focus { outline: none; border-color: rgba(212,175,96,0.5); box-shadow: 0 0 0 3px rgba(212,175,96,0.14); }
.eco-notify-form input[aria-invalid="true"] { border-color: rgba(248,113,113,0.6); }
.eco-notify-btn { height: 52px; flex-shrink: 0; }
.eco-notify-feedback { min-height: 1.4em; font-size: 0.86rem; font-weight: 600; }
.eco-notify-feedback.ok { color: var(--wa); }
.eco-notify-feedback.err { color: var(--red); }
.eco-notify-note { font-size: 0.76rem; color: var(--muted2); margin-top: 6px; }
@media (max-width: 560px) {
  .eco-notify-form { flex-direction: column; }
  .eco-notify-btn { width: 100%; }
}


/* ── R11 (run 11, Loris : « je ne veux PAS reduire l'experience, juste l'optimiser ») ──
   VERRE DEPOLI INTELLIGENT : le blur reste partout, il ne se coupe que sur les elements EN
   MOUVEMENT (illisible de toute facon en mouvement, et c'est le re-flou par frame qui cassait
   les FPS mobiles). Cible : cartes du tourniquet 3D (rotation continue) + intro tourniquet,
   sur MOBILE uniquement. Le desktop garde 100 % du verre.
   + anti-saccades : backface cachee + couche GPU stable sur les cartes 3D. */
@media (max-width: 640px) {
  .korp3d-card, .ak-ti-card, .ak-ti-ring .atc {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background-color: rgba(10, 12, 20, 0.92);
  }
}
.korp3d-card, .ak-ti-card {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* G32 (14/07) — le TOURNIQUET rotatif du bas doit montrer ses cartes sur la face ARRIÈRE
   du cercle : backface hidden les faisait DISPARAÎTRE dès qu'elles passaient derrière
   (~moitié des cartes invisibles → "cercle incomplet", signalé par Loris jour de déballe).
   Override ciblé sur les cartes DANS le ring rotatif uniquement (grille statique .kkc-card
   et intro .ak-ti-card conservent hidden — elles ne pivotent pas). */
.korp3d-ring .korp3d-card {
  backface-visibility: visible; -webkit-backface-visibility: visible;
}
/* G38 (14/07) — MÊME BUG SUR L'INTRO : le commentaire ci-dessus affirmait que les cartes de l'intro
   « ne pivotent pas ». FAUX — l'intro EST un tourniquet (la colonne se courbe en cylindre et tourne).
   Résultat : la moitié arrière du cercle disparaissait → « on ne voit que les cartes du front ».
   Loris : « ON VEUT VOIR LES CARTES DU FOND, FAIS LE CERCLE ENTIER ». */
.ak-ti-ring .ak-ti-card {
  backface-visibility: visible; -webkit-backface-visibility: visible;
}

/* R9469 — les mots qui matricent ne wrappent JAMAIS (le scramble majuscule est plus large que le
   mot final : sans ça, une ligne apparaissait/disparaissait → saccades de scroll sur toute la page). */
#hero-role-word, #early-role-word, #hero-evolve { white-space: nowrap; }
/* G37 FIX INTRO — le mot matrice ne déborde JAMAIS de l'écran (bug prouvé : boîte 615px sur
   viewport 390px). Cause : max-width:100% se résout contre un parent qui GRANDIT avec le contenu
   (boucle) → aucun plafond réel + overflow:hidden n'a rien à clipper (la boîte suit le contenu).
   Fix : plafond en 100vw (relatif au VIEWPORT, immunisé contre l'inflation du parent) → overflow
   clippe enfin le scramble large ; text-align:center recentre le mot verrouillé dans sa boîte
   constante (le script fixe min-width=max-width, plus aucun saut de layout entre scramble et lock). */
#hero-role-word, #early-role-word { max-width: calc(100vw - 2.4rem); overflow: hidden; vertical-align: bottom; }
/* G37 — alignement HÉRITÉ de la ligne : gauche sur desktop (le mot reste calé sous le titre), centré
   sur mobile (titre centré). Un text-align:center forcé décalait le mot au milieu de sa boîte large
   sur desktop (le mot flottait, détaché du titre aligné à gauche). */
@media (max-width: 640px) { #hero-role-word, #early-role-word { text-align: center; } }

/* R9470 — scroll latéral page éradiqué (clip ≠ hidden : pas de conteneur de scroll, sticky intact) */
html, body { overflow-x: clip; }

/* ── R9478 — section interface unifiée (module AllInMyApp) ── */
/* G342 FIX2 — les classes .ak-section/.container/.section-title étaient ORPHELINES (aucune règle) :
   la composition se collait au bord GAUCHE et débordait hors écran. On (re)centre tout. */
.ak-section { padding: clamp(48px, 8vw, 96px) 0; }
.ak-section > .container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }
#interface-unifiee .pps-tag { justify-content: center; }
#interface-unifiee .section-title {
  text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.18; letter-spacing: -0.02em;
  max-width: 900px; margin: 0 auto 6px;
}
/* G342 FIX7 — finitions du bloc « AlloKali est un module d'AllInMyApp » :
   .gold-strong (classe qui n'avait AUCUNE définition → rendu blanc) = VRAI or ;
   .iu-violet = AllInMyApp en violet (#7c3aed→#a78bfa) ; filet doré standard sous le titre. */
.gold-strong {
  font-family: var(--font-display);
  background: linear-gradient(100deg,#fff3cf 0%,#f1d182 22%,#e6b94f 46%,#f3d98a 68%,#c9982f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,245,200,0.4)) drop-shadow(0 2px 10px rgba(212,175,96,0.25));
}
.iu-violet {
  font-family: var(--font-display);
  background: linear-gradient(100deg,#7c3aed 0%,#a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 6px rgba(124,58,237,0.32));
}
#interface-unifiee .iu-goldrule { display: block; width: 88px; height: 2px; margin: 12px auto 4px;
  background: linear-gradient(90deg, transparent, rgba(230,185,79,0.9) 20%, rgba(243,217,138,0.95) 50%, rgba(230,185,79,0.9) 80%, transparent);
  border-radius: 2px; }
/* G342 FIX3 — la vidéo « module en action » exposait l'URL INTERNE (barre d'adresse du navigateur
   filmé, ~top 11%). On recadre UNIQUEMENT la vidéo (pas l'image reveal) vers le bas → chrome masqué.
   (.iu-stage a déjà overflow:hidden qui clippe le débord.) */
#iu-video.iu-media { transform: scale(1.14); transform-origin: 50% 100%; }
#interface-unifiee .iu-sub { font-size: 0.62em; display: block; margin-top: 10px; color: rgba(220,228,240,0.85); }
#interface-unifiee .iu-pitch { max-width: 860px; margin: 18px auto 22px; text-align: center; color: rgba(196,206,222,0.88); line-height: 1.65; }
#interface-unifiee .iu-blue { color: #7cc3f5; font-weight: 600; }
.iu-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; }
.iu-tab { border: 1px solid rgba(124,195,245,0.28); background: rgba(10,14,24,0.72); color: rgba(210,220,236,0.9);
  padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.iu-tab.is-on { border-color: rgba(232,197,106,0.6); color: #fcf6ba; background: rgba(212,175,96,0.1);
  box-shadow: 0 0 24px -8px rgba(232,197,106,0.5); }
.iu-tab-reveal:not(.is-on) { animation: iu-pulse 2.2s ease-in-out infinite; }
@keyframes iu-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,197,106,0); } 55% { box-shadow: 0 0 22px -4px rgba(232,197,106,0.55); } }
.iu-stage { position: relative; max-width: 1080px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(124,195,245,0.2); box-shadow: 0 40px 110px -40px rgba(0,0,0,0.9); }
.iu-media { display: none; width: 100%; height: auto; }
.iu-media.is-on { display: block; }
.iu-note { text-align: center; color: rgba(170,182,200,0.75); font-size: 0.88rem; margin-top: 14px; }

/* R9481 — grille nominative comparateur */
.cmp-named-title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 800; }
.cmp-named-title em { color: #e8c56a; font-style: normal; }
.cmp-table small { font-weight: 400; opacity: 0.65; font-size: 0.72em; }