/* ─── Police de marque KaliKana (titres) ────────────────────────────────────
   Police propriétaire Kali Kana servie en local (zéro Google Fonts externe).
   Usage : h1/h2, logo nav, accents éditoriaux. Corps de texte = stack premium
   système (SF Pro / -apple-system) affinée — voir body. */
@font-face {
  font-family: 'KaliKana';
  src: url('/assets/fonts/KaliKana.otf') format('opentype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset & vars ──────────────────────────────────────────────────────── */
: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.6);
  --muted2: rgba(220, 230, 248, 0.35);
  /* Charte cockpit Kali Kana — or + cyan */
  --cyan: #38d9d9;
  --cyan-dim: rgba(56, 217, 217, 0.14);
  --cyan-soft: rgba(56, 217, 217, 0.5);
  --gold: #d4af60;
  --gold-dim: rgba(212, 175, 96, 0.15);
  /* R1883 — DORÉ EXACT du menu latéral de l'app (PanelColors.goldGradient, 135°).
     #BF953F → #FCF6BA → #B38728 → #FBF5B7 → #AA771C. Médian uni #C9A24E.
     Sert aux pastilles/badges en LISERÉ glass (pas de remplissage jaune moutarde). */
  --app-gold-grad: linear-gradient(135deg, #BF953F 0%, #FCF6BA 28%, #B38728 52%, #FBF5B7 74%, #AA771C 100%);
  --app-gold: #C9A24E;
  --app-gold-soft: rgba(201, 162, 78, 0.55);
  --violet: #8b5cf6;
  --violet-dim: rgba(139, 92, 246, 0.15);
  --red: #f87171;
  /* R2560 — palette 5 accents harmonisée AllInMyApp (gold/emerald/cyan/violet/rose).
     emerald + rose nommés explicitement (étaient seulement codés en dur sur les cartes). */
  --emerald: #10b981;
  --emerald-dim: rgba(16, 185, 129, 0.15);
  --rose: #f47c9c;
  --rose-dim: rgba(244, 124, 156, 0.15);
  --gold-bright: #e6c478;
  --line: rgba(255, 255, 255, 0.07);
  --gold-line: rgba(212, 175, 96, 0.18);
  /* R2574 — gradient IRIDESCENT matrice (or/rose/violet/bleu/émeraude), pour accents
     de titres. Remplace l'abus de cyan : on n'a plus un seul ton dominant. */
  --iris-grad: linear-gradient(105deg, #e6c478 0%, #f47c9c 26%, #8b5cf6 50%, #38d9d9 74%, #10b981 100%);
  --max: 1200px;
  --nav-h: 64px;
  /* Typographies : titres = marque KaliKana ; corps = stack système haut de gamme */
  --font-display: 'KaliKana', 'Inter', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* R2574 — classes utilitaires de coloriage de titres (réutilisables sur tout span).
   Aucun titre ne doit rester 100 % blanc : un mot prend .vk-gold ou .vk-iris. */
.vk-gold {
  background: linear-gradient(135deg, #fcf6ba 0%, #e8c56a 36%, #d4af60 60%, #bf953f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.vk-iris {
  background: var(--iris-grad); background-size: 180% 180%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: vk-iris-shine 9s ease-in-out infinite;
}
@keyframes vk-iris-shine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce){ .vk-iris { animation: none; } }
/* scroll-behavior natif retiré : smooth scroll géré en JS (easeInOutExpo + rebond).
   scroll-padding-top évite que les ancres passent sous la nav fixe. */
html { -webkit-font-smoothing: antialiased; scroll-padding-top: 80px; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: smooth; } }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-width: 320px; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.011em; }
/* Police de marque pour TOUS les titres + le logo (base partout, demande Loris R1880 P7)
   Inclut désormais les titres de cartes (h3) et titres de sections imbriqués. */
.hero-title, .section h2, .cta-content h2, .nav-brand, .footer-brand,
h1, h2, h3, .feature-card h3, .rcard h3, .pricing-card h3,
.menubar-text h2, .mem-text h2, .reading-text h2, .agents-text h2,
.tech-modal-card h3, .ts-title { font-family: var(--font-display); }
a { color: inherit; text-decoration: none; }
img, canvas { display: block; max-width: 100%; }
ul { list-style: none; }

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%);
}

/* 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);
  border-bottom: 1px solid var(--line);
  transition: background 220ms ease, border-color 220ms ease;
}
/* Fin filet doré sous la nav (finition cockpit) — visible une fois scrollé */
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,96,0.32) 25%, rgba(56,217,217,0.32) 50%, rgba(212,175,96,0.32) 75%, transparent);
  opacity: 0; transition: opacity 240ms ease;
}
/* État scrollé piloté par classe (1 write/frame en JS, plus de repaint/scroll) */
.nav.nav-scrolled { background: rgba(8, 11, 18, 0.95); border-color: transparent; }
.nav.nav-scrolled::after { opacity: 1; }
.nav-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
/* P6 (R2582) — titre « Vokali » du header en GOLD (dégradé charte logo K) */
.nav-brand > span:last-child {
  background: linear-gradient(95deg, #C9A24E 0%, #FCF6BA 26%, #E8C56A 48%, #FBF5B7 72%, #BF953F 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 8px rgba(212,175,96,0.4));
}
/* R2588 — Logo officiel « V » doré PLACÉ À L'INTÉRIEUR de l'orbe vivante (ne plus séparer les deux) */
.nav-vmark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 17px; height: 17px; object-fit: contain; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 1px 5px rgba(212,175,96,0.6));
}
/* Mini-orbe vivante du logo nav — canvas WebGL, même moteur que les grandes orbes ; le V vit DEDANS */
.nav-orb { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-orb canvas {
  width: 34px; height: 34px;
  -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%);
}
/* Fallback CSS si WebGL absent : dégradé conique pulsant (jamais de logo vide) */
.nav-orb.no-gl::after, .nav-orb-dot {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--cyan), var(--gold), var(--cyan));
  box-shadow: 0 0 14px rgba(56,217,217,0.6);
  animation: orb-pulse 3s ease-in-out infinite;
}
.nav-orb.no-gl::after { position: absolute; }
@keyframes orb-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(56,217,217,0.5),0 0 20px rgba(56,217,217,0.2); }
  50% { box-shadow: 0 0 16px rgba(56,217,217,0.7),0 0 32px rgba(56,217,217,0.3); }
}
.nav-links { display: flex; gap: 26px; color: var(--muted); font-size: 0.85rem; font-weight: 600; font-family: var(--font-display); letter-spacing: 0.005em; }
/* Hover doré comme dans le cockpit Kali Kana : le lien passe à l'or + fin trait doré */
.nav-links a { position: relative; transition: color 180ms ease; padding-bottom: 2px; }
.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); box-shadow: 0 0 8px rgba(212,175,96,0.5);
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a:hover::after { right: 0; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 22px; height: 48px; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}
/* R2574 — CTA principal en finition DORÉE travaillée (texture or 5-stops + reflet interne
   + glow or). Remplace le cyan plat : la pastille n'est plus jaune crue mais or premium. */
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fcf6ba 0%, #e8c56a 34%, #d4af60 58%, #bf953f 100%);
  color: #1a1408; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(212,175,96,0.45), 0 16px 40px rgba(212,175,96,0.26), inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); transition: left 620ms cubic-bezier(0.22,1,0.36,1); pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(212,175,96,0.6), 0 24px 52px rgba(212,175,96,0.38), inset 0 1px 0 rgba(255,255,255,0.65); }
.btn-primary:hover::after { left: 130%; }
.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); border-radius: 999px; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.btn-nav:hover { background: rgba(212,175,96,0.1); border-color: rgba(212,175,96,0.45); color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(212,175,96,0.18), 0 8px 24px rgba(212,175,96,0.12); }
.btn-full { width: 100%; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 1rem; }

/* HERO — R2588 refonte CENTRÉE (retour structure d'origine, tout au centre) */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(var(--nav-h) + 54px) clamp(16px,4vw,56px) 64px;
  text-align: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg canvas { width: 100%; height: 100%; position: absolute; inset: 0; will-change: contents; }
/* Tapis de points densifié (R2582, porté d'AllInMyApp, couleurs turquoise Vokali) */
.hero-dots { z-index: 0; opacity: 0.92; mask-image: radial-gradient(ellipse 100% 92% at 50% 50%, #000 56%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 100% 92% at 50% 50%, #000 56%, transparent 100%); }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 70% at 64% 46%, transparent 30%, var(--bg) 100%);
  pointer-events: none; z-index: 1;
}
/* R2593 — FLUX VERTICAL CENTRÉ : wordmark → ORBE + ONDE (pleine largeur) → texte → device.
   Le texte « dictée vocale native » passe DESSOUS l'orbe + l'onde (demande Loris). */
.hero-stage {
  position: relative; z-index: 2; width: 100%; max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px,1.8vw,22px);
}
.hero-head  { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 940px; }
/* R2597 — l'orbe vit DERRIÈRE le texte (z-index 1) : le wordmark passe par-dessus son
   bord haut, l'onde par-dessus son bord bas → orbe « encastrée par le texte » (réf R1885). */
.hero-scene { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center;
  opacity: 0; animation: fade-up 0.8s 0.7s ease forwards; }
/* Scrim sombre derrière le wordmark pour garder VOKALI lisible par-dessus le halo de l'orbe. */
.hero-wordmark { position: relative; }
.hero-wordmark::before {
  content: ''; position: absolute; z-index: -1; inset: -40% -14%;
  background: radial-gradient(ellipse 58% 130% at 50% 62%, rgba(6,9,15,0.74) 0%, rgba(6,9,15,0.4) 46%, transparent 74%);
  pointer-events: none;
}
.hero-pitch { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 760px; margin-top: clamp(6px,1.4vw,18px); }
/* Sous-texte + puces + actions recentrés */
.hero-pitch .hero-sub { margin-left: auto; margin-right: auto; }
.hero-pitch .hero-points { align-items: center; text-align: left; }
.hero-pitch .hero-actions { justify-content: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px;
  background: rgba(212,175,96,0.07); border: 1px solid rgba(212,175,96,0.2);
  font-size: 0.82rem; font-weight: 600; color: rgba(230,196,120,0.92); letter-spacing: 0.015em;
  font-family: var(--font-display);   /* R2588 — KaliKana partout, « Ta voix. Ton Mac. Vokali. » inclus */
  margin-bottom: 20px; opacity: 0; animation: fade-up 0.6s 0.2s ease forwards;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px var(--gold-bright); animation: orb-pulse 2s ease-in-out infinite; }
.hero-title { font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; margin-bottom: 16px;
  text-shadow: 0 2px 24px rgba(4, 7, 12, 0.7), 0 1px 3px rgba(4, 7, 12, 0.85); }
.hero-title .hero-word[data-word="1"] { display:block; }
.hero-word { display: inline-block; opacity: 0; transform: translateY(24px); }
.hero-word[data-word="0"] { animation: word-reveal 0.7s 0.5s cubic-bezier(0.22,1,0.36,1) forwards; }
/* P5 — « plus ton clavier » : MÊME doré travaillé que VOKALI (dégradé charte logo K). */
.hero-word-gold {
  animation: word-reveal 0.7s 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
  /* R2590 — éclairci : or LUMINEUX lisible sur fond sombre (avant : trop foncé, illisible) */
  background: linear-gradient(96deg, #E8C56A 0%, #FCF6BA 20%, #FFFBEB 42%, #FBF5B7 64%, #E8C56A 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(120,80,10,0.55)) drop-shadow(0 0 22px rgba(252,246,186,0.4));
}
@keyframes word-reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* ── WORDMARK GÉANT (P2) : VOKALI 👉 LOCALLY — MAJUSCULES, calibre maxi, même gold ── */
.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.02;                 /* marge haute pour ne PAS couper le haut des lettres */
  margin: 4px auto 22px;             /* R2591 — auto = bloc CENTRÉ */
  padding-top: 0.12em;
  /* R2591 — UNE SEULE LIGNE centrée : nowrap + largeur au contenu (le conteneur étroit
     du texte les faisait passer à la ligne et désaligner VOKALI / 👉LOCALLY). */
  display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; justify-content: center;
  width: max-content; max-width: 96vw; gap: 0 16px;
  opacity: 0; animation: fade-up 0.6s 0.85s ease forwards;
}
/* « VOKALI » géant doré — MÊME relief travaillé que « plus ton clavier », en plus grand */
.hw-name, .hw-loc-txt {
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);   /* R2591 — calibré pour tenir sur UNE ligne centrée */
  text-transform: uppercase; letter-spacing: 0.012em; font-weight: 800;
  /* R2590 — or LUMINEUX (mêmes tons que « plus ton clavier » éclairci) */
  background: linear-gradient(96deg, #E8C56A 0%, #FCF6BA 22%, #FFFBEB 44%, #FBF5B7 66%, #E8C56A 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
  /* Relief 3D lisible : fin ourlet sombre rapproché + halo or clair (plus d'ombre noire qui éteint) */
  filter:
    drop-shadow(0 1px 1px rgba(120,80,10,0.6))
    drop-shadow(0 0 30px rgba(252,246,186,0.42));
}
/* ═══ R2593 — LOGO « V » BLEU (image6) qui remplace le V doré dans TOUS les wordmarks VOKALI ═══
   L'image rend normalement (le clip-text/transparent du parent n'affecte que les glyphes texte).
   On la cale sur la hauteur des capitales OKALI ; halo cyan léger pour l'identité Vokali. */
.vk-vlogo {
  display: inline-block; width: auto; object-fit: contain;
  -webkit-text-fill-color: initial;            /* sécurité : annule l'héritage clip-text sur le conteneur */
  filter: drop-shadow(0 2px 12px rgba(31,213,249,0.30));
  transform: translateZ(0);                    /* rendu net */
}
.hw-vlogo  { height: 1.16em; vertical-align: -0.22em; margin-right: 0.005em; }
.nav-vlogo { height: 1.34em; vertical-align: -0.40em; margin-right: 0.002em; }
.bi-vlogo  { height: 1.12em; vertical-align: -0.16em; margin-right: 0.01em; }
.mx-vlogo  { height: 1.12em; vertical-align: -0.10em; margin-right: 0.01em; }

/* « 👉 LOCALLY » : MÊME calibre, MÊME gold travaillé que VOKALI (P2) */
.hw-locally { display: inline-flex; align-items: center; gap: 12px; }
.hw-point { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1; -webkit-text-fill-color: initial; filter: none; animation: hw-point-nudge 1.4s ease-in-out infinite; }
@keyframes hw-point-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .hw-point { animation: none; } }

/* ══ HERO SHOWCASE (zone droite) — orbe parfaite + MacBook réduit + clavier zoomé ══ */
/* P4 — ORBE PARFAITE (config nette/cyan pur identique à l'orbe du bas).
   R2597 — ENCASTRÉE : remontée derrière le wordmark (margin-top négatif), le texte la coiffe. */
.hero-orb-wrap { position: relative; z-index: 1; width: clamp(320px, 36vw, 520px); aspect-ratio: 1; display: grid; place-items: center;
  margin-top: clamp(-120px, -9vw, -56px); margin-bottom: -4%; }
#hero-orb-canvas { position: relative; z-index: 2; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 86%);
  mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 86%); }
.hero-orb-glow { position: absolute; inset: -8%; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(56,217,217,0.22) 0%, rgba(56,217,217,0.08) 42%, transparent 70%);
  filter: blur(14px); animation: orb-pulse 4s ease-in-out infinite; }

/* R2597 — WAVEFORM SONIQUE PLEINE LARGEUR ÉCRAN — FIX « coupée à moitié » :
   l'ancien combo `margin-left:50% + translateX(-50%)` DANS un conteneur flex déjà centré
   double-décalait la bande → moitié hors écran. Full-bleed robuste : width:100vw centré par
   le flex parent (.hero-scene align-items:center) → la bande traverse VRAIMENT tout l'écran.
   Fondu vertical doux seulement (jamais latéral, sinon ça raccourcit la largeur). */
.hero-wave-wrap {
  position: relative; z-index: 2;       /* au-dessus de l'orbe (1), sous le texte (3) */
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);    /* full-bleed sûr, indépendant du conteneur 1080px */
  margin-right: calc(50% - 50vw);
  height: clamp(160px, 17vw, 260px);
  margin-top: clamp(-30px, -2.4vw, -10px);
  pointer-events: auto;             /* survol/clic actifs même si la scène est aria-hidden */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
#hero-wave-canvas { display: block; width: 100%; height: 100%; }
/* Bouton micro discret (déclenche l'AnalyserNode au clic — pas de prompt au chargement) */
.hero-wave-mic {
  position: absolute; right: 6px; bottom: 4px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  font: 600 0.66rem/1 'Inter', sans-serif; letter-spacing: 0.02em;
  color: #1FD5F9; background: rgba(8,12,20,0.55);
  border: 1px solid rgba(31,213,249,0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.hero-wave-mic svg { width: 12px; height: 12px; }
.hero-wave-mic:hover { background: rgba(31,213,249,0.16); border-color: rgba(31,213,249,0.7); transform: translateY(-1px); }
.hero-wave-mic.is-live { color: #0a0e18; background: linear-gradient(95deg,#1FD5F9,#38D9D9); border-color: transparent; }
.hero-wave-mic.is-live .hero-wave-mic-lbl::after { content: ' ●'; color: #ff5b5b; }

/* R2593 — DEVICE (MacBook + clavier zoom) : en flux sous le pitch par défaut,
   et placé À DROITE du wordmark EN DIAGONALE sur desktop (demande Loris). */
.hero-device { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; margin-top: clamp(10px,2vw,24px); }
@media (min-width: 1000px) {
  .hero-device {
    position: absolute; top: clamp(58px, 8vh, 118px); right: clamp(0px, 3.5vw, 72px);
    margin-top: 0; width: clamp(220px, 22vw, 320px);
    transform: rotate(6deg); transform-origin: 70% 30%;
  }
}
/* P3 — VRAI MacBook réduit (capot orbe + cockpit, base) */
.hero-mac { position: relative; width: clamp(220px, 24vw, 340px); margin-top: 0; filter: drop-shadow(0 26px 50px rgba(0,0,0,0.5)); }
.hero-mac-lid { position: relative; width: 86%; margin: 0 auto; aspect-ratio: 16/10; border-radius: 12px 12px 3px 3px;
  padding: 6px; background: linear-gradient(155deg, #2a2f3a 0%, #14171f 72%);
  box-shadow: inset 0 0 0 1px rgba(212,175,96,0.35), 0 1px 0 rgba(255,255,255,0.06); }
.hero-mac-dalle { position: relative; width: 100%; height: 100%; border-radius: 7px 7px 2px 2px; overflow: hidden;
  background: radial-gradient(120% 130% at 70% 18%, rgba(16,185,129,0.12), #06090f 62%);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.6); }
/* R2588 — vraie capture de l'app dans l'écran + orbe vivante posée dessus */
.hmac-realshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* R2593 — logo V bleu dans la modale de capture (coin haut-gauche, discret) */
.hmac-vlogo { position: absolute; top: 6%; left: 5%; width: 9%; height: auto; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(31,213,249,0.4)); }
.hmac-liveorb { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 34%; aspect-ratio: 1; z-index: 2; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 82%); mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 82%); }
/* R2589 — état de l'écran, piloté en sync avec les frappes du clavier ci-dessous */
.hmac-state { position: absolute; bottom: 8%; left: 8%; right: 8%; z-index: 3; text-align: center;
  font-size: 7px; font-weight: 700; letter-spacing: 0.03em; color: rgba(230,238,252,0.82);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8); transition: color 220ms ease; }
.hmac-state[data-state="listen"] { color: var(--cyan); }
.hmac-state[data-state="format"] { color: #7CFFB0; }
/* le badge EN ÉCOUTE n'apparaît QUE pendant l'étape dictée */
.hmac-listening { opacity: 0; transition: opacity 220ms ease; }
.hmac-listening.is-on { opacity: 1; }
.hmac-menubar { position: absolute; top: 0; left: 0; right: 0; height: 14%; display: flex; align-items: center; gap: 5px; padding: 0 7px;
  background: rgba(8,11,18,0.7); font-size: 6px; color: rgba(230,238,252,0.6); }
.hmac-orb-dot { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #10B981 0%, rgba(16,185,129,0.5) 58%, rgba(191,149,63,0.35) 100%); }
.hmac-mb-spacer { flex: 1; }
.hmac-mb-i { width: 5px; height: 5px; border-radius: 1px; background: rgba(230,238,252,0.4); }
.hmac-mb-clock { font-size: 6px; letter-spacing: .02em; }
.hmac-listening { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px;
  font-size: 6px; font-weight: 700; letter-spacing: .08em; color: var(--cyan); }
.hmac-rec { width: 5px; height: 5px; border-radius: 50%; background: #f87171; box-shadow: 0 0 6px #f87171; animation: orb-pulse 1.4s ease-in-out infinite; }
.hmac-orb-mini { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fff 6%, var(--cyan) 48%, #0c6f86 100%);
  box-shadow: 0 0 14px rgba(56,217,217,0.85), 0 0 26px rgba(56,217,217,0.4); animation: hmac-orb 2.4s ease-in-out infinite; }
@keyframes hmac-orb { 0%,100% { transform: translate(-50%,-50%) scale(0.9); } 50% { transform: translate(-50%,-50%) scale(1.08); } }
.hmac-tr { position: absolute; bottom: 9%; left: 9%; right: 9%; font-size: 6.5px; line-height: 1.5; text-align: center;
  color: rgba(230,238,252,0.7); }
.hero-mac-base { position: relative; width: 100%; height: 9px; margin-top: -1px; border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #3a4150, #1a1d26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 18px rgba(0,0,0,0.5); }
.hero-mac-base::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 22%; height: 2px; border-radius: 0 0 3px 3px; background: rgba(212,175,96,0.5); }
.hero-mac-pad { position: absolute; bottom: -7px; left: 4%; right: 4%; height: 6px; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, rgba(0,0,0,0.32), transparent); }

/* P9 — CLAVIER ZOOMÉ sous le MacBook : vue rapprochée des frappes ⌘M / ⌘L (bulle/loupe) */
.hero-kbzoom { position: relative; margin-top: 26px; display: flex; flex-direction: column; align-items: center; }
/* R2589 — BULLE DE ZOOM : loupe en verre qui relie le clavier du Mac (au-dessus) à sa vue rapprochée.
   Cercle vitré + tige + halo : « ce clavier EST le clavier du Mac, vu à la loupe ». */
.hkz-loupe { position: relative; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(56,217,217,0.12), rgba(8,12,20,0.55) 70%);
  border: 1.5px solid rgba(56,217,217,0.4);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.12);
  backdrop-filter: blur(2px); }
.hkz-loupe::before { content: '⌘'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: rgba(56,217,217,0.85); font-weight: 700; }
.hkz-loupe::after { content: ''; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 2px; height: 20px;
  background: linear-gradient(180deg, rgba(56,217,217,0.05), rgba(56,217,217,0.75)); }
/* R2593 — GLOW cyan du clavier SUPPRIMÉ (Loris : « vraiment dégueulasse »). Cadre neutre, ombre douce only. */
.hkz-frame { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 13px 18px 15px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(13,18,32,0.82), rgba(8,11,18,0.7)); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,0.6);
  animation: hkz-zoom 5.5s ease-in-out infinite; }
@keyframes hkz-zoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.hkz-cap { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(230,196,120,0.85); }
.hkz-keys { display: flex; align-items: center; gap: 7px; }
.hkz-key { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 38px; padding: 0 9px; border-radius: 9px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text);
  background: linear-gradient(180deg, #545c66, #3e4249); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.16); }
.hkz-cmd { color: var(--gold-bright); }
/* R2589 — touche ALLUMÉE pilotée par JS (is-lit), en sync avec l'écran du Mac (plus d'auto-pulse aveugle) */
.hkz-key { transition: background 140ms ease, box-shadow 200ms ease, color 140ms ease, transform 120ms ease; }
.hkz-key.is-lit { color: #03161a; background: linear-gradient(180deg, var(--cyan), #1aa3b8); border-color: rgba(56,217,217,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); transform: translateY(2px); }
.hkz-plus { color: var(--muted2); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .hero-orb-glow, .hmac-orb-mini, .hmac-rec, .hkz-frame { animation: none; } }

.hero-sub { font-size: clamp(1rem,1.4vw,1.16rem); color: var(--muted); line-height: 1.65; max-width: 52ch; margin-bottom: 26px; opacity: 0; animation: fade-up 0.6s 0.9s ease forwards; }
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-bottom: 18px; opacity: 0; animation: fade-up 0.6s 1.1s ease forwards; }
/* Badges de souveraineté stylés (remplace le texte gris pâle) */
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; opacity: 0; animation: fade-up 0.6s 1.3s ease forwards; }
.sov-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.005em;
  color: rgba(230,238,252,0.92);
  background: rgba(13,18,32,0.6); border: 1px solid var(--gold-line);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.25);
  transition: border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.sov-badge svg { color: var(--gold-bright); flex-shrink: 0; }
.sov-badge:hover { border-color: rgba(212,175,96,0.45); color: #fff; transform: translateY(-1px); }
.meta-sep { opacity: 0.4; }
.shortcut-badge {
  position: absolute; bottom: clamp(60px,10vh,100px); right: clamp(24px,6vw,80px); z-index: 3;
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: var(--panel); border: 1px solid var(--glass-border); border-radius: 12px;
  backdrop-filter: blur(16px); font-size: 0.8rem; color: var(--muted);
  opacity: 0; animation: fade-up 0.6s 1.5s ease forwards;
}
.shortcut-badge kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text);
}
.shortcut-badge span { margin-left: 4px; font-size: 0.72rem; }
.scroll-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted2); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; animation: fade-up 0.6s 1.8s ease forwards;
}
.scroll-arrow {
  width: 1px; height: 40px;
  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 */
.section { max-width:var(--max);margin:0 auto;padding:100px clamp(16px,4vw,48px);position:relative;z-index:2; }
.section-narrow { max-width:920px; }
.section-head { max-width:680px;margin-bottom:56px; }
.eyebrow { font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px; }
.eyebrow-gold { color:var(--gold); }
.section h2 { font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-0.05em;line-height:1.1;margin-bottom:16px; }
.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);font-style:normal; }

/* PILLARS (dictée — « temps réel, 100% local », R1876 : glassmorphisme + magnétique) */
.pillar-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.pillar {
  position:relative; overflow:hidden;
  padding:34px 28px;border-radius:22px;
  /* Glassmorphisme premium (fidèle interactive-kpi-card : gradient slate + blur) */
  background:
    radial-gradient(ellipse at 100% 0%, rgba(56,217,217,0.10), 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(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.7);
  transition:border-color 300ms ease, box-shadow 300ms ease;
}
.pillar:hover { border-color:rgba(56,217,217,0.34); box-shadow:0 22px 60px -26px rgba(56,217,217,0.32), 0 1px 0 rgba(255,255,255,0.06) inset; }
.pillar-icon {
  width:48px;height:48px;border-radius:13px;background:var(--cyan-dim);border:1px solid rgba(56,217,217,0.28);
  display:flex;align-items:center;justify-content:center;color:var(--cyan);margin-bottom:20px;
  transition:transform 200ms ease;
}
.pillar:hover .pillar-icon { transform:scale(1.08); }
.pillar h3 { font-size:1.12rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:10px; }
.pillar p { font-size:0.9rem;color:var(--muted);line-height:1.65; }

/* SUITE */
.suite-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.suite-card {
  padding:26px 24px;background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;
  transition:border-color 300ms,transform 300ms;position:relative;
}
.suite-card:hover { border-color:rgba(255,255,255,0.16);transform:translateY(-3px); }
.suite-card-lead {
  grid-column:span 1;
  background:linear-gradient(150deg,rgba(56,217,217,0.08),rgba(212,175,96,0.04));
  border-color:rgba(56,217,217,0.2);
}
.suite-card-search {
  grid-column:span 1;
  background:linear-gradient(150deg,rgba(212,175,96,0.08),rgba(56,217,217,0.03));
  border-color:rgba(212,175,96,0.2);
}
.suite-icon {
  width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,0.05);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--text);margin-bottom:18px;
}
.suite-icon-gold { background:var(--gold-dim);border-color:rgba(212,175,96,0.25);color:var(--gold); }
.suite-badge {
  display:inline-block;margin-bottom:12px;padding:3px 12px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;font-weight:500;letter-spacing:0.02em;
  background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(56,217,217,0.25);
}
.suite-badge-2 { background:var(--violet-dim);color:var(--violet);border-color:rgba(139,92,246,0.25); }
.suite-badge-3 { background:var(--gold-dim);color:var(--gold);border-color:rgba(212,175,96,0.25); }
.suite-badge-4 { background:rgba(56,217,217,0.1);color:var(--cyan);border-color:rgba(56,217,217,0.2); }
.suite-badge-5 { background:var(--violet-dim);color:var(--violet);border-color:rgba(139,92,246,0.25); }
.suite-card h3 { font-size:1.12rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:10px; }
.suite-card p { font-size:0.88rem;color:var(--muted);line-height:1.65; }

/* ─── TOURNIQUET (carrousel des outils) ─────────────────────────────────── */
.tourniquet { position:relative;display:flex;align-items:center;gap:12px; }
.tq-track {
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 4px 18px;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1;
}
.tq-track::-webkit-scrollbar { display:none; }
.tool-slide {
  flex:0 0 clamp(260px, 30%, 340px);scroll-snap-align:center;
  display:flex;flex-direction:column;gap:0;text-align:left;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;
  overflow:hidden;color:inherit;font:inherit;padding:0;
  transition:border-color 300ms ease,transform 220ms cubic-bezier(0.22,1,0.36,1),box-shadow 300ms ease;
}
.tool-slide:hover { border-color:rgba(56,217,217,0.4);box-shadow:0 18px 50px rgba(0,0,0,0.4),0 0 0 1px rgba(56,217,217,0.12); }
.tool-slide[data-accent="gold"]:hover { border-color:rgba(212,175,96,0.45);box-shadow:0 18px 50px rgba(0,0,0,0.4),0 0 0 1px rgba(212,175,96,0.14); }
.tool-slide:focus-visible { outline:2px solid var(--cyan);outline-offset:2px; }
.ts-thumb { position:relative;display:block;aspect-ratio:16/10.4;overflow:hidden;background:linear-gradient(135deg,#000 0%,#0d1622 55%,#070a11 100%);border-bottom:1px solid var(--line); }
/* R2531 — anti « carré blanc » universel : tout visuel app a un fond sombre charte
   tant que l'image n'est pas peinte (jamais de flash blanc au 1er rendu). */
figure img, .mem-visual img, .lightbox-shot img { background:#070a11; }
/* Skeleton shimmer premium — visible tant que l'image n'est pas chargée (évite le « carré vide » au scroll) */
.ts-thumb::before { content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 30%,rgba(31,213,249,0.10) 45%,rgba(201,162,78,0.10) 55%,transparent 70%);background-size:220% 100%;animation:kk-shimmer 1.6s ease-in-out infinite;opacity:1;transition:opacity .5s ease;pointer-events:none; }
.ts-thumb.img-loaded::before { opacity:0; }
.ts-thumb img { position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 600ms cubic-bezier(0.22,1,0.36,1),opacity .55s ease;filter:saturate(1.05); }
@keyframes kk-shimmer { 0%{background-position:120% 0;} 100%{background-position:-120% 0;} }
.tool-slide:hover .ts-thumb img { transform:scale(1.045); }
/* dégradé doux en bas de la vignette pour lier au panneau meta */
.ts-thumb::after { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(8,11,18,0.5)); }
.ts-meta { display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px; }
.ts-title { font-family:var(--font-display);font-size:1.08rem;font-weight:700;letter-spacing:-0.02em;color:var(--text); }
.ts-sub { font-size:0.78rem;color:var(--muted2);letter-spacing:0.01em; }
.ts-zoom {
  position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--text);
  background:rgba(8,11,18,0.7);border:1px solid var(--glass-border);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(-4px);transition:opacity 220ms ease,transform 220ms ease;
}
.tool-slide:hover .ts-zoom { opacity:1;transform:translateY(0); }
.tq-nav {
  flex-shrink:0;width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text);
  background:var(--glass);border:1px solid var(--gold-line);
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease;
}
.tq-nav:hover { background:rgba(212,175,96,0.12);border-color:rgba(212,175,96,0.5);color:var(--gold-bright);transform:scale(1.06); }
.tq-nav:active { transform:scale(0.96); }
.tq-dots { display:flex;justify-content:center;gap:8px;margin-top:6px; }
.tq-dot { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.18);transition:background 220ms ease,width 220ms ease;cursor:pointer;border:none;padding:0; }
.tq-dot.active { width:22px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--gold)); }

/* ─── LIGHTBOX ──────────────────────────────────────────────────────────── */
.lightbox { position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:24px; }
.lightbox.open { display:flex; }
.lightbox-backdrop { position:absolute;inset:0;background:rgba(4,7,12,0.82);backdrop-filter:blur(10px);animation:lb-fade .3s ease; }
@keyframes lb-fade { from { opacity:0; } to { opacity:1; } }
.lightbox-panel {
  position:relative;z-index:1;max-width:1080px;width:100%;max-height:88vh;overflow:hidden;
  display:grid;grid-template-columns:1.6fr 1fr;
  background:linear-gradient(150deg,rgba(15,20,34,0.98),rgba(10,14,24,0.98));
  border:1px solid var(--gold-line);border-radius:24px;
  box-shadow:0 40px 120px rgba(0,0,0,0.6),0 0 0 1px rgba(56,217,217,0.08);
  animation:lb-pop .34s cubic-bezier(0.22,1,0.36,1);
}
@keyframes lb-pop { from { opacity:0;transform:translateY(18px) scale(0.98); } to { opacity:1;transform:none; } }
.lightbox-shot { background:#06090f;display:flex;align-items:center;justify-content:center;overflow:hidden;max-height:88vh; }
.lightbox-shot img { width:100%;height:100%;object-fit:contain;display:block; }
.lightbox-info { padding:34px 32px;display:flex;flex-direction:column;gap:14px;justify-content:center; }
.lightbox-badge { align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.02em;padding:4px 13px;border-radius:999px;background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(56,217,217,0.3); }
.lightbox-info h3 { font-family:var(--font-display);font-size:1.6rem;font-weight:700;letter-spacing:-0.03em;line-height:1.1; }
.lightbox-info p { font-size:0.95rem;color:var(--muted);line-height:1.7; }
.lightbox-info .btn { align-self:flex-start;margin-top:8px; }
.lightbox-close {
  position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text);
  background:rgba(8,11,18,0.65);border:1px solid var(--glass-border);backdrop-filter:blur(8px);
  transition:background 180ms ease,transform 180ms ease;
}
.lightbox-close:hover { background:rgba(212,175,96,0.18);transform:rotate(90deg); }

/* LECTURE INTELLIGENTE */
.reading-wrap { display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; }
.reading-text .section-sub { margin-bottom:24px; }
.reading-list { display:flex;flex-direction:column;gap:12px; }
.reading-list li { display:flex;align-items:flex-start;gap:10px;font-size:0.92rem;color:var(--muted);line-height:1.55; }
.reading-list li::before { content:'★';color:var(--gold);font-size:0.8rem;flex-shrink:0;margin-top:2px; }
.reading-list strong { color:var(--text);font-weight:600; }
.reading-demo { display:flex;flex-direction:column;gap:14px; }
.reading-card { padding:18px 20px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border); }
.reading-card-raw code { display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:0.8rem;line-height:1.7;color:var(--muted); }
.reading-card-narr { background:linear-gradient(150deg,rgba(212,175,96,0.07),rgba(56,217,217,0.03));border-color:rgba(212,175,96,0.22); }
.reading-card-narr p { margin-top:10px;font-size:0.92rem;line-height:1.6;color:var(--text); }
.reading-card-narr em { color:var(--gold);font-style:normal;font-weight:600; }
.reading-tag { font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted2); }
.reading-tag-gold { color:var(--gold); }
.reading-arrow { display:flex;justify-content:center;color:var(--gold);opacity:0.7; }
.reading-play { display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:0.78rem;color:var(--cyan); }
.reading-play-dot { width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:orb-pulse 1.6s ease-in-out infinite; }

/* PRIVACY */
.privacy-layout { display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; }
.privacy-pills { display:flex;flex-wrap:wrap;gap:12px;align-content:center; }
.privacy-pill {
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-border);font-size:0.9rem;color:var(--text);
}
.privacy-pill-dot { width:8px;height:8px;border-radius:50%;background:conic-gradient(from 180deg,var(--cyan),var(--gold),var(--cyan));box-shadow:0 0 8px rgba(56,217,217,0.5);flex-shrink:0; }
.privacy-stack-cap { flex-basis:100%;margin-top:8px;font-size:0.86rem;line-height:1.6;color:var(--muted);max-width:42ch; }

/* STACK SPHERE — TagCloud 3D maison (projection sur sphère, rotation, interactive souris) */
.stack-sphere-wrap { display:flex;align-items:center;justify-content:center;min-height:380px; }
.stack-sphere {
  position:relative;width:340px;height:340px;
  transform-style:preserve-3d;cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.stack-sphere:active { cursor:grabbing; }
/* Tuiles à LOGO (SVG) — petites pastilles rondes élégantes, pas du texte */
.stack-tag {
  position:absolute;top:50%;left:50%;
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-border);
  background:rgba(13,18,32,0.55);
  backdrop-filter:blur(6px);
  /* will-change limité à transform/opacity (perf) ; pas de transition (positions écrites/frame) */
  will-change:transform,opacity;
  pointer-events:none;
}
.stack-tag svg { width:22px;height:22px;display:block; }
/* Couleur sémantique : local (souverain) = cyan, cloud (vos clés) = or */
.stack-tag[data-kind="local"] { color:var(--cyan);border-color:rgba(56,217,217,0.3);box-shadow:0 0 0 1px rgba(56,217,217,0.06),0 6px 18px rgba(56,217,217,0.1),inset 0 0 14px rgba(56,217,217,0.06); }
.stack-tag[data-kind="cloud"] { color:var(--gold-bright);border-color:rgba(212,175,96,0.32);box-shadow:0 0 0 1px rgba(212,175,96,0.06),0 6px 18px rgba(212,175,96,0.1),inset 0 0 14px rgba(212,175,96,0.06); }
/* Halo derrière la sphère pour la détacher du fond */
.stack-sphere-wrap::before {
  content:'';position:absolute;width:300px;height:300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(56,217,217,0.10), transparent 70%);
}
/* Fallback sans-JS / reduced-motion : grille statique de pills (jamais de page vide) */
.stack-sphere.static { transform:none;width:auto;height:auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:360px; }
.stack-sphere.static .stack-tag { position:static;top:auto;left:auto;transform:none;opacity:1;pointer-events:auto; }

/* COMPARE — forces en lignes, header sticky, colonne Vokali surlignée */
.section-compare { max-width:var(--max); }
.compare-wrap { overflow-x:auto;overflow-y:visible;border-radius:20px;border:1px solid var(--glass-border);background:rgba(11,15,26,0.6); -webkit-overflow-scrolling:touch; }
.compare-table { width:100%;border-collapse:separate;border-spacing:0;font-size:0.9rem;min-width:760px; }
/* En-tête STICKY : reste visible pendant le scroll de la longue liste */
.compare-table thead th {
  position:sticky;top:0;z-index:5;
  padding:16px 14px;text-align:center;font-size:0.78rem;font-weight:600;color:var(--muted);
  background:rgba(12,16,27,0.97);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gold-line);white-space:nowrap;
}
.compare-table thead .cmp-feature-col { text-align:left;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted2); }
.compare-table th[scope="row"] { font-weight:600;color:var(--text);text-align:left;font-size:0.92rem;line-height:1.35; }
.cmp-hint { display:block;font-weight:400;font-size:0.76rem;color:var(--muted2);letter-spacing:0; }
.compare-table td,.compare-table th { padding:13px 14px;vertical-align:middle; }
.compare-table td { text-align:center; }
.compare-table tbody tr th[scope="row"], .compare-table tbody tr td { border-bottom:1px solid var(--line); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom:none; }
.compare-table tbody tr:hover th[scope="row"], .compare-table tbody tr:hover td:not(.cmp-us) { background:rgba(255,255,255,0.018); }
/* Colonne Vokali (us) surlignée verticalement, cyan→or */
.cmp-us { background:linear-gradient(180deg, rgba(56,217,217,0.07), rgba(212,175,96,0.05)); }
thead th.cmp-us { background:linear-gradient(180deg, rgba(56,217,217,0.16), rgba(12,16,27,0.97));border-bottom-color:var(--cyan); box-shadow:inset 2px 0 0 rgba(56,217,217,0.4), inset -2px 0 0 rgba(212,175,96,0.3); }
td.cmp-us { box-shadow:inset 2px 0 0 rgba(56,217,217,0.18), inset -2px 0 0 rgba(212,175,96,0.12); }
.cmp-brand { display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1rem;color:var(--text);letter-spacing:0.01em; }
.tr-orb-dot { width:9px;height:9px;border-radius:50%;background:conic-gradient(from 180deg,var(--cyan),var(--gold),var(--cyan));box-shadow:0 0 10px rgba(56,217,217,0.6);flex-shrink:0; }
.cmp-price-row th[scope="row"], .cmp-price-row td { font-size:0.84rem;color:var(--muted); }
.cmp-price-row td.cmp-us strong { color:var(--cyan); }
/* Icônes lisibles : cercles colorés nets */
.ic { display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:0.8rem;font-weight:700;line-height:1; }
.ic-yes { color:var(--cyan);background:rgba(56,217,217,0.12);box-shadow:inset 0 0 0 1px rgba(56,217,217,0.35); }
.cmp-us .ic-yes { color:#062a2a;background:linear-gradient(135deg,var(--cyan),#1aa3b8);box-shadow:0 0 12px rgba(56,217,217,0.4); }
.ic-no { color:rgba(220,230,248,0.3);background:rgba(255,255,255,0.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);font-weight:500; }
.ic-part { color:var(--gold-bright);background:rgba(212,175,96,0.12);box-shadow:inset 0 0 0 1px rgba(212,175,96,0.3); }
.compare-legend { display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px;font-size:0.8rem;color:var(--muted); }
.compare-legend > span { display:inline-flex;align-items:center;gap:7px; }
.compare-legend .ic { width:18px;height:18px;font-size:0.7rem; }
.compare-note { font-size:0.74rem;color:var(--muted2);line-height:1.5;flex-basis:100%;margin-top:2px; }

/* PRICING */
.pricing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.pricing-grid-4 { grid-template-columns:repeat(4,1fr);gap:16px; }
.pricing-grid-4 .pricing-card { padding:28px 24px;gap:14px; }
.pricing-grid-4 .pricing-amount { font-size:2.2rem; }
.pricing-grid-4 .pricing-list li { font-size:0.84rem; }
.pricing-card { padding:34px 30px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:18px; }
.pricing-card-pro { background:linear-gradient(135deg,rgba(56,217,217,0.07),rgba(212,175,96,0.05));border-color:rgba(56,217,217,0.22);position:relative; }
/* Pastille « Toute la suite incluse » — centrée sur le bord haut de la carte (R1880 P10) */
.pricing-card-pro { overflow:visible; }
/* R1883 — « Toute la suite incluse » : ex-pastille jaune-moutarde pleine (horreur) →
   liseré doré fin sur fond glass sombre, texte doré clair lisible. */
.pricing-pro-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:6px 18px; border-radius:999px; font-size:0.74rem; font-weight:700; letter-spacing:0.02em;
  color:#EBD79E; background:rgba(12,14,20,0.85); backdrop-filter:blur(6px);
  border:1px solid var(--app-gold-soft);
  box-shadow:0 6px 18px rgba(0,0,0,0.42), 0 0 14px rgba(201,162,78,0.14), inset 0 1px 0 rgba(255,255,255,0.06); z-index:3;
}
.pricing-tier { font-size:0.75rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted2); }
.pricing-amount { font-size:2.7rem;font-weight:800;letter-spacing:-0.05em;line-height:1; }
.pricing-lt { font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0; }
.pricing-anchor { font-size:1.3rem;font-weight:600;color:var(--muted2);text-decoration:line-through;letter-spacing:-0.02em;margin-right:8px;vertical-align:middle; }

/* Notice première ouverture (app auto-signée — Gatekeeper) */
.first-open-notice { display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 16px;border-radius:14px;background:rgba(13,18,32,0.55);border:1px solid var(--gold-line);color:rgba(220,230,248,0.74);font-size:0.83rem;line-height:1.4;text-decoration:none;backdrop-filter:blur(10px);transition:background .2s ease,border-color .2s ease,transform .2s ease;max-width:min(94vw,520px); }
.first-open-notice:hover { background:rgba(212,175,96,0.1);border-color:rgba(212,175,96,0.42);transform:translateY(-1px); }
.first-open-notice svg { color:var(--gold-bright);flex-shrink:0; }
.first-open-notice strong { color:rgba(230,238,252,0.95);font-weight:600; }
.first-open-more { color:var(--gold-bright);font-weight:600;white-space:nowrap; }
.first-open-more::after { content:' →';font-weight:400; }
.pricing-desc { color:var(--muted);font-size:0.9rem; }
.pricing-list { display:flex;flex-direction:column;gap:10px;flex:1; }
.pricing-list li { display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--muted); }
.pricing-list li::before { content:'✓';color:var(--cyan);font-weight:700;flex-shrink:0;margin-top:1px; }
.pricing-note { font-size:0.74rem;color:var(--muted2);text-align:center; }

/* FAQ */
.faq-list { display:flex;flex-direction:column;gap:12px; }
.faq-item {
  background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;
  padding:0 22px;transition:border-color 200ms;
}
.faq-item[open] { border-color:rgba(56,217,217,0.25); }
.faq-item summary {
  list-style:none;cursor:pointer;padding:18px 0;font-size:1rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+';font-size:1.4rem;font-weight:400;color:var(--cyan);flex-shrink:0;
  transition:transform 200ms;line-height:1;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { padding:0 0 20px;font-size:0.92rem;line-height:1.7;color:var(--muted);max-width:68ch; }
.faq-item p a { color:var(--cyan);text-decoration:underline;text-underline-offset:2px; }
.faq-item strong { color:var(--text); }
.faq-item em { color:var(--gold);font-style:normal; }

/* CTA FINAL — orbe LIBRE fondue (plus de carré) + scrim de contraste fort
   pour que le titre/texte restent parfaitement lisibles par-dessus l'orbe. */
.cta-section { position:relative;padding:140px 24px;text-align:center;overflow:hidden;z-index:2; }
.cta-orb-wrap { position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center; }
.cta-orb-wrap canvas {
  width:680px;height:680px;max-width:120%;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);will-change:contents;
  /* Fondu radial → aucun bord carré du canvas n'est visible */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 62%);
  opacity:0.92;
}
/* Vignette de fond : fond le canvas dans le noir sur les bords */
.cta-section::after { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 8%,var(--bg) 78%);pointer-events:none;z-index:1; }
/* Scrim de CONTRASTE FORT derrière le bloc texte : titre/CTA jamais ton-sur-ton */
.cta-section::before {
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,92%);height:min(420px,70%);z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 58% 60% at 50% 50%, rgba(6,9,15,0.86) 0%, rgba(6,9,15,0.5) 46%, transparent 74%);
}
.cta-content { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px; }
.cta-content h2 { font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-0.04em;
  text-shadow:0 2px 30px rgba(4,7,12,0.9),0 1px 4px rgba(4,7,12,0.95); }
/* R2580 — FIX lisibilité « Parle » : sur le halo lumineux de la CTA + text-shadow hérité du h2,
   le background-clip:text NE PEINT PAS le remplissage doré (même bug que le H1 hero) → mot
   illisible (contour seul). Couleur dorée PLEINE + text-shadow propre = mot or net et lisible. */
.cta-content h2 .vk-gold, .cta-content h2 .vk-iris {
  background:none !important; -webkit-background-clip:border-box; background-clip:border-box;
  color:#f3d28a; -webkit-text-fill-color:#f3d28a; animation:none;
  text-shadow:0 2px 20px rgba(4,7,12,0.9),0 1px 3px rgba(4,7,12,0.95);
}
.cta-content > p { color:rgba(230,238,252,0.78);font-size:1.08rem;max-width:48ch;text-shadow:0 1px 16px rgba(4,7,12,0.8); }
/* R2531 — Loris : « macOS 14+ … » était quasi invisible (muted2 = 0.35).
   On remonte le contraste nettement + légère lueur cyan pour le rendre lisible. */
.cta-meta { font-size:0.82rem !important;color:rgba(225,235,250,0.78) !important;font-weight:500 !important;letter-spacing:0.01em; }

/* FOOTER */
.site-footer {
  max-width:var(--max);margin:0 auto;padding:56px clamp(16px,4vw,48px) 56px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  border-top:1px solid var(--line);position:relative;z-index:2;
}
.footer-col { display:flex;flex-direction:column;gap:12px;font-size:0.86rem; }
.footer-col a { color:var(--muted2);transition:color 180ms; }
.footer-col a:hover { color:var(--gold-bright); }
.footer-head { font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:2px; }
.footer-brand { display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-0.04em;color:var(--text); }
.footer-tag { font-size:0.85rem;color:var(--muted);line-height:1.6;max-width:34ch; }
.footer-by { font-size:0.82rem;color:var(--muted2); }
.footer-by a { color:var(--cyan); }

/* DEMO ORBE LIBRE — plus de carré, plus d'anneau : canvas fondu en radial vers
   le fond (mask) sur un halo organique. L'orbe « flotte », sans conteneur. */
.section-demo {
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.demo-orb-stage {
  position:relative;aspect-ratio:1;width:100%;max-width:520px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
}
.demo-orb-glow {
  position:absolute;inset:-12%;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%, rgba(56,217,217,0.14), transparent 60%),
    radial-gradient(circle at 52% 60%, rgba(212,175,96,0.07), transparent 62%);
  filter:blur(4px);
}
.demo-orb-stage canvas {
  position:relative;z-index:1;width:118%;height:118%;will-change:contents;
  /* Fondu radial doux vers transparent → AUCUN bord carré visible */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 70%);
}
.demo-text h2 { margin-bottom:16px; }
.demo-meta { display:flex;align-items:center;gap:12px;margin-top:24px;font-size:0.86rem;color:var(--cyan); }
.demo-wave { display:inline-flex;align-items:flex-end;gap:3px;height:18px; }
.demo-wave i {
  width:3px;border-radius:2px;background:var(--cyan);
  animation:demo-wave 1s ease-in-out infinite;
}
.demo-wave i:nth-child(1){height:40%;animation-delay:0s}
.demo-wave i:nth-child(2){height:90%;animation-delay:0.15s}
.demo-wave i:nth-child(3){height:60%;animation-delay:0.3s}
.demo-wave i:nth-child(4){height:100%;animation-delay:0.45s}
.demo-wave i:nth-child(5){height:50%;animation-delay:0.6s}
@keyframes demo-wave { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }

/* BEAMS pricing — fin trait lumineux animé sur la bordure de la carte Recommandé */
.pricing-card-pro { overflow:hidden; }
.pricing-card-pro::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;
}
@property --beam-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes beam-rotate { to { --beam-angle:360deg; } }

/* Cartes magnétiques 3D « niveau Kali Kana » (R1875) — porté de interactive-kpi-card.tsx.
   Le tilt 3D + scale vient du JS (ressort) ; on N'anime PAS transform en CSS (sinon ça fight le JS).
   On retire aussi le translateY(-2px) des :hover historiques pour ne pas écraser le tilt. */
.suite-card, .pricing-card, .pillar, .reading-card, .tool-slide, .hsuite-card, .feature-card { transition: border-color 300ms ease, box-shadow 300ms ease, color 300ms ease; }
/* R1883 — au CLIC sur une carte (toutes) : le texte passe blanc → DORÉ, comme le
   menu latéral de l'app (item actif). Liseré doré app + titres/paragraphes dorés. */
.card-active { border-color:var(--app-gold-soft) !important; box-shadow:0 10px 30px rgba(0,0,0,0.35), 0 0 18px rgba(201,162,78,0.18) !important; }
.card-active h3, .card-active .rt-title, .card-active .feature-card-title, .card-active .pillar-title { color:#F0DCA0 !important; -webkit-text-fill-color:#F0DCA0 !important; background:none !important; }
.card-active p, .card-active li, .card-active span:not([class*="icon"]):not([class*="svg"]) { color:#E3CC8E !important; }
.card-active svg { color:#EBD79E; }
.magnetic-3d { transform-style:preserve-3d; will-change:transform; }
/* ⚠️ NE PAS remettre `transform:none` sur :hover des cartes magnétiques :
   ça écrasait le tilt 3D piloté par le JS (ressort) → cartes « mortes » au survol
   (bug remonté par Loris R1876). Le JS gère entièrement le transform. */
/* Le contenu interne « décolle » légèrement (parallaxe de profondeur, comme translateZ(30px) de la carte de réf) */
.feature-card.magnetic-3d > *:not(.card-glare),
.rcard.magnetic-3d > *:not(.card-glare),
.pillar.magnetic-3d > *:not(.card-glare) { transform:translateZ(28px); }
/* Glare directionnel (point lumineux qui suit le curseur) — overlay au-dessus du contenu */
.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;
}

/* REVEALS — masqués uniquement si JS actif (fallback no-JS = contenu visible) */
.js .reveal { opacity:0;transform:translateY(20px);transition:opacity 0.65s ease,transform 0.65s ease; }
.js .reveal.visible { opacity:1;transform:none; }
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}

/* TOAST checkout (early access) — injecté par JS */
.ls-toast {
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);
  z-index:200;max-width:min(92vw,420px);
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;
  background:rgba(13,18,32,0.96);border:1px solid rgba(56,217,217,0.3);
  box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(56,217,217,0.1);
  backdrop-filter:blur(20px);
  color:var(--text);font-size:0.88rem;line-height:1.45;
  opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(0.22,1,0.36,1);
}
.ls-toast.show { opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto; }
.ls-toast-dot { width:9px;height:9px;border-radius:50%;flex-shrink:0;background:conic-gradient(from 180deg,var(--cyan),var(--gold),var(--cyan));box-shadow:0 0 10px rgba(56,217,217,0.6); }
.ls-toast a { color:var(--cyan);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap; }

/* ─── PAGES SECONDAIRES (changelog, première-ouverture, légal) ───────────────
   Même charte cockpit que la landing : fond sombre + grille, topbar avec
   mini-orbe, carte glass, finitions dorées. Hero compact. */
.legal-page { min-height:100vh; }
.legal-topbar {
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--nav-h);padding:0 clamp(16px,4vw,48px);
  background:rgba(8,11,18,0.78);backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.legal-topbar .brand { display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-0.02em;color:var(--text); }
.brand-mark {
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 180deg,var(--cyan),var(--gold),var(--cyan));
  box-shadow:0 0 14px rgba(56,217,217,0.6);animation:orb-pulse 3s ease-in-out infinite;
}
/* Boutons des sous-pages (reprend .btn) */
.button { display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:0.88rem;cursor:pointer;transition:transform 160ms ease,box-shadow 160ms ease,background 160ms ease,border-color 160ms ease; white-space:nowrap;
  background:linear-gradient(135deg,var(--cyan) 0%,#1aa3b8 100%);color:#03161a;box-shadow:0 0 0 1px rgba(56,217,217,0.3),0 14px 34px rgba(56,217,217,0.2); }
.button:hover { transform:translateY(-2px); }
.button-small { height:36px;padding:0 15px;font-size:0.82rem; }
.button-ghost { background:var(--glass);border:1px solid var(--gold-line);color:var(--text);box-shadow:none; }
.button-ghost:hover { background:rgba(212,175,96,0.1);border-color:rgba(212,175,96,0.45);color:var(--gold-bright); }

/* En-tête compact de page secondaire */
.legal-hero {
  position:relative;text-align:center;padding:clamp(60px,10vw,96px) clamp(16px,4vw,48px) clamp(28px,5vw,48px);
  overflow:hidden;
}
.legal-hero::after { content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:760px;max-width:120%;height:340px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(56,217,217,0.1), transparent 70%); }
.legal-hero > * { position:relative;z-index:1; }
.legal-hero .eyebrow { justify-content:center; }
.legal-hero h1 { font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.6rem);font-weight:800;letter-spacing:-0.04em;line-height:1.05;margin:8px 0 16px;
  background:linear-gradient(135deg,var(--text) 30%,var(--gold-bright));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.legal-hero .legal-lead { color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:60ch;margin:0 auto; }

/* Carte de contenu */
.legal-card {
  max-width:860px;margin:0 auto clamp(60px,9vw,110px);padding:clamp(28px,5vw,52px);
  background:rgba(13,18,32,0.55);border:1px solid var(--glass-border);border-radius:24px;
  position:relative;z-index:2;
}
.legal-card > .eyebrow { color:var(--cyan); }
.legal-card h1 { font-family:var(--font-display);font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800;letter-spacing:-0.04em;margin:6px 0 18px; }
.legal-card h2 { font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-0.02em;margin:32px 0 12px;padding-top:24px;border-top:1px solid var(--gold-line); }
.legal-card h2:first-of-type { border-top:none;padding-top:0; }
.legal-card p { color:var(--muted);font-size:0.98rem;line-height:1.75;margin-bottom:14px; }
.legal-card p strong, .legal-card li strong { color:var(--text);font-weight:600; }
.legal-card em { color:var(--gold-bright);font-style:normal; }
.legal-card a { color:var(--cyan);text-decoration:underline;text-underline-offset:2px; }
.legal-card code { font-family:'JetBrains Mono',monospace;font-size:0.86em;background:rgba(255,255,255,0.06);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--gold-bright); }
.legal-card ol, .legal-card ul { margin:0 0 16px;padding-left:0;display:flex;flex-direction:column;gap:10px; }
.legal-card ul li { display:flex;gap:10px;color:var(--muted);font-size:0.96rem;line-height:1.6; }
.legal-card ul li::before { content:'✓';color:var(--cyan);font-weight:700;flex-shrink:0; }
.legal-note { font-size:0.88rem !important;color:var(--muted2) !important;background:rgba(212,175,96,0.06);border:1px solid var(--gold-line);border-radius:12px;padding:14px 16px;margin-top:18px;line-height:1.6 !important; }

/* Étapes numérotées (première-ouverture) */
.steps { display:flex;flex-direction:column;gap:14px;margin:18px 0 8px; }
.step {
  display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:16px;
  background:var(--glass);border:1px solid var(--glass-border);transition:border-color 220ms ease,transform 220ms ease;
}
.step:hover { border-color:rgba(56,217,217,0.3);transform:translateY(-2px); }
.step-num {
  flex-shrink:0;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#03161a;
  background:linear-gradient(135deg,var(--cyan),var(--gold-bright));box-shadow:0 6px 16px rgba(56,217,217,0.25);
}
.step-body { flex:1; }
.step-body strong { display:block;color:var(--text);font-weight:600;font-size:1rem;margin-bottom:3px; }
.step-body span { color:var(--muted);font-size:0.92rem;line-height:1.6; }
.step-icon { flex-shrink:0;color:var(--gold-bright);margin-top:4px; }

/* Bloc d'alerte/info (première-ouverture) */
.notice-box { display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:16px;background:rgba(212,175,96,0.07);border:1px solid var(--gold-line);margin:0 0 22px; }
.notice-box svg { color:var(--gold-bright);flex-shrink:0;margin-top:2px; }
.notice-box p { margin:0;color:rgba(220,230,248,0.82);font-size:0.95rem;line-height:1.6; }

/* CHANGELOG — entrées datées */
.cl-list { display:flex;flex-direction:column;gap:18px; }
.cl-entry { padding:24px 26px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-border);position:relative;transition:border-color 220ms ease,transform 220ms ease; }
.cl-entry:hover { border-color:rgba(56,217,217,0.28);transform:translateY(-2px); }
.cl-entry-latest { background:linear-gradient(150deg,rgba(56,217,217,0.07),rgba(212,175,96,0.05));border-color:rgba(56,217,217,0.25); }
.cl-head { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px; }
.cl-version { font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-0.02em;color:var(--text); }
.cl-date { font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--muted2); }
.cl-tag { font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(56,217,217,0.3); }
.cl-tag-latest { background:var(--gold-dim);color:var(--gold-bright);border-color:rgba(212,175,96,0.35); }
.cl-entry ul { display:flex;flex-direction:column;gap:9px;margin:0; }
.cl-entry ul li { display:flex;gap:10px;color:var(--muted);font-size:0.93rem;line-height:1.55; }
.cl-entry ul li::before { content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:7px;background:conic-gradient(from 180deg,var(--cyan),var(--gold),var(--cyan));box-shadow:0 0 8px rgba(56,217,217,0.4); }
.cl-entry ul li strong { color:var(--text);font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING v4 — composants ajoutés (P1–P13)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAV : groupe droit + switcher de langue (P12) ──────────────────────── */
.nav-right { display:flex; align-items:center; gap:14px; }
.lang-switch { display:inline-flex; padding:3px; gap:2px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); }
.lang-btn {
  border:none; cursor:pointer; padding:5px 11px; border-radius:999px; background:transparent;
  font-family:var(--font-body); font-size:0.74rem; font-weight:700; letter-spacing:0.04em; color:var(--muted);
  transition:color 180ms ease, background 180ms ease;
}
.lang-btn:hover { color:var(--text); }
.lang-btn.active { color:#03161a; background:linear-gradient(135deg,var(--cyan),#1aa3b8); box-shadow:0 4px 14px rgba(56,217,217,0.25); }

/* ── HERO : 3 puces sous-hero (P3) ──────────────────────────────────────── */
/* R1885 — aération : les 3 puces sont SECONDAIRES → poids visuel réduit (puce plus
   discrète, texte légèrement atténué) + plus d'air autour, sans rien retirer. */
.hero-points {
  display:flex; flex-direction:column; gap:11px; align-items:flex-start; text-align:left;
  margin:0 0 22px; max-width:520px;
  opacity:0; animation:fade-up 0.6s 1.15s ease forwards;
}
.hero-points li { display:flex; align-items:flex-start; gap:11px; font-size:0.94rem; color:rgba(176,190,210,0.82); line-height:1.55; }
.hero-points li::before {
  content:''; flex-shrink:0; width:14px; height:14px; margin-top:4px; border-radius:50%;
  background:rgba(56,217,217,0.07); border:1px solid rgba(56,217,217,0.28);
  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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:9px; background-position:center; background-repeat:no-repeat; opacity:0.85;
}
.hero-points strong { color:rgba(243,247,251,0.92); font-weight:600; }

/* ── HERO : SUITE — cartes AGRANDIES (P7), élément central de l'intro ────── */
.hero-suite {
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px);
  justify-content:center; margin:clamp(28px,4vw,52px) auto 0; max-width:1100px; width:100%;
  opacity:0; animation:fade-up 0.6s 1.45s ease forwards;
}
/* Grandes cartes : icône + nom + rôle, glass premium, lift au survol */
.hsuite-card {
  display:flex; flex-direction:column; gap:9px; padding:clamp(18px,1.8vw,26px) clamp(16px,1.6vw,22px); border-radius:20px; text-align:left; position:relative; overflow:hidden;
  background:rgba(13,18,32,0.5); border:1px solid rgba(255,255,255,0.07); backdrop-filter:blur(12px);
  box-shadow:0 14px 40px -28px rgba(0,0,0,0.7);
  transition:border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.hsuite-card:hover { transform:translateY(-4px); border-color:rgba(56,217,217,0.4); background:rgba(56,217,217,0.05); }
.hsuite-ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); }
.hsuite-ico svg { width:24px; height:24px; }
.hsuite-name { font-family:var(--font-display); font-size:clamp(1.15rem,1.5vw,1.5rem); font-weight:800; letter-spacing:-0.02em; color:var(--text); }
.hsuite-role { font-size:clamp(0.82rem,1vw,0.95rem); color:var(--muted); line-height:1.4; }
/* Lavis d'accent par marque + glow au survol */
.hsuite-cyan   { background:radial-gradient(ellipse at 100% 0%, rgba(56,217,217,0.2), transparent 62%), rgba(13,18,32,0.5); border-color:rgba(56,217,217,0.24); }
.hsuite-gold   { background:radial-gradient(ellipse at 100% 0%, rgba(212,175,96,0.22), transparent 62%), rgba(13,18,32,0.5); border-color:rgba(212,175,96,0.26); }
.hsuite-violet { background:radial-gradient(ellipse at 100% 0%, rgba(139,92,246,0.22), transparent 62%), rgba(13,18,32,0.5); border-color:rgba(139,92,246,0.26); }
.hsuite-rose   { background:radial-gradient(ellipse at 100% 0%, rgba(244,124,156,0.22), transparent 62%), rgba(13,18,32,0.5); border-color:rgba(244,124,156,0.26); }
.hsuite-cyan   .hsuite-ico svg { color:var(--cyan); }
.hsuite-gold   .hsuite-ico svg { color:var(--gold-bright); }
.hsuite-violet .hsuite-ico svg { color:var(--violet); }
.hsuite-rose   .hsuite-ico svg { color:var(--rose); }
.hsuite-cyan:hover   { border-color:rgba(56,217,217,0.55);  box-shadow:0 20px 48px -26px rgba(56,217,217,0.55); }
.hsuite-gold:hover   { border-color:rgba(212,175,96,0.58); box-shadow:0 20px 48px -26px rgba(212,175,96,0.55); }
.hsuite-violet:hover { border-color:rgba(139,92,246,0.6); box-shadow:0 20px 48px -26px rgba(139,92,246,0.55); }
.hsuite-rose:hover   { border-color:rgba(244,124,156,0.6); box-shadow:0 20px 48px -26px rgba(244,124,156,0.55); }

/* ── HERO : badge première ouverture COURT (P6) ─────────────────────────── */
/* R1885 — lien sous-fold SECONDAIRE : allégé + plus d'air au-dessus */
.first-open-badge {
  display:inline-flex; align-items:center; gap:9px; margin-top:32px; padding:8px 16px; border-radius:999px;
  background:rgba(13,18,32,0.4); border:1px solid rgba(212,175,96,0.22); color:rgba(220,230,248,0.66);
  font-size:0.8rem; font-weight:500; backdrop-filter:blur(10px);
  opacity:0; animation:fade-up 0.6s 1.6s ease forwards;
  transition:background 200ms ease, border-color 200ms ease, transform 200ms ease, color 200ms ease;
}
.first-open-badge:hover { background:rgba(212,175,96,0.1); border-color:rgba(212,175,96,0.45); transform:translateY(-1px); color:#fff; }
.first-open-badge svg { color:var(--gold-bright); flex-shrink:0; }
.first-open-badge .fob-arrow { color:var(--gold-bright); transition:transform 200ms ease; }
.first-open-badge:hover .fob-arrow { transform:translateX(3px); }

/* ── SUITE : cartes features nommées (Typikali / CopyKoli / KaliPrompts / KaliChat)
   R1876 : glassmorphisme premium, PLUS GRANDES, hover magnétique (tilt 3D JS). ── */
/* Carrousel des outils de la suite — cartes colorées et plus grosses (R1880 P15) */
.suite-carousel { position:relative; margin-top:48px; }
/* R1883 — fades latéraux : à droite TOUJOURS (incite à scroller, plus d'« image coupée ») ;
   à gauche DYNAMIQUE (apparaît seulement quand on a scrollé). pointer-events:none. */
.suite-carousel::before, .suite-carousel::after { content:''; position:absolute; top:0; bottom:22px; width:64px; z-index:3; pointer-events:none; transition:opacity .3s ease; }
.suite-carousel::before { left:0; background:linear-gradient(90deg, var(--bg) 0%, transparent 100%); opacity:0; }
.suite-carousel::after { right:0; background:linear-gradient(270deg, var(--bg) 0%, transparent 100%); opacity:1; }
.suite-carousel.at-start::before { opacity:0; }
.suite-carousel.scrolled::before { opacity:1; }
.suite-carousel.at-end::after { opacity:0; }
.suite-features {
  display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory;
  /* R1883 — padding vertical généreux : les cartes magnétiques (tilt 3D) ne sont
     plus coupées en haut/bas par le clip d'overflow. */
  padding:34px 4px 40px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.suite-features::-webkit-scrollbar { display:none; }
/* R1883 — flèches de navigation cliquables */
.suite-arrow { position:absolute; top:calc(50% - 11px); transform:translateY(-50%); z-index:4; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#e8eef6;
  background:rgba(12,16,24,0.82); border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,0.4); transition:opacity .25s ease, background .2s ease, transform .2s ease; }
.suite-arrow:hover { background:rgba(56,217,217,0.18); border-color:rgba(56,217,217,0.4); }
.suite-arrow svg { width:18px; height:18px; }
.suite-arrow-prev { left:-6px; }
.suite-arrow-next { right:-6px; }
.suite-carousel.at-start .suite-arrow-prev { opacity:0; pointer-events:none; }
.suite-carousel.at-end .suite-arrow-next { opacity:0; pointer-events:none; }
@media (max-width:640px){ .suite-arrow{display:none} }
.feature-card { flex:0 0 clamp(320px, 42vw, 460px); scroll-snap-align:center; }
.feature-card h3 { font-size:1.4rem; margin-bottom:12px; }
.feature-card p { font-size:0.98rem; }
.feature-name { font-size:0.8rem; padding:4px 13px; }
@media (max-width:980px){ .feature-card { flex-basis:clamp(280px, 82vw, 420px); } }
.feature-card {
  position:relative; overflow:hidden; padding:44px 38px; border-radius:26px; min-height:300px;
  /* Glassmorphisme fidèle interactive-kpi-card : gradient slate sombre + blur + halo coin */
  background:
    radial-gradient(ellipse at 100% 0%, rgba(56,217,217,0.10), transparent 52%),
    linear-gradient(155deg, rgba(20,28,46,0.80), rgba(11,16,28,0.84));
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(20px) saturate(1.35);
  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;
  scroll-margin-top:90px;
}
.feature-card:hover { border-color:rgba(56,217,217,0.36); box-shadow:0 28px 70px -30px rgba(56,217,217,0.34), 0 1px 0 rgba(255,255,255,0.07) inset; }
/* CopyKoli (carte 2) : accent OR au hover (cohérent avec son badge doré) */
.feature-card#copykoli:hover { border-color:rgba(212,175,96,0.38); box-shadow:0 28px 70px -30px rgba(212,175,96,0.32), 0 1px 0 rgba(255,255,255,0.07) inset; }
.feature-card#kaliprompts:hover { border-color:rgba(139,92,246,0.40); box-shadow:0 28px 70px -30px rgba(139,92,246,0.34), 0 1px 0 rgba(255,255,255,0.07) inset; }
.feature-ic { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:transform 200ms ease; }
.feature-card:hover .feature-ic { transform:scale(1.08); }
.feature-ic-cyan { background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.25); color:var(--cyan); }
.feature-ic-gold { background:var(--gold-dim); border:1px solid rgba(212,175,96,0.25); color:var(--gold-bright); }
.feature-ic-violet { background:var(--violet-dim); border:1px solid rgba(139,92,246,0.25); color:var(--violet); }
.feature-ic-rose { background:rgba(244,124,156,0.14); border:1px solid rgba(244,124,156,0.28); color:#f47c9c; }
/* Fonds colorés vibrants par outil (R1880 P15) — chaque carte « ressort » */
.fc-cyan { background:radial-gradient(ellipse at 100% 0%, rgba(56,217,217,0.2), transparent 55%), linear-gradient(155deg, rgba(56,217,217,0.1), rgba(11,16,28,0.86)); border-color:rgba(56,217,217,0.28); }
.fc-gold { background:radial-gradient(ellipse at 100% 0%, rgba(212,175,96,0.22), transparent 55%), linear-gradient(155deg, rgba(212,175,96,0.1), rgba(11,16,28,0.86)); border-color:rgba(212,175,96,0.3); }
.fc-violet { background:radial-gradient(ellipse at 100% 0%, rgba(139,92,246,0.22), transparent 55%), linear-gradient(155deg, rgba(139,92,246,0.1), rgba(11,16,28,0.86)); border-color:rgba(139,92,246,0.3); }
.fc-rose { background:radial-gradient(ellipse at 100% 0%, rgba(244,124,156,0.2), transparent 55%), linear-gradient(155deg, rgba(244,124,156,0.09), rgba(11,16,28,0.86)); border-color:rgba(244,124,156,0.3); }
.feature-name-rose { color:#f47c9c; background:rgba(244,124,156,0.12); border:1px solid rgba(244,124,156,0.25); }
.feature-card#kalichat:hover { border-color:rgba(244,124,156,0.45); box-shadow:0 28px 70px -30px rgba(244,124,156,0.34), 0 1px 0 rgba(255,255,255,0.07) inset; }
.feature-name { display:inline-block; margin-bottom:8px; font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:500; letter-spacing:0.02em; padding:3px 11px; border-radius:999px; background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(56,217,217,0.25); }
.feature-name-gold { background:var(--gold-dim); color:var(--gold-bright); border-color:rgba(212,175,96,0.25); }
.feature-name-violet { background:var(--violet-dim); color:var(--violet); border-color:rgba(139,92,246,0.25); }
.feature-card h3 { font-family:var(--font-display); font-size:1.34rem; font-weight:700; letter-spacing:-0.02em; margin:12px 0 10px; }
.feature-card p { font-size:0.95rem; color:var(--muted); line-height:1.7; }

/* ── SPOTLIGHT CARDS (P9) — halo lumineux qui suit le curseur DANS la carte
   Le JS écrit --mx/--my (px relatifs à la carte). Le pseudo ::after dessine
   un radial centré dessus, révélé au hover. Compatible cartes magnétiques. */
.spotlight { position:relative; }
.spotlight::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  opacity:0; transition:opacity 280ms ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(56,217,217,0.14), transparent 60%);
}
.spotlight:hover::after { opacity:1; }
/* le contenu doit rester au-dessus du halo */
.spotlight > * { position:relative; z-index:1; }
.spotlight.pricing-card-pro::after { background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(212,175,96,0.16), transparent 60%); }

/* ── AGENTS / IA — Matrix rain + robot maison (P8) ──────────────────────── */
.section-agents { position:relative; overflow:hidden; border-radius:28px; max-width:var(--max); margin:60px auto; padding:clamp(48px,7vw,88px) clamp(20px,4vw,56px); border:1px solid var(--glass-border); background:rgba(8,11,18,0.5); }
/* Matrix VERTE (R1875) : z-index élevé pendant la séquence (recouvre la section IA),
   l'opacité de la phase « dissolve » est pilotée en JS (fondu rapide). */
.matrix-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; opacity:0; transition:opacity 0.6s ease; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 72%, transparent); mask-image:linear-gradient(180deg, transparent, #000 14%, #000 72%, transparent); }
.matrix-canvas.on { opacity:0.5; }
.agents-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
.agents-list { display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.agents-list li { display:flex; align-items:flex-start; gap:10px; font-size:0.92rem; color:var(--muted); line-height:1.55; }
.agents-list li::before { content:'›'; color:var(--cyan); font-weight:700; font-size:1.1rem; line-height:1.2; flex-shrink:0; }
.agents-list strong { color:var(--text); font-weight:600; }

/* Robot — Spline 3D (lazy) avec fallback maison 2.5D — halo cyan, drag (R1875) */
/* Stage : caché tant que le Matrix n'a pas commencé sa dissolution → fade-in ENSUITE */
.agents-robot-stage { position:relative; min-height:340px; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px); transition:opacity 0.9s ease, transform 0.9s ease; }
.agents-robot-stage.revealed { opacity:1; transform:none; }

/* Spline viewer 3D — halo cyan, draggable comme dans l'app */
.spline-robot-wrap {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; will-change:transform; transform:translate3d(0,0,0);
  opacity:0; transition:opacity 0.7s ease;
}
.spline-robot-wrap.ready { opacity:1; }
.spline-robot-wrap.dragging { cursor:grabbing; }
.spline-robot-wrap::before { /* halo cyan décoratif (cf SplineRobot.tsx app) */
  content:''; position:absolute; inset:-8% -6%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(6,182,212,0.15) 0%, transparent 70%);
  filter:blur(24px);
}
.spline-robot { width:100%; height:100%; min-height:340px;
  -webkit-mask-image:radial-gradient(ellipse 80% 82% at 50% 56%, #000 34%, rgba(0,0,0,0.6) 56%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 82% at 50% 56%, #000 34%, rgba(0,0,0,0.6) 56%, transparent 100%); }
.spline-robot::part(logo) { display:none; } /* masque le badge « Built with Spline » */
/* Quand Spline est actif et chargé → on masque le robot 2.5D de secours */
.agents-robot-stage.spline-active .robot { opacity:0; pointer-events:none; transition:opacity 0.5s ease; }
.robot {
  position:relative; width:210px; height:300px; cursor:grab; touch-action:none;
  will-change:transform; transform:translate3d(0,0,0);
  filter:drop-shadow(0 24px 50px rgba(0,0,0,0.5));
}
.robot.dragging { cursor:grabbing; }
.robot-halo { position:absolute; inset:-30% -20% -10%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(56,217,217,0.25), transparent 62%); filter:blur(8px);
  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:150px; height:124px; 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:20px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  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:24px; }
.robot-eye { position:relative; width:30px; height:30px; 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:13px; height:13px; 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:34px; height:5px; border-radius:3px; background:linear-gradient(90deg, transparent, var(--gold-bright), transparent); opacity:0.85; }
.robot-ear { position:absolute; top:46px; 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:120px; 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; align-items:center; justify-content:center; }
/* R2521 — Réacteur arc (Iron Man) au PLEXUS du robot fallback : orbe Vokali +
   2 anneaux FINS qui tournent (gardent la forme d'anneau, n'« s'agitent » pas). */
.robot-reactor { position:absolute; top:30px; left:50%; transform:translateX(-50%); width:46px; height:46px; display:grid; place-items:center; }
.robot-core { width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 50% 38%, #fff 4%, var(--cyan) 42%, #0d5a5f 100%); box-shadow:0 0 18px rgba(56,217,217,0.65), 0 0 34px rgba(56,217,217,0.35), inset 0 0 8px rgba(255,255,255,0.5); animation:robot-breathe 4s ease-in-out infinite; }
.robot-ring { position:absolute; border-radius:50%; pointer-events:none; }
/* anneau externe fin doré, rotation lente */
.robot-ring-1 { inset:-2px; background:conic-gradient(from 0deg, transparent, rgba(212,175,96,0.85), 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; }
/* anneau interne fin cyan, sens inverse */
.robot-ring-2 { inset:4px; background:conic-gradient(from 180deg, transparent, rgba(31,213,249,0.9), 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; }
/* « TOUCH ME » gravé au plexus — police de marque, incite au survol/drag */
.robot-torso-mark { position:absolute; bottom:13px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(56,217,217,0.6); text-shadow:0 0 10px rgba(56,217,217,0.45); pointer-events:none; user-select:none; }
.robot.dragging .robot-torso-mark, .robot:hover .robot-torso-mark { color:rgba(56,217,217,0.9); }
/* Bouton replay discret, en haut à droite de la fenêtre robot (R1880 P13) */
/* R1883 — bouton replay TOUJOURS visible (Loris : « introuvable »). Plus grand, plus
   contrasté, libellé « Rejouer » au survol, halo doux. Haut-droite de la section agents. */
/* R1885 — bouton « shiny » porté de l'app kali-kana (components/ui/animated-shiny-button.tsx)
   en vanilla CSS : bordure conic-gradient lumineuse rotative + points internes + shimmer.
   Variante BLEUE (lumière bleue qui tourne). Sert de replay Matrix « Décoder la matrice ». */
@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 {
  /* variante bleue : lumière indigo/cyan qui tourne sur la bordure */
  --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;
  /* R2521 — FIX Loris : le liseré ne tournait pas (l'élément n'animait pas
     --gradient-angle, seul le top semblait coloré). On anime l'angle sur l'élément
     lui-même → le contour conic-gradient fait TOUT LE TOUR et bouge en continu. */
  animation:shiny-gradient-angle var(--shiny-duration) linear infinite;
}
.shiny-cta:active { translate:0 1px; }
/* points internes (maille blanche balayée par l'arc rotatif) */
.shiny-cta::before {
  content:''; pointer-events:none; position:absolute; z-index:-1;
  --size:calc(100% - var(--shiny-shadow) * 3); --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:0.6rem; 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.4rem; }
.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);
  box-shadow:inset 0 -1ex 2rem 4px var(--shiny-highlight); opacity:0; transition:opacity var(--shiny-transition);
}
.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; } }
@keyframes shiny-breathe { from,to { scale:1; } 50% { scale:1.2; } }
@media (prefers-reduced-motion: reduce){ .shiny-cta,.shiny-cta::before,.shiny-cta::after{animation:none} }

/* R2531 — variante OR du bouton shiny (lumière dorée/cyan qui tourne + points
   internes), pour « Découvrir la suite » dans le hero : même mécanique animée que
   « Décodez la matrice » / « Créer un produit », teinte charte Kali Kana. */
.shiny-cta-gold {
  --shiny-bg:#0d0a04; --shiny-bg-subtle:#1c1608; --shiny-fg:#fbf0d2;
  --shiny-highlight:#e6c478; --shiny-highlight-subtle:#bf953f;
}
/* aligne la hauteur du shiny CTA hero sur le bouton primaire voisin */
.hero-cta2 { display:inline-flex; align-items:center; height:46px; padding:0 1.4rem; font-size:0.9rem; border-radius:999px; }
.hero-cta2 .shiny-cta-content { justify-content:center; }

/* positionnement replay (haut-droite de la section agents, toujours visible) */
.matrix-replay { position:absolute; top:20px; right:20px; z-index:8; }
@media (max-width:560px){ .matrix-replay{ top:14px; right:14px; padding:0.5rem 0.85rem; font-size:0.74rem; } }

/* R1885 — overlay « tee-shirt » par-dessus le canvas Spline (zone torse) : logo Vokali
   (orbe app) au plexus solaire façon réacteur Iron Man + « Touch me » dessous (KaliKana).
   Visible UNIQUEMENT quand le Spline 3D est chargé. pointer-events:none. */
/* R2531 — overlay réacteur recentré sur le PLEXUS du robot Spline (qui n'est pas
   centré dans son stage) : x≈62%, y≈46%. TOUCH ME juste dessous, lisible. */
/* R2582 — point lumineux RECENTRÉ sur la POITRINE du robot (référence AllInMyApp left:53.5% top:52%).
   Avant left:62% top:46% → décalé haut/droite, hors du torse. */
/* R2590 — recentré au MILIEU du torse (avant : décalé à droite/bas) */
.spline-torso-tee { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:16px; user-select:none; opacity:0; transition:opacity 0.6s ease 0.3s; }
/* Réacteur Iron Man : orbe Vokali + halo pulsé + anneau lumineux rotatif.
   R2531 — la ZONE de l'orbe est cliquable/touchable (le reste de l'overlay non),
   pour que « toucher l'orbe » l'ACTIVE. Taille de base = calibre bouton (46px). */
.tee-reactor { position:relative; width:46px; height:46px; display:grid; place-items:center; pointer-events:auto; cursor:pointer; transition:transform .3s ease; }
.tee-reactor::before { content:''; position:absolute; inset:-9px; border-radius:50%; background:radial-gradient(circle, rgba(56,217,217,0.45) 0%, rgba(212,175,96,0.12) 45%, transparent 72%); filter:blur(2px); animation:tee-reactor-pulse 2.6s ease-in-out infinite; }
.tee-reactor::after { content:''; position:absolute; inset:-3px; border-radius:50%; background:conic-gradient(from 0deg, transparent, rgba(31,213,249,0.85), transparent 55%); -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%); mask:radial-gradient(circle, transparent 58%, #000 60%); animation:tee-reactor-spin 3.4s linear infinite; }
.tee-reactor-orb { position:relative; width:46px; height:46px; filter:drop-shadow(0 0 9px rgba(56,217,217,0.7)); }
/* R2521 — anneau FIN supplémentaire (sens inverse) : effet arc-reactor + orbe Vokali */
.tee-ring-2 { position:absolute; inset:5px; border-radius:50%; pointer-events:none; background:conic-gradient(from 180deg, transparent, rgba(212,175,96,0.85), transparent 45%); -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%); mask:radial-gradient(circle, transparent 60%, #000 62%); animation:tee-reactor-spin 4.6s linear infinite reverse; }
/* R2582 — TOUCH ME refondu : pilule glass premium AVEC une mini-orbe intégrée à gauche
   + libellé. Remplace le simple texte cyan « moche ». Concept bouton tangible, hover lumineux. */
.tee-label { display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 11px; border-radius:999px;
  font-family:var(--font-display); font-size:0.72rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:#eafcff; background:linear-gradient(180deg, rgba(13,18,32,0.78), rgba(8,11,18,0.66));
  border:1px solid rgba(56,217,217,0.4); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(212,175,96,0.18) inset, 0 10px 34px -16px rgba(56,217,217,0.55), 0 0 22px -4px rgba(56,217,217,0.3);
  text-shadow:0 1px 4px rgba(0,0,0,0.7); pointer-events:none; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
/* mini-orbe intégrée DANS le bouton (« on voulait intégrer l'orbe ici » — Loris) */
.tee-label::before { content:''; width:14px; height:14px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 38% 34%, #fff 6%, var(--cyan) 48%, #0c9ac7 100%);
  box-shadow:0 0 10px rgba(56,217,217,0.95), 0 0 18px rgba(56,217,217,0.5);
  animation:tee-btn-orb 2.2s ease-in-out infinite; }
@keyframes tee-btn-orb { 0%,100%{ transform:scale(0.86); box-shadow:0 0 8px rgba(56,217,217,0.8); } 50%{ transform:scale(1.12); box-shadow:0 0 16px rgba(56,217,217,1),0 0 28px rgba(56,217,217,0.55); } }
.agents-robot-stage.spline-active .tee-reactor:hover ~ .tee-label,
.spline-torso-tee:hover .tee-label { border-color:rgba(56,217,217,0.75); box-shadow:0 0 0 1px rgba(212,175,96,0.3) inset, 0 14px 40px -14px rgba(56,217,217,0.7), 0 0 30px -2px rgba(56,217,217,0.45); transform:translateY(-1px); }
.agents-robot-stage.spline-active .spline-torso-tee { opacity:1; }
.agents-robot-stage.spline-active .tee-label { animation:torso-pulse 2.6s ease-in-out infinite; }
.agents-robot-stage.robot-dragged .spline-torso-tee { opacity:0 !important; }
@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); } }

/* R2531 — ACTIVATION au toucher de l'orbe : le réacteur s'EMBALLE (ondulation
   bien visible, contour bleu intense) tout en restant CENTRÉ et de calibre maîtrisé
   (≈ +12% seulement → pas « trop grosse »). Anneaux plus rapides + halo bleu ample. */
.tee-reactor.reactor-active { transform:scale(1.12); }
.tee-reactor.reactor-active::before { animation:tee-reactor-pulse 1.1s ease-in-out infinite; background:radial-gradient(circle, rgba(31,213,249,0.6) 0%, rgba(31,213,249,0.18) 50%, transparent 72%); inset:-16px; }
.tee-reactor.reactor-active::after { animation:tee-reactor-spin 1.4s linear infinite; background:conic-gradient(from 0deg, transparent, rgba(31,213,249,1), rgba(140,235,255,0.9), transparent 55%); }
.tee-reactor.reactor-active .tee-reactor-orb { filter:drop-shadow(0 0 16px rgba(31,213,249,0.95)) drop-shadow(0 0 30px rgba(31,213,249,0.55)); animation:reactor-undulate 1.3s ease-in-out infinite; }
.tee-reactor.reactor-active .tee-ring-2 { animation:tee-reactor-spin 1.8s linear infinite reverse; }
@keyframes reactor-undulate { 0%,100%{ transform:scale(0.94); } 50%{ transform:scale(1.08); } }

/* R2531 — le robot « bouge » AVANT qu'on le touche : flottement doux du stage
   (lévitation lente), pour qu'il ne paraisse jamais figé. Stoppé pendant un drag. */
@keyframes robot-idle-float { 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-9px) rotate(-0.4deg); } }
.agents-robot-stage.spline-active .spline-robot-wrap,
.agents-robot-stage.revealed .robot { animation:robot-idle-float 5.5s ease-in-out infinite; }
.agents-robot-stage.robot-dragged .spline-robot-wrap,
.agents-robot-stage .robot.dragging { animation:none; }
@media (prefers-reduced-motion: reduce){ .tee-label,.tee-reactor::before,.tee-reactor::after,.tee-ring-2,.robot-ring{animation:none} }
.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; }

/* ── CLAVIER « partout où vous tapez » (P10) ────────────────────────────── */
.section-keyboard { text-align:center; }
.kbd-stage { display:flex; flex-direction:column; align-items:center; gap:26px; }
.kbd-apps { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.kbd-app {
  width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:var(--text);
  background:rgba(13,18,32,0.7); border:1px solid var(--glass-border); backdrop-filter:blur(8px);
  box-shadow:0 8px 22px rgba(0,0,0,0.3);
  animation:kbd-app-float 4s ease-in-out infinite; animation-delay:calc(var(--d) * 0.4s);
}
.kbd-app svg { width:25px; height:25px; }
@keyframes kbd-app-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.kbd-keyboard {
  display:flex; flex-direction:column; gap:8px; align-items:center; padding:22px; border-radius:22px;
  background:linear-gradient(160deg, rgba(18,25,38,0.85), rgba(10,14,24,0.9)); border:1px solid var(--gold-line);
  box-shadow:0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04); max-width:min(96vw,560px);
}
.kbd-row { display:flex; gap:8px; }
.kkey {
  display:flex; align-items:center; justify-content:center; min-width:40px; height:42px; padding:0 8px;
  border-radius:11px; font-family:'JetBrains Mono',monospace; font-size:0.92rem; font-weight:500; color:rgba(230,238,252,0.78);
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 2px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.kkey-mod { color:var(--gold-bright); }
.kkey-mic { color:var(--cyan); background:var(--cyan-dim); border-color:rgba(56,217,217,0.45); box-shadow:0 0 0 1px rgba(56,217,217,0.25), 0 0 18px rgba(56,217,217,0.3); animation:kkey-mic-pulse 2.4s ease-in-out infinite; }
.kkey-mic svg { width:18px; height:18px; }
@keyframes kkey-mic-pulse { 0%,100% { box-shadow:0 0 0 1px rgba(56,217,217,0.25), 0 0 14px rgba(56,217,217,0.25); } 50% { box-shadow:0 0 0 1px rgba(56,217,217,0.5), 0 0 26px rgba(56,217,217,0.5); } }
.kbd-row-space { margin-top:2px; }
.kkey-space { position:relative; width:min(80vw,380px); height:46px; justify-content:flex-start; padding:0 16px; overflow:hidden; }
.kkey-caret { width:2px; height:20px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:caret-blink 1.05s steps(1) infinite; flex-shrink:0; }
@keyframes caret-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.kkey-typed { margin-left:5px; font-family:var(--font-body); font-size:0.92rem; color:rgba(230,238,252,0.92); white-space:nowrap; }

/* ════════════════════════════════════════════════════════════════════════
   DÉMO INTERACTIVE (R1880 · Phase 1) — l'app entière jouée dans la landing
   ════════════════════════════════════════════════════════════════════════ */
.section-demo-live { text-align:center; overflow:hidden; }
.demo-tabs { display:inline-flex; gap:4px; margin:0 auto 30px; padding:5px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); }
.demo-tab { border:none; cursor:pointer; padding:9px 20px; border-radius:999px; background:transparent; font-family:var(--font-body); font-size:0.86rem; font-weight:600; color:var(--muted); transition:color 180ms ease, background 180ms ease; }
.demo-tab:hover { color:var(--text); }
.demo-tab.active { color:#03161a; background:linear-gradient(135deg,var(--cyan),#1aa3b8); box-shadow:0 6px 16px rgba(56,217,217,0.25); }

.demo-live { position:relative; width:min(96vw,940px); margin:0 auto; aspect-ratio:16/11; max-height:660px;
  border-radius:24px; isolation:isolate; }

/* ════════════════════════════════════════════════════════════════════════
   R2532 — MacBook 3D (CSS perspective) dans la section démo.
   Toutes les règles sont SCOPÉES sous .mb-stage pour ne PAS collisionner
   avec le MacBook STATIQUE de la section mémoire (.mem-macbook : .mb-screen
   /.mb-base/.mb-notch globaux, lignes ~1821+). Réutilise .vk-modal/.mbp-key
   /.aima-cockpit existants — pas de duplication.
   ════════════════════════════════════════════════════════════════════════ */
@property --kk-beam{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* quand la démo est en 3D, .demo-live ne porte plus le ratio/sizing :
   c'est .mb-screen qui définit la dalle. .demo-live redevient un wrapper neutre. */
.demo-live:has(.mb-stage){ width:auto; aspect-ratio:auto; max-height:none; border-radius:0; }

/* R2570 — scène réduite pour que tout (écran + clavier) tienne sur un seul viewport, sans scroll. */
.mb-stage{ perspective:1900px; perspective-origin:50% 50%; width:min(74vw,720px); margin:0 auto; }
.mb-3d{ position:relative; transform-style:preserve-3d; width:100%;
  transform:rotateX(8deg) rotateZ(0deg) translateY(18px);
  transition:transform 220ms ease-out; will-change:transform; }

/* — ÉCRAN (capot) — */
.mb-stage .mb-screen{ position:relative; transform-style:preserve-3d; width:100%; margin:0 auto;
  height:auto; max-width:none; aspect-ratio:16/10;
  transform-origin:50% 100%; transform:rotateX(-10deg) translateZ(0.1px);
  border-radius:20px 20px 6px 6px; padding:12px 12px 16px; border:none;
  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.6); }
.mb-stage .mb-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)); }
.mb-stage .mb-notch{ position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:118px; height:7px; max-width:none; border-radius:0 0 8px 8px; background:#0c0d10; z-index:6; }
.mb-stage .mb-cam{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #1d3a3a, #050606); box-shadow:0 0 3px rgba(56,217,217,0.5); z-index:7; }
/* la dalle = surface noire qui contient la démo */
.mb-stage .mb-glass{ position:absolute; inset:12px 12px 16px; border-radius:12px 12px 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; }
.mb-stage .mb-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; }

/* R2537 — Barre de menus macOS sur la dalle (haut DROIT) : orbe Vokali + éléments
   natifs. Style discret, icônes fines blanches sur le voile sombre du haut d'écran. */
.mb-menubar{ position:absolute; top:0; left:0; right:0; height:22px; z-index:8;
  display:flex; align-items:center; justify-content:flex-end; gap:11px; padding:0 12px;
  background:linear-gradient(180deg, rgba(10,12,18,0.62), rgba(10,12,18,0.32) 70%, transparent);
  backdrop-filter:saturate(120%) blur(3px); -webkit-backdrop-filter:saturate(120%) blur(3px);
  color:rgba(255,255,255,0.92); pointer-events:none; user-select:none; }
.mb-menubar .mbm-item{ display:inline-flex; align-items:center; }
.mb-menubar svg{ width:14px; height:14px; display:block; }
.mb-menubar .mbm-orb svg{ width:13px; height:13px; filter:drop-shadow(0 0 3px rgba(16,185,129,0.55)); }
.mb-menubar .mbm-clock{ font-size:11.5px; font-weight:500; letter-spacing:0.1px; line-height:1;
  color:rgba(255,255,255,0.9); white-space:nowrap; }
/* Batterie en charge : coque + niveau + éclair */
.mb-menubar .mbm-batt{ position:relative; gap:2px; }
.mb-menubar .mbm-batt-shell{ position:relative; width:21px; height:11px; border-radius:3px;
  border:1.3px solid rgba(255,255,255,0.85); padding:1.4px; box-sizing:border-box; }
.mb-menubar .mbm-batt-shell::after{ content:''; position:absolute; right:-3px; top:50%; transform:translateY(-50%);
  width:1.6px; height:4px; border-radius:0 1px 1px 0; background:rgba(255,255,255,0.85); }
.mb-menubar .mbm-batt-fill{ display:block; width:78%; height:100%; border-radius:1.5px;
  background:linear-gradient(180deg,#34d399,#10B981); }
.mb-menubar .mbm-batt-bolt{ width:9px !important; height:9px !important; margin-left:-13px;
  position:relative; z-index:1; color:#04140d; }
@media (max-width:560px){ .mb-menubar{ height:19px; gap:8px; padding:0 9px; }
  .mb-menubar svg{ width:12px; height:12px; } .mb-menubar .mbm-clock{ font-size:10px; }
  .mb-menubar .mbm-batt-shell{ width:18px; height:10px; } }

/* — BASE (clavier + trackpad), inclinée à plat — */
.mb-stage .mb-base{ position:relative; transform-style:preserve-3d; width:104%; margin:-2px auto 0; left:-2%;
  height:auto; max-width:none; aspect-ratio:16/7; transform-origin:50% 0%; transform:rotateX(80deg);
  border-radius:8px 8px 14px 14px; border:none;
  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.55); padding:14px 4% 0; }
.mb-stage .mb-base::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:14%; height:8px; border-radius:0 0 10px 10px; background:#16181c; }
.mb-stage .mb-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); }
.mb-stage .mb-trackpad{ position:absolute; bottom:8%; 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); }

/* clavier sur la base : neutralise l'ancien absolute/bottom de .mbp-keyboard */
.mb-stage .mb-base .mbp-keyboard{ position:relative; left:auto; bottom:auto; transform:none;
  width:88%; margin:0 auto; z-index:auto; }
.demo-live.flow-active .mb-base .mbp-keyboard{ transform:none; }

/* le flux démo (cockpit AllInMyApp + modales) remplit la dalle */
.mb-stage .mb-glass .aima-cockpit{ border-radius:0; border:none; box-shadow:none; }

/* parallax désactivé si reduced-motion */
@media (prefers-reduced-motion:reduce){ .mb-3d{ transition:none; } }

/* FALLBACK : pas de preserve-3d → on aplatit (retour fenêtre à plat, modales intactes) */
@supports not (transform-style: preserve-3d){
  .mb-stage{ perspective:none; }
  .mb-3d{ transform:none; }
  .mb-stage .mb-screen{ transform:none; aspect-ratio:16/11; border-radius:24px; padding:0;
    background:none; box-shadow:none; }
  .mb-stage .mb-screen::before{ display:none; }
  .mb-stage .mb-notch, .mb-stage .mb-cam{ display:none; }
  .mb-stage .mb-glass{ position:absolute; inset:0; border-radius:24px; background:transparent; box-shadow:none; }
  .mb-stage .mb-glass::after{ display:none; }
  .mb-stage .mb-glass .aima-cockpit{ border-radius:18px; border:1px solid rgba(212,175,96,0.16); }
  .mb-stage .mb-base{ transform:none; aspect-ratio:auto; width:min(94%,900px); margin:14px auto 0; left:auto;
    background:none; box-shadow:none; padding:0; }
  .mb-stage .mb-base::before, .mb-stage .mb-base::after, .mb-stage .mb-trackpad{ display:none; }
}

/* — Fenêtre VS Code stylée (arrière-plan) — */
/* ── R2570 — Cockpit All In My App (vraie interface jouée dans le MacBook) ──
   Charte app : --bg #06080e, --gold #d4af60, --cyan #38d9d9, texte #f3f1e6.
   Sidebar + chat Jarvis central + panneau contextuel droit. */
.aima-cockpit { position:absolute; inset:0; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(212,175,96,0.08), transparent 46%),
    radial-gradient(ellipse at 100% 100%, rgba(56,217,217,0.06), transparent 50%),
    linear-gradient(165deg,#0a0e16 0%,#06080e 100%);
  border:1px solid rgba(212,175,96,0.16);
  box-shadow:0 40px 110px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex; flex-direction:column; transition:filter 420ms ease, transform 420ms ease; }
.demo-live.flow-active .aima-cockpit { filter:brightness(0.62) saturate(0.92); transform:scale(0.99); }
.ck-titlebar { display:flex; align-items:center; gap:11px; padding:8px 13px; background:rgba(7,10,18,0.85);
  border-bottom:1px solid rgba(212,175,96,0.12); }
.vsc-traffic { display:flex; gap:7px; }
.vsc-traffic i { width:11px; height:11px; border-radius:50%; display:block; }
.tl-red { background:#ff5f57; } .tl-amber { background:#febc2e; } .tl-green { background:#28c840; }
.ck-wintitle { display:flex; align-items:center; gap:8px; font-size:0.74rem; font-weight:600; letter-spacing:0.01em;
  color:rgba(243,241,230,0.62); font-family:var(--font-body); margin:0 auto; }
.ck-winlogo { width:15px; height:15px; object-fit:contain; }
.ck-winsearch { margin-left:auto; color:rgba(243,241,230,0.4); }
.ck-winsearch svg { width:15px; height:15px; display:block; }

.ck-body { flex:1; display:grid; grid-template-columns:clamp(96px,17%,168px) 1fr clamp(108px,21%,196px); min-height:0; text-align:left; }

/* Sidebar */
.ck-side { display:flex; flex-direction:column; gap:3px; padding:13px 9px; min-width:0;
  background:linear-gradient(180deg, rgba(10,14,22,0.7), rgba(6,8,14,0.55)); border-right:1px solid rgba(212,175,96,0.1); }
.ck-brand { display:flex; align-items:center; gap:7px; padding:2px 5px 11px; }
.ck-brand-logo { width:22px; height:22px; object-fit:contain; flex:none; filter:drop-shadow(0 2px 6px rgba(212,175,96,0.35)); }
.ck-brand-name { font-family:var(--font-display); font-size:0.72rem; font-weight:700; line-height:1.05;
  background:linear-gradient(95deg,#fcf6ba,#e8c56a,#bf953f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ck-nav { display:flex; flex-direction:column; gap:2px; }
.ck-nav-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:9px;
  font-size:0.68rem; font-weight:500; color:rgba(243,241,230,0.6); white-space:nowrap; overflow:hidden; }
.ck-nav-item svg { width:14px; height:14px; flex:none; opacity:0.85; }
.ck-nav-active { color:var(--gold-bright); background:rgba(212,175,96,0.1); border:1px solid rgba(212,175,96,0.2); }
.ck-side-foot { margin-top:auto; display:flex; align-items:center; gap:8px; padding:8px 6px 2px; border-top:1px solid rgba(255,255,255,0.05); }
.ck-avatar { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:0.7rem; font-weight:700; color:#1a1408;
  background:linear-gradient(135deg,#fcf6ba,var(--gold)); }
.ck-side-user { font-size:0.7rem; font-weight:600; color:rgba(243,241,230,0.78); }

/* Centre : chat Jarvis */
.ck-chat { display:flex; flex-direction:column; min-width:0; padding:11px 13px 12px; }
.ck-chat-head { display:flex; align-items:center; gap:9px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.05); }
.ck-orb-mini { width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:radial-gradient(circle at 38% 30%, rgba(56,217,217,0.45), rgba(212,175,96,0.18) 70%, transparent);
  box-shadow:0 0 12px rgba(56,217,217,0.4); }
.ck-orb-mini span { width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#eafcff,var(--cyan)); }
.ck-chat-id { display:flex; flex-direction:column; line-height:1.15; }
.ck-chat-id b { font-size:0.78rem; color:var(--text); }
.ck-online { font-size:0.62rem; font-style:normal; color:#34e0a8; }
.ck-stream { flex:1; display:flex; flex-direction:column; gap:7px; overflow:hidden; padding:11px 2px; min-height:0; }
.ck-msg { max-width:90%; padding:8px 12px; border-radius:14px; font-size:0.78rem; line-height:1.5;
  font-family:var(--font-body); animation:aima-fade-up 0.4s ease both; }
.ck-msg-bot { align-self:flex-start; border-top-left-radius:5px; background:rgba(255,255,255,0.045); color:rgba(243,241,230,0.8); }
.ck-msg-user { align-self:flex-end; border-top-right-radius:5px; background:rgba(212,175,96,0.16); color:var(--text);
  border:1px solid rgba(212,175,96,0.18); }
.ck-msg-seed { opacity:0.78; }
@keyframes aima-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.ck-typing { align-self:flex-start; display:inline-flex; gap:4px; padding:9px 13px; border-radius:14px; border-top-left-radius:5px; background:rgba(255,255,255,0.045); }
.ck-typing i { width:5px; height:5px; border-radius:50%; background:var(--gold); animation:ck-bounce 1s infinite; }
.ck-typing i:nth-child(2){ animation-delay:.13s; } .ck-typing i:nth-child(3){ animation-delay:.26s; }
@keyframes ck-bounce { 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-4px); opacity:1; } }
.ck-composer { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:13px;
  background:rgba(6,10,16,0.6); border:1px solid rgba(212,175,96,0.16); }
.ck-input { flex:1; min-height:1.2em; font-family:var(--font-body); font-size:0.8rem; line-height:1.45;
  color:var(--text); white-space:pre-wrap; word-break:break-word; }
.ck-input-ph { color:rgba(243,241,230,0.34); }
.demo-live.injecting .ck-input-ph, .ck-input.has-text .ck-input-ph { display:none; }
.ck-caret { display:inline-block; width:2px; height:1em; vertical-align:-0.12em; margin-left:1px; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); opacity:0; animation:caret-blink 1.05s steps(1) infinite; }
.demo-live.injecting .ck-caret { opacity:1; }
#ck-injected { color:var(--text); }
.ck-send { width:30px; height:30px; flex:none; border-radius:9px; border:none; cursor:default; display:grid; place-items:center;
  color:#1a1408; background:linear-gradient(135deg,#fcf6ba,var(--gold)); box-shadow:0 4px 12px rgba(212,175,96,0.3); transition:transform 160ms ease, box-shadow 160ms ease; }
.ck-send svg { width:15px; height:15px; }
.ck-send.flash { transform:translateY(-1px) scale(1.06); box-shadow:0 6px 18px rgba(212,175,96,0.5); }

/* Panneau contextuel droit */
.ck-context { display:flex; flex-direction:column; gap:8px; padding:13px 11px; min-width:0;
  background:linear-gradient(180deg, rgba(8,11,18,0.55), rgba(6,8,14,0.35)); border-left:1px solid rgba(255,255,255,0.05); }
.ck-card { display:flex; flex-direction:column; gap:5px; padding:10px 11px; border-radius:12px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
.ck-card-ca { background:radial-gradient(ellipse at 100% 0%, rgba(212,175,96,0.14), transparent 60%), rgba(255,255,255,0.03);
  border-color:rgba(212,175,96,0.2); }
.ck-card-lbl { font-size:0.58rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:rgba(243,241,230,0.42); }
.ck-card-val { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--gold-bright); }
.ck-spark { width:100%; height:24px; color:var(--cyan); opacity:0.85; }
.ck-row { display:flex; align-items:center; gap:7px; font-size:0.66rem; color:rgba(243,241,230,0.66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-dot { width:6px; height:6px; border-radius:50%; flex:none; }
.ck-dot-g { background:#34e0a8; } .ck-dot-c { background:var(--cyan); } .ck-dot-v { background:#8b5cf6; }
.ck-chip2 { display:inline-block; margin:1px 3px 0 0; padding:3px 8px; border-radius:999px; font-size:0.6rem; color:rgba(243,241,230,0.66);
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); }

/* — Modales Vokali (fidèles app) — */
.vk-modal { position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(0.92); width:min(82%,420px);
  max-height:92%; overflow:hidden;
  border-radius:20px; padding:15px 16px; opacity:0; pointer-events:none; z-index:5;
  background:linear-gradient(160deg, rgba(20,26,40,0.97), rgba(11,15,26,0.98));
  border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 50px 130px rgba(0,0,0,0.7), 0 0 0 1px rgba(56,217,217,0.06), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:opacity 420ms cubic-bezier(0.22,1,0.36,1), transform 420ms cubic-bezier(0.22,1,0.36,1); text-align:left; }
.vk-modal.shown { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.vk-bar { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.vk-traffic { display:flex; gap:6px; }
.vk-traffic i { width:11px; height:11px; border-radius:50%; }
.vk-traffic i:nth-child(1){background:#ff5f57;} .vk-traffic i:nth-child(2){background:#febc2e;} .vk-traffic i:nth-child(3){background:#28c840;}
.vk-spacer { flex:1; }
.vk-listening { display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:0.66rem; font-weight:600; letter-spacing:0.06em; color:var(--cyan); padding:4px 10px; border-radius:999px; background:rgba(56,217,217,0.12); border:1px solid rgba(56,217,217,0.28); }
.vk-rec-dot { width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:vk-rec 1.2s ease-in-out infinite; }
@keyframes vk-rec { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.vk-lang { font-family:'JetBrains Mono',monospace; font-size:0.66rem; font-weight:700; color:rgba(230,238,252,0.7); padding:4px 9px; border-radius:7px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); }
.vk-chrono { font-family:'JetBrains Mono',monospace; font-size:0.82rem; font-weight:600; color:var(--text); }
.vk-reinject { width:100%; margin-bottom:10px; padding:8px; border-radius:11px; cursor:pointer; font-family:var(--font-body); font-size:0.76rem; color:var(--muted); background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.14); transition:background 180ms ease, color 180ms ease; }
.vk-reinject:hover { background:rgba(56,217,217,0.08); color:var(--cyan); }
.vk-orb-stage { display:flex; justify-content:center; padding:2px 0 10px; }
#vk-orb-canvas { width:140px; height:140px; }
.vk-transcript { min-height:54px; padding:13px 15px; border-radius:13px; background:rgba(8,11,18,0.55); border:1px solid rgba(255,255,255,0.07); font-size:0.92rem; line-height:1.55; color:rgba(230,238,252,0.92); }
.vk-tr-caret { display:inline-block; width:2px; height:1em; vertical-align:-0.12em; background:var(--cyan); margin-left:1px; animation:caret-blink 1.05s steps(1) infinite; }
/* R1883 — statut « Mise en forme en cours » (transition capture → résultat) */
.vk-formatting { display:none; align-items:center; gap:9px; margin-top:11px; font-size:0.8rem; font-weight:600; color:var(--cyan); opacity:0; transition:opacity .3s ease; }
.vk-formatting.show { display:flex; opacity:1; }
.vk-fmt-spinner { width:14px; height:14px; border-radius:50%; border:2px solid rgba(56,217,217,0.25); border-top-color:var(--cyan); animation:vk-spin 0.8s linear infinite; }
@keyframes vk-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .vk-fmt-spinner{animation:none} }
.vk-cap-foot { display:flex; align-items:center; gap:10px; margin-top:14px; }
.vk-quality { display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; font-weight:600; color:var(--cyan); }
.vk-quality svg { width:14px; height:14px; }
.vk-unlimited { font-size:0.74rem; color:var(--muted); }
.vk-stop { margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:8px 18px; border-radius:999px; border:none; cursor:pointer; font-family:var(--font-body); font-size:0.82rem; font-weight:700; color:#03161a; background:linear-gradient(135deg,var(--cyan),#1aa3b8); box-shadow:0 6px 18px rgba(56,217,217,0.3); transition:transform 160ms ease, box-shadow 160ms ease; }
.vk-stop:hover { transform:translateY(-1px); box-shadow:0 9px 24px rgba(56,217,217,0.45); }
.vk-stop-sq { width:9px; height:9px; border-radius:2px; background:#03161a; }

/* — Modale résultat — */
.vk-corrected { display:inline-flex; align-items:center; gap:7px; font-size:0.76rem; font-weight:700; color:var(--gold-bright); padding:4px 11px; border-radius:999px; background:var(--gold-dim); border:1px solid var(--gold-line); }
.vk-corrected svg { width:14px; height:14px; }
.vk-copy { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:9px; cursor:pointer; font-family:var(--font-body); font-size:0.78rem; font-weight:600; color:var(--text); background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); transition:background 180ms ease; }
.vk-copy:hover { background:rgba(56,217,217,0.12); }
.vk-copy svg { width:14px; height:14px; }
.vk-chips { display:flex; gap:7px; margin-bottom:12px; }
.vk-chip { padding:6px 14px; border-radius:999px; cursor:pointer; font-family:var(--font-body); font-size:0.76rem; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); transition:all 180ms ease; }
.vk-chip:hover { color:var(--text); border-color:var(--cyan-soft); }
.vk-chip.active { color:#03161a; background:linear-gradient(135deg,var(--cyan),#1aa3b8); border-color:transparent; }
.vk-res-text { min-height:96px; padding:14px 16px; border-radius:13px; background:rgba(8,11,18,0.55); border:1px solid rgba(255,255,255,0.07); font-size:0.9rem; line-height:1.65; color:rgba(230,238,252,0.94); }
.vk-res-text ul { margin:4px 0 0 2px; }
.vk-res-text li { position:relative; padding-left:18px; margin-bottom:5px; list-style:none; }
.vk-res-text li::before { content:'•'; position:absolute; left:3px; color:var(--cyan); }
.vk-res-text strong { color:#fff; }
.vk-res-text p { margin:7px 0 0; }
/* R2520 — citation reformatée avec guillemets français « » (filet doré, légère italique) */
.vk-res-text .vk-quote {
  margin:9px 0 3px; padding:7px 13px; border-left:2px solid var(--gold-line);
  background:rgba(212,175,96,0.06); border-radius:4px;
  font-style:italic; color:rgba(238,228,200,0.92); font-size:0.88rem;
}
/* R2531 — version « prompt » : rendu type bloc-prompt prêt à coller (mono, tag) */
.vk-res-text .vk-prompt-tag { display:inline-block; font-family:var(--font-display); font-size:0.62rem; font-weight:700; letter-spacing:0.16em; color:#03161a; background:linear-gradient(135deg,var(--cyan),#1aa3b8); border-radius:6px; padding:2px 8px; margin-bottom:8px; }
.vk-res-text .vk-prompt { margin:0; white-space:pre-wrap; font-family:'JetBrains Mono','Courier New',monospace; font-size:0.78rem; line-height:1.55; color:rgba(220,235,248,0.92); background:rgba(6,10,16,0.6); border:1px solid rgba(56,217,217,0.14); border-radius:9px; padding:11px 13px; }
.vk-res-text .vk-prompt::selection { background:rgba(56,217,217,0.35); }
/* R1883 — léger pop lors de la transformation brut → liste structurée (climax) */
.vk-modal.vk-pop-format .vk-res-text { animation:vk-pop 0.5s cubic-bezier(.3,1.4,.5,1); }
@keyframes vk-pop { 0%{ transform:scale(0.97); } 50%{ transform:scale(1.015); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .vk-modal.vk-pop-format .vk-res-text{animation:none} }
/* R2520 — lecture vocale : un voile cyan balaie le texte (Vokali lit le résultat à voix haute) */
.vk-res-text.vk-reading { position:relative; }
.vk-res-text.vk-reading::after {
  content:''; position:absolute; inset:0; border-radius:13px; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(56,217,217,0.14) 45%, rgba(56,217,217,0.20) 50%, rgba(56,217,217,0.14) 55%, transparent 100%);
  background-size:240% 100%; animation:vk-read-sweep 1.8s ease-in-out;
}
@keyframes vk-read-sweep { 0%{ background-position:140% 0; } 100%{ background-position:-40% 0; } }
/* badge « Lecture… » qui apparaît le temps de la lecture vocale */
.vk-reading-badge {
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
  font-size:0.7rem; font-weight:600; color:var(--cyan);
  opacity:0; transform:translateY(-2px); transition:opacity 220ms ease, transform 220ms ease;
}
.vk-reading-badge.show { opacity:1; transform:none; }
.vk-reading-badge .vk-read-wave { display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.vk-reading-badge .vk-read-wave i { width:2px; border-radius:2px; background:var(--cyan); animation:vk-read-bar 0.7s ease-in-out infinite; }
.vk-reading-badge .vk-read-wave i:nth-child(1){height:40%;animation-delay:0s}
.vk-reading-badge .vk-read-wave i:nth-child(2){height:100%;animation-delay:.12s}
.vk-reading-badge .vk-read-wave i:nth-child(3){height:60%;animation-delay:.24s}
.vk-reading-badge .vk-read-wave i:nth-child(4){height:85%;animation-delay:.36s}
@keyframes vk-read-bar { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
@media (prefers-reduced-motion: reduce){ .vk-res-text.vk-reading::after{animation:none;opacity:0} .vk-reading-badge .vk-read-wave i{animation:none} }
.vk-res-text code { font-family:'JetBrains Mono',monospace; font-size:0.84em; color:var(--gold-bright); background:rgba(212,175,96,0.1); padding:1px 5px; border-radius:5px; }
.vk-toolbar { display:flex; align-items:center; gap:8px; margin:11px 0; padding:7px 9px; border-radius:11px; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); }
.vk-tb-grp { display:inline-flex; gap:3px; }
.vk-tb-btn { width:30px; height:28px; border-radius:7px; cursor:pointer; font-family:var(--font-body); font-size:0.82rem; font-weight:700; color:rgba(230,238,252,0.75); background:transparent; border:1px solid transparent; transition:background 160ms ease, color 160ms ease; }
.vk-tb-btn:hover, .vk-tb-btn.flash { background:rgba(56,217,217,0.15); color:var(--cyan); border-color:rgba(56,217,217,0.3); }
.vk-tb-transform { width:auto; padding:0 13px; color:var(--gold-bright); }
.vk-tb-transform:hover, .vk-tb-transform.flash { background:var(--gold-dim); color:var(--gold-bright); border-color:var(--gold-line); }
.vk-tb-spacer { flex:1; }
.vk-tb-toggle { display:inline-flex; align-items:center; gap:7px; font-size:0.72rem; font-weight:600; color:var(--cyan); }
.vk-tb-sw { width:30px; height:17px; border-radius:999px; background:var(--cyan); position:relative; }
.vk-tb-sw::after { content:''; position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%; background:#03161a; }
.vk-actions { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.vk-act-row { display:flex; gap:7px; }
.vk-act-row .vk-act { flex:1; }
.vk-act { padding:8px 13px; border-radius:10px; cursor:pointer; font-family:var(--font-body); font-size:0.78rem; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); transition:all 170ms ease; }
.vk-act:hover, .vk-act.flash { color:var(--text); background:rgba(56,217,217,0.1); border-color:var(--cyan-soft); }
.vk-act-chat { color:var(--violet); }
.vk-act-chat:hover, .vk-act-chat.flash { background:var(--violet-dim); border-color:rgba(139,92,246,0.4); color:#b79dff; }
.vk-act-inject { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:7px; color:#03161a; background:linear-gradient(135deg,var(--gold),#c79a45); border-color:transparent; font-weight:700; }
.vk-act-inject kbd { font-family:'JetBrains Mono',monospace; font-size:0.72rem; padding:1px 6px; border-radius:5px; background:rgba(0,0,0,0.22); }
.vk-act-inject:hover, .vk-act-inject.flash { box-shadow:0 6px 18px rgba(212,175,96,0.4); transform:translateY(-1px); }

/* — Clavier MacBook Pro AZERTY — */
.mbp-keyboard { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(94%,900px); z-index:8;
  display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; border-radius:14px 14px 18px 18px;
  background:linear-gradient(180deg,#3a3d44,#222428); border:1px solid rgba(0,0,0,0.5);
  box-shadow:0 -2px 0 rgba(255,255,255,0.06) inset, 0 26px 50px rgba(0,0,0,0.55); transition:transform 420ms ease; }
.demo-live.flow-active .mbp-keyboard { transform:translateX(-50%) translateY(8px) scale(0.985); }
.mbp-row { display:flex; gap:3px; justify-content:center; }
.mbp-key { flex:1 1 0; min-width:0; height:clamp(20px,3vw,31px); border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0 2px;
  font-family:var(--font-body); font-size:clamp(0.5rem,1.3vw,0.76rem); font-weight:500; color:rgba(235,240,250,0.82);
  background:linear-gradient(180deg,#54585f,#3a3d43); border:1px solid rgba(0,0,0,0.4);
  box-shadow:0 1.5px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.09);
  transition:transform 90ms ease, background 90ms ease, box-shadow 120ms ease; user-select:none; }
.mbp-key:hover { background:linear-gradient(180deg,#5e636b,#42454c); }
.mbp-key:active, .mbp-key.pressed { transform:translateY(1.5px); background:linear-gradient(180deg,#6a7079,#4a4e56); box-shadow:0 0 0 rgba(0,0,0,0.4); }
.mbp-key.lit { color:#03161a; background:linear-gradient(180deg,var(--cyan),#1aa3b8); border-color:rgba(56,217,217,0.6); box-shadow:0 0 18px rgba(56,217,217,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.mbp-key.k-wide { flex:1.7 1 0; } .mbp-key.k-tab { flex:1.4 1 0; } .mbp-key.k-caps { flex:1.6 1 0; }
.mbp-key.k-shift { flex:2 1 0; } .mbp-key.k-enter { flex:1.7 1 0; } .mbp-key.k-back { flex:1.7 1 0; }
.mbp-key.k-space { flex:6 1 0; } .mbp-key.k-mod { flex:1.1 1 0; font-size:clamp(0.46rem,1.1vw,0.66rem); }
.mbp-key.k-mod.k-cmd { color:var(--gold-bright); }
.mbp-key small { font-size:0.62em; opacity:0.7; }
.mbp-key .k-sub { display:flex; flex-direction:column; line-height:1; gap:1px; }
.mbp-key.k-mic { color:var(--cyan); }
.mbp-key.k-mic svg { width:clamp(11px,2vw,16px); height:clamp(11px,2vw,16px); }

/* ════════════════════════════════════════════════════════════════════════
   R2585 — CLAVIER 3D CLIQUABLE STANDALONE (réintégré) — clavier SEUL, détaché
   du MacBook. Perspective douce (pas couché à plat), keycaps profonds, AZERTY.
   ════════════════════════════════════════════════════════════════════════ */
.kb-solo-block { width:min(92%,820px); margin:34px auto 0; display:flex; flex-direction:column; align-items:center; gap:16px; }
/* mini-écran : reflète ce qu'on tape */
.kb-solo-screen {
  position:relative; width:min(100%,560px); min-height:52px; padding:14px 18px; border-radius:12px;
  display:flex; align-items:center; flex-wrap:wrap; gap:1px;
  font-family:var(--font-body); font-size:1rem; color:#f3f1e6; line-height:1.5; white-space:pre-wrap; word-break:break-word;
  background:linear-gradient(180deg, rgba(10,14,22,0.92), rgba(6,9,15,0.96));
  border:1px solid rgba(31,213,249,0.28);
  box-shadow:inset 0 0 26px rgba(31,213,249,0.07), 0 12px 30px rgba(0,0,0,0.4);
}
.kb-solo-ph { color:rgba(235,240,250,0.34); }
.kb-solo-block.has-text .kb-solo-ph { display:none; }
.kb-solo-caret { display:inline-block; width:2px; height:1.05em; background:var(--cyan); margin-left:1px; vertical-align:-2px; animation:kbsolo-blink 1s steps(1) infinite; }
@keyframes kbsolo-blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
/* socle 3D : perspective + léger basculement (clavier debout, vivant) */
.kb-solo-3d { perspective:1400px; perspective-origin:50% 30%; width:100%; display:flex; justify-content:center; }
.kb-solo-keyboard {
  /* override du .mbp-keyboard global (absolute/bottom) → flux normal, redressé */
  position:relative; left:auto; bottom:auto;
  transform:rotateX(17deg); transform-origin:50% 100%; transform-style:preserve-3d;
  width:min(100%,760px); padding:16px 18px 20px; gap:6px;
  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 rgba(212,175,96,0.14) inset,
             0 34px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,96,0.1);
}
.kb-solo-keyboard .mbp-row { gap:6px; }
/* keycaps plus grands + profondeur 3D (vrai relief de touche) */
.kb-solo-keyboard .mbp-key {
  height:clamp(30px,4.6vw,46px); border-radius:8px; font-size:clamp(0.62rem,1.5vw,0.9rem);
  background:linear-gradient(180deg,#5a5f67 0%,#3c4046 100%);
  box-shadow:0 3px 0 #25272c, 0 4px 6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  transition:transform 80ms ease, box-shadow 110ms ease, background 110ms ease;
}
.kb-solo-keyboard .mbp-key:hover { background:linear-gradient(180deg,#666b74,#44484f); transform:translateY(-1px); box-shadow:0 4px 0 #25272c, 0 6px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.16); }
.kb-solo-keyboard .mbp-key:active, .kb-solo-keyboard .mbp-key.pressed {
  transform:translateY(2.5px); box-shadow:0 0.5px 0 #25272c, 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  background:linear-gradient(180deg,var(--cyan),#1aa3b8); color:#03161a;
}
.kb-solo-keyboard .mbp-key.k-mod.k-cmd { color:var(--gold-bright); }
@media (prefers-reduced-motion:reduce){ .kb-solo-keyboard{ transform:none; } .kb-solo-keyboard .mbp-key{ transition:none; } }
@media (max-width:640px){ .kb-solo-keyboard{ transform:rotateX(12deg); padding:10px 10px 14px; } .kb-solo-screen{ font-size:0.9rem; } }

/* — Curseur virtuel — */
.demo-cursor { position:absolute; left:0; top:0; width:24px; height:24px; z-index:20; pointer-events:none; opacity:0;
  transition:opacity 300ms ease; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.5)); will-change:transform; }
.demo-cursor svg { width:100%; height:100%; transform-origin:18% 12%; }
.demo-cursor.visible { opacity:1; }
/* R2537 — l'animation de clic scale UNIQUEMENT le <svg> interne, jamais le span :
   sinon le `transform:scale()` du keyframe écrasait le `transform:translate(x,y)`
   posé en inline par le JS → le curseur SNAPPAIT en (0,0)/coin haut-gauche à
   CHAQUE clic (exactement le « revient sans cesse dans l'angle supérieur gauche »).
   En scalant le svg, le translate du span est préservé. */
.demo-cursor.clicking svg { animation:cursor-click 320ms ease; }
@keyframes cursor-click { 0%,100%{transform:scale(1);} 45%{transform:scale(0.8);} }

/* — Bandeau natif (logos réels) — */
.demo-native { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin:34px auto 0; }
.demo-native-lead { font-size:0.82rem; color:var(--muted); font-weight:600; }
.demo-native-apps { display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; }
.demo-native-app { display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; color:rgba(230,238,252,0.7); font-weight:500; opacity:0.85; transition:opacity 200ms ease, transform 200ms ease; }
.demo-native-app:hover { opacity:1; transform:translateY(-2px); }
.demo-native-app img, .demo-native-app svg { width:22px; height:22px; }

@media (max-width:760px) {
  .demo-live { aspect-ratio:9/13; max-height:none; }
  .vk-modal { width:94%; padding:14px; }
  .vk-res-text { font-size:0.84rem; }
  .vk-actions .vk-act { font-size:0.72rem; padding:7px 10px; }
  .mbp-key.k-mod, .mbp-key small { font-size:0.42rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vk-modal, .aima-cockpit, .mbp-keyboard, .demo-cursor { transition:none; }
  .vk-rec-dot, .vk-tr-caret, .ck-caret { animation:none; }
}

/* ── STACK SPHERE — tags désormais CLIQUABLES (boutons) ─────────────────── */
.stack-tag { padding:0; cursor:pointer; pointer-events:auto; outline:none;
  transition:box-shadow 200ms ease, border-color 200ms ease; }
.stack-tag:hover { z-index:200 !important; }
.stack-tag:hover svg { animation:stack-spin 0.9s cubic-bezier(0.22,1,0.36,1); }
@keyframes stack-spin { from { transform:rotate(0deg); } to { transform:rotate(1440deg); } }
.stack-tag:focus-visible { box-shadow:0 0 0 2px var(--cyan); }
.privacy-cap-hint { display:block; margin-top:6px; font-size:0.8rem; color:var(--cyan); font-weight:600; }

/* ── MINI-MODALE techno (P7) ─────────────────────────────────────────────── */
.tech-modal { position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center; padding:24px; }
.tech-modal.open { display:flex; }
.tech-modal-backdrop { position:absolute; inset:0; background:rgba(4,7,12,0.82); backdrop-filter:blur(8px); animation:lb-fade .25s ease; }
.tech-modal-card {
  position:relative; z-index:1; width:100%; max-width:400px; padding:34px 30px; text-align:center;
  background:linear-gradient(155deg, rgba(16,22,36,0.98), rgba(10,14,24,0.98));
  border:1px solid var(--gold-line); border-radius:22px;
  box-shadow:0 40px 110px rgba(0,0,0,0.6), 0 0 0 1px rgba(56,217,217,0.08);
  animation:lb-pop .3s cubic-bezier(0.22,1,0.36,1);
}
.tech-modal-ic { width:58px; height:58px; margin:0 auto 16px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.3); color:var(--cyan); }
.tech-modal-ic svg { width:30px; height:30px; }
.tech-modal-ic.gold { background:var(--gold-dim); border-color:rgba(212,175,96,0.3); color:var(--gold-bright); }
.tech-modal-card h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:10px; }
.tech-modal-card p { font-size:0.92rem; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.tech-modal-tier { display:inline-block; font-size:0.78rem; font-weight:600; padding:7px 14px; border-radius:999px; background:rgba(56,217,217,0.1); color:var(--cyan); border:1px solid rgba(56,217,217,0.25); line-height:1.4; }
.tech-modal-tier.gold { background:rgba(212,175,96,0.1); color:var(--gold-bright); border-color:rgba(212,175,96,0.28); }
/* Pastille « nature » de la techno (R1880 P9) */
.tech-modal-kind { display:inline-block; margin-bottom:10px; font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:4px 11px; border-radius:999px; }
.tm-kind-local { color:var(--cyan); background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.25); }
.tm-kind-cloud { color:var(--gold-bright); background:var(--gold-dim); border:1px solid rgba(212,175,96,0.25); }
.tm-kind-surface { color:var(--violet); background:var(--violet-dim); border:1px solid rgba(139,92,246,0.3); }
/* Logos de marque polychromes (VS Code, Gmail…) gardent leurs couleurs ; les
   icônes monochromes héritent de currentColor. */
.stack-tag[data-brand="vscode"] svg, .stack-tag[data-brand="gmail"] svg { filter:saturate(1.1); }
.tech-modal-ic .stack-tag svg, .tech-modal-ic svg[viewBox] { width:30px; height:30px; }
.tech-modal-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text); background:rgba(8,11,18,0.6); border:1px solid var(--glass-border); transition:background 180ms ease, transform 180ms ease; }
.tech-modal-close:hover { background:rgba(212,175,96,0.18); transform:rotate(90deg); }

/* ── COMPARE — hint prix concurrents ────────────────────────────────────── */
.cmp-pricehint { display:block; font-size:0.7rem; color:var(--muted2); font-weight:400; }

/* ── PRICING — pack unique : bascule + 2 cartes + transparence API (P11) ── */
.billing-toggle { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; margin:0 auto 34px; padding:5px; width:fit-content; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); position:relative; }
.bt-opt { border:none; cursor:pointer; padding:9px 20px; border-radius:999px; background:transparent; font-family:var(--font-body); font-size:0.88rem; font-weight:600; color:var(--muted); transition:color 180ms ease, background 180ms ease; }
.bt-opt:hover { color:var(--text); }
.bt-opt.active { color:#03161a; background:linear-gradient(135deg,var(--cyan),#1aa3b8); box-shadow:0 6px 16px rgba(56,217,217,0.25); }
.bt-save { margin-left:6px; font-size:0.72rem; font-weight:700; color:var(--gold-bright); padding:5px 11px; border-radius:999px; background:var(--gold-dim); border:1px solid var(--gold-line); white-space:nowrap; }
.pricing-grid-2 { grid-template-columns:repeat(2,1fr); gap:20px; max-width:840px; margin:0 auto; }
.pricing-grid-2 .pricing-card { padding:34px 30px; }
.api-transparency {
  display:flex; gap:18px; align-items:flex-start; max-width:840px; margin:28px auto 0; padding:24px 26px;
  border-radius:20px; background:linear-gradient(150deg, rgba(56,217,217,0.05), rgba(212,175,96,0.04));
  border:1px solid var(--glass-border);
}
.apit-ic { flex-shrink:0; width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.25); color:var(--cyan); }
.apit-body h3 { font-family:var(--font-display); font-size:1.15rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:7px; }
.apit-body p { font-size:0.9rem; color:var(--muted); line-height:1.65; }
.apit-body strong { color:var(--text); font-weight:600; }

/* RESPONSIVE */
@media (max-width:980px) {
  .nav-links{display:none}
  /* R2593 — hero mobile : flux vertical, device en flux sous le pitch (plus en absolu) */
  .hero{text-align:center}
  .hero-stage{gap:26px}
  .hero-head,.hero-pitch{align-items:center;max-width:680px;margin-left:auto;margin-right:auto}
  .hero-wordmark{justify-content:center}
  .hero-pitch .hero-points{align-items:flex-start;margin-left:auto;margin-right:auto}
  .hero-pitch .hero-actions{justify-content:center}
  .hero-showcase{order:-1;min-height:auto}
  .hero-suite{grid-template-columns:repeat(2,1fr);max-width:560px}
  .agents-inner{grid-template-columns:1fr;gap:36px}
  .agents-robot-stage{order:-1;min-height:300px}
  /* .suite-features est désormais un carrousel flex (P15) — pas de grid à override */
  .pillar-grid{grid-template-columns:1fr 1fr}
  .suite-grid{grid-template-columns:1fr 1fr}
  .suite-card-lead,.suite-card-search{grid-column:span 1}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-grid-4{grid-template-columns:1fr 1fr}
  .reading-wrap{grid-template-columns:1fr;gap:36px}
  .privacy-layout{grid-template-columns:1fr;gap:32px}
  .stack-sphere-wrap{min-height:320px;order:-1}
  .section-demo{grid-template-columns:1fr;gap:32px}
  .demo-orb-stage{max-width:340px;order:-1}
  .site-footer{grid-template-columns:1fr 1fr;gap:32px}
  .footer-col-brand{grid-column:span 2}
}
@media (max-width:600px) {
  .pillar-grid{grid-template-columns:1fr}
  .suite-grid{grid-template-columns:1fr}
  .hero-title{letter-spacing:-0.04em}
  /* R2582 — hero mobile : wordmark lisible, cartes en colonne, scène compacte */
  .hero-suite{grid-template-columns:1fr 1fr;gap:12px}
  .hsuite-card{padding:16px 14px}
  .hero-wordmark{gap:6px 12px}
  .shortcut-badge{display:none}
  .compare-table{font-size:0.82rem}
  .site-footer{grid-template-columns:1fr}
  .footer-col-brand{grid-column:span 1}
  .pricing-amount{font-size:2.4rem}
  .pricing-grid-4{grid-template-columns:1fr}
  .pricing-grid-2{grid-template-columns:1fr}
  .lang-switch{display:none}
  .hero-points{max-width:100%}
  .billing-toggle{gap:2px;padding:4px}
  .bt-opt{padding:8px 14px;font-size:0.82rem}
  .bt-save{flex-basis:100%;text-align:center;margin:4px 0 0}
  .api-transparency{flex-direction:column;gap:12px}
  .kbd-app{width:46px;height:46px}
  .kkey{min-width:30px;height:38px;font-size:0.82rem}
}
/* ─── INTRO DE MARQUE (R1876) — « All In My Mac » → flèche → « Vokali » ──────
   Plein écran, joue une fois, puis se dissout. Le JS pilote les classes d'états
   (.is-suite → .is-arrow → .is-vokali → .is-done). GPU-friendly : opacity +
   transform uniquement. */
.brand-intro {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(56,217,217,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 60%, rgba(212,175,96,0.07), transparent 62%),
    #06080e;
  overflow: hidden;
  transition: opacity 720ms cubic-bezier(0.4,0,0.2,1), visibility 720ms;
}
.brand-intro::before { /* grille subtile = continuité avec le hero */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 50%, black 8%, transparent 70%);
}
.brand-intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.bi-stage {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.2vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.03em;
  white-space: nowrap;
}
.bi-suite {
  color: rgba(220,230,248,0.62);
  opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(6px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.34,1.3,0.5,1), filter 620ms ease;
}
.bi-arrow {
  display: inline-flex; color: var(--cyan);
  opacity: 0; transform: translateX(-12px) scale(0.7);
  transition: opacity 480ms ease 120ms, transform 560ms cubic-bezier(0.34,1.56,0.5,1) 120ms;
  filter: drop-shadow(0 0 14px rgba(56,217,217,0.5));
}
.bi-vokali {
  display: inline-flex; align-items: center; gap: clamp(8px, 1.6vw, 16px);
  opacity: 0; transform: translateY(14px) scale(0.94); filter: blur(8px);
  transition: opacity 720ms ease, transform 760ms cubic-bezier(0.34,1.4,0.5,1), filter 720ms ease;
}
.bi-vokali-word {
  background: linear-gradient(105deg, #e6c478 0%, #fff 38%, #38d9d9 78%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(56,217,217,0.28));
}
.bi-orb { display: inline-block; width: clamp(48px, 8vw, 80px); height: clamp(48px, 8vw, 80px); position: relative; }
.bi-orb canvas {
  width: 100%; height: 100%; will-change: contents;
  /* R2508 — orbe LIBRE, plus de carré : fondu radial proportionnel vers transparent
     (même traitement que .cta-orb-wrap / .demo-orb-stage, réf R1846 modale capture).
     Le canvas WebGL est déjà transparent (alpha:true, clearColor 0,0,0,0) ; le mask
     supprime le champ plasma rectangulaire visible jusqu'aux bords. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 70%);
}
.bi-tagline {
  font-family: var(--font-body); font-size: clamp(0.82rem, 2.2vw, 1.02rem);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted2);
  opacity: 0; transform: translateY(8px);
  transition: opacity 700ms ease 220ms, transform 700ms ease 220ms;
}
/* États pilotés par le JS */
.brand-intro.is-suite  .bi-suite  { opacity: 1; transform: none; filter: none; }
.brand-intro.is-arrow  .bi-suite  { opacity: 1; transform: none; filter: none; }
.brand-intro.is-arrow  .bi-arrow  { opacity: 1; transform: none; }
.brand-intro.is-vokali .bi-suite  { opacity: 1; transform: none; filter: none; }
.brand-intro.is-vokali .bi-arrow  { opacity: 1; transform: none; }
.brand-intro.is-vokali .bi-vokali { opacity: 1; transform: none; filter: none; }
.brand-intro.is-vokali .bi-tagline{ opacity: 1; transform: none; }
/* Le scroll est verrouillé tant que l'intro joue */
body.intro-lock { overflow: hidden; height: 100vh; }

@media (max-width: 560px) {
  .bi-stage { flex-direction: column; gap: 12px; white-space: normal; text-align: center; }
  .bi-arrow svg { transform: rotate(90deg); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
  /* Robot statique, matrix masquée, ic d'apps figées */
  .robot-pupil{transform:none !important}
  .matrix-canvas{display:none}
  /* Éléments à révélation (sinon restent à opacity:0 quand l'anim est neutralisée) */
  .hero-wordmark{opacity:1 !important;animation:none !important}
  .agents-robot-stage{opacity:1 !important;transform:none !important}
  /* Intro neutralisée : on saute direct au site (pas de flash) */
  .brand-intro{display:none !important}
  body.intro-lock{overflow:auto !important;height:auto !important}
  /* V6 — anims des nouvelles sections neutralisées */
  .inject-arrow svg, .mem-canvas, .inject-flow .inject-step { animation:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V6 (R1876) — SECTIONS AJOUTÉES : injection ⌘↵, atelier IA, menubar, mémoire,
   agent vocal. Charte cyan/or, glassmorphisme cohérent interactive-kpi-card.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── INJECTION INSTANTANÉE (⌘+Entrée) — la fluidité ───────────────────────── */
.inject-flow {
  display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,2vw,22px); margin:0 auto 44px; max-width:760px;
}
.inject-step {
  flex:1 1 0; min-width:150px; position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:26px 18px; border-radius:20px;
  background:linear-gradient(155deg, rgba(20,28,46,0.74), rgba(11,16,28,0.8));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 16px 40px -28px rgba(0,0,0,0.7);
}
.inject-step-done { border-color:rgba(56,217,217,0.3); box-shadow:0 16px 46px -26px rgba(56,217,217,0.3), 0 1px 0 rgba(255,255,255,0.05) inset; }
.inject-num {
  position:absolute; top:12px; left:14px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; font-weight:700; font-family:'JetBrains Mono',monospace;
  color:var(--muted2); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
}
.inject-ic { width:46px; height:46px; color:var(--cyan); display:flex; align-items:center; justify-content:center; }
.inject-ic svg { width:30px; height:30px; }
.inject-ic-cyan { color:var(--cyan); filter:drop-shadow(0 0 12px rgba(56,217,217,0.45)); }
.inject-label { font-size:0.92rem; font-weight:600; color:var(--text); line-height:1.4; max-width:170px; }
.inject-keys { display:flex; gap:6px; }
.inject-keys kbd {
  font-family:'JetBrains Mono',monospace; font-size:1.1rem; font-weight:600; color:var(--gold-bright);
  min-width:42px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:linear-gradient(180deg, rgba(212,175,96,0.14), rgba(212,175,96,0.05));
  border:1px solid rgba(212,175,96,0.3); box-shadow:0 4px 0 rgba(212,175,96,0.14), 0 6px 16px -8px rgba(212,175,96,0.4);
}
.inject-arrow { display:flex; align-items:center; color:var(--cyan); opacity:0.7; }
.inject-arrow svg { animation:injectPulse 2.4s ease-in-out infinite; }
@keyframes injectPulse { 0%,100%{transform:translateX(0);opacity:0.55} 50%{transform:translateX(4px);opacity:1} }
.inject-shot { position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); box-shadow:0 30px 80px -40px rgba(0,0,0,0.85); max-width:900px; margin:0 auto; }
.inject-shot img { width:100%; height:auto; }
.inject-shot figcaption { padding:16px 22px; font-size:0.86rem; color:var(--muted); line-height:1.6; background:rgba(11,16,28,0.6); border-top:1px solid rgba(255,255,255,0.06); text-align:center; }
@media (max-width:640px){ .inject-arrow{transform:rotate(90deg)} .inject-step{flex-basis:100%} }

/* ── ATELIER DU TEXTE (retouche IA) ───────────────────────────────────────── */
/* Transformations 1-clic — belles cartes glass à mini-icônes (R1880 P6) */
.retouche-transforms { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; max-width:880px; margin:0 auto 48px; }
.rt-card {
  position:relative; display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:15px;
  font-family:var(--font-body); font-size:0.86rem; font-weight:600; color:rgba(230,238,252,0.82); cursor:default;
  background:linear-gradient(155deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
  transition:transform 200ms cubic-bezier(0.22,1,0.36,1), border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
  overflow:hidden;
}
.rt-card::after { content:''; position:absolute; inset:0; border-radius:15px; opacity:0; pointer-events:none;
  background:radial-gradient(120% 120% at 0% 0%, rgba(56,217,217,0.16), transparent 60%); transition:opacity 220ms ease; }
.rt-card:hover { transform:translateY(-3px); color:#fff; border-color:rgba(56,217,217,0.45);
  box-shadow:0 14px 34px rgba(56,217,217,0.18), inset 0 1px 0 rgba(255,255,255,0.08); }
.rt-card:hover::after { opacity:1; }
.rt-ic { flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--cyan); background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.22); transition:transform 220ms ease; }
.rt-card:hover .rt-ic { transform:scale(1.08) rotate(-4deg); }
.rt-ic svg { width:18px; height:18px; }
.rt-lbl { line-height:1.2; }
.rt-card-gold { background:linear-gradient(155deg, rgba(212,175,96,0.12), rgba(212,175,96,0.03)); border-color:rgba(212,175,96,0.3); color:var(--gold-bright); }
.rt-card-gold .rt-ic { color:var(--gold-bright); background:var(--gold-dim); border-color:rgba(212,175,96,0.28); }
.rt-card-gold::after { background:radial-gradient(120% 120% at 0% 0%, rgba(212,175,96,0.2), transparent 60%); }
.rt-card-gold:hover { border-color:rgba(212,175,96,0.6); box-shadow:0 14px 34px rgba(212,175,96,0.2); }
.rt-card-undo { opacity:0.85; }
.rt-card-undo .rt-ic { color:var(--muted); background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1); }
@media (max-width:880px){ .retouche-transforms{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .retouche-transforms{grid-template-columns:1fr;} }
/* R1883 — padding latéral/vertical : les cartes magnétiques (tilt 3D ±9° + scale)
   ne sont plus coupées au hover quand la grille est dépliée (overflow visible). */
.retouche-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:14px; margin:-14px; overflow:visible; }
/* Grille repliable (R1880 P14) : repliée = 1 rangée visible + fondu bas.
   Le clip n'existe QUE replié (par design, pour le fondu) ; déplié = rien n'est coupé. */
.retouche-grid.is-collapsed { max-height:258px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent); }
.retouche-toggle { display:flex; align-items:center; gap:8px; margin:22px auto 0; padding:11px 22px; border-radius:999px; cursor:pointer;
  font-family:var(--font-body); font-size:0.9rem; font-weight:600; color:var(--cyan);
  background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.28); transition:background 180ms ease, border-color 180ms ease; }
.retouche-toggle:hover { background:rgba(56,217,217,0.2); border-color:var(--cyan-soft); }
.retouche-toggle svg { width:18px; height:18px; transition:transform 280ms cubic-bezier(0.22,1,0.36,1); }
.retouche-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.retouche-toggle .rt-toggle-less { display:none; }
.retouche-toggle[aria-expanded="true"] .rt-toggle-more { display:none; }
.retouche-toggle[aria-expanded="true"] .rt-toggle-less { display:inline; }
.rcard {
  position:relative; overflow:hidden; padding:30px 26px; border-radius:22px; scroll-margin-top:90px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(56,217,217,0.09), transparent 55%),
    linear-gradient(155deg, rgba(20,28,46,0.78), rgba(11,16,28,0.82));
  border:1px solid rgba(255,255,255,0.09);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 46px -28px rgba(0,0,0,0.72);
  transition:border-color 300ms ease, box-shadow 300ms ease;
}
.rcard:hover { border-color:rgba(56,217,217,0.34); box-shadow:0 26px 64px -30px rgba(56,217,217,0.3), 0 1px 0 rgba(255,255,255,0.06) inset; }
.rcard-ic { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--cyan); background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.24); transition:transform 200ms ease; }
.rcard-ic svg { width:24px; height:24px; }
.rcard:hover .rcard-ic { transform:scale(1.08); }
.rcard h3 { font-family:var(--font-display); font-size:1.14rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:9px; }
.rcard p { font-size:0.9rem; color:var(--muted); line-height:1.66; }
.rcard p strong { color:var(--text); font-weight:600; }
@media (max-width:920px){ .retouche-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .retouche-grid{grid-template-columns:1fr} }

/* ── MENUBAR — la modale rapide en barre de menus ─────────────────────────── */
.menubar-wrap { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.menubar-text h2 { margin-bottom:18px; }
.menubar-list { margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.menubar-list li { position:relative; padding-left:26px; font-size:0.95rem; color:var(--muted); line-height:1.6; }
.menubar-list li strong { color:var(--text); font-weight:600; }
.menubar-list li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px rgba(56,217,217,0.6); }
.menubar-visual { position:relative; }
.mbar-os {
  display:flex; align-items:center; gap:14px; padding:8px 16px; border-radius:12px 12px 0 0;
  background:rgba(8,11,18,0.92); border:1px solid rgba(255,255,255,0.08); border-bottom:none;
}
.mbar-dots { display:flex; gap:6px; } .mbar-dots i { width:11px; height:11px; border-radius:50%; }
.mbar-dots i:nth-child(1){background:#ff5f57} .mbar-dots i:nth-child(2){background:#febc2e} .mbar-dots i:nth-child(3){background:#28c840}
.mbar-orb { width:18px; height:18px; border-radius:50%; margin-left:auto; background:radial-gradient(circle at 35% 30%, #7af0eb, #38d9d9 55%, #1a7a7a); box-shadow:0 0 12px rgba(56,217,217,0.6); animation:mbarPulse 3s ease-in-out infinite; }
@keyframes mbarPulse { 0%,100%{transform:scale(1);opacity:0.9} 50%{transform:scale(1.12);opacity:1} }
.mbar-clock { font-size:0.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.mbar-popover {
  border-radius:0 0 16px 16px; overflow:hidden; padding:14px;
  background:linear-gradient(180deg, rgba(15,21,34,0.96), rgba(10,14,24,0.98));
  border:1px solid rgba(255,255,255,0.1); box-shadow:0 36px 80px -40px rgba(0,0,0,0.9);
  display:flex; flex-direction:column; gap:8px;
}
.mbar-search { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--muted2); font-size:0.85rem; }
.mbar-search svg { color:var(--cyan); flex-shrink:0; }
.mbar-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; transition:background 160ms ease; cursor:default; }
.mbar-row:hover { background:rgba(56,217,217,0.08); }
.mbar-tag { font-family:'JetBrains Mono',monospace; font-size:0.62rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:3px 8px; border-radius:6px; flex-shrink:0; }
.mbar-tag-voice { color:var(--cyan); background:var(--cyan-dim); border:1px solid rgba(56,217,217,0.2); }
.mbar-tag-copy { color:var(--gold-bright); background:var(--gold-dim); border:1px solid rgba(212,175,96,0.2); }
.mbar-tag-type { color:var(--violet); background:var(--violet-dim); border:1px solid rgba(139,92,246,0.2); }
.mbar-text { font-size:0.82rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mbar-foot { display:flex; justify-content:space-between; align-items:center; margin-top:4px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06); font-size:0.74rem; color:var(--muted2); }
.mbar-count { font-family:'JetBrains Mono',monospace; color:var(--cyan); }
@media (max-width:820px){ .menubar-wrap{grid-template-columns:1fr} .menubar-visual{max-width:420px;margin:0 auto} }

/* ── MÉMOIRE TOTALE — Vokali se souvient de tout, en local ────────────────── */
.section-memory { position:relative; overflow:hidden; }
.mem-wrap { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.mem-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.5; pointer-events:none; }
.mem-text { position:relative; z-index:2; }
.mem-text h2 { margin-bottom:18px; }
.mem-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.mem-chip { display:inline-flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:500; color:var(--text); padding:9px 15px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); }
.mem-chip svg { width:15px; height:15px; color:var(--cyan); }
.mem-search { margin-top:26px; display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; background:linear-gradient(155deg, rgba(20,28,46,0.7), rgba(11,16,28,0.78)); border:1px solid rgba(56,217,217,0.22); box-shadow:0 0 0 1px rgba(56,217,217,0.04), 0 18px 44px -30px rgba(56,217,217,0.4); }
.mem-search svg { color:var(--cyan); flex-shrink:0; }
.mem-search-txt { font-size:0.95rem; color:var(--muted); }
.mem-search-kbd { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--gold-bright); padding:4px 10px; border-radius:7px; background:var(--gold-dim); border:1px solid rgba(212,175,96,0.25); }
.mem-visual { position:relative; z-index:2; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); box-shadow:0 34px 86px -42px rgba(0,0,0,0.88); background:linear-gradient(135deg,#000 0%,#0d1622 55%,#070a11 100%); aspect-ratio:1000/640; }
.mem-visual::before { content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 30%,rgba(31,213,249,0.10) 45%,rgba(201,162,78,0.10) 55%,transparent 70%);background-size:220% 100%;animation:kk-shimmer 1.6s ease-in-out infinite;opacity:1;transition:opacity .5s ease;pointer-events:none; }
.mem-visual.img-loaded::before { opacity:0; }
.mem-visual img { position:relative;z-index:2; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:820px){ .mem-wrap{grid-template-columns:1fr} .mem-visual{order:-1} }

/* ═══ R2531 — MacBook STATIQUE + modale de recherche universelle (P12) ═══════
   Loris : illustrer la place du bouton Vokali dans le système macOS. MacBook
   dessiné en CSS (pas 3D, pas d'image), bureau générique + barre du haut + orbe
   Vokali ouverte avec la VRAIE modale de recherche (fidèle au reskin R2525). */
.mem-macbook { position:relative; z-index:2; margin:0; display:flex; flex-direction:column; align-items:center; }
.mb-laptop { width:100%; max-width:560px; }
.mb-screen {
  position:relative; border-radius:16px 16px 6px 6px; padding:10px;
  background:linear-gradient(160deg,#2b303b 0%,#15181f 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06), 0 30px 70px -36px rgba(0,0,0,0.9);
}
.mb-desktop {
  position:relative; aspect-ratio:16/10.2; border-radius:8px; overflow:hidden;
  /* bureau générique : dégradé profond charte + halo doux */
  background:
    radial-gradient(120% 90% at 78% 14%, rgba(56,217,217,0.16), transparent 52%),
    radial-gradient(120% 90% at 18% 90%, rgba(201,162,78,0.12), transparent 55%),
    linear-gradient(160deg,#0b1320 0%,#0a0f1a 55%,#070a12 100%);
}
/* Barre du haut macOS */
.mb-topbar {
  position:absolute; inset:0 0 auto 0; height:26px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; font-size:11px; color:rgba(238,242,252,0.92);
  background:linear-gradient(180deg, rgba(10,14,22,0.72), rgba(10,14,22,0.34)); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.mb-tb-left { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.mb-tb-orb { width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff, var(--cyan) 52%, #0c8aa0 100%);
  box-shadow:0 0 8px rgba(56,217,217,0.85); animation:orb-pulse 2.6s ease-in-out infinite; }
.mb-tb-app { letter-spacing:0.02em; }
.mb-tb-right { display:inline-flex; align-items:center; gap:11px; color:rgba(238,242,252,0.85); }
.mb-tb-ico { height:12px; width:auto; }
.mb-tb-date { font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:0.01em; }
/* Base du MacBook */
.mb-base { position:relative; height:13px; margin:0 auto; width:114%; max-width:none; transform:translateX(-6.1%);
  border-radius:0 0 13px 13px; background:linear-gradient(180deg,#3a414f,#1b1f28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 22px -10px rgba(0,0,0,0.7); }
.mb-notch { position:absolute; left:50%; top:0; transform:translateX(-50%); width:16%; height:5px;
  border-radius:0 0 8px 8px; background:rgba(0,0,0,0.45); }

/* ── Modale de recherche universelle (ouverte sous l'orbe, fidèle app) ── */
.usearch { position:absolute; top:42px; left:50%; transform:translateX(-50%); width:78%; max-width:380px;
  border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:9px;
  background:linear-gradient(160deg, rgba(20,28,46,0.92), rgba(11,16,28,0.95));
  border:1px solid rgba(56,217,217,0.22);
  box-shadow:0 0 0 1px rgba(56,217,217,0.06), 0 26px 60px -28px rgba(0,0,0,0.9), 0 0 40px -18px rgba(56,217,217,0.5);
  backdrop-filter:blur(14px);
}
.usearch-bar { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:10px;
  background:rgba(8,12,20,0.6); border:1px solid rgba(255,255,255,0.06); }
.usearch-bar svg { color:var(--cyan); flex-shrink:0; }
.usearch-ph { flex:1; font-size:12px; color:rgba(220,230,248,0.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usearch-kbd { font-size:10px; font-weight:600; color:rgba(56,217,217,0.85); border:1px solid rgba(56,217,217,0.3);
  border-radius:6px; padding:2px 6px; flex-shrink:0; background:rgba(56,217,217,0.06); }
.usearch-card { display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:11px;
  background:linear-gradient(150deg, rgba(56,217,217,0.1), rgba(20,28,46,0.5));
  border:1px solid rgba(56,217,217,0.2); }
.usearch-card-orb { width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 38% 34%, #fff 4%, var(--cyan) 46%, #0d5a5f 100%);
  box-shadow:0 0 14px rgba(56,217,217,0.6), inset 0 0 6px rgba(255,255,255,0.4);
  animation:orb-pulse 3s ease-in-out infinite; }
.usearch-card-body { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.usearch-card-title { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:0.08em; color:var(--text); }
.usearch-card-sub { font-size:11px; color:rgba(220,230,248,0.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usearch-card-open { font-size:11px; font-weight:600; color:#03161a; flex-shrink:0;
  background:linear-gradient(135deg, var(--cyan), #1aa3b8); border-radius:8px; padding:5px 12px;
  box-shadow:0 4px 12px -4px rgba(56,217,217,0.6); }
@media (max-width:820px){ .mem-macbook{order:-1} .usearch-ph{font-size:11px} }
@media (prefers-reduced-motion: reduce){ .mb-tb-orb,.usearch-card-orb{animation:none} }

/* ── AGENT VOCAL → PROMPTS (marketing punch) ──────────────────────────────── */
.voiceprompt-banner {
  position:relative; max-width:980px; margin:0 auto; padding:clamp(34px,5vw,56px) clamp(24px,4vw,52px);
  border-radius:26px; text-align:center; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(56,217,217,0.12), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(212,175,96,0.08), transparent 60%),
    linear-gradient(155deg, rgba(18,25,42,0.86), rgba(10,14,24,0.9));
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 30px 80px -44px rgba(0,0,0,0.85);
}
.voiceprompt-banner h2 { font-size:clamp(1.7rem,4.4vw,2.6rem); margin-bottom:16px; }
.voiceprompt-banner .vp-grad { background:linear-gradient(105deg, #e6c478, #fff 42%, #38d9d9 84%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.voiceprompt-banner p { max-width:620px; margin:0 auto; font-size:1.02rem; color:var(--muted); line-height:1.7; }
.voiceprompt-banner p strong { color:var(--text); font-weight:600; }
.vp-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:30px; }
.vp-pill { display:inline-flex; align-items:center; gap:9px; font-size:0.9rem; font-weight:600; color:var(--text); padding:12px 20px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.vp-pill svg { width:18px; height:18px; color:var(--cyan); }
/* R1883 — « Prompt parfait, collé » : liseré doré app fin (charte unifiée). */
.vp-pill-gold { color:#EBD79E; background:rgba(12,14,20,0.55); border-color:var(--app-gold-soft); box-shadow:0 0 12px rgba(201,162,78,0.12); }
.vp-pill-gold svg { color:#EBD79E; }
.vp-arrow { color:var(--cyan); opacity:0.7; display:flex; align-items:center; }
@media (max-width:560px){ .vp-arrow{transform:rotate(90deg)} }

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH — R2521 (refonte finitions Loris 14/06)
   Règle absolue : zéro bouton ovale plat. Tout bouton = glassmorphisme + contour
   doré + hover. Toute carte = liseré doré (statique ou animé, ~1/2 animé) + glass
   + magnétisme. Hovers, flèches, icônes drastiquement améliorés.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Angle animable réutilisable pour les liserés dorés tournants (beam) */
@property --kk-beam { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes kk-beam-spin { to { --kk-beam:360deg; } }

/* ── BOUTON GHOST (« Découvrir la suite », CTA secondaires) — glass + or vivant */
.btn-ghost {
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid transparent;
  background-clip:padding-box;
  color:var(--gold-bright);
  box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 26px -14px rgba(0,0,0,0.7);
  transition:transform 200ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease, color 200ms ease;
}
/* contour doré animé en padding/border-box (fait tout le tour) */
.btn-ghost::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--kk-beam),
    rgba(212,175,96,0.15), rgba(212,175,96,0.85), #FCF6BA, rgba(212,175,96,0.85), rgba(212,175,96,0.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0.55; animation:kk-beam-spin 6s linear infinite;
  transition:opacity 240ms ease;
}
.btn-ghost:hover {
  transform:translateY(-2px); color:#fff;
  background:linear-gradient(135deg, rgba(212,175,96,0.16), rgba(212,175,96,0.05));
  box-shadow:0 1px 0 rgba(255,255,255,0.12) inset, 0 16px 40px -16px rgba(212,175,96,0.4), 0 0 0 1px rgba(212,175,96,0.1);
}
.btn-ghost:hover::before { opacity:1; animation-duration:3s; }
.btn-ghost:active { transform:translateY(0) scale(0.98); }

/* ── BOUTON PRIMARY — micro-finition (sheen au survol) */
.btn-primary { position:relative; overflow:hidden; }
.btn-primary::before {
  content:''; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-18deg); transition:none; pointer-events:none;
}
.btn-primary:hover::before { animation:kk-sheen 0.85s ease; }
@keyframes kk-sheen { to { left:130%; } }

/* ── CHIPS TRANSFORMATION (.rt-card) — glass + contour or, hover relevé */
.rt-card {
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 18px -12px rgba(0,0,0,0.6);
  transition:transform 200ms cubic-bezier(.22,1,.36,1), color 200ms ease, border-color 220ms ease, box-shadow 240ms ease;
}
.rt-card:hover { box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 14px 30px -16px rgba(56,217,217,0.4); }
.rt-card-gold:hover { border-color:rgba(212,175,96,0.6); box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 14px 30px -16px rgba(212,175,96,0.45); }

/* ── PILLS voix/prompt (.vp-pill) — glass + or */
.vp-pill {
  -webkit-backdrop-filter:blur(12px) saturate(1.15); backdrop-filter:blur(12px) saturate(1.15);
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 22px -14px rgba(0,0,0,0.6);
  transition:transform 200ms cubic-bezier(.22,1,.36,1), border-color 220ms ease, box-shadow 240ms ease, color 200ms ease;
}
.vp-pill:hover { transform:translateY(-2px); border-color:rgba(212,175,96,0.4); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 14px 32px -16px rgba(212,175,96,0.32); }

/* ── LISERÉ DORÉ ANIMÉ sur les grandes cartes (≈1/2 — celles à accent or) */
.pillar.spotlight, .rcard.spotlight, .pricing-card { position:relative; }
.pillar.spotlight::after, .rcard.spotlight::after {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--kk-beam),
    transparent 0%, transparent 62%, rgba(212,175,96,0.7) 74%, #FCF6BA 78%, rgba(56,217,217,0.55) 84%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; transition:opacity 300ms ease; animation:kk-beam-spin 7s linear infinite; pointer-events:none;
}
.pillar.spotlight:hover::after, .rcard.spotlight:hover::after { opacity:0.9; }
.pillar.spotlight > *, .rcard.spotlight > * { position:relative; z-index:1; }

/* ── FLÈCHES carrousel (.tq-nav) — glass doré + sheen + meilleur hover */
.tq-nav {
  position:relative; isolation:isolate; overflow:hidden;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(212,175,96,0.28) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 24px -14px rgba(0,0,0,0.7);
  transition:transform 220ms cubic-bezier(.34,1.56,.64,1), background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 240ms ease;
}
.tq-nav svg { transition:transform 220ms cubic-bezier(.34,1.56,.64,1); }
.tq-nav:hover { background:linear-gradient(135deg, rgba(212,175,96,0.2), rgba(212,175,96,0.05)); border-color:rgba(212,175,96,0.6) !important; color:#FCF6BA; box-shadow:0 1px 0 rgba(255,255,255,0.14) inset, 0 14px 36px -16px rgba(212,175,96,0.45); transform:scale(1.08); }
.tq-prev:hover svg { transform:translateX(-2px); }
.tq-next:hover svg { transform:translateX(2px); }

/* ── ICÔNES — relief doux + halo au survol des cartes */
.pillar-icon, .rcard-ic, .rt-ic, .feature-icon, .mem-chip svg, .pillar-icon svg, .rcard-ic svg {
  transition:transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms ease, color 200ms ease;
}
.pillar:hover .pillar-icon { transform:translateY(-2px) scale(1.06); box-shadow:0 0 0 1px rgba(56,217,217,0.3), 0 10px 26px -12px rgba(56,217,217,0.5); }
.pillar.spotlight:hover .pillar-icon { box-shadow:0 0 0 1px rgba(212,175,96,0.3), 0 10px 26px -12px rgba(212,175,96,0.5); }

/* ── reduced-motion : on coupe les beams animés (garde le contour statique) */
@media (prefers-reduced-motion: reduce) {
  .btn-ghost::before, .pillar.spotlight::after, .rcard.spotlight::after { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #9 — MODALES FIDÈLES À L'APP (R2521) — re-skin EXACT du design réel Vokali.
   Loris : « les modales affichées sur l'écran du Mac sont inventées → à exterminer ».
   Source : Vokali/UI/FloatingPanel.swift, EditableTranscriptHub.swift, GoldenActionButton.swift.
   Couleurs réelles : fond cockpit (#000→#152331 60%→#0a0e16), bordure OR 1.8px, glow
   cyan haut + halo OR bas-droit, GoldenActionButton (or pâle #FCF6BA / fond #0D0B07).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conteneur : fond cockpit réel + bordure OR + glows (override de .vk-modal) */
.vk-modal {
  background:
    radial-gradient(140% 90% at 50% -10%, rgba(31,213,249,0.12), transparent 50%),
    radial-gradient(120% 120% at 100% 100%, rgba(201,162,78,0.07), transparent 60%),
    linear-gradient(135deg, #000000 0%, #152331 60%, #0a0e16 100%) !important;
  border:1px solid transparent !important;
  border-radius:16px !important;            /* l'app = 16px continu */
  box-shadow:0 4px 14px rgba(31,213,249,0.18), 0 6px 18px rgba(201,162,78,0.08), 0 50px 130px rgba(0,0,0,0.7) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.25); backdrop-filter:blur(20px) saturate(1.25);
}
/* Bordure OR dégradée 1.8px (façon BeamBorder de l'app, version statique fine) */
.vk-modal::after {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; padding:1.6px; pointer-events:none;
  background:linear-gradient(140deg, rgba(201,162,78,0.85), rgba(201,162,78,0.42) 45%, rgba(201,162,78,0.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}
.vk-modal > * { position:relative; z-index:1; }

/* Badge « EN ÉCOUTE » — identique (cyan), inchangé. Badge « Corrigé par IA » : OR app */
.vk-corrected { color:#FCF6BA !important; background:linear-gradient(135deg, rgba(201,162,78,0.16), rgba(201,162,78,0.05)) !important; border:1px solid rgba(201,162,78,0.4) !important; }

/* Pastilles versions (Brut/Retouché/Formaté) — capsule OR/cyan comme l'app */
.vk-chip { color:#C9A24E !important; background:rgba(201,162,78,0.1) !important; border:1px solid rgba(201,162,78,0.34) !important; }
.vk-chip:hover { color:var(--gold-bright) !important; border-color:rgba(212,175,96,0.45) !important; background:rgba(212,175,96,0.1) !important; }
.vk-chip.active { color:#0a0e16 !important; background:linear-gradient(135deg,#FCF6BA,#C9A24E) !important; border-color:transparent !important; }

/* Bouton Copier — gradient OR luxe 5 stops (GoldenActionButton de l'app) */
.vk-copy { color:rgba(10,10,8,0.9) !important; font-weight:700 !important; background:linear-gradient(135deg,#BF953F 0%,#FCF6BA 28%,#B38728 52%,#FBF5B7 74%,#AA771C 100%) !important; border:none !important; box-shadow:0 2px 8px rgba(201,162,78,0.4) !important; }
.vk-copy:hover { box-shadow:0 4px 14px rgba(201,162,78,0.55) !important; transform:translateY(-1px); }

/* Zones de texte (transcript + résultat) — bordure OR douce, fond app */
.vk-transcript, .vk-res-text { background:rgba(255,255,255,0.035) !important; border:1px solid transparent !important; position:relative; }
.vk-transcript::after, .vk-res-text::after {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:0;
  background:linear-gradient(140deg, rgba(201,162,78,0.45), rgba(201,162,78,0.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}

/* GoldenActionButton — boutons d'action (Continuer / Nouvelle dictée / Édition vocale)
   Bordure OR rotative + texte or pâle sur fond très sombre, comme l'app réelle. */
.vk-act {
  position:relative; isolation:isolate; overflow:hidden;
  color:#FCF6BA !important; font-weight:700 !important;
  background:#0D0B07 !important; border:1px solid transparent !important; border-radius:12px !important;
  box-shadow:inset 0 0 0 1px #1A1508, 0 2px 8px rgba(201,162,78,0.22) !important;
  transition:transform 160ms ease, box-shadow 220ms ease, color 160ms ease !important;
}
.vk-act::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.4px;
  background:conic-gradient(from var(--kk-beam),
    transparent, #AA771C 8%, #BF953F 14%, #FCF6BA 20%, #BF953F 26%, transparent 40%,
    transparent 60%, rgba(31,213,249,0.7) 74%, rgba(31,213,249,0.3) 80%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:kk-beam-spin 3s linear infinite; opacity:0.85;
}
.vk-act:hover { box-shadow:inset 0 0 0 1px #1A1508, 0 2px 14px rgba(201,162,78,0.45) !important; }
.vk-act:hover::before { opacity:1; }
.vk-act:active { transform:scale(0.97) translateY(1px); }
/* Rangée 2 ÉDITION = style « ghost » (comme la vraie app : Édition vocale · → Chat),
   le faisceau OR est réservé à la rangée 1 FLUX (Continuer · Nouvelle dictée). */
.vk-act-ghost { color:#cbd3e6 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08) !important; }
.vk-act-ghost::before { opacity:0; }
.vk-act-ghost:hover::before { opacity:0.45; }
/* « → Chat » garde un accent cyan ; « Injecter » = primaire OR plein (CTA) */
.vk-act-chat { color:#9fe9ff !important; }
.vk-act-inject { color:#0a0e16 !important; background:linear-gradient(135deg,#FCF6BA,#C9A24E) !important; }
.vk-act-inject::before { display:none; }
.vk-act-inject kbd { background:rgba(0,0,0,0.22) !important; color:#0a0e16 !important; }

/* Bouton Stop (capture) — reste cyan (cohérent app), micro-finition */
.vk-stop { box-shadow:0 6px 18px rgba(31,213,249,0.32) !important; }

@media (prefers-reduced-motion: reduce){ .vk-act::before{animation:none} }

/* ══════════════════════════════════════════════════════════════════════════
   R2560 — HARMONISATION AllInMyApp : modale détail glassmorphisme (clic carte)
   + cue « voir le détail » + intro matrice plein écran.
   Porté en vanilla depuis app/allinmyapp/_components (engines-section, matrix-reveal).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cue discrète au pied de chaque feature-card (invite au clic) ───────────── */
.fc-cue {
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:0.74rem; font-weight:600; letter-spacing:0.01em;
  color:var(--muted2); transition:color 220ms ease, gap 220ms ease;
}
.fc-cue svg { width:13px; height:13px; transition:transform 220ms ease; }
.feature-card:hover .fc-cue { color:var(--gold-bright); gap:9px; }
.feature-card:hover .fc-cue svg { transform:translateX(2px); }
.fc-cyan:hover .fc-cue { color:var(--cyan); }
.fc-violet:hover .fc-cue { color:#b9a3f7; }
.fc-rose:hover .fc-cue { color:var(--rose); }

/* ── Modale détail : backdrop flouté + carte glassmorphisme ─────────────────── */
.vk-detail-backdrop {
  position:fixed; inset:0; z-index:9500; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(4,6,12,0.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; transition:opacity 0.25s ease;
}
.vk-detail-backdrop.open { display:flex; opacity:1; }
.vk-detail-card {
  position:relative; width:min(640px, 100%); max-height:86vh; overflow-y:auto;
  border-radius:22px; padding:34px;
  border:1px solid rgba(212,175,96,0.28);
  background:linear-gradient(155deg, rgba(16,22,38,0.94), rgba(8,11,18,0.96));
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.8), 0 0 60px -20px rgba(212,175,96,0.3);
  transform:translateY(18px) scale(0.97); opacity:0;
  transition:transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
}
.vk-detail-backdrop.open .vk-detail-card { transform:none; opacity:1; }
/* teinte du liseré selon l'accent de la carte cliquée */
.vk-detail-card[data-accent="cyan"]   { border-color:rgba(56,217,217,0.34);  box-shadow:0 40px 100px -30px rgba(0,0,0,0.8), 0 0 60px -20px rgba(56,217,217,0.34); }
.vk-detail-card[data-accent="gold"]   { border-color:rgba(212,175,96,0.34);  box-shadow:0 40px 100px -30px rgba(0,0,0,0.8), 0 0 60px -20px rgba(212,175,96,0.34); }
.vk-detail-card[data-accent="violet"] { border-color:rgba(139,92,246,0.36);  box-shadow:0 40px 100px -30px rgba(0,0,0,0.8), 0 0 60px -20px rgba(139,92,246,0.36); }
.vk-detail-card[data-accent="rose"]   { border-color:rgba(244,124,156,0.34); box-shadow:0 40px 100px -30px rgba(0,0,0,0.8), 0 0 60px -20px rgba(244,124,156,0.34); }

.vk-detail-close {
  position:absolute; right:16px; top:16px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.05); color:var(--muted);
  cursor:pointer; transition:color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.vk-detail-close:hover { color:var(--text); border-color:var(--gold-line); background:rgba(212,175,96,0.08); }

.vk-detail-head { display:flex; align-items:center; gap:16px; margin-bottom:18px; padding-right:44px; }
.vk-detail-ic {
  width:60px; height:60px; flex-shrink:0; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
}
.vk-detail-ic-cyan   { background:var(--cyan-dim);  border:1px solid rgba(56,217,217,0.34);  color:var(--cyan); }
.vk-detail-ic-gold   { background:var(--gold-dim);  border:1px solid rgba(212,175,96,0.4);   color:var(--gold-bright); }
.vk-detail-ic-violet { background:var(--violet-dim);border:1px solid rgba(139,92,246,0.4);   color:#b9a3f7; }
.vk-detail-ic-rose   { background:var(--rose-dim);  border:1px solid rgba(244,124,156,0.34);  color:var(--rose); }
.vk-detail-titles h3 { font-family:var(--font-display); font-size:1.5rem; letter-spacing:-0.02em; margin:0 0 2px; }
.vk-detail-titles .vk-detail-role { font-size:0.84rem; color:var(--muted2); }
.vk-detail-card[data-accent="cyan"]   .vk-detail-titles h3 { color:var(--cyan); }
.vk-detail-card[data-accent="gold"]   .vk-detail-titles h3 { color:var(--gold-bright); }
.vk-detail-card[data-accent="violet"] .vk-detail-titles h3 { color:#b9a3f7; }
.vk-detail-card[data-accent="rose"]   .vk-detail-titles h3 { color:var(--rose); }

.vk-detail-pitch { font-size:1.02rem; line-height:1.6; color:var(--muted); margin-bottom:22px; }

.vk-detail-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.vk-detail-metric {
  border-radius:14px; padding:13px 10px; text-align:center;
  border:1px solid var(--gold-line); background:rgba(212,175,96,0.05);
}
.vk-detail-metric .vk-m-val { font-size:1.05rem; font-weight:700; }
.vk-detail-metric .vk-m-lbl { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted2); margin-top:2px; }
.vk-detail-card[data-accent="cyan"]   .vk-m-val { color:var(--cyan); }
.vk-detail-card[data-accent="gold"]   .vk-m-val { color:var(--gold-bright); }
.vk-detail-card[data-accent="violet"] .vk-m-val { color:#b9a3f7; }
.vk-detail-card[data-accent="rose"]   .vk-m-val { color:var(--rose); }

.vk-detail-capslabel { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted2); margin-bottom:12px; }
.vk-detail-caps { display:flex; flex-direction:column; gap:11px; margin-bottom:26px; }
.vk-detail-caps li { display:flex; align-items:flex-start; gap:11px; font-size:0.92rem; line-height:1.5; color:var(--muted); }
.vk-detail-caps svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.vk-detail-card[data-accent="cyan"]   .vk-detail-caps svg { color:var(--cyan); }
.vk-detail-card[data-accent="gold"]   .vk-detail-caps svg { color:var(--gold-bright); }
.vk-detail-card[data-accent="violet"] .vk-detail-caps svg { color:#b9a3f7; }
.vk-detail-card[data-accent="rose"]   .vk-detail-caps svg { color:var(--rose); }

.vk-detail-cta {
  display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 24px;
  border-radius:999px; font-weight:800; font-size:0.95rem; color:#1a1408; cursor:pointer;
  background:linear-gradient(135deg, #fcf6ba 0%, #e8c56a 38%, var(--gold) 62%, #bf953f 100%);
  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);
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.vk-detail-cta:hover { transform:translateY(-2px); 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); }

/* ── Intro matrice plein écran : la matrice se décode → révèle « Vokali » or ─── */
.vk-mxintro {
  position:fixed; inset:0; z-index:9800; display:flex;
  align-items:center; justify-content:center; overflow:hidden;
  background:var(--bg);
  transition:opacity 0.8s ease, visibility 0.8s ease;
}
.vk-mxintro.is-gone { opacity:0; visibility:hidden; pointer-events:none; }
.vk-mxintro-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0.85; }
.vk-mxintro-word {
  position:relative; z-index:2; font-family:var(--font-display);
  font-size:clamp(3.4rem, 13vw, 9rem); font-weight:800; letter-spacing:-0.04em; line-height:0.9;
  background:linear-gradient(175deg, #fff7d6 0%, #fcf6ba 14%, #e8c56a 32%, #bf953f 50%, #8a6d1f 66%, #b8893a 82%, #aa771c 100%);
  background-size:200% 200%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:
    drop-shadow(0 1px 0 rgba(255,248,214,0.55))
    drop-shadow(0 -1px 0 rgba(255,255,255,0.25))
    drop-shadow(0 3px 1px rgba(0,0,0,0.85))
    drop-shadow(0 5px 14px rgba(120,80,10,0.7))
    drop-shadow(0 0 46px rgba(212,175,96,0.32));
  opacity:0; transform:translateY(14px) scale(0.97);
  transition:opacity 0.9s ease 0.1s, transform 1s cubic-bezier(0.22,1,0.36,1) 0.1s;
}
.vk-mxintro.is-revealed .vk-mxintro-word { opacity:1; transform:none; animation:vk-mx-shine 6s ease-in-out infinite; }
@keyframes vk-mx-shine { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
/* R2574 — stage welcome : « Bienvenue dans » + Vokali + phrase percutante */
.vk-mxintro-stage { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; }
.vk-mxintro-welcome {
  font-family:var(--font-display); font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  font-size:clamp(0.78rem, 2.1vw, 1.05rem); margin-bottom:0.55em;
  background:var(--app-gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.7s ease 0.05s, transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.05s;
}
.vk-mxintro-tag {
  margin-top:1.05em; max-width:min(620px, 86vw); font-family:var(--font-body); font-weight:500;
  font-size:clamp(0.92rem, 2.3vw, 1.18rem); line-height:1.5; color:var(--muted);
  opacity:0; transform:translateY(12px);
  transition:opacity 0.8s ease 0.45s, transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.45s;
}
.vk-mxintro.is-revealed .vk-mxintro-welcome,
.vk-mxintro.is-revealed .vk-mxintro-tag { opacity:1; transform:none; }
/* léger voile sombre radial pour faire ressortir le mot pendant la révélation */
.vk-mxintro::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(6,8,14,0) 18%, rgba(6,8,14,0.72) 62%, var(--bg) 100%);
  opacity:0; transition:opacity 0.8s ease;
}
.vk-mxintro.is-revealed::after { opacity:1; }
.vk-mxintro-skip {
  position:absolute; right:20px; bottom:20px; z-index:3;
  font-size:0.74rem; color:var(--muted2); background:transparent; border:0; cursor:pointer;
  letter-spacing:0.04em; transition:color 180ms ease;
}
.vk-mxintro-skip:hover { color:var(--gold-bright); }

@media (prefers-reduced-motion: reduce){
  .vk-detail-card, .vk-detail-backdrop, .vk-mxintro, .vk-mxintro-word { transition:none; animation:none; }
  .vk-mxintro-word { opacity:1; transform:none; }
}

/* ── R2574 — bouton retour-haut, finition dorée glass (cohérent .btn-nav) ── */
.vk-scrolltop {
  position:fixed; right:24px; bottom:24px; z-index:9000;
  width:46px; height:46px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--gold-bright);
  background:rgba(13,18,32,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--gold-line);
  box-shadow:0 0 0 1px rgba(212,175,96,0.1), 0 12px 30px rgba(0,0,0,0.45);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(0.92);
  transition:opacity 260ms ease, transform 320ms cubic-bezier(0.22,1,0.36,1), visibility 260ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.vk-scrolltop.is-visible { opacity:1; visibility:visible; transform:none; }
.vk-scrolltop:hover {
  border-color:rgba(212,175,96,0.5); color:#fcf6ba;
  box-shadow:0 0 0 1px rgba(212,175,96,0.28), 0 16px 38px rgba(212,175,96,0.22);
  transform:translateY(-3px);
}
.vk-scrolltop:active { transform:translateY(-1px) scale(0.96); }
@media (max-width:640px){ .vk-scrolltop { right:16px; bottom:16px; width:42px; height:42px; } }
@media (prefers-reduced-motion: reduce){ .vk-scrolltop { transition:opacity 200ms ease, visibility 200ms ease; } }

/* ── R2570 — mascotte hero retirée (image parasite : boîte/fond visible en bas-droite). ── */