/* ============================================
   1Clic Landing — LIGHT THEME OVERRIDE (test)
   Loaded after style.css. Remove the <link> to revert.
   ============================================ */

:root {
  /* Flip core tokens */
  --black: #FAFAFA;            /* "page bg" — was true black */
  --white: #1A1A1A;            /* "main text" — was white */
  --gray: #3D3D3D;             /* secondary text — was light gray */
  --gray-dim: #5A5A5A;         /* muted text — was #888 (fail AA on white) */
  /* Violets stay (good contrast on white: 7.4:1 normal / 4.6:1 dark) */
  /* --violet, --violet-light, --violet-dark inherited as-is */
  --blue-deep: #d8e0ff;        /* deep blue halo → soft blue tint on white */
  --card-bg: rgba(0,0,0,0.025);
  --card-border: rgba(0,0,0,0.08);
  --glass-bg: rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.06);
}

/* ─── Body & base ─── */
body {
  background: #FAFAFA;
  color: #1A1A1A;
}

/* ─── Halos: dim them on white so they don't muddy the page ─── */
.halo { opacity: 0.10; filter: blur(140px); }

/* ─── Nav (transparent at top, glass when scrolled) ─── */
nav, .nav {
  /* Initial transparent state preserved by base CSS */
}
nav.scrolled, .nav.scrolled {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-links a { opacity: 0.75; color: #1A1A1A; }
.nav-links a:hover { opacity: 1; }
.nav-cta {
  /* Stays violet — already good on white */
}

/* ─── Generic surfaces: rgba white tints become rgba black tints ─── */
.dash-sidebar { background: rgba(0,0,0,0.025); }
.dash-input {
  color: #1A1A1A;
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
.gen-step-indicator { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
.gen-progress-bar { background: rgba(0,0,0,0.08); }
.gv-step { background: rgba(0,0,0,0.02); }
.gv-progress-bar { background: rgba(0,0,0,0.08); }
.gen-step.active { color: #1A1A1A; }

/* ─── Mock dashboard heading text (white→dark) ─── */
.dash-input, .dash-label, .gv-step-name { color: #1A1A1A !important; }

/* ─── Browser frame (mac-style) ─── */
.browser {
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.08);
}
.browser-bar { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); }
.browser-url { color: #5A5A5A; background: rgba(0,0,0,0.04); }

/* ─── Marquee fade edges ─── */
.marquee::before { background: linear-gradient(90deg, #FAFAFA, transparent) !important; }
.marquee::after  { background: linear-gradient(-90deg, #FAFAFA, transparent) !important; }

/* ─── Hero proof / muted text ─── */
.hero-proof { color: #5A5A5A; }
.hero-proof strong { color: #1A1A1A; }

/* ─── FAQ ─── */
.faq-question:hover { background: rgba(0,0,0,0.025); }
.faq-item { border-color: rgba(0,0,0,0.10); }

/* ─── Modals ─── */
.modal-overlay { background: rgba(0,0,0,0.55); }
.modal {
  background: rgba(255,255,255,0.98) !important;
  color: #1A1A1A;
  border: 1px solid rgba(0,0,0,0.08);
}
.modal-close { color: #5A5A5A; }
.modal-close:hover { color: #1A1A1A; background: rgba(0,0,0,0.05); }
.modal-field input {
  color: #1A1A1A;
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}
.modal-field input::placeholder { color: rgba(0,0,0,0.35); }

/* ─── Pricing / cards big text ─── */
.pricing-card, .feat, .step, .testimonial, .faq-item {
  /* Inherit body color, just ensure cards themselves get a soft surface */
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ─── Outline button (was border white + bg rgba white) ─── */
.btn-secondary, .btn-outline {
  color: #1A1A1A;
  border-color: rgba(0,0,0,0.20);
  background: rgba(0,0,0,0.02);
}
.btn-secondary:hover, .btn-outline:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.35);
}

/* ─── Mock site previews (ps-*) keep their dark gradients (they represent
     simulated dark hero sections inside browser previews) ─── */

/* ─── Big watermark / decorative numbers (was rgba(255,255,255,0.X)) ─── */
[style*="rgba(255,255,255,0"], .big-num {
  /* targeted via class instead — keep selector list narrow to avoid overreach */
}
.big-num, .section-num { color: rgba(0,0,0,0.06) !important; }

/* ─── Footer ─── */
footer {
  background: #F2F2F2;
  color: #1A1A1A;
  border-top: 1px solid rgba(0,0,0,0.08);
}
footer a { color: #5A5A5A; }
footer a:hover { color: #1A1A1A; }

/* ─── Catch-all: ensure body text on dark sections defaults to dark ─── */
.hero, .section, section { color: #1A1A1A; }

/* ─── Counter chiffres (CTR cards) ─── */
.counter, .stat-num { color: #1A1A1A; }
.stat-label { color: #5A5A5A; }

/* ─── Subtle border legibility on small UI ─── */
.badge { background: rgba(121,66,194,0.10); color: #5A2D94; border: 1px solid rgba(121,66,194,0.25); }

/* ============================================
   PATCH 2 — Logo + Mock dashboard internals
   ============================================ */

/* ─── Logo: hide white PNG, render dark text via CSS ─── */
.nav-logo-img { display: none !important; }
.nav-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: #1A1A1A;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.nav-logo::before {
  content: "1clic";
  color: #1A1A1A;
}
.nav-logo::after {
  content: ".";
  color: #7942C2;
}

/* ─── Mock dashboard sidebar ─── */
.dash-sidebar {
  background: #F4F4F4 !important;
  border-right: 1px solid rgba(0,0,0,0.06);
}
.dash-logo {
  color: #1A1A1A !important;
}
.dash-logo .dot {
  color: #7942C2 !important;
}
.dash-menu-item {
  color: #5A5A5A !important;
}
.dash-menu-item.active {
  background: rgba(121,66,194,0.10) !important;
  color: #1A1A1A !important;
  border-color: rgba(121,66,194,0.25) !important;
}
.dash-icon {
  color: inherit;
}

/* ─── Mock dashboard main panel ─── */
.dash-main {
  background: #FFFFFF !important;
}
.dash-field {
  margin-bottom: 1rem;
}
.dash-label {
  color: #5A5A5A !important;
  font-weight: 500;
}
.dash-input {
  background: #FAFAFA !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #1A1A1A !important;
}
.dash-generate-btn {
  background: linear-gradient(135deg, #7942C2 0%, #9B6DD7 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.dash-btn-icon {
  color: #FFFFFF !important;
}

/* ─── Generation panel (after click) ─── */
.gen-header,
.gen-title,
.gen-sub {
  color: #1A1A1A !important;
}
.gen-sub {
  color: #5A5A5A !important;
}
.gen-step {
  color: #5A5A5A !important;
}
.gen-step.active,
.gen-step.done {
  color: #1A1A1A !important;
}
.gen-step-name {
  color: inherit !important;
}
.gen-step-indicator {
  background: #FFFFFF !important;
  border: 2px solid rgba(0,0,0,0.15) !important;
}
.gen-step.active .gen-step-indicator,
.gen-step.done .gen-step-indicator {
  border-color: #7942C2 !important;
  background: rgba(121,66,194,0.08) !important;
}
.gen-progress-bar {
  background: rgba(0,0,0,0.08) !important;
}
.gen-progress-fill {
  /* Keep violet→green gradient from base */
}

/* ─── Browser frame URL bar (clearer on white) ─── */
.browser-bar {
  background: #F2F2F2 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.browser-url {
  background: #FFFFFF !important;
  color: #5A5A5A !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
.browser-content {
  background: #FFFFFF !important;
}

/* ─── Visualizer (alternate gen view) ─── */
.gv-step-name { color: #1A1A1A !important; }
.gv-step-status { color: #5A5A5A !important; }
.gv-progress-fill { /* keep gradient */ }

/* ─── Nav links: tighten contrast ─── */
.nav-links a {
  color: #1A1A1A !important;
  opacity: 0.70;
  font-weight: 500;
}
.nav-links a:hover {
  opacity: 1;
  color: #7942C2 !important;
}

/* ============================================
   PATCH 3 — Texte blanc sur CTA violet
   ============================================ */
.btn-primary,
.btn-primary:hover,
.btn-primary:visited,
.btn-primary * {
  color: #FFFFFF !important;
}
.nav-cta,
.nav-links a.nav-cta,
.nav-links a.btn-primary {
  color: #FFFFFF !important;
  opacity: 1 !important;
}
.nav-links a.nav-cta:hover {
  color: #FFFFFF !important;
}
/* dash-generate-btn déjà patché — garde-fou redondant safe */
.dash-generate-btn,
.dash-generate-btn * {
  color: #FFFFFF !important;
}

/* ============================================
   PATCH 4 — Conteneurs visuels arrondis : fond solide + ombre douce
   Évite l'effet "bloc arrondi posé sur fond plat sans fondement"
   ============================================ */

.form-visual,
.gen-visual,
.hero-browser,
.browser {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 32px rgba(40, 25, 80, 0.08), 0 2px 6px rgba(0,0,0,0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Browser bar (top header avec traffic lights) */
.browser-bar {
  background: #F7F7F8 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.browser-dot {
  /* keep colored dots */
}
.browser-content {
  background: #FFFFFF !important;
}

/* Fields à l'intérieur du form-visual (Étape 1) */
.field-input {
  background: #F7F7F8 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  color: #1A1A1A !important;
}
.form-field label {
  color: #5A5A5A !important;
}

/* gen-visual (Étape 2) — internals */
.gv-step {
  background: #F7F7F8 !important;
  border: 1px solid transparent !important;
}
.gv-step.active {
  background: rgba(121,66,194,0.06) !important;
  border-color: rgba(121,66,194,0.25) !important;
}
.gv-step.done {
  background: rgba(40,202,66,0.06) !important;
  border-color: rgba(40,202,66,0.25) !important;
}
.gv-progress-bar {
  background: rgba(0,0,0,0.08) !important;
}
.gv-step-icon {
  background: rgba(121,66,194,0.10) !important;
}
.gv-step.done .gv-step-icon {
  background: rgba(40,202,66,0.12) !important;
}

/* Pricing cards / feat / step / testimonial / faq — bump shadow pour cohérence */
.pricing-card,
.feat,
.testimonial,
.faq-item {
  box-shadow: 0 4px 20px rgba(40, 25, 80, 0.05), 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* ─── PATCH 5 (v=5): Fix step layout — kill card-on-card pattern ─── */
/* Step rows = grid containers, NOT cards. Strip the card styling I added in PATCH 1. */
.step {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Give the .steps section a subtle off-tone bg so white inner visuals pop */
.steps {
  background: linear-gradient(180deg, #FAFAFA 0%, #F4F2F8 50%, #FAFAFA 100%);
}
/* Inner visuals: clean white cards on the tinted section bg */
.form-visual, .gen-visual {
  background: #FFFFFF !important;
  border: 1px solid rgba(121,66,194,0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(40, 25, 80, 0.08), 0 2px 8px rgba(40, 25, 80, 0.04) !important;
  backdrop-filter: none !important;
}
/* Step 3: proposal cards — same treatment, no outer wrapper needed */
.proposal-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(121,66,194,0.10) !important;
  box-shadow: 0 8px 28px rgba(40, 25, 80, 0.06), 0 2px 6px rgba(40, 25, 80, 0.03) !important;
  backdrop-filter: none !important;
}
.proposal-card:hover, .proposal-card.selected {
  border-color: var(--violet) !important;
  box-shadow: 0 0 30px rgba(121,66,194,0.18), 0 8px 28px rgba(40, 25, 80, 0.08) !important;
}
/* Watermark numbers : un peu plus contrastés vs nouveau bg */
.step-number {
  color: rgba(121,66,194,0.10) !important;
}

/* ─── PATCH 6 (v=6): Fix seam halo entre .steps et .advantages ─── */
/* Le bg gradient sur .steps masquait la moitié haute du halo violet,
   créant une coupure visible à l'entrée de .advantages.
   On retire le bg → halos uniformes, white cards pop quand même via shadow. */
.steps {
  background: transparent !important;
}

/* ─── PATCH 7 (v=7): Populaire badge — center + white text ─── */
.popular-badge {
  transform: translateX(-50%) !important;
  color: #FFFFFF !important;
}

/* ─── PATCH 8 (v=8): Étape 3 single publish-card layout ─── */
.proposals-visual {
  justify-content: center !important;
}
.publish-card {
  flex: 0 1 360px !important;
  max-width: 360px !important;
  position: relative;
}
.publish-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: linear-gradient(135deg, #10B981, #059669) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: .7rem !important;
  letter-spacing: 1.5px !important;
  padding: .35rem .8rem !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 16px rgba(16,185,129,0.3), 0 0 0 4px rgba(16,185,129,0.08) !important;
  margin-bottom: .8rem !important;
  text-transform: uppercase !important;
}
.publish-badge .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: publish-pulse 1.6s ease-out infinite;
}
@keyframes publish-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.publish-domain {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
  padding: .4rem .8rem;
  background: rgba(121,66,194,0.06);
  border: 1px solid rgba(121,66,194,0.18);
  border-radius: 100px;
  font-family: var(--font-ui, monospace);
  font-size: .75rem;
  color: #6B3FB1;
  font-weight: 600;
}
.publish-domain i { color: #7942C2; }

/* ============================================================ */

/* ─── PATCH 10 (v=10): Onie chatbot mock loop ─── */
.onie-section {
  padding: 6rem 0 7rem;
  background: linear-gradient(180deg, #fafafa 0%, #f4f4f7 100%);
  position: relative;
  overflow: hidden;
}
.onie-section h2 {
  text-align: center;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #0f172a;
  margin: 0 auto 0.75rem;
  max-width: 900px;
  letter-spacing: -0.02em;
}
.onie-section > .container > p {
  text-align: center;
  color: #475569;
  font-size: 1.1rem;
  margin: 0 auto 3rem;
  max-width: 600px;
}

/* Chat frame */
.chat-mock {
  max-width: 440px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Header */
.chat-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.chat-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}
.chat-avatar img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.18));
}
.chat-meta { display: flex; flex-direction: column; gap: 2px; }
.chat-name {
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: #0f172a;
  line-height: 1;
}
.chat-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: status-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Body (scroll container) */
.chat-body {
  padding: 1.25rem 1rem 1.5rem;
  height: 420px;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #fafafa;
}
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.1); border-radius: 4px; }

/* ─── PATCH 12: Onie chat input bar (decorative) ─── */
.chat-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.chat-input-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
  background: transparent;
  color: #64748b;
  transition: background 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.chat-input-btn svg { width: 18px; height: 18px; }
.chat-attach:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; }
.chat-input-field {
  flex: 1;
  min-width: 0;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  color: #94a3b8;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-send {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.chat-send:hover { transform: scale(1.06); }
@media (max-width: 768px) {
  .chat-input { padding: 0.55rem 0.7rem; gap: 0.4rem; }
  .chat-input-btn { width: 30px; height: 30px; }
  .chat-input-btn svg { width: 16px; height: 16px; }
  .chat-input-field { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
}


/* Bubbles */
.bubble {
  max-width: 78%;
  padding: 0.65rem 0.95rem;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.9rem;
  line-height: 1.45;
  word-wrap: break-word;
  opacity: 0;
  transform: translateY(8px);
  animation: bubble-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes bubble-in {
  to { opacity: 1; transform: translateY(0); }
}
.bubble.onie {
  align-self: flex-start;
  background: #f3f4f6;
  color: #0f172a;
  border-radius: 14px 14px 14px 4px;
}
.bubble.user {
  align-self: flex-end;
  background: #7c3aed;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}

/* Typing indicator */
.bubble.typing {
  padding: 0.7rem 1rem;
  display: flex;
  gap: 4px;
  align-items: center;
}
.bubble.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: typing-dot 1.2s ease-in-out infinite;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Variants carousel inside chat */
.bubble.variants {
  background: transparent;
  padding: 0.25rem 0;
  max-width: 100%;
  align-self: stretch;
}
.variants-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.variants-strip::-webkit-scrollbar { display: none; }
.variants-strip { scrollbar-width: none; }
.var-card {
  flex: 0 0 110px;
  scroll-snap-align: start;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}
.var-card .var-thumb {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  border-radius: 8px;
  margin-bottom: 0.4rem;
  position: relative;
  overflow: hidden;
}
.var-card[data-style="moderne"] .var-thumb { background: linear-gradient(135deg, #1e293b 0%, #475569 100%); }
.var-card[data-style="minimaliste"] .var-thumb { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 1px solid #e2e8f0; }
.var-card[data-style="pro"] .var-thumb { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.var-card[data-style="creatif"] .var-thumb { background: linear-gradient(135deg, #ec4899 0%, #f97316 100%); }
.var-card[data-style="chaleureux"] .var-thumb { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%); }
.var-card .var-thumb::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 12%;
  right: 12%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.var-card[data-style="minimaliste"] .var-thumb::before { background: rgba(15, 23, 42, 0.3); }
.var-card .var-thumb::after {
  content: "";
  position: absolute;
  bottom: 14%;
  left: 12%;
  right: 35%;
  height: 16%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
}
.var-card[data-style="minimaliste"] .var-thumb::after { background: rgba(15, 23, 42, 0.2); }
.var-card .var-label {
  text-align: center;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
}
.var-card.selected {
  border-color: #7c3aed;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
  transform: translateY(-2px);
}
.var-card.selected .var-label { color: #7c3aed; }

/* Loop fade */
.chat-mock.loop-fading { transition: opacity 0.6s ease; opacity: 0.3; }

/* Mobile */
@media (max-width: 640px) {
  .onie-section { padding: 4rem 0 5rem; }
  .chat-mock { max-width: calc(100vw - 2rem); }
  .chat-body { height: 380px; }
  .var-card { flex: 0 0 96px; }
}

/* ─── PATCH 11 (v=11): Onie logo-anim + color-anim (ONIE_V2) ─── */

/* Logo upload anim */
.bubble.logo-anim {
  background: transparent !important;
  padding: 4px 0 !important;
  align-self: flex-start;
  max-width: 100%;
  border: none !important;
}
.logo-frame {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  border: 2px dashed rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  animation: logoFrameIn 0.4s ease-out;
}
.logo-frame .upload-icon {
  width: 30px; height: 30px;
  color: #7c3aed;
  animation: iconPulse 1.0s ease-in-out forwards;
}
.logo-frame .logo-result {
  position: absolute;
  inset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  border-radius: 14px;
  opacity: 0;
  transform: scale(0.7);
  animation: logoResultIn 0.45s 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes logoFrameIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes iconPulse {
  0%   { transform: scale(0.7); opacity: 0; }
  20%  { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(0.7);  opacity: 0; }
}
@keyframes logoResultIn {
  to { opacity: 1; transform: scale(1); }
}

/* Color picker anim */
.bubble.color-anim {
  background: transparent !important;
  padding: 4px 0 !important;
  align-self: flex-start;
  max-width: 100%;
  border: none !important;
}
.color-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 2px;
}
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  position: relative;
  opacity: 0;
  transform: scale(0.5);
  animation: swatchIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.color-swatch.picked {
  animation:
    swatchIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    swatchGrow 0.45s 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.color-swatch.picked::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0;
  animation: pickIn 0.35s 1.15s ease-out forwards;
}
@keyframes swatchIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes swatchGrow {
  to {
    transform: scale(1.22);
    box-shadow:
      0 6px 16px rgba(124, 58, 237, 0.45),
      0 0 0 4px rgba(124, 58, 237, 0.25);
  }
}
@keyframes pickIn {
  to { opacity: 1; }
}

/* Mobile sizing for new anims */
@media (max-width: 640px) {
  .logo-frame { width: 68px; height: 68px; }
  .logo-frame .upload-icon { width: 26px; height: 26px; }
  .logo-frame .logo-result { font-size: 1.2rem; }
  .color-swatch { width: 24px; height: 24px; }
  .color-row { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   ONIE NARRATRICE — Landing 7 chapitres (2026-05-08)
   Spec : .altitudenexus/projects/1clic/docs/superpowers/specs/2026-05-08-landing-onie-narratrice-design.md
   ═══════════════════════════════════════════════════════════ */

/* Snap scroll vertical sur le rail de chapitres */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
main#story { display: flex; flex-direction: column; }
section.chapter {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 64px;
  box-sizing: border-box;
}

/* ─── Onie stage : fixed sur le viewport, déplacée par CSS vars ─── */
#onie-stage {
  position: fixed;
  top: var(--onie-y, 50vh);
  left: var(--onie-x, 50vw);
  transform: translate(-50%, -50%) scale(var(--onie-scale, 1));
  transition: top 600ms ease-out, left 600ms ease-out, transform 600ms ease-out, opacity 400ms ease-out;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  will-change: top, left, transform;
}
#onie-stage.is-visible { opacity: 1; }

#onie-character {
  width: 120px;
  height: 120px;
  position: relative;
  animation: onie-idle 2s ease-in-out infinite;
}

#onie-bubble {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.92rem;
  color: #1e293b;
  white-space: normal;
  max-width: 320px;
  width: max-content;
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
  pointer-events: auto;
}
#onie-bubble:has(#onie-bubble-text:empty) { display: none; }
#onie-bubble-text { display: inline-block; }

/* ─── Postures Onie (cross-fade via classe) ─── */
.onie-pose-neutral .onie-arm-right,
.onie-pose-neutral .onie-arm-left { opacity: 0; }

.onie-pose-point-right .onie-arm-right { opacity: 1; transform: rotate(-15deg); transform-origin: 100px 70px; }
.onie-pose-point-right .onie-arm-left { opacity: 0; }

.onie-pose-bras-tendu .onie-arm-right { opacity: 1; transform: rotate(-35deg) scale(1.15); transform-origin: 100px 70px; }
.onie-pose-bras-tendu .onie-arm-left { opacity: 1; transform: rotate(35deg) scale(1.15); transform-origin: 20px 70px; }

.onie-pose-bras-croises .onie-arm-right { opacity: 1; transform: rotate(20deg) scale(0.7); transform-origin: 100px 70px; }
.onie-pose-bras-croises .onie-arm-left { opacity: 1; transform: rotate(-20deg) scale(0.7); transform-origin: 20px 70px; }

.onie-pose-present .onie-arm-right { opacity: 1; transform: rotate(15deg); transform-origin: 100px 70px; }
.onie-pose-present .onie-arm-left { opacity: 0; }

.onie-pose-compare .onie-pupil-left { transform: translateX(-1.5px); }
.onie-pose-compare .onie-pupil-right { transform: translateX(1.5px); }

.onie-pose-head-track .onie-pupil-left,
.onie-pose-head-track .onie-pupil-right {
  transition: transform 200ms ease-out;
}

.onie-pose-nod #onie-svg { animation: onie-nod 220ms ease-out; }

#onie-svg .onie-arm { transition: opacity 200ms ease-out, transform 200ms ease-out; }
#onie-svg .onie-pupil-left, #onie-svg .onie-pupil-right { transition: transform 200ms ease-out; }

@keyframes onie-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes onie-nod {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(8deg); }
}

/* ─── Step 6 : prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html { scroll-snap-type: none; }
  #onie-stage { transition: opacity 0ms !important; }
  #onie-character { animation: none !important; }
  .onie-pose-nod #onie-svg { animation: none !important; }
  #onie-svg .onie-arm { transition: none !important; }
}

/* ─── Step 14 : mobile responsive (Onie pinned bottom-right < 768px) ─── */
@media (max-width: 768px) {
  section.chapter { padding: 80px 16px 48px; min-height: 100dvh; }
  html { scroll-snap-type: none; }

  #onie-stage {
    top: auto !important;
    left: auto !important;
    right: 12px;
    bottom: 12px;
    transform: none !important;
    transition: opacity 400ms ease-out;
  }
  #onie-character { width: 64px; height: 64px; }
  #onie-svg { width: 64px; height: 64px; }
  #onie-bubble {
    position: absolute;
    bottom: 76px;
    right: 0;
    left: auto;
    transform: none;
    max-width: calc(100vw - 32px);
  }
}

/* ═══════════════════════════════════════════════════════════
   ONIE NARRATRICE — Chapitres content (Steps 7-13)
   ═══════════════════════════════════════════════════════════ */

.chapter-h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #1e293b;
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.15;
}
.chapter-sub {
  text-align: center;
  color: #64748b;
  font-size: 1.05rem;
  margin: 0 0 36px;
}

/* ─── Ch1 Hero — 2 cols (contenu gauche, Onie droite) ─── */
.ch1-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.ch1-onie-slot { min-height: 480px; }
.ch1-content { max-width: 600px; text-align: left; }
.ch1-h1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.05;
  margin: 0 0 24px;
  letter-spacing: -0.025em;
}
.ch1-h1-accent { color: #7c3aed; }
.ch1-sub { font-size: clamp(1rem, 1.6vw, 1.2rem); color: #475569; margin: 0 0 36px; line-height: 1.55; font-weight: 400; max-width: 540px; }
.ch1-ctas { display: flex; gap: 14px; justify-content: flex-start; margin-bottom: 32px; flex-wrap: wrap; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-xl { padding: 20px 44px; font-size: 1.15rem; font-weight: 700; }
.btn-ghost {
  background: transparent;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 200ms, border-color 200ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { background: #f1f5f9; border-color: #94a3b8; }
.ch1-trust {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  gap: 24px;
  justify-content: flex-start;
  font-size: 0.85rem;
  color: #64748b;
  flex-wrap: wrap;
}
.ch1-trust li { display: inline-flex; align-items: center; gap: 6px; }
.ch1-trust li i[data-lucide] { width: 16px; height: 16px; stroke-width: 2.4; color: #7c3aed; flex-shrink: 0; }
.ch1-trust li svg { width: 16px; height: 16px; color: #7c3aed; flex-shrink: 0; }

.ch1-mockup-wireframe {
  width: 480px;
  max-width: 100%;
  margin: 0 auto;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  box-sizing: border-box;
  animation: wf-pulse 3s ease-in-out infinite;
}
.wf-bar-row { display: flex; gap: 6px; margin-bottom: 14px; }
.wf-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.wf-bar { height: 14px; background: #cbd5e1; border-radius: 4px; margin-bottom: 18px; width: 60%; }
.wf-line { height: 10px; background: #e2e8f0; border-radius: 4px; margin-bottom: 10px; }
.wf-line.short { width: 50%; }
@keyframes wf-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ch1-mockup-wireframe { animation: none; opacity: 0.8; } }

/* ─── Ch2 How (split layout) ─── */
.ch2-grid {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 32px;
  max-width: 1200px;
  width: 100%;
  align-items: center;
}
.ch2-left h2 { text-align: left; }
.ch2-intro {
  font-size: 1.3rem;
  color: #1e293b;
  font-weight: 600;
  margin: 0 0 12px;
}
.ch2-detail { color: #64748b; line-height: 1.55; }
.ch2-right .chat-mock {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15,23,42,0.08);
}
@media (max-width: 768px) {
  .ch2-grid { grid-template-columns: 1fr; }
  .ch2-left h2 { text-align: center; }
}

/* ─── Ch3 Bénéfices ─── */
.ch3-content { max-width: 1100px; width: 100%; }
.ch3-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.benefit-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  transition: transform 220ms, box-shadow 220ms, border-color 220ms;
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(124,58,237,0.12);
  border-color: #c4b5fd;
}
.benefit-visual {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(124,58,237,0.04));
  display: flex; align-items: center; justify-content: center;
  color: #7c3aed;
}
.benefit-visual i[data-lucide], .benefit-visual svg { width: 30px; height: 30px; stroke-width: 2; }
.benefit-metric {
  font-size: 1.6rem;
  font-weight: 800;
  color: #7c3aed;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.benefit-card h3 { font-size: 1.15rem; margin: 0 0 8px; color: #1e293b; }
.benefit-card p { color: #475569; font-size: 0.92rem; line-height: 1.55; margin: 0; }
@media (max-width: 768px) { .ch3-cards { grid-template-columns: 1fr; } }

/* ─── Ch4 Témoignages (carrousel scroll-snap horizontal) ─── */
.ch4-content { max-width: 1100px; width: 100%; }
.ch4-disclaimer { font-size: 0.78rem; color: #94a3b8; text-align: center; margin: 8px 0 32px; font-style: italic; }
.testimonials-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
  padding: 8px 0 20px;
}
.testimonials-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marqueeTestimonials 180s linear infinite;
}
@keyframes marqueeTestimonials {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-track { animation: none; }
  .testimonials-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}
.t-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.t-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.t-card h3 { margin: 0; font-size: 1.05rem; color: #1e293b; }
.t-meta { color: #64748b; font-size: 0.82rem; margin: 2px 0 14px; }
.t-card blockquote { margin: 0 0 14px; font-style: italic; color: #475569; font-size: 0.92rem; line-height: 1.55; }
.t-metric {
  margin-top: auto;
  font-size: 0.85rem;
  color: #475569;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.t-metric strong { color: #7c3aed; font-size: 1rem; }

/* ─── Ch5 Tarifs ─── */
.ch5-content { max-width: 920px; width: 100%; text-align: center; }
.ch5-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}
.price-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 26px;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.price-card-pro {
  border: 2px solid #7c3aed;
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(124,58,237,0.12);
}
.badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #7c3aed;
  color: #fff;
  font-size: 0.7rem;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.price-card h3 { margin: 0 0 4px; font-size: 1.3rem; color: #1e293b; }
.price-pitch { color: #64748b; font-size: 0.9rem; margin: 0 0 14px; }
.price {
  font-size: 2.4rem;
  font-weight: 800;
  color: #1e293b;
  margin: 4px 0 18px;
  line-height: 1;
}
.per { font-size: 0.9rem; color: #64748b; font-weight: 500; }
.features { list-style: none; padding: 0; text-align: left; margin: 0 0 22px; flex-grow: 1; }
.features li {
  display: flex; align-items: flex-start;
  padding: 7px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms, transform 240ms;
  color: #475569;
  font-size: 0.92rem;
}
.features li::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  vertical-align: middle;
}
.price-card.in-view .features li {
  display: flex; align-items: flex-start; opacity: 1; transform: none; }
.price-card.in-view .features li:nth-child(1) { transition-delay: 80ms; }
.price-card.in-view .features li:nth-child(2) { transition-delay: 160ms; }
.price-card.in-view .features li:nth-child(3) { transition-delay: 240ms; }
.price-card.in-view .features li:nth-child(4) { transition-delay: 320ms; }
.price-card.in-view .features li:nth-child(5) { transition-delay: 400ms; }
.price-card.in-view .features li:nth-child(6) { transition-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
  .features li {
  display: flex; align-items: flex-start; opacity: 1; transform: none; transition: none; }
}
.ch5-legal { font-size: 0.75rem; color: #94a3b8; line-height: 1.55; max-width: 720px; margin: 18px auto 0; }
@media (max-width: 768px) {
  .ch5-cards { grid-template-columns: 1fr; }
  .price-card-pro { transform: none; }
}

/* ─── Ch6 FAQ ─── */
.ch6-content { max-width: 760px; width: 100%; }
.faq-accordion { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  transition: border-color 180ms;
}
.faq-item:hover { border-color: #c4b5fd; }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: #1e293b;
  outline: none;
  list-style: none;
  position: relative;
  padding-right: 24px;
  font-size: 0.98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: transform 200ms;
}
.faq-item[open] summary { color: #7c3aed; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq-item p { margin: 12px 0 4px; color: #475569; line-height: 1.55; font-size: 0.92rem; }
.faq-ask { text-align: center; margin-top: 28px; }

/* Modal FAQ ask stub */
#modalFaqAsk { display: none; }
#modalFaqAsk:not([hidden]) { display: flex; }
.modal-faq-text { margin: 0 0 20px; line-height: 1.55; color: #475569; }
.modal-faq-text a { color: #7c3aed; font-weight: 600; text-decoration: none; }
.modal-faq-text a:hover { text-decoration: underline; }

/* ─── Ch7 CTA final ─── */
.ch7-content { text-align: center; max-width: 720px; }
.ch7-h2 { font-size: clamp(2.25rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.022em; }
.ch7-sub { font-size: 1.25rem; color: #475569; margin: 0 0 32px; }
.ch7-rea { color: #64748b; font-size: 0.85rem; margin-top: 18px; }

/* ─── Bulle Onie : flip selon data-bubble-side pour eviter clip viewport ─── */
#onie-stage[data-bubble-side="right"] #onie-bubble {
  left: calc(100% - 75px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
#onie-stage[data-bubble-side="left"] #onie-bubble {
  left: auto;
  right: calc(100% - 75px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
#onie-stage[data-bubble-side="top"] #onie-bubble {
  bottom: auto;
  top: 20px;
}
/* default = bottom (deja en place) */

#onie-stage[data-bubble-side="hidden"] #onie-bubble { display: none !important; }


/* ─── Mobile fixes : H1 hero responsive + overflow guard ─── */
html, body { overflow-x: clip; }
@media (max-width: 768px) {
  .ch1-grid { grid-template-columns: 1fr; gap: 0; }
  .ch1-onie-slot { display: none; }
  .ch1-content { text-align: center; max-width: 100%; }
  .ch1-sub { margin-inline: auto; max-width: 540px; }
  .ch1-ctas { justify-content: center; }
  .ch1-trust { justify-content: center; }
  .ch1-h1 { font-size: 2.2rem; line-height: 1.1; }
  .ch1-sub { font-size: 1rem; }
  .chapter-h2, .ch7-h2 { font-size: 1.7rem; }
  .ch1-ctas { flex-direction: column; align-items: center; }
  .ch1-mockup-wireframe { width: 92%; }
  .ch2-grid { grid-template-columns: 1fr; padding: 0 8px; }
  .testimonials-track { animation-duration: 140s; }
  .t-card { flex: 0 0 84vw; }
  .price-card { padding: 24px 18px; }
  .price { font-size: 2rem; }
  .ch5-content, .ch6-content, .ch3-content { padding: 0 8px; }
  .benefit-card { padding: 22px 18px; }
}

/* ─── Spline swap (2026-05-08) ─── */
/* spline-swap */
/* Spline injecte canvas {style: width:100%; height:100%}, donc on dimensionne le parent. */
#onie-character {
  animation: none !important;
  overflow: visible !important;
  width: 360px !important;
  height: 360px !important;
}
#onie-canvas {
  display: block;
  background: transparent;
  pointer-events: none;
}
@media (max-width: 768px) {
  #onie-character { width: 180px !important; height: 180px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #onie-canvas { display: none; }
}


/* ═══════════════ MODERNISATION 09/05/2026 ═══════════════ */
/* Force Poppins partout, ajuste hierarchy + centrage + spacing. */

html, body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #0f172a;
  letter-spacing: -0.005em;
}

/* Heading rythm */
h1, h2, h3, h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.chapter-h2 {
  font-size: clamp(2rem, 3.6vw, 2.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 12px !important;
  color: #0f172a;
  text-align: center;
}
.chapter-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem) !important;
  font-weight: 400 !important;
  color: #475569;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 36px !important;
  line-height: 1.55;
}

/* Centering : every chapter content block centered horizontally */
.chapter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 5vw;
}
.ch1-content,
.ch3-content,
.ch4-content,
.ch5-content,
.ch6-content,
.ch7-content {
  margin: 0 auto;
}
.ch3-content, .ch6-content {
  text-align: center;
}

/* Buttons : icon alignment */
.btn-ghost, .btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn i[data-lucide], .btn svg.lucide {
  width: 18px; height: 18px;
  stroke-width: 2;
}

/* Trust badges spacing */
.ch1-trust {
  gap: 22px !important;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Benefit cards — modern padding + consistent height */
.benefit-card {
  padding: 32px 24px !important;
}
.benefit-card h3 {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
}
.benefit-card p {
  font-size: 0.95rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

/* Pricing cards — center-align headers */
.price-card h3 {
  font-weight: 700 !important;
  font-size: 1.3rem !important;
}
.price-card .price {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.price-card .features li {
  align-items: center !important;
  font-weight: 400;
  font-size: 0.95rem;
  color: #334155;
}

/* FAQ items — modern */
.faq-item summary {
  font-weight: 500 !important;
  font-size: 1rem !important;
  padding: 18px 32px 18px 4px !important;
}
.faq-item p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* CTA final ch7 */
.ch7-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  color: #475569;
  font-weight: 400;
}
.ch7-rea {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 400;
}

/* Lucide icons — defaults */
i[data-lucide], svg.lucide {
  display: inline-block;
  vertical-align: middle;
}

/* Mobile touch-up */
@media (max-width: 768px) {
  .chapter { padding: 7vh 5vw; }
  .chapter-h2 { font-size: 1.75rem !important; }
  .ch1-h1 { font-size: 2.25rem !important; }
  .ch1-trust { gap: 14px !important; font-size: 0.8rem; }
  .benefit-card { padding: 24px 18px !important; }
}


/* ─── Preloader (Onie cold load mask) ─── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 400ms ease, visibility 400ms ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.preloader-logo {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  color: #0f172a;
  letter-spacing: -0.02em;
  animation: preloader-fade-in 400ms ease;
}
.preloader-logo span { color: #7c3aed; }
.preloader-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #ede9fe;
  border-top-color: #7c3aed;
  animation: preloader-spin 700ms linear infinite;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .preloader-spinner { animation: none; border-top-color: #7c3aed; }
  .preloader-logo { animation: none; }
}


/* ─── Ch3 Benefit cards — ShineBorder (vanilla port, violet solo) ─── */
.benefit-card {
  position: relative;
  isolation: isolate;
  border: none !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.10);
}
.benefit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(circle at center, transparent 0%, transparent 35%, #7c3aed 50%, transparent 65%, transparent 100%);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: shine-pulse 14s infinite linear;
  will-change: background-position;
  z-index: 1;
}
.benefit-card:nth-child(2)::before { animation-delay: -4.6s; }
.benefit-card:nth-child(3)::before { animation-delay: -9.3s; }

.benefit-card:hover {
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.16), 0 0 0 1px rgba(124, 58, 237, 0.20) !important;
  border-color: transparent !important;
}
.benefit-card:hover::before {
  animation-duration: 6s;
}

@keyframes shine-pulse {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit-card::before { animation: none; opacity: 0.45; background-position: 50% 50%; }
}


/* ─── Ch4 Témoignages — 2-col layout (Onie left, marquee right) ─── */
.ch4-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 32px;
  width: 100%;
  margin-top: 24px;
}
.ch4-onie-slot { min-height: 380px; }
.ch4-right { width: 100%; min-width: 0; }
.ch4-content { max-width: 1280px !important; }

@media (max-width: 768px) {
  .ch4-grid { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .ch4-onie-slot { display: none; }
}

/* ─── Override: testimonials marquee never pauses on hover ─── */
.testimonials-marquee:hover .testimonials-track { animation-play-state: running !important; }



/* ─── Ch6 FAQ — buttons (Onie répond, pas d'accordion) ─── */
.faq-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.faq-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 200ms, background 200ms, transform 180ms, color 180ms;
}
.faq-btn:hover {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(124,58,237,0.01));
  transform: translateY(-1px);
}
.faq-btn .faq-btn-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  color: #94a3b8;
  transition: color 180ms, transform 180ms;
}
.faq-btn:hover .faq-btn-icon { color: #7c3aed; transform: translateX(2px); }
.faq-btn.is-active {
  border-color: #7c3aed;
  background: rgba(124,58,237,0.07);
  color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.30);
}
.faq-btn.is-active .faq-btn-icon { color: #7c3aed; }
@media (max-width: 768px) {
  .faq-buttons { grid-template-columns: 1fr; }
}


/* ─── Ch6 FAQ — 2-col layout (buttons left, Onie right slot) ─── */
.ch6-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}
.ch6-chat {
  width: 100%;
  max-width: 620px;
  min-width: 0;
}
.ch6-content { max-width: 1280px !important; }

@media (max-width: 768px) {
  .ch6-wrap { margin-top: 12px; }
  .ch6-chat { max-width: 100%; }
}


/* === FAQ Chat modal (2026-05-09 v2 — chat-mock style ch2) =============== */
.modal-chat {
  background: transparent !important;
  padding: 0 !important;
  max-width: 460px;
  width: 100%;
  border-radius: 20px;
  overflow: visible;
  box-shadow: none;
  border: none;
}
.modal-chat .modal-close {
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15,23,42,0.18);
  border-radius: 50%;
  font-size: 1.4rem;
  z-index: 5;
}
.modal-chat .modal-close:hover {
  background: #f3f4f6;
  color: #7c3aed;
}
.modal-chat .chat-mock {
  margin: 0;
  width: 100%;
  max-width: 100%;
}
.modal-chat .chat-body {
  height: 380px;
  scroll-behavior: smooth;
}

/* Live input form (replaces decorative chat-input) */
.chat-input-live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin: 0;
}
.chat-input-real {
  flex: 1;
  min-width: 0;
  background: #f1f5f9;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  color: #0f172a;
  outline: none;
  transition: background 180ms, box-shadow 180ms;
}
.chat-input-real:focus {
  background: #fff;
  box-shadow: 0 0 0 2px #7c3aed inset;
}
.chat-input-real::placeholder {
  color: #94a3b8;
}
.chat-send-live {
  cursor: pointer;
  background: #7c3aed;
  color: #fff;
}
.chat-send-live:hover {
  background: #6d28d9;
  transform: scale(1.05);
}
.chat-send-live:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  transform: none;
}

/* Suggestion chips (clickable related Q after an answer) */
.bubble.suggestions {
  background: transparent;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
  max-width: 90%;
}
.bubble-suggestion {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  color: #475569;
  cursor: pointer;
  transition: border-color 160ms, color 160ms, background 160ms, transform 160ms;
}
.bubble-suggestion:hover {
  border-color: #7c3aed;
  color: #7c3aed;
  background: rgba(124,58,237,0.06);
}
.bubble-suggestion:active {
  transform: scale(0.96);
}

/* Inline mailto fallback inside an Onie bubble */
.bubble.onie .bubble-mailto {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  background: #7c3aed;
  color: #fff !important;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms;
}
.bubble.onie .bubble-mailto:hover {
  background: #6d28d9;
}

@media (max-width: 540px) {
  .modal-chat { max-width: 100%; }
  .modal-chat .chat-body { height: 320px; }
  .chat-input-real { font-size: 16px; } /* prevent iOS zoom */
}

/* === ch6-chat (chat live in-page, centered, hosts pickbox in body) === */
.ch6-chat .chat-body { height: 460px; }
@media (max-width: 768px) {
  .ch6-chat .chat-body { height: 420px; }
}


/* === FAQ Carousel (2026-05-09 ch6 — full-width strip below grid) ========== */
.faq-carousel-wrap {
  margin-top: 28px;
  position: relative;
}
.faq-carousel-wrap::before,
.faq-carousel-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.faq-carousel-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg, #fafafa) 0%, transparent 100%);
}
.faq-carousel-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg, #fafafa) 0%, transparent 100%);
}
.faq-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 6px 12px 14px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.35) transparent;
  -webkit-overflow-scrolling: touch;
}
.faq-carousel::-webkit-scrollbar {
  height: 6px;
}
.faq-carousel::-webkit-scrollbar-track {
  background: transparent;
}
.faq-carousel::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.35);
  border-radius: 999px;
}
.faq-carousel::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.6);
}
.faq-carousel-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms, color 160ms, background 160ms, transform 160ms, box-shadow 160ms;
}
.faq-carousel-chip:hover {
  border-color: #7c3aed;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
}
.faq-carousel-chip:active {
  transform: scale(0.96);
}
.faq-carousel-chip.is-asked {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.4);
  color: #6d28d9;
}

@media (max-width: 768px) {
  .faq-carousel-wrap { margin-top: 20px; }
  .faq-carousel { padding: 4px 8px 12px 8px; gap: 8px; }
  .faq-carousel-chip { font-size: 0.8rem; padding: 8px 14px; }
}


/* === FAQ Carousel inside Onie bubble (2026-05-09 v4) ===================== */
.bubble.onie.bubble-carousel {
  max-width: 92% !important;
  padding: 12px 12px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble-carousel-intro {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.4;
}
.bubble-carousel .faq-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px 8px 2px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.35) transparent;
  -webkit-overflow-scrolling: touch;
  /* fade edges via mask */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.bubble-carousel .faq-carousel::-webkit-scrollbar { height: 5px; }
.bubble-carousel .faq-carousel::-webkit-scrollbar-track { background: transparent; }
.bubble-carousel .faq-carousel::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.35);
  border-radius: 999px;
}
.bubble-carousel .faq-carousel::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.6);
}


/* === FAQ Carousel inside Onie 3D bubble (2026-05-09 v5) =================== */
#onie-bubble.has-carousel {
  /* Bubble plus large pour accueillir le carousel + flèches */
  max-width: min(560px, 92vw);
  padding: 14px 14px 12px 14px;
}
.faq-onie-carousel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-onie-intro {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.4;
  font-weight: 500;
}
.faq-carousel-onie {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px 8px 2px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.faq-carousel-onie::-webkit-scrollbar { height: 5px; }
.faq-carousel-onie::-webkit-scrollbar-track { background: transparent; }
.faq-carousel-onie::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.4);
  border-radius: 999px;
}
.faq-carousel-onie::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.65);
}

@media (max-width: 768px) {
  #onie-bubble.has-carousel {
    max-width: 92vw;
    padding: 12px 12px 10px 12px;
  }
  .faq-onie-intro { font-size: 0.82rem; }
  .faq-carousel-chip { font-size: 0.78rem; padding: 7px 12px; }
}


/* === FAQ Carousel arrows (2026-05-09 v6) ================================ */
.faq-carousel-track {
  position: relative;
  display: block;
  padding: 0 38px; /* reserve l'espace aux flèches abs left/right */
}
.faq-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #7c3aed;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(124, 58, 237, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms, background 180ms, color 180ms, opacity 220ms;
}
.faq-carousel-arrow.prev { left: 0; }
.faq-carousel-arrow.next { right: 0; }
.faq-carousel-arrow:hover {
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
  background: #7c3aed;
  color: #fff;
}
.faq-carousel-arrow:active {
  transform: translateY(-50%) scale(1.02);
}
.faq-carousel-arrow.is-disabled {
  opacity: 0;
  pointer-events: none;
}
.faq-carousel-arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}
@media (max-width: 768px) {
  .faq-carousel-arrow { width: 30px; height: 30px; }
  .faq-carousel-arrow.prev { left: 0; }
  .faq-carousel-arrow.next { right: 0; }
}

/* Override: ch6 carousel mounted = bubble visible meme si span text vide */
#onie-bubble.has-carousel { display: block !important; }
#onie-stage[data-bubble-side="hidden"] #onie-bubble.has-carousel { display: block !important; }



/* === FAQ Category pills (2026-05-09 cat) ================================== */
.faq-onie-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  width: 100%;
}
.faq-onie-pill {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: #ffffff;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 8px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background 160ms, color 160ms, border-color 160ms, transform 120ms;
}
.faq-onie-pill:hover {
  background: rgba(124, 58, 237, 0.07);
  color: #5b21b6;
}
.faq-onie-pill.is-active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}
.faq-onie-pill:active { transform: scale(0.97); }

/* Hide chips outside active category */
.faq-carousel-chip.is-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .faq-onie-pill { font-size: 0.74rem; padding: 5px 10px; }
}


/* === Detach bubble from Onie character when has-carousel (2026-05-09 cat3) ===
   Onie character occupies stage upper half visually, push bubble lower so
   the 3D robot is never covered. */


/* === Chat disambiguation chips (2026-05-09 srch) ========================= */
.bubble.onie.disambig {
  background: #f8f5ff;
  border: 1px solid rgba(124, 58, 237, 0.15);
}
.disambig-label {
  font-size: 0.82rem;
  color: #475569;
  margin-bottom: 6px;
}
.disambig-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.disambig-chip {
  appearance: none;
  background: #ffffff;
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #5b21b6;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 140ms, border-color 140ms;
}
.disambig-chip:hover {
  background: rgba(124, 58, 237, 0.07);
  border-color: rgba(124, 58, 237, 0.5);
}


/* === FAQ Pickbox (2026-05-10 ch6 — pills+chips inside chat body) ========= */
.faq-pickbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #f8f5ff;
  border: 1px solid rgba(124, 58, 237, 0.14);
  margin-bottom: 4px;
}
.faq-pickbox .faq-onie-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
  width: 100%;
}
.faq-pickbox .faq-onie-pill {
  flex: 1 1 auto;
}
.faq-pickbox .faq-carousel-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.faq-pickbox .faq-carousel-onie {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 32px;
  margin: 0;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.faq-pickbox .faq-carousel-arrow.prev { left: 0; }
.faq-pickbox .faq-carousel-arrow.next { right: 0; }
@media (max-width: 768px) {
  .faq-pickbox { padding: 10px; }
  .faq-pickbox .faq-onie-pill { font-size: 0.78rem; padding: 6px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
 * Ch7 with embedded footer (last section shows footer in viewport)
 * ═══════════════════════════════════════════════════════════════ */
section.ch7-with-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}
.ch7-with-footer .ch7-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 42vh 24px 24px;
}
.ch7-footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 28px 0 22px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px) saturate(1.05);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.ch7-footer .footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 32px;
  align-items: center;
}
.ch7-footer .footer-brand { display: flex; align-items: center; gap: 12px; }
.ch7-footer .nav-logo-img { height: 22px; width: auto; }
.ch7-footer .footer-sub {
  color: #64748b; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.ch7-footer .footer-links {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  font-size: 0.85rem;
}
.ch7-footer .footer-links a { color: #475569; text-decoration: none; }
.ch7-footer .footer-links a:hover { color: #1A1A1A; }
.ch7-footer .footer-copy {
  color: #94a3b8; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.12em; text-align: right;
}
@media (max-width: 768px) {
  .ch7-with-footer .ch7-content { padding: 72px 20px 250px; }
  .ch7-footer { padding: 22px 0 18px; }
  .ch7-footer .footer-inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .ch7-footer .footer-brand { justify-content: center; }
  .ch7-footer .footer-copy { text-align: center; }
}


/* ═══════════════ Aurora background ch7 (Aceternity adapt) ═══════════════ */
section.ch7-with-footer { position: relative; }
section.ch7-with-footer > .ch7-content { position: relative; z-index: 1; }
section.ch7-with-footer > .ch7-footer { position: relative; z-index: 2; }
section.ch7-with-footer > .aurora-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora-layer {
  --aur-white: #fff;
  --aur-transparent: transparent;
  --aur-blue-500: #3b82f6;
  --aur-indigo-300: #a5b4fc;
  --aur-blue-300: #93c5fd;
  --aur-violet-200: #ddd6fe;
  --aur-blue-400: #60a5fa;
  --aur-white-gradient: repeating-linear-gradient(100deg, var(--aur-white) 0%, var(--aur-white) 7%, var(--aur-transparent) 10%, var(--aur-transparent) 12%, var(--aur-white) 16%);
  --aur-aurora: repeating-linear-gradient(100deg, var(--aur-blue-500) 10%, var(--aur-indigo-300) 15%, var(--aur-blue-300) 20%, var(--aur-violet-200) 25%, var(--aur-blue-400) 30%);
  position: absolute;
  inset: -10px;
  background-image: var(--aur-white-gradient), var(--aur-aurora);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px) invert(1);
  opacity: 0.5;
  will-change: transform;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}
.aurora-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--aur-white-gradient), var(--aur-aurora);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
}
@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-layer::after { animation: none; }
}

/* ─── Mobile hero ch1 — Onie inline bottom (2026-05-10) ─── */
@media (max-width: 768px) {
  /* Reserve l'espace en bas du content pour Onie inline (inconditionnel) */
  .ch1-content {
    padding-bottom: 220px;
  }
  /* Onie centered bottom inline (override le pinned bottom-right global) */
  #onie-stage {
    position: absolute !important;
    top: calc(100dvh - 188px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    transition: opacity 400ms ease-out !important;
  }
  /* Onie #1 reste a son layout hero pendant ch1 ET ch2 (transit). Sinon la bulle bascule
     en bas-droite (right:0) et part visuellement vers la gauche du viewport. */
  body[data-active-chapter='1'] #onie-character,
  body[data-active-chapter='2'] #onie-character {
    width: 180px !important;
    height: 180px !important;
  }
  body[data-active-chapter='1'] #onie-bubble,
  body[data-active-chapter='2'] #onie-bubble {
    position: absolute;
    bottom: 165px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    width: max-content;
    text-align: center;
  }
}

/* Trust badges — toggle full/mobile labels (2026-05-10) */
.ch1-trust .lbl-mobile { display: none; }
@media (max-width: 768px) {
  .ch1-trust .lbl-full { display: none; }
  .ch1-trust .lbl-mobile { display: inline; }
  .ch1-trust { flex-wrap: nowrap !important; gap: 12px !important; font-size: 0.78rem !important; }
}

/* Mobile hero — compress content (regles inconditionnelles : ch1-* n'existent que dans ch1).
   Avant : selecteur body[data-active-chapter='1'] uniquement -> au scroll vers ch2, le hero
   se decompressait derriere -> trust badges et CTA "decales" visuellement. */
@media (max-width: 768px) {
  .ch1-h1 { font-size: 2rem !important; margin: 0 0 12px !important; }
  .ch1-sub { font-size: 0.95rem !important; margin: 0 0 18px !important; line-height: 1.4 !important; }
  .ch1-ctas { margin-bottom: 18px !important; gap: 10px !important; }
  .ch1-trust { margin: 0 !important; }
}



/* Mobile ch3 — Onie réapparait sous la dernière carte, en flux du scroll (absolute) */
@media (max-width: 768px) {
  /* Réserve l'espace sous les cartes pour Onie + bulle. Calibré pour gap_top = gap_bottom = 15px avec ch4 padding-top 24px */
  .ch3-content,
  .ch4-content {
    padding-bottom: 212px;
  }
  /* Stage ancré ch3 — overrides persistent tant que .mobile-anchored-ch3 (n'a pas reset au passage ch4) */
  #onie-stage.mobile-anchored-ch3 {
    width: 100vw !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }
  #onie-stage.mobile-anchored-ch3 #onie-character {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  #onie-stage.mobile-anchored-ch3 #onie-bubble {
    position: absolute;
    bottom: 165px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
  }
}


/* Mobile — ch4 padding-top réduit pour équilibrer l'espace avec Onie+bulle qui termine en bas de ch3 */
@media (max-width: 768px) {
  section.chapter#ch4,
  section.chapter#ch5 { padding-top: 44px !important; justify-content: flex-start !important; }
}


/* ─── FAQ chat fullscreen mobile (clavier-friendly) ─── */
@media (max-width: 768px) {
  .ch6-chat.chat-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  .ch6-chat.chat-fullscreen .chat-body {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
  }
  .ch6-chat.chat-fullscreen .chat-input {
    flex-shrink: 0;
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }
  body.chat-fullscreen-active {
    overflow: hidden;
  }
  body.chat-fullscreen-active #nav,
  body.chat-fullscreen-active #onie-stage {
    display: none !important;
  }
  .ch6-chat.chat-fullscreen .chat-header-close {
    display: flex;
  }
}

/* Bouton X dans le header chat — masque par defaut (visible uniquement en mobile fullscreen) */
.chat-header-close {
  display: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(15,23,42,0.06);
  color: #0f172a;
  font-size: 1.05rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}


/* CTA btn-xl reduit en mobile (moins imposant qu'en desktop) */
@media (max-width: 768px) {
  .btn-xl {
    padding: 14px 28px !important;
    font-size: 1rem !important;
  }
}