/* style.css — styles principaux */

/* ── ICON SYSTEM ─────────────────────────────────────── */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
[data-icon] svg {
  width: 1em;
  height: 1em;
}

/* ── BASE ─────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.1; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
@media (max-width: 768px) { .container { padding: 0 var(--sp-4); } }

.section { padding: var(--sp-24) 0; }
.section-alt { background: var(--bg-alt); }
/* Utilitaires */
.text-purple { color: var(--purple); }
.btn-full { width: 100%; justify-content: center; }

.section-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: var(--sp-3);
}

/* ── SKIP LINK ───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  background: var(--purple);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  z-index: 200;
  transition: top 0.2s;
}
.skip-link:focus {
  top: var(--sp-2);
}

/* ── FOCUS VISIBLE ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-ready .anim-up { transition: none; opacity: 1; transform: none; }
  .configurateur-preview { animation: none; }
  .demo-callout-pill { animation: none; }
  .pricing-card,
  .stat-card,
  .feature-card-mobile,
  .testimonial-card,
  .ba-item,
  .step-item,
  .payment-card-after { transition: none; }
}

/* ── HOVER LIFT — cards ───────────────────────────────── */
/* Feature hero cards — bento overview */
.feature-hero {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.feature-hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20, 20, 18, 0.08), 0 2px 8px rgba(20, 20, 18, 0.04);
}

/* Payment card "before" — manquait de hover */
.payment-card-before {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.payment-card-before:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20, 20, 18, 0.06), 0 2px 8px rgba(20, 20, 18, 0.03);
}

/* Désactiver hover lift si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pricing-card:hover,
  .payment-card:hover,
  .feature-hero:hover {
    transform: none;
  }
}

/* ── BOUTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }
.btn-sm  { font-size: var(--text-sm);  padding: 8px 16px; }
.btn-md  { font-size: var(--text-base); padding: 12px 24px; }
.btn-xl  { font-size: var(--text-lg);  padding: 16px 32px; border-radius: var(--radius-lg); }

.btn-primary {
  background: var(--purple);
  color: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 55%);
  pointer-events: none;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary { transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn-primary:hover { background: #5b21b6; box-shadow: 0 8px 24px rgba(109,40,217,.18), 0 2px 6px rgba(20,20,18,.06); transform: translateY(-1px) scale(1.02); }
.btn-primary:active { transform: translateY(0) scale(1); }

.btn-ghost {
  background: transparent;
  color: var(--purple);
  border: 1.5px solid var(--purple);
  transition: background .18s ease, transform .18s ease;
}
.btn-ghost:hover { background: var(--purple-light); border-color: var(--purple); transform: translateY(-1px) scale(1.02); }
.btn-ghost:active { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost { transition: none; }
  .btn-primary:hover, .btn-ghost:hover { transform: none; }
}

.btn-white {
  background: #fff;
  color: var(--purple);
  font-weight: 700;
}
.btn-white:hover { background: var(--purple-light); }

/* ── NAV ─────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s;
}
#nav.scrolled {
  background: rgba(250,250,248,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.nav-logo {
  font-family: 'Epilogue', var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: #1a171f;
  margin-right: auto;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
}
.nav-links a {
  font-family: 'Work Sans', var(--font-display);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #56564f;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s;
  white-space: nowrap;
}
/* Connexion : séparateur vertical à gauche (Figma) */
.nav-link-utility { padding-left: 16px; border-left: 1px solid #e5e5e0; }
.nav-link-utility a { padding-left: 1px; }
/* CTA nav jaune — Figma: bg #fdcf17, Work Sans Bold 16px, radius 12px, overlay blanc */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fdcf17;
  color: #1a171f;
  font-family: 'Work Sans', var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  border-radius: 12px;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.18s, transform 0.18s;
}
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135.76deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.nav-cta:hover { opacity: 0.92; transform: translateY(-1px); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--purple);
  transition: width 0.25s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
.nav-toggle {
  display: none;
  font-size: 22px;
  color: var(--text);
  padding: var(--sp-2);
}

/* Mobile nav */
.nav-mobile-menu {
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: rgba(250,250,248,0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
  transform: translateY(-110%);
  transition: transform 0.3s ease;
  z-index: 99;
}
@media (max-width: 768px) {
  .nav-mobile-menu { display: flex; }
}
.nav-mobile-menu.open { transform: translateY(0); }
.nav-mobile-menu a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  padding: var(--sp-3) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
  .nav-links, #nav .btn-primary, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* ── ANIMATIONS — Progressive Enhancement ─────────────── */
/* .anim-up ne cache RIEN par défaut — le contenu est visible sans JS */
/* JS ajoute .js-ready sur <html> pour activer les animations */

.js-ready .anim-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}
.js-ready .anim-up.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger via CSS delay */
.js-ready [data-stagger] .anim-up:nth-child(1) { transition-delay: 0s; }
.js-ready [data-stagger] .anim-up:nth-child(2) { transition-delay: 0.08s; }
.js-ready [data-stagger] .anim-up:nth-child(3) { transition-delay: 0.16s; }
.js-ready [data-stagger] .anim-up:nth-child(4) { transition-delay: 0.24s; }
.js-ready [data-stagger] .anim-up:nth-child(5) { transition-delay: 0.32s; }
.js-ready [data-stagger] .anim-up:nth-child(6) { transition-delay: 0.40s; }

/* ── HERO ─────────────────────────────────────────────── */
/*
 * Design Figma node 583:998 — section.hero v3 @1280px.
 * Section = 1280×839px (collage) + 64px nav = 903px total.
 *
 * X positions : calc(100% - 1280px + figma_x)
 *   → centre dans le container 1280px, responsive.
 * Y positions : figma_collage_y + 64px (hauteur nav)
 *   (le collage Figma commence après la nav, y=0 = dessous de la nav)
 */
.hero {
  position: relative;
  padding-top: 139px;  /* 64px nav + 75px (text.top dans collage Figma) */
  padding-bottom: 64px;
  overflow: hidden;
  min-height: 839px;   /* hauteur du collage Figma */
  background: #fffdfb;
}

/* ── Texte ── */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 764px;   /* Figma: w=764px */
}

/* Figma: font=Epilogue Bold 96px / line-height=112px / tracking=-2.24px */
.hero-heading {
  font-family: 'Epilogue', var(--font-display);
  font-size: 96px;
  line-height: 112px;
  letter-spacing: -2.24px;
  font-weight: 700;
  color: #1a171f;
  margin-bottom: 24px;  /* gap=24px dans le flex Figma */
  font-feature-settings: "liga" 0;
}
.hero-accent { color: #6d28d9; }

/* Figma: Work Sans Regular 22px / line-height=35.2px / tracking=-0.88px */
.hero-sub {
  font-family: 'Work Sans', var(--font-body);
  font-size: 22px;
  line-height: 35.2px;
  letter-spacing: -0.88px;
  color: #56564f;
  width: 508px;        /* Figma: w=508px */
  margin-bottom: 24px;
  font-feature-settings: "zero" 1;
}

/* Figma: div.hero-ctas — w=484px justify-between pt=8px */
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding-top: 8px;
  width: 484px;        /* Figma: w=484px */
  column-gap: calc(484px - 206px - 152px); /* space between the two buttons */
}

/* Figma: h=67px px=32px radius=24px Work Sans Bold 22px tracking=-0.44px */
.btn-hero {
  display: inline-flex;
  align-items: center;
  height: 67px;
  padding: 0 32px;
  font-family: 'Work Sans', var(--font-display);
  font-size: 22px;
  line-height: 33px;
  font-weight: 700;
  letter-spacing: -0.44px;
  border-radius: 24px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.18s, transform 0.18s;
}
.btn-hero:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-hero--orange {
  background: #fe7e4f;
  color: #1a171f;
  position: relative;
  overflow: hidden;
}
.btn-hero--orange::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(134.29deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.btn-hero--lavender {
  background: #dbd1ff;
  color: #1a171f;
}

/* ── HERO COLLAGE — overlay absolute full-width ── */
/*
 * Positionné en absolu sur toute la section.
 * Positions X : calc(100% - 1280px + figma_x)   → centre dans 1280px container
 * Positions Y : figma_collage_y + 64px          → décalage nav
 */
.hero-collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Aura — Figma collage: left=-45 top=196 w=1239.79 rotate=-162.41deg scaleY(-1) */
/* Y section = 196+64 = 260px */
.hc-aura {
  position: absolute;
  /* Figma : aura centrée dans un box left=-45 top=196 w=1239.791 h=798.866 (collage),
     img étendue par inset -21.13%(V) -8.69%(H) → ~1350.6×673.3, puis rotate+scaleY(-1). */
  left: calc(100% - 1280px + 574.896px);  /* centre X = -45 + 1239.791/2 */
  top: 659.433px;                        /* centre Y section = 196 + 798.866/2 + 64 nav */
  width: 1350.6px;
  height: 673.3px;
  transform: translate(-50%, -50%) rotate(-162.41deg) scaleY(-1);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Photo — Figma collage: left=758 top=197 w=687 h=597 blur=7.5px */
/* Image intérieure: left=-55.74% w=155.74% (affiche la partie droite = étudiants) */
/* Y section = 197+64 = 261px */
.hc-photo-wrap {
  position: absolute;
  left: calc(100% - 1280px + 758px);  /* ancrage droite : voir substitution 100% - 1280px */
  top: 261px;
  width: 522px;
  height: auto;
  overflow: visible;   /* détourage transparent : aucun crop ni masque */
  z-index: 1;
}
.hc-photo {
  display: block;
  width: 100%;      /* détourage affiché à sa taille naturelle, sans zoom */
  height: auto;
  max-width: none;  /* sinon reset.css bride à 100% */
}

/* Event card — Figma collage: left=847 top=87 w=293.365 rotate=-5.67deg */
/* Y section = 87+64 = 151px */
.hc-card {
  position: absolute;
  left: calc(100% - 1280px + 847px);  /* = calc(50% + 207px) */
  top: 151px;
  width: 293.365px;
  background: #ffffff;
  border: 0.838px solid #e5e5e0;
  border-radius: 13.411px;
  box-shadow: 0 1.676px 5.565px rgba(0,0,0,0.1);
  padding: 13.411px;
  display: flex;
  gap: 11.735px;
  align-items: flex-start;
  transform: rotate(-5.67deg);
  z-index: 3;
  overflow: visible;
}

.hc-card-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #6d28d9;
  color: #fff;
  border-radius: 10.058px;
  width: 50.291px;
  height: 51.968px;
  flex-shrink: 0;
  overflow: hidden;
}
.hc-card-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21.793px;
  line-height: 1;
}
.hc-card-month {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 9.22px;
  letter-spacing: 0.8382px;
}

.hc-card-body {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 4.191px;
  overflow: hidden;
}
.hc-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.249px;
  color: #141412;
  white-space: nowrap;
  line-height: normal;
}
.hc-card-hint {
  font-family: var(--font-body);
  font-size: 10.896px;
  color: #6b6b64;
  line-height: normal;
  height: 16.764px;
  width: 201.165px;
  overflow: hidden;
}
.hc-card-row {
  display: flex;
  align-items: center;
  gap: 5.029px;
  font-family: var(--font-body);
  font-size: 10.896px;
  color: #141412;
  white-space: nowrap;
  overflow: hidden;
}
.hc-card-spacer { height: 2.515px; }
.hc-card-note {
  font-family: var(--font-body);
  font-size: 10.058px;
  color: #6b6b64;
  height: 16.764px;
  width: 201.165px;
  overflow: hidden;
  line-height: normal;
}
.hc-card-badge {
  position: absolute;
  top: 10.9px;
  left: 233.02px;
  background: #fef3c7;
  color: #d97706;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9.22px;
  padding: 2.515px 6.705px;
  border-radius: 6.705px;
  white-space: nowrap;
  line-height: normal;
}

/* Notification — Figma collage: left=617 top=483 w=229.879 rotate=2.36deg */
/* Y section = 483+64 = 547px */
.hc-notif {
  position: absolute;
  left: calc(100% - 1280px + 617px);  /* = calc(50% - 23px) */
  top: 547px;
  width: 229.879px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(32.327px);
  -webkit-backdrop-filter: blur(32.327px);
  border-radius: 8.62px;
  padding: 7.184px 0;
  transform: rotate(2.36deg);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5.747px;
  overflow: hidden;
  /* Figma layered background */
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.4);
}
/* Figma multi-layer bg simulé en CSS */
.hc-notif::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(171,171,171,0.5);
  mix-blend-mode: luminosity;
  border-radius: inherit;
}
.hc-notif::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.5);
  border-radius: inherit;
}

.hc-notif-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  height: 14.367px;
  padding: 0 11.49px 0 7.18px;
  overflow: hidden;
}
.hc-notif-logo {
  width: 14.367px;
  height: 14.367px;
  border-radius: 3px;
  flex-shrink: 0;
}
.hc-notif-app {
  font-size: 8.62px;
  font-weight: 510;
  color: rgba(0,0,0,0.49);
  text-transform: uppercase;
  letter-spacing: -0.0862px;
  flex: 1;
  padding-left: 4.75px;
  font-family: -apple-system, var(--font-display);
}
.hc-notif-time {
  font-size: 8.62px;
  font-weight: 510;
  color: rgba(0,0,0,0.49);
  letter-spacing: -0.0862px;
  text-transform: lowercase;
  font-family: -apple-system, var(--font-display);
}
.hc-notif-text {
  position: relative;
  z-index: 1;
  font-size: 10.057px;
  font-weight: 700;
  color: rgba(0,0,0,0.8);
  letter-spacing: -0.1006px;
  padding: 0 8.62px;
  line-height: normal;
  font-family: -apple-system, var(--font-display);
}

/* Badges — Figma: size=83-87.5px / padding=18px / radius=36px */
.hc-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  padding: 18px;
  filter: drop-shadow(0 4px 2.5px rgba(20,20,18,0.1));
  z-index: 3;
}

/* Badge vert — Figma collage: left=853 top=369 size=83 rotate=-9.79deg */
/* Y section = 369+64 = 433px */
.hc-badge--green {
  background: #90ed92;
  left: calc(100% - 1280px + 853px);  /* = calc(50% + 213px) */
  top: 433px;
  width: 83.189px;
  height: 83.189px;
  transform: rotate(-9.79deg);
}

/* Badge orange — Figma collage: left=1165.5 top=85.45 size=87.581 rotate=14.33deg */
/* Y section = 85.45+64 = 149.45px */
.hc-badge--orange {
  background: #fe7e4f;
  left: calc(100% - 1280px + 1165.5px);  /* = calc(50% + 525.5px) */
  top: 149px;
  width: 87.581px;
  height: 87.581px;
  transform: rotate(14.33deg);
}

@media (max-width: 1280px) {
  .hero-heading { font-size: clamp(3rem, 7.5vw, 96px); line-height: 1.17; }
  .hero-sub { width: min(508px, 90%); }
  .hero-ctas { width: auto; column-gap: 16px; }
}

@media (max-width: 1100px) {
  /* Sous 1100px : on réduit le collage (ancré bas-droite) pour libérer le texte */
  .hero-collage { transform: scale(0.8); transform-origin: bottom right; }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 96px;
    min-height: auto;
  }
  .hero-collage { display: none; }
  .hero-heading { font-size: clamp(2.5rem, 9vw, 3.5rem); line-height: 1.1; letter-spacing: -1px; }
  .hero-sub { width: 100%; font-size: 1.1rem; line-height: 1.6; letter-spacing: -0.4px; }
  .hero-ctas { width: auto; column-gap: 12px; }
  .btn-hero { height: 56px; font-size: 1.1rem; padding: 0 24px; }
}

/* ── TRUST BAR ────────────────────────────────────────── */
.trust-bar {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
}
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3) var(--sp-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 500;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.trust-item [data-icon] {
  color: var(--purple);
  font-size: 16px;
}
@media (max-width: 768px) {
  .trust-bar-inner { justify-content: center; gap: var(--sp-3) var(--sp-4); }
}

/* ── CLAIM BENTO (asymétrique 2:1) ────────────────────── */
.claim-bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}
.claim-primary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-12) var(--sp-12) var(--sp-16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.claim-primary:hover {
  box-shadow: 0 8px 24px rgba(20,20,18,0.04);
}
.claim-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}
.claim-headline {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.claim-sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 540px;
  line-height: 1.5;
  margin: 0;
}
.claim-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-6);
}
.claim-mini {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.claim-mini:hover {
  border-color: var(--purple);
}
.claim-mini-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--purple);
  line-height: 1;
}
.claim-mini-lbl {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .claim-bento { grid-template-columns: 1fr; }
  .claim-primary { padding: var(--sp-8); }
}

/* ── PROBLÈME / SOLUTION ──────────────────────────────── */
.problem-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  max-width: 700px;
  margin-bottom: var(--sp-12);
  line-height: 1.05;
}
.before-after-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.before-col, .after-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: opacity 0.3s ease;
}
.before-after-grid:has(.before-col:hover) .after-col,
.before-after-grid:has(.after-col:hover) .before-col { opacity: 0.45; }
.col-header {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--sp-2);
}
.before-col .col-header { color: var(--text-muted); }
.after-col .col-header { color: var(--purple); border-color: var(--purple); }

.ba-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  transition: transform 0.2s ease;
}
.ba-item:hover { transform: translateX(4px); }
.before-col .ba-item { color: var(--text-muted); background: var(--bg); }
.before-col .ba-item .ba-icon { color: var(--text-light, #A8A89E); }
.after-col .ba-item  { color: var(--text); background: var(--purple-light); }
.after-col .ba-item .ba-icon { color: var(--purple); }
.after-col .ba-item strong { font-weight: 600; color: var(--text); }
.ba-warn { color: var(--gold, #D97706); font-weight: 700; }
.ba-good { color: var(--gold, #D97706); font-weight: 700; }
.ba-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.before-col .col-header [data-icon="x"] { color: var(--gold, #D97706); }
.after-col .col-header [data-icon="check"] { color: var(--purple); }
@media (max-width: 768px) { .before-after-grid { grid-template-columns: 1fr; } }

/* ── FEATURES (scroll story) ──────────────────────────── */
.features-section { padding: var(--sp-24) 0; overflow: hidden; }
.features-header { text-align: center; margin-bottom: var(--sp-16); }
.features-header h2 { font-size: var(--text-3xl); font-weight: 700; }

/* Desktop: scroll story pinned */
.features-sticky-wrapper {
  position: relative;
}
.features-sticky {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.features-text-col { position: sticky; top: 120px; }
.features-progress {
  width: 3px;
  background: var(--border);
  border-radius: 2px;
  height: 240px;
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.features-progress-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--purple);
  border-radius: 2px;
  height: 0%;
  transition: height 0.3s ease;
}
.feature-slide { display: none; }
.feature-slide.active { display: block; }
.feature-slide h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}
.feature-slide p {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}
.feature-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.feature-tag {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-light);
  border-radius: var(--radius-xl);
  padding: 4px 12px;
}
.feature-icon { font-size: 32px; margin-bottom: var(--sp-4); }

.features-visual-col { position: relative; }
.feature-mockup-wrapper {
  position: sticky;
  top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-mockup-bg {
  background: var(--bg-alt);
  border-radius: 32px;
  padding: var(--sp-8);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-phone {
  width: 260px;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(20,20,18,0.06);
}
.feature-phone img {
  width: 100%;
  display: block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Mobile: cards empilées */
.features-mobile { display: none; }
.feature-card-mobile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card-mobile:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.feature-card-mobile h3 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-3); }
.feature-card-mobile p  { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--sp-4); }
.feature-card-mobile .feature-phone {
  width: 100%; max-width: 220px;
  margin: var(--sp-4) auto 0;
}

@media (max-width: 768px) {
  .features-sticky-wrapper { display: none; }
  .features-mobile { display: block; }
}

/* ── CONFIGURATEUR ────────────────────────────────────── */
.configurateur-section {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 90% 30%, rgba(109,40,217,0.06), transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(217,119,6,0.04), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.configurateur-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(109,40,217,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(109,40,217,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}
.configurateur-section .container { position: relative; z-index: 1; }
.configurateur-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.configurateur-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: var(--sp-5);
}
.configurateur-content h2 {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: var(--sp-6);
  letter-spacing: -0.025em;
}
.configurateur-sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-8);
  max-width: 480px;
}
.configurateur-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.configurateur-features li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-base);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
}
.cf-icon {
  font-size: 18px;
  color: var(--purple);
  flex-shrink: 0;
}
.configurateur-cta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.configurateur-proof {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--sp-6);
  border-left: 1px solid var(--border);
}
.cp-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}
.cp-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.configurateur-live-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 12px 30px -6px rgba(109, 40, 217, 0.45),
    0 4px 10px -2px rgba(109, 40, 217, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
  white-space: nowrap;
}
.configurateur-live-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.25),
    0 0 12px rgba(255, 255, 255, 0.6);
  animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .configurateur-live-badge::before { animation: none; }
}
/* Config preview card — animation float retirée (jugée stressante) */
.configurateur-preview {
  position: relative;
}
.config-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(20,20,18,0.05);
}
.config-preview-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.config-dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.config-dot.red { background: #FF5F57; }
.config-dot.yellow { background: #FEBC2E; }
.config-dot.green { background: #28C840; }
.config-preview-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: 6px;
}
.config-preview-body {
  display: flex;
  gap: 0;
  padding: var(--sp-4);
  align-items: flex-start;
}
.config-modules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.config-col-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.config-module {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  cursor: default;
}
.config-module.active {
  background: var(--purple-light);
  color: var(--purple);
}
.config-phone-mini {
  display: flex;
  justify-content: center;
  padding: 0 var(--sp-4);
}
.config-phone-frame {
  width: 80px;
  background: #1A1A1A;
  border-radius: 18px;
  padding: 6px;
}
.config-phone-screen {
  background: #0F0F1A;
  border-radius: 13px;
  overflow: hidden;
  height: 140px;
  display: flex;
  flex-direction: column;
}
.config-app-header {
  padding: 6px 8px;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  color: white;
}
.config-app-content {
  flex: 1;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.config-post {
  background: var(--white-08);
  border-radius: 6px;
  height: 40px;
}
.config-post.short { height: 28px; }
.config-colors {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.config-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  /* Touch target padding for accessibility */
  padding: 0;
  position: relative;
}
.config-swatch::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.config-swatch.active { border-color: var(--text); }

@media (max-width: 768px) {
  .configurateur-grid { grid-template-columns: 1fr; }
  .configurateur-content h2 { font-size: var(--text-3xl); }
  .configurateur-cta-row { gap: var(--sp-4); }
  .configurateur-proof { padding-left: var(--sp-4); }
  .configurateur-section::before { background-size: 40px 40px; }
}

/* ── COMMENT ÇA MARCHE ────────────────────────────────── */
.steps-section { padding: var(--sp-24) 0; }
.steps-title { font-size: var(--text-3xl); font-weight: 700; text-align: center; margin-bottom: var(--sp-16); }
.steps-timeline {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding-left: 48px;
}
.steps-line {
  position: absolute;
  left: 16px; top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}
.steps-line-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--purple);
  border-radius: 2px;
  height: 0%;
  will-change: height;
}
.step-item {
  position: relative;
  margin-bottom: var(--sp-16);
  transition: transform 0.25s ease;
}
.step-item:hover { transform: translateX(6px); }
.step-item:last-child { margin-bottom: 0; }
.step-dot {
  position: absolute;
  left: -40px;
  top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--border);
  border: 3px solid var(--bg);
  transition: background 0.3s;
}
.step-item.reached .step-dot { background: var(--purple); }
.step-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--purple);
  line-height: 1;
  margin-bottom: var(--sp-3);
  opacity: 0.2;
  transition: opacity 0.3s;
}
.step-item.reached .step-number { opacity: 1; }
.step-item.reached .step-title { color: var(--text); }
.step-item.reached .step-desc  { color: var(--text-muted); }
.step-item:not(.reached) { opacity: 0.45; }
.step-item { transition: opacity 0.5s ease, transform 0.25s ease; }
.step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.step-desc {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── PAIEMENTS ────────────────────────────────────────── */
.payment-title { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--sp-12); }
.payment-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.payment-card {
  border-radius: var(--radius-md);
  padding: var(--sp-8);
}
.payment-card-before {
  background: #FFFBF5;
  border: 1px solid rgba(217,119,6,0.2);
  border-top: 3px solid var(--gold, #D97706);
}
.payment-card-after {
  background: var(--purple-light);
  border: 1px solid rgba(109,40,217,0.2);
  border-top: 3px solid var(--purple, #6D28D9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.payment-card-after:hover {
  box-shadow: 0 8px 24px rgba(20,20,18,0.05);
}
.payment-card-wallet {
  background: var(--purple-light);
  border: 1px solid rgba(109,40,217,0.15);
  border-top: 3px solid #8B5CF6;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.payment-card-wallet:hover {
  box-shadow: 0 8px 24px rgba(20,20,18,0.05);
}
.payment-card-wallet-badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: #EDE9FE;
  color: var(--purple);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(109,40,217,0.2);
}
.payment-card-before .payment-card-h3-label { color: var(--gold, #D97706); }
.payment-card-after .payment-card-h3-label  { color: var(--purple); }
.payment-card-wallet .payment-card-h3-label { color: #7C3AED; }
.payment-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.payment-row {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.payment-row:last-of-type { border-bottom: none; }
.payment-row .highlight { color: var(--gold); font-weight: 600; }
.payment-row .good { color: var(--purple); font-weight: 600; }
.payment-row-conclusion { font-weight: 600; color: var(--text-muted); }

.payment-trust {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.payment-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  padding: var(--sp-4) var(--sp-6);
}
.payment-trust-item + .payment-trust-item {
  border-left: 1px solid var(--border);
}
.payment-trust-icon {
  flex-shrink: 0;
  color: var(--purple);
}
.payment-trust-icon svg { width: 18px; height: 18px; display: block; }
.payment-trust-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.payment-trust-text span {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .payment-trust { flex-direction: column; }
  .payment-trust-item + .payment-trust-item { border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 900px) { .payment-cards { grid-template-columns: 1fr; } }

/* Tab différé & Portefeuille — flux SCA expliqués */
.payment-flows-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
@media (max-width: 768px) { .payment-flows-grid { grid-template-columns: 1fr; } }

.payment-flow {
  margin-top: var(--sp-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-8);
}
.payment-flow-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-8);
  text-align: center;
}
.payment-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.payment-flow-step {
  position: relative;
  padding-top: var(--sp-8);
}
.payment-flow-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: calc(-1 * var(--sp-4));
  top: var(--sp-12);
  color: var(--purple);
  font-size: 1.25rem;
  font-weight: 600;
}
.payment-flow-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple-light);
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment-flow-step h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-2);
}
.payment-flow-step p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.payment-flow-step strong { color: var(--text); }
.payment-flow-step em { color: var(--purple); font-style: normal; font-weight: 500; }
.payment-flow--compact .payment-flow-steps {
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.payment-flow--compact .payment-flow-step:not(:last-child)::after { display: none; }
.payment-flow--compact { margin-top: 0; padding: var(--sp-8); }
.payment-flow--compact .payment-flow-eyebrow { margin-bottom: var(--sp-6); }

@media (max-width: 768px) {
  .payment-flow-steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  .payment-flow-step:not(:last-child)::after { display: none; }
  .payment-flow { padding: var(--sp-8) var(--sp-6); }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .hero-grid { gap: var(--sp-6); }
  .hero h1 { font-size: var(--text-4xl); }
  .features-sticky { gap: var(--sp-8); }
  .configurateur-grid { gap: var(--sp-8); }
}

/* ── TARIFS ───────────────────────────────────────────── */
.pricing-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--sp-8);
}
.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  max-width: 900px;
  margin: 0 auto var(--sp-8);
  align-items: start;
}
.pricing-cards-single {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

/* Cards secondaires (Fondateur + Réseau/Fédération) */
.pricing-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  max-width: 900px;
  margin: 0 auto var(--sp-12);
}
.pricing-secondary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-6);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.pricing-secondary-badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--purple);
  background: var(--purple-light);
  border-radius: var(--radius-xl);
  padding: 4px 10px;
}
.pricing-secondary-badge-alt {
  color: #7c3f00;
  background: var(--gold-light);
}
.pricing-secondary-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pricing-secondary-price {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--text);
  margin: 0;
}
.pricing-secondary-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.pricing-secondary-card .btn {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

/* Bloc explication frais Stripe */
.pricing-stripe-explainer {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-8);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
}
.pricing-stripe-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  color: var(--text);
}
.pricing-stripe-text {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 var(--sp-3);
}
.pricing-stripe-fineprint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .pricing-secondary { grid-template-columns: 1fr; }
}
.pricing-card {
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
}
.pricing-card-featured:hover {
  box-shadow: 0 10px 32px rgba(20,20,18,0.08), 0 0 0 1px rgba(124,58,237,0.12);
}
.pricing-card-featured {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--purple);
  position: relative;
}
.pricing-card-featured .pricing-plan { color: var(--purple); }
.pricing-card-featured .pricing-price span { color: var(--text-muted); }
.pricing-card-featured .pricing-annual { color: var(--text-muted); }
.pricing-card-featured .pricing-features { color: var(--text); }
.pricing-includes {
  opacity: 0.6;
  font-size: var(--text-xs);
  margin-bottom: var(--sp-2);
}
.pricing-plan {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pricing-tagline {
  font-size: var(--text-sm);
  color: var(--muted, #6B6B64);
  margin-bottom: var(--sp-6);
}
.pricing-setup {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold, #D97706);
  margin-bottom: var(--sp-2);
}
.pricing-price {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
}
.pricing-price span {
  font-size: var(--text-lg);
  font-weight: 400;
  opacity: 0.6;
  letter-spacing: 0;
}
/* Variante tarif fondateur : prix barré + nouveau prix mis en avant */
.pricing-price .price-old {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  opacity: 0.45 !important;
  text-decoration: line-through;
  color: var(--text-light, #A8A89E);
}
.pricing-price .price-main {
  font-size: inherit !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--text);
}
.pricing-price .price-unit {
  font-size: var(--text-lg);
  font-weight: 400;
  opacity: 0.6;
  letter-spacing: 0;
}
.pricing-annual {
  font-size: var(--text-xs);
  color: var(--muted, #6B6B64);
  margin-bottom: var(--sp-8);
}
.pricing-features { margin-bottom: var(--sp-8); }
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  padding: var(--sp-2) 0;
  line-height: 1.5;
}
.pricing-feature-check { flex-shrink: 0; }
.pricing-card-featured .pricing-feature-check { color: var(--gold); }

.recommended-badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: #7c3f00;
  background: var(--gold-light);
  border-radius: var(--radius-xl);
  padding: 4px 10px;
}

/* ── Tarif fondateur (promo limited) ─────────────────────────────────────── */
.recommended-badge-founder {
  background: linear-gradient(135deg, #D97706 0%, #FFBB00 100%);
  color: #ffffff;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35);
  top: calc(var(--sp-4) * -1);
  right: 50%;
  transform: translateX(50%);
  white-space: nowrap;
  z-index: 2;
}
.pricing-card-founder {
  border-color: rgba(217, 119, 6, 0.45);
  box-shadow: 0 12px 40px rgba(217, 119, 6, 0.12), 0 4px 12px rgba(217, 119, 6, 0.08);
}
.pricing-card-founder:hover {
  border-color: rgba(217, 119, 6, 0.65);
  box-shadow: 0 20px 60px rgba(217, 119, 6, 0.18), 0 6px 16px rgba(217, 119, 6, 0.12);
}
.price-old {
  text-decoration: line-through;
  color: var(--text-light) !important;
  font-weight: 500 !important;
  margin-right: 6px;
  opacity: 0.7;
}
.pricing-price .price-old {
  font-size: 1.5rem !important;
  vertical-align: middle;
}
.price-new {
  color: #D97706;
  font-weight: 700;
}
.price-old-inline {
  display: inline-block;
  text-decoration: line-through;
  color: var(--text-light);
  font-size: 0.875em;
  margin-left: 6px;
  opacity: 0.7;
}
.pricing-founder-lock {
  margin-top: var(--sp-3);
  font-size: 12px;
  color: #7c3f00;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
}
.pricing-cta-inline {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.pricing-cta-reassure {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .recommended-badge-founder { font-size: 11px; padding: 5px 12px; }
}

.pricing-custom {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto var(--sp-12);
}
.pricing-custom a { color: var(--purple); font-weight: 600; text-decoration: underline; }

@media (max-width: 768px) {
  .pricing-cards { grid-template-columns: 1fr; max-width: 420px; }
  .pricing-cards-single { grid-template-columns: 1fr; max-width: 420px; }
}

/* ── Phone frame interactif (hero) — supprimé, collage Figma à la place ── */
.hero-phone-frame-outer {
  /* Variables alignées sur le mockup PNG (1080×1920). */
  --phone-w: 440px;
  --screen-top: 1.85%;
  --screen-bottom: 1.85%;
  --screen-left: 10.6%;
  --screen-right: 10.6%;
  --screen-radius-h: 7%;
  --screen-radius-v: 3.2%;

  position: relative;
  width: var(--phone-w);
  aspect-ratio: 1080 / 1920;
  margin: 0 auto;
  flex-shrink: 0;
  z-index: 1;
  /* Drop-shadow CSS sur l'alpha du PNG overlay pour donner du relief */
  filter:
    drop-shadow(0 48px 100px rgba(0, 0, 0, 0.32))
    drop-shadow(0 12px 40px rgba(0, 0, 0, 0.20));
}
/* Anciens éléments décoratifs (reflet, dynamic island, boutons latéraux)
   désormais inclus dans le PNG → masqués. */
.hero-phone-frame-outer::before,
.phone-btn-silent,
.phone-btn-vol1,
.phone-btn-vol2,
.phone-btn-power {
  display: none;
}
/* On réutilise ::after pour la home indicator (barre horizontale en bas). */
.hero-phone-frame-outer::after {
  content: '';
  position: absolute;
  bottom: 1.05%;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 0.3%;
  min-height: 4px;
  background: #141412;
  border-radius: 99px;
  z-index: 50;
  pointer-events: none;
}

/* Overlay PNG par-dessus l'iframe. */
.hero-phone-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 30;
  user-select: none;
}

/* Écran : positionné en absolute dans la zone définie par les variables. */
.phone-screen {
  position: absolute;
  top: var(--screen-top);
  bottom: var(--screen-bottom);
  left: var(--screen-left);
  right: var(--screen-right);
  overflow: hidden;
  border-radius: var(--screen-radius-h) / var(--screen-radius-v);
  background: #0F0F1A;
  z-index: 1;
}

.phone-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  margin: 0; padding: 0;
}

/* Shield au-dessus de l'iframe Flutter — laisse passer le scroll de page,
   se rétracte au click pour activer l'interaction avec l'app. */
.phone-iframe-shield {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
  border: 0;
  padding: 0 0 20px;
  border-radius: inherit;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.2s ease;
}
.phone-iframe-shield:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -4px;
}
.phone-iframe-shield:hover {
  background: rgba(20, 20, 18, 0.04);
}
.phone-iframe-shield-hint {
  background: rgba(20, 20, 18, 0.78);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.phone-iframe-shield:hover .phone-iframe-shield-hint {
  opacity: 1;
  transform: translateY(0);
}
.phone-iframe-shield.is-active {
  pointer-events: none;
  background: transparent;
}
.phone-iframe-shield.is-active .phone-iframe-shield-hint {
  display: none;
}

/* Toggle "Vue étudiant / Vue admin" — pill segmented control au-dessus du iPhone */
.demo-role-toggle {
  display: inline-flex;
  margin: 0 auto 16px;
  background: var(--surface-alt, #F3F3F0);
  border: 1px solid var(--border, #E5E5E0);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  align-self: center;
  /* Centrer dans .hero-visual qui peut être en grid */
  width: max-content;
}
.demo-role-toggle button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted, #6B6B64);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  letter-spacing: 0.01em;
}
.demo-role-toggle button:hover:not(.is-active) {
  color: var(--text, #141412);
}
.demo-role-toggle button.is-active {
  background: var(--purple, #6D28D9);
  color: #fff;
  box-shadow: 0 1px 4px rgba(109, 40, 217, 0.28);
}
.demo-role-toggle button:focus-visible {
  outline: 2px solid var(--purple, #6D28D9);
  outline-offset: 2px;
}

.demo-callout-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-light);
  border-radius: var(--radius-xl);
  padding: 5px 14px;
  animation: pulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(-3px); }
}

.demo-fallback-link {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-light);
  text-decoration: underline;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.demo-fallback-link:hover { opacity: 1; }

@media (max-width: 768px) {
  .hero-phone-frame-outer {
    --phone-w: 320px;
  }
  .hero-visual::before { width: 420px; height: 420px; }
}

/* ── FAQ ──────────────────────────────────────────────── */
.faq-section { padding: var(--sp-24) 0; }
.faq-title { font-size: var(--text-3xl); font-weight: 700; text-align: center; margin-bottom: var(--sp-12); }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
  padding: 0 var(--sp-3);
  margin: 0 calc(-1 * var(--sp-3));
  border-radius: var(--radius-sm);
}
.faq-item:hover { background: var(--bg-alt); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--purple); }
.faq-icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--purple);
  transition: transform 0.25s;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--purple); }
.faq-answer {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.7;
  padding-bottom: var(--sp-6);
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── CTA FINAL ────────────────────────────────────────── */
.cta-section {
  background: var(--purple);
  padding: var(--sp-24) 0;
  text-align: center;
  color: #fff;
}
.cta-section h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.cta-sub {
  font-size: var(--text-lg);
  color: var(--white-75);
  max-width: 480px;
  margin: 0 auto var(--sp-8);
  line-height: 1.6;
}
.cta-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  margin: var(--sp-8) 0;
}
.cta-proof-item {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white-80);
}
.cta-email {
  font-size: var(--text-sm);
  color: var(--white-55);
  margin-top: var(--sp-4);
}
.cta-email a { color: var(--white-75); text-decoration: underline; }
.cta-urgency {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold-light);
  background: var(--white-10);
  border-radius: var(--radius-xl);
  padding: 6px 16px;
  margin-bottom: var(--sp-8);
}

/* ── CONTACT — bouton mail + ligne tel + formulaire ────── */
.contact-cta-tel {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--white-80);
  margin: var(--sp-4) 0 var(--sp-2);
  font-weight: 500;
}
.contact-cta-tel a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--white-30, rgba(255,255,255,0.3));
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.contact-cta-tel a:hover { text-decoration-color: #fff; }

.contact-form-wrap {
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.contact-form-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-55);
  margin-bottom: var(--sp-6);
  text-align: center;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.contact-form-field-full { width: 100%; }
.contact-form-field > span {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white-80);
  letter-spacing: 0.01em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-body);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,0.4);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
}
.contact-form .btn-white {
  margin-top: var(--sp-3);
  align-self: center;
  min-width: 200px;
  justify-content: center;
}
@media (max-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr; }
}

/* ── PAGE CONTACT (light, split 2 colonnes) ───────────── */
/* Le bloc .contact-form ci-dessus était stylé fond sombre ;
   la page contact.html est claire : on redéfinit les couleurs
   des champs, scopées sous .contact-form-card. */
.feature-page {
  padding-top: calc(64px + var(--sp-12));
  padding-bottom: var(--sp-24);
}
.feature-breadcrumb {
  max-width: 1280px;
  margin: 0 auto var(--sp-8);
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.feature-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.feature-breadcrumb a:hover { color: var(--purple); }
.feature-breadcrumb-sep { color: var(--text-light); }
.feature-breadcrumb-current { color: var(--text); font-weight: 500; }

.contact-page-section { padding: 0; }
.contact-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

/* Colonne gauche : à qui tu parles */
.contact-split-info .eyebrow { margin-bottom: var(--sp-4); }
.contact-split-info h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--sp-5);
}
.contact-split-info .lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 var(--sp-8);
  max-width: 38ch;
}

.contact-founder {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contact-founder-photo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--purple-50);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.contact-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-founder-initials {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--purple);
  letter-spacing: 0.02em;
}
.contact-founder-id { display: flex; flex-direction: column; gap: 2px; }
.contact-founder-id strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
}
.contact-founder-id span { font-size: var(--text-sm); color: var(--text-muted); }

.contact-channels {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-channels li { display: flex; align-items: center; gap: var(--sp-3); }
.contact-channel-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--purple-50);
  color: var(--purple);
  display: grid;
  place-items: center;
}
.contact-channel-icon svg { width: 19px; height: 19px; }
.contact-channels a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  text-decoration-color: transparent;
  transition: color 0.2s;
}
.contact-channels a:hover { color: var(--purple); }

.contact-promises {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.contact-promise {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.contact-promise [data-icon] { color: var(--purple); display: inline-flex; }
.contact-promise svg { width: 16px; height: 16px; }

/* Colonne droite : carte formulaire (light) */
.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: 0 1px 2px rgba(20,20,18,0.04), 0 12px 32px -16px rgba(20,20,18,0.12);
}
.contact-form-card .contact-form-eyebrow {
  color: var(--text-muted);
  text-align: left;
  margin-bottom: var(--sp-5);
}
.contact-form-card .contact-form-field > span { color: var(--text); }
.contact-form-card .contact-form input[type="text"],
.contact-form-card .contact-form input[type="email"],
.contact-form-card .contact-form input[type="tel"],
.contact-form-card .contact-form textarea {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.contact-form-card .contact-form input::placeholder,
.contact-form-card .contact-form textarea::placeholder {
  color: var(--text-light);
}
.contact-form-card .contact-form input:focus,
.contact-form-card .contact-form textarea:focus {
  border-color: var(--purple);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--purple-50);
}
.contact-form-card .contact-form .btn {
  margin-top: var(--sp-3);
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; gap: var(--sp-12); }
  .feature-page { padding-top: calc(64px + var(--sp-8)); padding-bottom: var(--sp-16); }
  .contact-split-info .lead { max-width: none; }
}

/* ── FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: var(--text);
  padding: var(--sp-16) 0 var(--sp-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-about { font-size: var(--text-sm); color: var(--text-light); line-height: 1.6; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a {
  font-size: var(--text-sm);
  color: var(--text-light);
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid var(--white-08);
  padding-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-light);
}
.footer-tagline { color: var(--text-light); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Testimonials ─────────────────────────────────────────── */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-card {
  background: var(--white-08);
  border: 1px solid var(--white-12);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-align: left;
  transition: transform 0.25s ease, background 0.25s ease;
}
.testimonial-card:hover {
  background: var(--white-12);
}
.testimonial-text {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--white-85);
  margin-bottom: var(--sp-4);
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.testimonial-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: var(--text-sm); color: white; }
.testimonial-author span { font-size: var(--text-xs); color: var(--white-50); }

/* ── PRINT ───────────────────────────────────────────── */
@media print {
  #nav, .nav-mobile-menu, .skip-link,
  .hero-collage,
  .configurateur-preview, .features-visual-col,
  .features-sticky-wrapper, .cta-urgency { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section, .steps-section, .faq-section, .features-section { padding: 24pt 0; }
  .cta-section { background: #fff; color: #000; }
  .cta-section h2, .cta-section .cta-sub { color: #000; }
  a { color: var(--purple); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* ── FEATURES OVERVIEW GRID ──────────────────────────────── */
.features-overview-section { padding: var(--sp-16) 0 var(--sp-24); }
.features-overview-header {
  text-align: center;
  margin-bottom: var(--sp-12);
}
.features-overview-header h2 { font-size: var(--text-3xl); font-weight: 700; }
.features-overview-header p {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-top: var(--sp-4);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.features-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.feature-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-12) var(--sp-8) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  min-height: 280px;
}
.feature-hero:hover {
  box-shadow: 0 10px 32px rgba(20,20,18,0.05);
  border-color: var(--purple);
}
.feature-hero-num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.12em;
}
.feature-hero-icon {
  font-size: 64px;
  color: var(--purple);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  background: var(--purple-light);
}
.feature-hero-icon svg { width: 44px; height: 44px; }
.feature-hero h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.feature-hero p {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.feature-hero-cta {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--purple);
  margin-top: var(--sp-2);
}

.features-list {
  grid-column: span 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.features-list li {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.features-list a {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-6);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  height: 100%;
}
.features-list a:hover { background: var(--bg-alt); }
.feat-num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.12em;
  grid-row: 1 / span 2;
}
.feat-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.feat-blurb {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.45;
}
@media (max-width: 1024px) {
  .features-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .features-bento { grid-template-columns: 1fr; }
  .features-list { grid-column: span 1; grid-template-columns: 1fr; }
  .feature-hero { min-height: auto; padding: var(--sp-8); }
}

/* ── FEATURE DETAIL SECTIONS (dark) ─────────────────────── */
.feature-detail-section {
  background: var(--surface-card, #12121A);
  padding: var(--sp-24) 0;
  overflow: hidden;
}
.feature-detail-section + .feature-detail-section {
  border-top: 1px solid var(--surface-border, #2D2D45);
}
.feature-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.feature-detail-grid.reverse { direction: rtl; }
.feature-detail-grid.reverse > * { direction: ltr; }
.feature-detail-content { display: flex; flex-direction: column; gap: var(--sp-6); }
.feature-detail-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-400, #A78BFA);
}
.feature-detail-content h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary, #F5F5FF);
}
.feature-detail-content > p {
  font-size: var(--text-lg);
  color: var(--text-secondary, #9999BB);
  line-height: 1.65;
  max-width: 480px;
}
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-secondary, #9999BB);
  line-height: 1.55;
}
.feature-list-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.feature-list-item strong { color: var(--text-primary, #F5F5FF); font-weight: 600; }
.feature-detail-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-mockup-dark {
  background: var(--surface-elev, #1A1A2E);
  border: 1px solid var(--surface-border, #2D2D45);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.feature-mockup-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--surface-border, #2D2D45);
}
.feature-mockup-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary, #F5F5FF);
}
.fmock-badge {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--purple-400, #A78BFA);
  background: rgba(124,58,237,0.2);
  border-radius: 99px;
  padding: 2px 8px;
}
/* Mock post cards inside feature mockup */
.fmock-post {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.fmock-post-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.fmock-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--purple-500, #7C3AED);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: white;
  flex-shrink: 0;
}
.fmock-author {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #F5F5FF);
}
.fmock-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted-dark, #7A7A9B);
}
.fmock-post-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #F5F5FF);
  line-height: 1.3;
}
.fmock-post-body {
  font-size: 11px;
  color: var(--text-secondary, #9999BB);
  line-height: 1.5;
}
.fmock-actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-1);
}
.fmock-action {
  font-size: 10px;
  color: var(--text-muted-dark, #7A7A9B);
  display: flex;
  align-items: center;
  gap: 3px;
}
.fmock-tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  color: var(--purple-400, #A78BFA);
  background: rgba(124,58,237,0.15);
  border-radius: 99px;
  padding: 1px 7px;
}
.fmock-pinned {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  color: var(--gold-400, #FFBB00);
}
/* Poll mock */
.fmock-poll {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
}
.fmock-poll-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #F5F5FF);
  margin-bottom: var(--sp-2);
}
.fmock-poll-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 5px;
}
.fmock-poll-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  flex: 1;
  overflow: hidden;
}
.fmock-poll-fill {
  height: 100%;
  background: var(--purple-500, #7C3AED);
  border-radius: 3px;
}
.fmock-poll-label {
  font-size: 10px;
  color: var(--text-secondary, #9999BB);
  min-width: 80px;
}
.fmock-poll-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--purple-400, #A78BFA);
  min-width: 28px;
  text-align: right;
}
/* Chat mock */
.fmock-chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.fmock-msg {
  max-width: 80%;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.4;
}
.fmock-msg.incoming {
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary, #9999BB);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.fmock-msg.outgoing {
  background: var(--purple-800, #2D1468);
  color: var(--text-primary, #F5F5FF);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.fmock-msg-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted-dark, #7A7A9B);
  margin-bottom: 2px;
}
/* Shop mock */
.fmock-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.fmock-product {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: var(--sp-3);
}
.fmock-product-img {
  height: 44px;
  background: rgba(124,58,237,0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--sp-2);
}
.fmock-product-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary, #F5F5FF);
}
.fmock-product-price {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-400, #A78BFA);
}
.fmock-product-member {
  font-size: 9px;
  color: var(--gold-400, #FFBB00);
}
/* Loyalty mock */
.fmock-loyalty {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: var(--sp-4);
}
.fmock-points {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--gold-400, #FFBB00);
  line-height: 1;
}
.fmock-points-label {
  font-size: 10px;
  color: var(--text-muted-dark, #7A7A9B);
  margin-bottom: var(--sp-3);
}
.fmock-progress {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  margin-bottom: var(--sp-2);
  overflow: hidden;
}
.fmock-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--purple-500, #7C3AED), var(--gold-400, #FFBB00));
}
.fmock-next-reward {
  font-size: 10px;
  color: var(--text-secondary, #9999BB);
}
/* Admin mock */
.fmock-admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.fmock-admin-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: var(--sp-3);
  text-align: center;
}
.fmock-stat-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--purple-400, #A78BFA);
  line-height: 1;
}
.fmock-stat-label {
  font-size: 9px;
  color: var(--text-muted-dark, #7A7A9B);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .feature-detail-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .feature-detail-grid.reverse { direction: ltr; }
  .feature-detail-content h2 { font-size: var(--text-2xl); }
}

/* ── MINI-APPS SECTION ───────────────────────────────────── */
.mini-apps-section {
  background: var(--surface-card, #12121A);
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--surface-border, #2D2D45);
}
.mini-apps-header {
  text-align: center;
  margin-bottom: var(--sp-16);
}
.mini-apps-header h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary, #F5F5FF);
}
.mini-apps-header p {
  font-size: var(--text-lg);
  color: var(--text-secondary, #9999BB);
  margin-top: var(--sp-4);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.mini-apps-cta-banner {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  margin-top: var(--sp-6);
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(255, 187, 0, 0.08));
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 14px;
  color: var(--text-primary, #F5F5FF);
  font-size: 14px;
  line-height: 1.55;
  max-width: 720px;
}
.mini-apps-cta-banner .mab-icon {
  flex-shrink: 0;
  color: var(--gold, #FFBB00);
  margin-top: 2px;
}
.mini-apps-cta-banner strong {
  color: var(--purple-400, #A78BFA);
  font-weight: 600;
}
/* ── HUB — 3 zones (À la une / Tes stations / Découvrir) ── */
.hub-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-16);
}
.hub-zone {
  position: relative;
  background: var(--surface-elev, #1A1A2E);
  border: 1px solid var(--surface-border, #2D2D45);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform 0.22s ease, border-color 0.22s, box-shadow 0.22s;
}
.hub-zone:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.hub-zone-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--purple-400, #A78BFA);
  align-self: flex-start;
}
.hub-zone h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary, #F5F5FF);
  margin: 0;
  letter-spacing: -0.02em;
}
.hub-zone p {
  font-size: var(--text-sm);
  color: var(--text-secondary, #9999BB);
  line-height: 1.6;
  margin: 0;
}

/* ── HUB — Catalogue 9 canaux ──────────────────────────── */
.hub-channels-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary, #9999BB);
  margin: 0 0 var(--sp-6);
  text-align: center;
}
.hub-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.hub-channel {
  position: relative;
  background: var(--surface-elev, #1A1A2E);
  border: 1px solid var(--surface-border, #2D2D45);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  transition: transform 0.22s ease, border-color 0.22s, background 0.22s;
}
.hub-channel::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--accent, #A78BFA);
  border-radius: 0 3px 3px 0;
  opacity: 0.65;
  transition: opacity 0.22s;
}
.hub-channel:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #A78BFA);
}
.hub-channel:hover::before { opacity: 1; }
.hub-channel-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #A78BFA) 18%, transparent);
  color: var(--accent, #A78BFA);
}
.hub-channel-icon svg { width: 22px; height: 22px; }
.hub-channel h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary, #F5F5FF);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.hub-channel p {
  font-size: 0.8125rem;
  color: var(--text-secondary, #9999BB);
  line-height: 1.5;
  margin: 0;
}

.hub-custom-note {
  margin-top: var(--sp-12);
  padding: var(--sp-5) var(--sp-6);
  background: rgba(255, 187, 0, 0.08);
  border: 1px solid rgba(255, 187, 0, 0.22);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-primary, #F5F5FF);
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.hub-custom-note strong {
  color: var(--gold, #FFBB00);
  font-weight: 600;
}

@media (max-width: 900px) {
  .hub-zones { grid-template-columns: 1fr; }
  .hub-channels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hub-channels { grid-template-columns: 1fr; }
  .hub-zone { padding: var(--sp-6); }
}

/* ── ADMIN OVERVIEW SECTION ──────────────────────────────── */
.admin-section {
  background: var(--surface-card, #12121A);
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--surface-border, #2D2D45);
}
.admin-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-12);
}
.admin-stat {
  background: var(--surface-elev, #1A1A2E);
  border: 1px solid var(--surface-border, #2D2D45);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-align: center;
}
.admin-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--purple-400, #A78BFA);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.admin-stat-label {
  font-size: var(--text-xs);
  color: var(--text-secondary, #9999BB);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .admin-stats-strip { grid-template-columns: 1fr 1fr; }
}

/* ── VALIDATION SECTION ──────────────────────────────────── */
.validation-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  counter-reset: step;
}
.validation-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  counter-increment: step;
}
.validation-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--purple);
}
.validation-step [data-icon] {
  color: var(--purple);
  width: 20px;
  height: 20px;
}
.validation-arrow { display: none; }
@media (max-width: 768px) {
  .validation-flow { grid-template-columns: 1fr 1fr; }
}

/* ── BROADCAST SECTION MOCKUP ────────────────────────────── */
.fmock-broadcast {
  background: rgba(255,185,0,0.08);
  border: 1px solid rgba(255,185,0,0.25);
  border-radius: 10px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.fmock-broadcast-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-400, #FFBB00);
  margin-bottom: var(--sp-2);
}
.fmock-broadcast-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #F5F5FF);
}
.fmock-broadcast-body {
  font-size: 11px;
  color: var(--text-secondary, #9999BB);
  margin-top: 3px;
}
.fmock-channel-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.fmock-channel {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px var(--sp-3);
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.fmock-channel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fmock-channel-name {
  font-size: 11px;
  color: var(--text-secondary, #9999BB);
  flex: 1;
}
.fmock-channel-count {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted-dark, #7A7A9B);
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — convert all dark sections to light
   (Footer + .cta-section restent volontairement sombres)
═══════════════════════════════════════════════════════════ */

:root {
  --surface-card:    #FFFFFF;
  --surface-elev:    #F3F3F0;
  --surface-border:  rgba(20,20,18,0.08);
  --text-primary:    #141412;
  --text-secondary:  #6B6B64;
  --text-muted-dark: #A8A89E;
  --purple-400:      #6D28D9;
  --purple-500:      #6D28D9;
  --purple-700:      rgba(109,40,217,0.18);
  --purple-800:      #6D28D9;
  --gold-400:        #D97706;
}

.feature-detail-section {
  background: var(--bg);
}
.feature-detail-section:nth-of-type(even) {
  background: var(--bg-alt);
}
.feature-detail-section + .feature-detail-section {
  border-top-color: rgba(20,20,18,0.06);
}
.mini-apps-section,
.admin-section {
  background: var(--bg-alt);
  border-top-color: rgba(20,20,18,0.06);
}

.feature-mockup-dark {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(20,20,18,0.05);
}
.feature-mockup-header {
  border-bottom-color: var(--border);
}

.fmock-post,
.fmock-poll,
.fmock-product,
.fmock-admin-stat,
.fmock-channel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.fmock-poll-bar,
.fmock-progress {
  background: rgba(20,20,18,0.08);
}
.fmock-loyalty,
.fmock-broadcast {
  background: var(--purple-light);
  border: 1px solid rgba(109,40,217,0.15);
}
.fmock-msg.incoming {
  background: rgba(20,20,18,0.06);
  color: var(--text);
}
.fmock-msg.outgoing {
  background: var(--purple);
  color: #fff;
}
.fmock-product-img {
  background: var(--purple-light);
}
.fmock-admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.fmock-stat-value {
  color: var(--purple);
}
.fmock-stat-label {
  color: var(--text-muted);
}
.mini-apps-cta-banner {
  background: linear-gradient(135deg, rgba(109,40,217,0.06), rgba(217,119,6,0.04));
  border-color: rgba(109,40,217,0.18);
  color: var(--text);
}
.admin-stat {
  background: var(--surface);
  border-color: var(--border);
}


/* ── Phone shell wrapper (image carries the device frame) ── */
.phone-shell {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  perspective: 1000px;
}
.feature-detail-visual:hover .phone-shell {
  transform: rotateY(-3deg) rotateX(2deg) translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
  .phone-shell { transition: none; }
  .feature-detail-visual:hover .phone-shell { transform: none; }
}
.screen-img {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
}


/* ── Feed screen mockup (HTML inline) ───────────────────── */
.feed-mock {
  width: 280px;
  max-width: 100%;
  background: #fff;
  border-radius: 37px;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}
.feed-mock-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 2px;
}
.feed-mock-status-time {
  font-size: 11px;
  font-weight: 700;
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
}
.feed-mock-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #000;
  padding: 4px 16px 8px;
  margin: 0;
}
.feed-mock-post {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.feed-mock-ph {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.feed-mock-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #7C3AED;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}
.feed-mock-meta { flex: 1; }
.feed-mock-author {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
}
.feed-mock-ago { font-size: 9px; color: #888; }
.feed-mock-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #7C3AED;
  font-family: 'Space Grotesk', sans-serif;
  white-space: nowrap;
}
.feed-mock-img {
  width: 100%;
  height: 96px;
  border-radius: 10px;
  margin-bottom: 8px;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.feed-mock-img::after {
  content: 'BASE';
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.25);
}
.feed-mock-text {
  font-size: 10px;
  font-weight: 700;
  color: #000;
  margin: 0 0 7px;
  font-family: 'Space Grotesk', sans-serif;
}
.feed-mock-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.feed-mock-action {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #555;
  font-family: 'Space Grotesk', sans-serif;
}
.feed-mock-action svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
}
.feed-mock-action-heart { color: #e53e3e; }
.feed-mock-action-heart svg { fill: #e53e3e; }
.feed-mock-faq {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.feed-mock-faq-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #7C3AED;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #7C3AED;
  flex-shrink: 0;
}
.feed-mock-faq-label {
  font-size: 10px;
  font-weight: 700;
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
}
.feed-mock-faq-count { font-size: 9px; color: #888; }
.feed-mock-desc {
  font-size: 9px;
  color: #555;
  line-height: 1.45;
  margin: 0 0 6px;
}
.feed-mock-question-box {
  background: #f5f5f7;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 9px;
  color: #333;
  line-height: 1.45;
  margin-bottom: 8px;
}
.feed-mock-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 700;
  color: #7C3AED;
  font-family: 'Space Grotesk', sans-serif;
}
.feed-mock-cta svg {
  width: 12px;
  height: 12px;
  stroke: #7C3AED;
  fill: none;
}
.feed-mock-nav {
  display: flex;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 8px 4px 12px;
  background: #fff;
}
.feed-mock-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 10px;
}
.feed-mock-nav-item.active { background: rgba(124,58,237,0.1); }
.feed-mock-nav-item svg {
  width: 17px;
  height: 17px;
  stroke: #bbb;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feed-mock-nav-item.active svg { stroke: #7C3AED; }
.feed-mock-nav-lbl {
  font-size: 8px;
  color: #bbb;
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
}
.feed-mock-nav-item.active .feed-mock-nav-lbl {
  color: #7C3AED;
  font-weight: 700;
}

/* Nav logo alignment */
.nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── PROOF / FOUNDER SECTION ─────────────────────────────── */
.proof-section { background: var(--bg-alt, #F3F3F0); padding: var(--sp-32) 0; }
.proof-header { max-width: 780px; margin: 0 auto var(--sp-12); text-align: center; }
.proof-header h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--text); line-height: 1.15; letter-spacing: -0.02em;
}
.proof-sub { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--text-base); line-height: 1.6; }

.founder-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-12);
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-12);
  box-shadow: 0 4px 24px rgba(20,20,18,0.04);
  margin-bottom: var(--sp-12);
}
.founder-card-left { display: flex; flex-direction: column; gap: var(--sp-6); justify-content: center; }
.founder-logo {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--purple), var(--purple-mid));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem;
}
.founder-badge {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: var(--sp-2);
}
.founder-meta h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text); margin-bottom: 4px; }
.founder-school { color: var(--text-muted); font-size: var(--text-sm); }

.founder-quote {
  border-left: 3px solid var(--purple);
  padding-left: var(--sp-6);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3);
}
.founder-quote p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: var(--text);
  line-height: 1.4;
}
.founder-quote footer { color: var(--text-muted); font-size: var(--text-sm); }

@media (max-width: 768px) {
  .founder-card { grid-template-columns: 1fr; padding: var(--sp-8); gap: var(--sp-8); }
  .founder-quote { border-left: none; border-top: 2px solid var(--purple-light); padding-left: 0; padding-top: var(--sp-6); }
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-12);
}
.trust-strip li {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-align: center;
}
.trust-strip strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  color: var(--purple);
  margin-bottom: 4px;
}
.trust-strip span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
@media (max-width: 768px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }

.proof-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: center;
}
.btn-google-review {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.875rem;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.btn-google-review:hover {
  color: var(--text);
  border-color: var(--text-light);
  background: #fff;
}

/* ── OVERRIDES POST-AUDIT (UI/UX polish) ──────────────────── */

/* Nav : "Connexion" comme lien utilitaire — séparé visuellement des liens primaires */
.nav-links .nav-link-utility {
  margin-left: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border);
}
.nav-links .nav-link-utility a {
  color: var(--text-light);
  font-weight: 500;
}
.nav-links .nav-link-utility a:hover { color: var(--text); }
.nav-links .nav-link-utility a::after { display: none; }

/* Eyebrows : varier le poids visuel des labels selon le contexte */
.section-label[style*="text-align:center"] { color: var(--text-muted); }

/* Configurateur : transitions fluides sur les changements de couleur */
.config-app-header,
.config-module.active,
.config-swatch {
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.2s ease;
}
.config-swatch { cursor: pointer; }
.config-swatch:hover { transform: scale(1.08); }
.config-swatch.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor;
}

/* Boutons hero : élargir la zone tactile mobile */
@media (max-width: 768px) {
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* Trust bar : 2x2 sur mobile au lieu d'1 ligne compressée */
@media (max-width: 640px) {
  .trust-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    text-align: left;
  }
  .trust-item { font-size: 12px; white-space: normal; }
}

/* CTA paiements : lien doux vers la FAQ */
.payment-detail-cta a:hover { text-decoration: underline; }

/* ── AUDIENCE SECTION (Pour qui c'est fait) ────────────── */
.audience-section { padding: var(--sp-32) 0; }
.audience-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  text-align: center;
  margin: 0 auto var(--sp-12);
  max-width: 720px;
  line-height: 1.15;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 768px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card {
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
}
.audience-card-yes {
  background: var(--purple-light);
  border-color: rgba(109, 40, 217, 0.18);
}
.audience-card-no { background: var(--bg-alt); }
.audience-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.audience-card-header [data-icon] { font-size: 1.5rem; }
.audience-card-yes .audience-card-header [data-icon] { color: var(--purple); }
.audience-card-no .audience-card-header [data-icon] { color: var(--text-muted); }
.audience-card-header h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  font-family: var(--font-display);
}
.audience-list { list-style: none; padding: 0; margin: 0; }
.audience-list li {
  font-size: var(--text-base);
  line-height: 1.65;
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-6);
  position: relative;
  color: var(--text);
}
.audience-list li::before {
  content: '·';
  position: absolute;
  left: var(--sp-2);
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1;
  color: var(--purple);
  top: -2px;
}
.audience-card-no .audience-list li { color: var(--text-muted); }
.audience-card-no .audience-list li::before { color: var(--text-light); }

/* ── COMPARISON SECTION ─────────────────────────────────── */
.comparison-section { padding: var(--sp-32) 0; background: var(--bg-alt); }
.comparison-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  text-align: center;
  margin: 0 auto var(--sp-12);
  line-height: 1.15;
}
.comparison-table-wrap {
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.comparison-table th, .comparison-table td {
  text-align: left;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.comparison-table th {
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--bg-alt);
  color: var(--text);
  position: sticky;
  top: 0;
}
.comparison-table th.comparison-col-bdeasy {
  background: var(--purple);
  color: #fff;
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table td:first-child {
  font-weight: 500;
  color: var(--text);
  width: 32%;
}
.comparison-table .cell-no {
  color: var(--text-light);
  font-weight: 400;
}
.comparison-table .cell-yes {
  color: var(--purple);
  font-weight: 600;
}
.comparison-note {
  text-align: center;
  max-width: 720px;
  margin: var(--sp-8) auto 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .comparison-table th, .comparison-table td {
    padding: var(--sp-3) var(--sp-4);
    font-size: 0.85rem;
  }
}

/* ── ADMIN SCHOOL SECTION (Pour ton admin école) ───────── */
.admin-school-section { padding: var(--sp-32) 0; }
.admin-school-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-12);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .admin-school-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.admin-school-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}
.admin-school-sub {
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}
.admin-school-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 768px) {
  .admin-school-list { grid-template-columns: 1fr; }
}
.admin-school-list li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  align-items: flex-start;
}
.admin-school-list li .admin-icon {
  color: var(--purple);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.admin-school-list li strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 4px;
  color: var(--text);
}
.admin-school-list li p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.admin-school-cta {
  text-align: center;
  margin-top: var(--sp-12);
}

/* ── FAQ CATEGORY HEADERS ──────────────────────────────── */
.faq-category {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  margin: var(--sp-12) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.faq-category:first-child { margin-top: 0; }
.faq-list .faq-category + .faq-item {
  margin-top: var(--sp-2);
}

/* ── NAV DROPDOWN — Sommaire (desktop) ─────────────────── */
.nav-dropdown {
  position: relative;
  /* Étend la zone de hover sous le trigger pour que la souris puisse
     traverser jusqu'au menu sans déclencher mouseleave */
  padding-bottom: 18px;
  margin-bottom: -18px;
}
.nav-dropdown-trigger {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0 0 2px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: color 0.2s;
}
.nav-dropdown-trigger:hover { color: var(--text); }
.nav-dropdown-trigger .nav-caret {
  transition: transform 0.2s ease;
  opacity: 0.55;
}
.nav-dropdown[data-open="true"] .nav-dropdown-trigger { color: var(--purple); }
.nav-dropdown[data-open="true"] .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% - 6px); /* sort juste après le padding-bottom-tampon */
  right: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 20, 18, 0.04),
    0 12px 36px rgba(20, 20, 18, 0.10);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 1px;
  z-index: 110;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.nav-dropdown[data-open="true"] .nav-dropdown-menu {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Petite flèche orientée vers le trigger */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

.nav-dropdown-menu a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  padding: 9px 14px 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.nav-dropdown-menu a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover {
  background: var(--purple-tint);
  color: var(--purple);
  padding-left: 14px;
}
.nav-dropdown-menu a:hover::before {
  background: var(--purple);
  transform: scale(1.4);
}
.nav-dropdown-menu a.is-active {
  color: var(--purple);
  font-weight: 600;
  background: var(--purple-tint);
}
.nav-dropdown-menu a.is-active::before {
  background: var(--purple);
  transform: scale(1.4);
}

/* Mobile : details/summary inside mobile menu */
.nav-mobile-toc {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
}
.nav-mobile-toc summary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  padding: var(--sp-3) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
.nav-mobile-toc summary::-webkit-details-marker { display: none; }
.nav-mobile-toc summary::after {
  content: '+';
  font-size: 22px;
  color: var(--text-muted);
  font-weight: 400;
  transition: transform 0.2s ease;
}
.nav-mobile-toc[open] summary::after { transform: rotate(45deg); }
.nav-mobile-toc a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 10px 0 10px var(--sp-4);
  min-height: 0;
  border: 0;
  border-left: 2px solid var(--border);
  margin-left: var(--sp-2);
}
.nav-mobile-toc a:hover { color: var(--purple); border-left-color: var(--purple); }

@media (max-width: 768px) {
  .nav-dropdown { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   DEMO MOBILE — bouton CTA + overlay plein écran
   La maquette iPhone (355px) est illisible sur petit écran. Sur mobile
   on la remplace par un bouton qui ouvre un overlay full-screen avec
   l'iframe Flutter et un toggle student/admin.
   ══════════════════════════════════════════════════════════════════ */

/* Le bouton mobile est caché par défaut (desktop) ──────────────── */
.hero-demo-mobile-btn { display: none; }

/* Mobile : on cache la maquette + tout ce qui s'y rapportait
   (toggle, callout orpheline, fallback link, et le 2e CTA "Démo live →"
   qui ouvre dans un nouvel onglet — redondant avec l'overlay plein écran). */
@media (max-width: 768px) {
  .hero-visual .demo-role-toggle,
  .hero-visual .hero-phone-frame-outer,
  .hero-visual .demo-callout,
  .hero-visual .demo-fallback-link,
  .hero-visual::before,
  .hero-ctas .btn-ghost {
    display: none !important;
  }

  /* Bouton "Tester la démo" — variante outline subtile pour ne pas
     concurrencer "Réserver un appel" qui reste le CTA principal. */
  .hero-demo-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin-top: 12px;
    padding: 16px 22px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--purple);
    background: var(--purple-tint);
    border: 1px solid var(--purple);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .hero-demo-mobile-btn:hover {
    background: color-mix(in srgb, var(--purple) 14%, var(--purple-tint));
  }
  .hero-demo-mobile-btn:active { transform: translateY(1px); }

  .hero-demo-mobile-icon {
    flex-shrink: 0;
    color: var(--purple);
  }
}

/* Overlay plein écran ─────────────────────────────────────────── */
.demo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #FAFAF8;
  display: flex;
  flex-direction: column;
}
.demo-fullscreen[hidden] { display: none; }

.demo-fullscreen-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: max(env(safe-area-inset-top), 12px) 16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.demo-fullscreen-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.demo-fullscreen-back:hover { background: var(--surface-alt); }
.demo-fullscreen-back svg { display: block; }

.demo-fullscreen-roles {
  display: inline-flex;
  background: var(--surface-alt);
  border-radius: 99px;
  padding: 3px;
  justify-self: center;
}
.demo-fullscreen-roles button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.demo-fullscreen-roles button.is-active {
  background: #fff;
  color: var(--purple);
  box-shadow: 0 1px 3px rgba(20, 20, 18, 0.10);
}

.demo-fullscreen-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.demo-fullscreen iframe {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS — audit globale
   Ajouts minimalistes pour serrer les paddings verticaux, limiter
   les clamp() de headlines, stacker des grids et garantir des touch
   targets accessibles. Toutes les règles sont scopées sous une
   media query pour ne pas toucher au desktop.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Sections : réduire les paddings verticaux énormes ────────── */
  .section { padding: var(--sp-12) 0; }
  .audience-section,
  .proof-section,
  .comparison-section,
  .admin-school-section { padding: var(--sp-16) 0; }
  .features-overview-section { padding: var(--sp-12) 0 var(--sp-16); }
  .feature-detail-section { padding: var(--sp-16) 0; }
  .mini-apps-section,
  .admin-section { padding: var(--sp-16) 0; }
  .steps-section { padding: var(--sp-16) 0; }
  .faq-section { padding: var(--sp-16) 0; }
  .cta-section { padding: var(--sp-16) 0; }
  .site-footer { padding: var(--sp-12) 0 var(--sp-6); }

  /* ── Hero : cap headlines, padding-top plus serré ─────────────── */
  .hero {
    padding-top: calc(64px + var(--sp-8));
    padding-bottom: var(--sp-8);
  }
  .hero h1 {
    font-size: clamp(2.25rem, 9vw, 2.75rem);
    line-height: 1.05;
  }
  .hero-sub { font-size: 1rem; }
  .hero-meta { gap: var(--sp-2) var(--sp-3); font-size: 0.8125rem; }
  .hero-ctas { flex-direction: column; gap: var(--sp-2); width: 100%; }

  /* ── Trust bar : marges plus douces ───────────────────────────── */
  .trust-bar { padding: var(--sp-3) 0; }

  /* ── Founder card : padding moins lourd ───────────────────────── */
  .founder-card {
    padding: var(--sp-6);
    gap: var(--sp-6);
    margin-bottom: var(--sp-8);
  }
  .founder-meta h3 { font-size: 1.25rem; }
  .founder-quote p { font-size: 1rem; line-height: 1.45; }

  /* ── Trust strip : 2 cols ok, padding moins lourd ─────────────── */
  .trust-strip li { padding: var(--sp-4); }
  .proof-header { margin-bottom: var(--sp-8); }
  .proof-header h2 { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  .proof-cta { gap: var(--sp-3); }
  .proof-cta .btn { width: 100%; justify-content: center; }

  /* ── Audience cards : padding plus serré ──────────────────────── */
  .audience-section { padding: var(--sp-16) 0; }
  .audience-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: var(--sp-8); }
  .audience-card { padding: var(--sp-6); }
  .audience-card-header { margin-bottom: var(--sp-4); }
  .audience-list li { font-size: 0.9375rem; padding-left: var(--sp-5); }

  /* ── Claim bento : padding réduit ─────────────────────────────── */
  .claim-primary { padding: var(--sp-6); gap: var(--sp-4); }
  .claim-headline { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .claim-sub { font-size: 1rem; }
  .claim-mini { padding: var(--sp-5); }
  .claim-mini-num { font-size: clamp(1.75rem, 7vw, 2.25rem); }

  /* ── Problème / before-after : padding cards ──────────────────── */
  .problem-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: var(--sp-8); }
  .ba-item { padding: var(--sp-3); font-size: 0.875rem; }

  /* ── Comparison : table-wrap min-width pour scroll horizontal ──── */
  .comparison-table-wrap {
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    -webkit-overflow-scrolling: touch;
  }
  .comparison-table { min-width: 540px; }
  .comparison-table th,
  .comparison-table td { padding: var(--sp-3); font-size: 0.8125rem; }
  .comparison-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: var(--sp-8); }

  /* ── Features overview : headers serrés ──────────────────────── */
  .features-overview-header { margin-bottom: var(--sp-8); }
  .features-overview-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .features-overview-header p { font-size: 1rem; margin-top: var(--sp-3); }
  .feature-hero { padding: var(--sp-6); min-height: auto; gap: var(--sp-2); }
  .feature-hero-icon {
    width: 64px; height: 64px;
    border-radius: 14px;
    margin-top: 0;
  }
  .feature-hero-icon svg { width: 32px; height: 32px; }
  .feature-hero h3 { font-size: 1.25rem; }
  .feature-hero p { font-size: 0.9375rem; }
  .features-list a { padding: var(--sp-4); }

  /* ── Feature detail sections : padding réduit ─────────────────── */
  .feature-detail-grid { gap: var(--sp-6); }
  .feature-detail-content { gap: var(--sp-4); }
  .feature-detail-content h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .feature-detail-content > p { font-size: 1rem; }
  .feature-list-item { font-size: 0.9375rem; }
  .screen-img { width: 100%; max-width: 280px; height: auto; }
  .phone-shell { width: 100%; max-width: 280px; }

  /* ── Validation flow : 1 colonne sur très petit, 2 cols sinon ─── */
  .validation-flow { gap: var(--sp-2); margin-top: var(--sp-6); }
  .validation-step { padding: var(--sp-3); font-size: 0.8125rem; }

  /* ── Paiements : padding cards réduit ─────────────────────────── */
  .payment-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: var(--sp-8); }
  .payment-card { padding: var(--sp-5); }
  .payment-card h3 { margin-bottom: var(--sp-3); font-size: 1rem; }
  .payment-row { font-size: 0.875rem; padding: var(--sp-2) 0; }

  /* ── Mini-apps / hub : header et cards ────────────────────────── */
  .mini-apps-header { margin-bottom: var(--sp-8); }
  .mini-apps-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .mini-apps-header p { font-size: 1rem; }
  .mini-apps-cta-banner {
    display: flex;
    padding: var(--sp-3) var(--sp-4);
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  .hub-zone { padding: var(--sp-5); }
  .hub-zone h3 { font-size: 1.125rem; }
  .hub-zone p { font-size: 0.875rem; }
  .hub-zones { margin-bottom: var(--sp-8); }
  .hub-channel { padding: var(--sp-4) var(--sp-5); }
  .hub-custom-note {
    margin-top: var(--sp-8);
    padding: var(--sp-4) var(--sp-5);
    font-size: 0.9375rem;
  }

  /* ── Configurateur : preview card stacks ──────────────────────── */
  .configurateur-grid { gap: var(--sp-8); }
  .configurateur-content h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .configurateur-sub { font-size: 1rem; margin-bottom: var(--sp-6); }
  .configurateur-cta-row { gap: var(--sp-3); flex-direction: column; align-items: stretch; }
  .configurateur-cta-row .btn { width: 100%; justify-content: center; }
  .configurateur-proof {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-2);
  }
  .config-preview-body {
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .config-modules,
  .config-colors {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .config-col-label {
    width: 100%;
    text-align: center;
    margin-bottom: 2px;
  }
  .config-phone-mini { margin: 0 auto; }

  /* ── Steps timeline : padding-left réduit ──────────────────────── */
  .steps-timeline { padding-left: 36px; }
  .steps-line { left: 12px; }
  .step-dot { left: -32px; }
  .step-item { margin-bottom: var(--sp-8); }
  .steps-title { font-size: clamp(1.75rem, 7vw, 2.25rem); margin-bottom: var(--sp-8); }
  .step-title { font-size: 1.0625rem; }
  .step-desc { font-size: 0.9375rem; line-height: 1.55; }
  .step-number { font-size: clamp(1.75rem, 7vw, 2.25rem); }

  /* ── Admin school : padding cards ─────────────────────────────── */
  .admin-school-content h2 { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  .admin-school-cta { margin-top: var(--sp-8); }
  .admin-school-cta .btn { width: 100%; justify-content: center; }

  /* ── Tarifs : padding cards + badge repositionné ───────────────── */
  .pricing-title { margin-bottom: var(--sp-6); }
  .pricing-subtitle { margin-bottom: var(--sp-8) !important; font-size: 0.9375rem !important; }
  .pricing-card { padding: var(--sp-6); }
  .pricing-card-featured { padding-top: calc(var(--sp-8) + var(--sp-3)); }
  .recommended-badge {
    top: var(--sp-3);
    right: 50%;
    transform: translateX(50%);
    white-space: nowrap;
  }
  .pricing-secondary-card { padding: var(--sp-6); padding-top: calc(var(--sp-8) + var(--sp-3)); }
  .pricing-secondary-badge {
    top: var(--sp-3);
    right: 50%;
    transform: translateX(50%);
  }
  .pricing-secondary-card .btn { align-self: stretch; }
  .pricing-feature { font-size: 0.875rem; padding: 6px 0; }
  .pricing-stripe-explainer { padding: var(--sp-5); }

  /* ── FAQ : padding et headline ─────────────────────────────────── */
  .faq-title { font-size: clamp(1.75rem, 7vw, 2.25rem); margin-bottom: var(--sp-8); }
  .faq-item summary {
    font-size: 0.9375rem;
    padding: var(--sp-4) 0;
    min-height: 44px;
    gap: var(--sp-3);
  }
  .faq-answer { font-size: 0.9375rem; padding-bottom: var(--sp-4); }
  .faq-category { margin: var(--sp-8) 0 var(--sp-3); }

  /* ── CTA final / contact : padding et CTA full width ──────────── */
  .cta-section h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .cta-sub { font-size: 1rem; margin-bottom: var(--sp-6); }
  .cta-proof { gap: var(--sp-2) var(--sp-3); }
  .cta-proof-item { font-size: 0.8125rem; }
  .contact-cta { gap: var(--sp-3); }
  .contact-cta .btn { width: 100%; justify-content: center; }
  .contact-form-wrap { margin-top: var(--sp-8); padding-top: var(--sp-6); }
  .contact-form .btn-white { width: 100%; align-self: stretch; }

  /* ── Footer : padding réduit, liens tap-friendly ──────────────── */
  .footer-grid { gap: var(--sp-6); margin-bottom: var(--sp-8); }
  .footer-col a {
    display: inline-block;
    padding: 6px 0;
    min-height: 32px;
  }

  /* ── Boutons importants : touch target ≥ 44px ─────────────────── */
  .btn-md { min-height: 44px; }
  .btn-xl { min-height: 52px; padding: 14px 22px; font-size: 1rem; }

  /* ── Eyebrow centrés : marge inférieure dosée ─────────────────── */
  .section-label { margin-bottom: var(--sp-2); }
}

/* ── Très petits écrans (iPhone SE, 320–375 px) ───────────────────── */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
  .claim-headline,
  .problem-title,
  .audience-title,
  .comparison-title,
  .payment-title,
  .steps-title,
  .faq-title,
  .pricing-title,
  .cta-section h2,
  .features-overview-header h2,
  .mini-apps-header h2,
  .configurateur-content h2,
  .feature-detail-content h2,
  .proof-header h2,
  .admin-school-content h2 { font-size: 1.625rem; }

  .pricing-price { font-size: 2.25rem; }
  .container { padding: 0 var(--sp-3); }
  .comparison-table-wrap {
    margin-left: calc(-1 * var(--sp-3));
    margin-right: calc(-1 * var(--sp-3));
  }
}

/* ══════════════════════════════════════════════════════════════════
   Mobile : carrousel horizontal pour .features-list (6 sous-modules)
   Évite les ~800px de scroll vertical en empilant les 6 cards.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .features-list {
    /* On annule les overrides précédents qui mettaient grid 1-col */
    grid-template-columns: none !important;
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Padding latéral = espace avant la 1ère card et après la dernière */
    padding: 4px 20px 16px;
    margin: 0 -20px;
    /* Retire les borders du conteneur (chaque card aura les siennes) */
    border: 0;
    /* Hide scrollbar sans casser le scroll */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .features-list::-webkit-scrollbar { display: none; }

  .features-list li {
    flex: 0 0 78%;
    max-width: 280px;
    scroll-snap-align: start;
    /* Chaque card devient autonome avec son propre cadre */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    /* On supprime les borders de grid héritées */
  }
  .features-list li:last-child {
    /* Sentinel droit pour aérer la fin du scroll */
    margin-right: 4px;
  }

  .features-list a {
    padding: var(--sp-5);
    height: auto;
    grid-template-rows: auto auto auto;
  }

  /* Indication visuelle qu'on peut swiper (petit hint sous le carrousel) */
  .features-list::after {
    content: '';
  }
}

/* ══════════════════════════════════════════════════════════════════
   TABLETTE — breakpoints intermédiaires (769 px – 1024 px)
   Comble les trous entre la grille desktop et le mode 1-col mobile.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {

  /* ── Hub mini-apps : 3 cols → 2 cols ─────────────────── */
  .hub-zones    { grid-template-columns: 1fr 1fr; }
  .hub-channels { grid-template-columns: 1fr 1fr; }

  /* ── Admin stats : 4 cols → 2 cols ───────────────────── */
  .admin-stats-strip { grid-template-columns: 1fr 1fr; }

  /* ── Validation flow : 4 cols → 2 cols ───────────────── */
  .validation-flow { grid-template-columns: 1fr 1fr; }

  /* ── Features bento (2 hero cards) : gap réduit ─────── */
  .features-bento { gap: var(--sp-4); }
  .feature-hero { padding: var(--sp-8); }

  /* ── Audience grid : 2 cols → 1 col sous 900px ────────── */
}
@media (max-width: 900px) and (min-width: 769px) {
  .audience-grid { grid-template-columns: 1fr; }
  .payment-cards { grid-template-columns: 1fr; }

  /* ── Configurateur : le grid 1fr 1fr devient plus serré ─ */
  .configurateur-grid { gap: var(--sp-8); }

  /* ── Features list : 3 cols → 2 cols ─────────────────── */
  .features-list { grid-template-columns: 1fr 1fr; }
  .features-list .features-list { grid-column: span 2; }
}

/* ══════════════════════════════════════════════════════════════════
   CORRECTIONS FINALES — éléments ponctuels non couverts ailleurs
   ══════════════════════════════════════════════════════════════════ */

/* ── feature-phone dans les cards mobiles ────────────────── */
@media (max-width: 768px) {
  /* Empêche la feature-phone de déborder sur petits écrans */
  .feature-card-mobile .feature-phone {
    max-width: min(220px, 100%);
  }

  /* feed-mock : s'adapte si l'espace est contraint */
  .feed-mock {
    width: min(280px, 100%);
    border-radius: clamp(20px, 5vw, 37px);
  }

  /* Comparaison : s'assurer que le hint de swipe est visible */
  .comparison-table-wrap::after {
    content: 'Faites défiler →';
    display: block;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: var(--sp-2) 0 0;
    letter-spacing: 0.04em;
  }

  /* Features-list carousel : amélioration des marges selon container */
  .features-list {
    /* Aligner avec le padding du container (16px) */
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
  }

  /* touch-action sur les éléments scrollables pour fluidité iOS */
  .features-list,
  .comparison-table-wrap {
    touch-action: pan-x;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE UX FIXES (audit 2026-05-13)
   Aucun texte modifié — uniquement CSS, comportement et nouveau HTML
   structurel (sticky CTA, indicateurs swipe).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Sticky CTA mobile ────────────────────────────────────────────────
   Apparaît après scroll du hero, glisse depuis le bas. Masqué desktop. */
.mobile-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border, #E5E5E0);
  box-shadow: 0 -8px 32px rgba(20, 20, 18, 0.06);
  gap: 8px;
  transform: translateY(110%);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mobile-sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-sticky-cta .msc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform 0.12s ease, background 0.15s ease;
  white-space: nowrap;
}
.mobile-sticky-cta .msc-btn-primary {
  background: var(--purple, #6D28D9);
  color: #ffffff;
  flex: 1.4;
}
.mobile-sticky-cta .msc-btn-secondary {
  background: transparent;
  color: var(--text, #141412);
  border: 1px solid var(--border, #E5E5E0);
}
.mobile-sticky-cta .msc-btn:active {
  transform: scale(0.96);
}
.mobile-sticky-cta .msc-btn-primary:active {
  background: #5B21B6;
}

@media (max-width: 768px) {
  .mobile-sticky-cta { display: flex; }
  /* Espace en bas du body pour que la sticky CTA ne cache pas le footer */
  body { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-cta { transition: none; }
}

/* ── 2. Feedback tap visible sur tous les boutons & cards ────────────────
   Sans cet état, l'utilisateur mobile ne sait pas si son tap est reçu. */
.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-secondary:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}
.feature-card-mobile:active,
.pricing-card:active,
.module-card:active {
  transform: scale(0.985);
  transition: transform 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .feature-card-mobile:active,
  .pricing-card:active,
  .module-card:active { transform: none; }
}

/* ── 3. Trust bar align gauche mobile (cohérent avec le H1 aligné gauche) */
@media (max-width: 768px) {
  .hero-meta {
    justify-content: flex-start;
  }
}

/* ── 4. Tap targets ≥ 44px en mobile ─────────────────────────────────────
   WCAG / Apple HIG : zone tactile minimale. */
@media (max-width: 768px) {
  .nav-mobile-menu a,
  .nav-mobile-menu summary,
  .nav-mobile-toc summary,
  .nav-mobile-toc a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .footer-col a,
  .footer-col li {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  /* Bouton inline pricing pour atteindre 48px de height */
  .pricing-cta-inline {
    min-height: 48px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 15px;
  }
}

/* ── 5. iOS momentum scroll + carrousel features avec indicateur swipe ── */
.features-list {
  -webkit-overflow-scrolling: touch;
}

/* Indicateur visuel "swipe →" sur le carrousel mobile features-list.
   Gradient à droite qui suggère qu'il y a plus de contenu hors-écran. */
@media (max-width: 768px) {
  .features-list-wrap {
    position: relative;
  }
  .features-list-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 12px;
    width: 56px;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(250, 250, 248, 0) 0%,
      rgba(250, 250, 248, 0.85) 60%,
      rgba(250, 250, 248, 1) 100%
    );
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 2;
  }
  /* Une fois que l'utilisateur a swipé jusqu'à la fin, on cache le gradient
     (data-attribute toggled par JS au scroll si besoin — par défaut visible). */
  .features-list-wrap[data-scroll-end="1"]::after {
    opacity: 0;
  }
}

/* ── 6. Logo nav mobile : zone tap ≥ 44px ────────────────────────────── */
@media (max-width: 768px) {
  .nav-logo,
  .nav .logo,
  a.nav-logo,
  .nav-brand {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 7. Hover désactivé sur touch screens (évite "sticky hover") ──────── */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .feature-card-mobile:hover,
  .pricing-card:hover {
    transform: none;
  }
}

/* ── 8. Images sous le fold : décodage async par défaut ──────────────── */
/* (loading="lazy" doit être ajouté sur chaque <img> en HTML — ce CSS
   garantit au moins le rendu décalé pour ne pas bloquer le main thread.) */
img:not([fetchpriority="high"]) {
  content-visibility: auto;
}

/* ── 9. Densité mobile : réduire la card pricing fondateur ──────────── */
@media (max-width: 600px) {
  .pricing-card.pricing-card-founder {
    padding-top: calc(var(--sp-8) + var(--sp-4));
  }
  .recommended-badge-founder {
    font-size: 11px;
    padding: 5px 12px;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE REFONTE (audit visuel 2026-05-13 — 16 screenshots)
   Tous les fixes : bugs CSS + accordéons + masquages mobile.
   Aucun texte n'est modifié — uniquement layout, visibilité, structure.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── HERO : 1 seul CTA primary + 1 bouton démo. Masquer les redondances */
  .hero-ctas .btn-ghost { display: none !important; }
  .demo-callout { display: none !important; }
  .demo-fallback-link { display: none !important; }
  .demo-role-toggle { display: none !important; }
  /* La maquette iPhone hero est aussi cachée (remplacée par le bouton
     "Tester la démo") → ne plus afficher le frame outer non plus. */
  .hero-visual .hero-phone-frame-outer { display: none !important; }

  /* Refine du bouton principal violet (le user trouve "moche" car trop plein) */
  .hero-ctas .btn-primary {
    border-radius: 14px;
    padding: 16px 22px;
    font-size: 15px;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 24px rgba(109, 40, 217, 0.28);
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  }
  .hero-ctas .btn-primary:active {
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
  }

  /* Refine du bouton "Tester la démo" (style outline propre) */
  .hero-demo-mobile-btn {
    border-radius: 14px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    background: #fff;
    color: var(--purple, #6D28D9);
    border: 1.5px solid rgba(109, 40, 217, 0.25);
    box-shadow: 0 2px 8px rgba(20, 20, 18, 0.04);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
  }
  .hero-demo-mobile-btn:active {
    transform: scale(0.97);
    background: rgba(109, 40, 217, 0.04);
  }

  /* ── COMPARISON TABLE : transformer en cards verticales lisibles ──── */
  .comparison-table-wrap {
    overflow-x: visible !important;
  }
  .comparison-table {
    display: block;
    width: 100%;
  }
  .comparison-table thead { display: none; }
  .comparison-table tbody { display: block; }
  .comparison-table tr {
    display: block;
    background: #fff;
    border: 1px solid var(--border, #E5E5E0);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(20, 20, 18, 0.03);
  }
  .comparison-table tr:has(.cell-yes) {
    border-color: rgba(109, 40, 217, 0.25);
    background: linear-gradient(180deg, #fff 0%, rgba(237, 233, 254, 0.25) 100%);
  }
  .comparison-table td {
    display: block;
    padding: 6px 0 !important;
    border: none !important;
    font-size: 14px;
  }
  /* 1ère cell = label de la ligne en gras */
  .comparison-table td:first-child {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border, #E5E5E0) !important;
  }
  /* On préfixe chaque valeur par le nom de la colonne via data-attribute,
     mais comme on ne peut pas modifier l'HTML, on injecte via :before. */
  .comparison-table td:nth-child(2)::before { content: "HelloAsso : "; color: var(--text-muted); font-weight: 500; }
  .comparison-table td:nth-child(3)::before { content: "Google Form + Lydia : "; color: var(--text-muted); font-weight: 500; }
  .comparison-table td:nth-child(4)::before {
    content: "BDEASY : ";
    color: var(--purple, #6D28D9);
    font-weight: 700;
    font-family: var(--font-display);
  }
  .comparison-table .cell-yes {
    color: var(--text);
    font-weight: 600;
  }
  .comparison-table .cell-no {
    opacity: 0.5;
  }

  /* ── CLAIM BENTO : cards 0% / 100% propres ────────────────────────── */
  .claim-bento {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .claim-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .claim-mini {
    background: #fff;
    border: 1px solid var(--border, #E5E5E0);
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 2px 8px rgba(20, 20, 18, 0.03);
  }
  .claim-mini-num {
    font-size: 3rem !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    color: var(--purple, #6D28D9);
    font-weight: 700;
    letter-spacing: -0.04em;
  }
  .claim-mini-lbl {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--text);
  }
  .claim-headline {
    font-size: clamp(2rem, 7vw, 2.5rem) !important;
    line-height: 1.1;
  }

  /* ── PAYMENT CARDS (Stripe 27%) : fix bordures + alignement ───────── */
  .payment-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .payment-card {
    padding: 18px 18px 20px !important;
    border-radius: 14px !important;
  }
  .payment-card h3,
  .payment-card .payment-card-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  .payment-row {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }
  .payment-card .pay-line {
    font-size: 13px;
    line-height: 1.5;
  }

  /* ── ÉCOSYSTÈME VIVANT (canaux 01/02/03) : layout vertical clean ──── */
  .ecosystem-grid,
  .channel-grid,
  .stations-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .channel-card,
  .station-card,
  .ecosystem-card {
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  .channel-card .channel-num,
  .station-card .station-num,
  .ecosystem-card .num {
    font-size: 13px !important;
    color: var(--purple, #6D28D9);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }

  /* ── FEATURES BENTO / LISTE : carrousel propre avec snap ──────────── */
  .features-bento {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
  }
  .feature-hero {
    padding: 22px 20px !important;
    border-radius: 18px !important;
  }
  .feature-hero h3 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  .feature-hero p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .feature-hero-cta { font-size: 13px !important; }
  /* Carrousel sub-modules (Messagerie, Broadcasts, etc.) */
  .features-list {
    margin: 0 calc(-1 * var(--sp-4)) !important;
    padding: 4px var(--sp-4) 18px !important;
  }
  .features-list li a {
    padding: 16px !important;
    border-radius: 14px !important;
    min-height: 110px;
  }
  .features-list .feat-num {
    font-size: 11px !important;
    color: var(--text-light, #A8A89E) !important;
    margin-bottom: 6px;
    display: block;
  }
  .features-list .feat-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 4px;
  }
  .features-list .feat-blurb {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: var(--text-muted) !important;
    display: block;
  }

  /* ── FEATURE DETAIL SECTIONS (Feed, Messagerie, etc.) ────────────── */
  .feature-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .feature-detail-grid.reverse {
    direction: ltr !important;
  }
  .feature-detail-visual {
    order: -1; /* phone shell en premier mobile */
  }
  .feature-detail-content h2 {
    font-size: 24px !important;
    line-height: 1.2;
    margin-bottom: 10px !important;
  }
  .feature-detail-content > p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  /* La feature-list est transformée en accordéon par JS. Style des items */
  .feature-list-item {
    padding: 10px 0 !important;
    font-size: 13.5px;
    line-height: 1.5;
  }
  .feature-list-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
  }

  /* ── AUDIENCE CARDS (Pour toi si / Pas pour toi si) ────────────── */
  .audience-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .audience-card {
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }
  .audience-card h3 {
    font-size: 18px !important;
  }
  .audience-list li {
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding-left: 4px !important;
  }

  /* ── ADMIN SCHOOL CARDS ─────────────────────────────────────────── */
  .admin-grid,
  .admin-features {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .admin-card {
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  .admin-card h3 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  .admin-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ── PRICING CARD : layout serré + features compact ─────────────── */
  .pricing-card {
    padding: 24px 20px 22px !important;
  }
  .pricing-features {
    margin-bottom: 16px !important;
  }
  .pricing-feature {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    padding: 6px 0 !important;
  }

  /* ── FOUNDER CARD : compact ─────────────────────────────────────── */
  .founder-card {
    grid-template-columns: 1fr !important;
    padding: 22px 20px !important;
  }
  .founder-card-left { text-align: left; }
  .founder-quote {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-top: 16px;
  }
  .founder-school {
    font-size: 12px !important;
  }

  /* ── PROCESS STEPS (timeline) ──────────────────────────────────── */
  .process-steps,
  .step-timeline {
    padding-left: 18px !important;
  }
  .process-step,
  .timeline-step {
    padding-left: 16px !important;
    padding-bottom: 24px !important;
  }
  .process-step h3,
  .timeline-step h3 {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
  .process-step p,
  .timeline-step p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  /* ── STRIPE "CARTES SUR TABLE" : encart propre ─────────────────── */
  .pricing-stripe-callout,
  .pricing-card-secondary-callout {
    padding: 16px 18px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .pricing-stripe-title {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* ── FOOTER : sections collapse via JS (voir track.js > footer init) */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 0;
  }
  .footer-col-brand {
    border-bottom: none;
    padding-bottom: 18px;
  }
  /* Headers de colonne footer en gras, cliquables (JS toggle) */
  .footer-col h4 {
    font-size: 12px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 0;
    margin: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }
  .footer-col h4::after {
    content: "+";
    font-size: 18px;
    font-weight: 400;
    opacity: 0.5;
    transition: transform 0.2s ease;
  }
  .footer-col.is-open h4::after {
    content: "−";
    transform: rotate(0);
  }
  .footer-col ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin: 0;
  }
  .footer-col.is-open ul {
    max-height: 600px;
    padding-bottom: 12px;
  }
  .footer-col li {
    padding: 8px 0;
  }

  /* ── CONFIGURATEUR : masquer la preview mockup mobile ─────────── */
  .configurateur-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .configurateur-preview,
  .config-preview-card {
    display: none !important;
  }
  .configurateur-content h2 {
    font-size: 28px !important;
    line-height: 1.15;
  }
  .configurateur-sub {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .configurateur-features li {
    font-size: 14px !important;
  }
  .configurateur-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .configurateur-cta-row .btn {
    width: 100%;
    justify-content: center;
  }
  .configurateur-proof {
    text-align: center;
    padding: 8px 0;
    border-top: 1px solid var(--border, #E5E5E0);
  }

  /* ── Accordéons générés par JS (.mobile-collapse) ──────────────── */
  .mobile-collapse-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-top: 8px;
    background: rgba(109, 40, 217, 0.08);
    color: var(--purple, #6D28D9);
    border: 0;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .mobile-collapse-trigger:active {
    background: rgba(109, 40, 217, 0.16);
    transform: scale(0.97);
  }
  .mobile-collapse-trigger::after {
    content: "↓";
    transition: transform 0.2s ease;
    margin-left: 2px;
  }
  .mobile-collapse-trigger[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
  .mobile-collapse-trigger[aria-expanded="true"] .mc-label-closed { display: none; }
  .mobile-collapse-trigger .mc-label-open { display: none; }
  .mobile-collapse-trigger[aria-expanded="true"] .mc-label-open { display: inline; }
  .mobile-collapse-hidden {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE PASS 2 (audit visuel 2026-05-13 — bugs persistants)
   - Founder card : intégrer trust-strip + proof-cta dans "Lire la suite"
   - Tableau comparatif : refonte propre cards avec toggle comparaison
   - Validation flow : accordéon "Voir tout"
   - Écosystème hub-zones / hub-channels : fix layout
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── FOUNDER : trust-strip + proof-cta repliés sous "Lire la suite" ─ */
  .founder-card + .trust-strip.mobile-folded,
  .founder-card ~ .proof-cta.mobile-folded {
    display: none !important;
  }
  .trust-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 16px;
    padding: 0 !important;
  }
  .trust-strip li {
    background: var(--surface-card, #fff);
    border: 1px solid var(--border, #E5E5E0);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
  }
  .trust-strip li strong {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--purple, #6D28D9);
    margin-bottom: 6px;
  }
  .trust-strip li span {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted, #6B6B64);
  }
  .proof-cta {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px;
  }
  .proof-cta .btn { width: 100%; justify-content: center; }

  /* Bouton "Lire la suite" qui ouvre la zone repliée */
  .founder-fold-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 12px 18px;
    background: rgba(109, 40, 217, 0.08);
    color: var(--purple, #6D28D9);
    border: 0;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .founder-fold-trigger::after {
    content: "↓";
    transition: transform 0.2s ease;
  }
  .founder-fold-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
  .founder-fold-trigger[aria-expanded="true"] .mc-label-closed { display: none; }
  .founder-fold-trigger .mc-label-open { display: none; }
  .founder-fold-trigger[aria-expanded="true"] .mc-label-open { display: inline; }


  /* ── TABLEAU COMPARATIF : refonte cards lisibles mobile ─────────── */
  /* Approche : 1 row = 1 card. On montre que BDEASY (colonne 4) en valeur
     principale. Les colonnes HelloAsso/Google Form sont masquées par
     défaut et révélées via toggle "Voir la comparaison". */
  .comparison-table-wrap { overflow: visible !important; }
  .comparison-table {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
  }
  .comparison-table thead { display: none !important; }
  .comparison-table tbody { display: block !important; }
  .comparison-table tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px 12px !important;
    align-items: center;
    background: var(--surface-card, #fff) !important;
    border: 1px solid var(--border, #E5E5E0) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
  }
  .comparison-table td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: var(--text);
  }
  /* Cell 1 = label de la feature (à gauche) */
  .comparison-table td:first-child {
    grid-column: 1 !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Cell 2 (HelloAsso) et cell 3 (Google Form) : cachées par défaut */
  .comparison-table td:nth-child(2),
  .comparison-table td:nth-child(3) {
    display: none !important;
  }
  /* Cell 4 (BDEASY) : valeur à droite, en violet */
  .comparison-table td:nth-child(4) {
    grid-column: 2 !important;
    text-align: right !important;
    font-weight: 700 !important;
    color: var(--purple, #6D28D9) !important;
    font-size: 13px !important;
    font-family: var(--font-display);
  }
  .comparison-table td:nth-child(4).cell-yes::before {
    content: "✓ ";
    color: var(--purple, #6D28D9);
  }
  /* On retire les pseudo-elements anciens */
  .comparison-table td::before { content: none !important; }
  /* Quand toggle activé, on révèle HelloAsso + Google Form */
  .comparison-table.show-compare td:nth-child(2),
  .comparison-table.show-compare td:nth-child(3) {
    display: block !important;
    grid-column: 1 / -1 !important;
    font-size: 12px !important;
    color: var(--muted, #6B6B64) !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--border, #E5E5E0) !important;
    margin-top: 6px !important;
    font-family: var(--font-body);
    font-weight: 400;
  }
  .comparison-table.show-compare td:nth-child(2)::before {
    content: "HelloAsso : " !important;
    font-weight: 600 !important;
    color: var(--text);
  }
  .comparison-table.show-compare td:nth-child(3)::before {
    content: "Google Form + Lydia : " !important;
    font-weight: 600 !important;
    color: var(--text);
  }
  .comparison-table .cell-no { opacity: 0.55; }

  .comparison-compare-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 14px 0 0;
    padding: 12px 18px;
    background: rgba(109, 40, 217, 0.06);
    color: var(--purple, #6D28D9);
    border: 1px solid rgba(109, 40, 217, 0.18);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .comparison-compare-toggle::after {
    content: "↓";
    transition: transform 0.2s ease;
  }
  .comparison-compare-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .comparison-compare-toggle[aria-expanded="true"] .mc-label-closed { display: none; }
  .comparison-compare-toggle .mc-label-open { display: none; }
  .comparison-compare-toggle[aria-expanded="true"] .mc-label-open { display: inline; }


  /* ── VALIDATION FLOW : Inscription → Vérif → Badge → Avantages ──── */
  /* Layout grid 2x2 propre + masqué initialement, révélé par "Voir tout" */
  .validation-flow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding: 0 !important;
  }
  .validation-flow.mobile-folded { display: none !important; }
  .validation-step {
    background: var(--surface-card, #fff) !important;
    border: 1px solid var(--border, #E5E5E0) !important;
    border-radius: 12px !important;
    padding: 16px 12px !important;
    text-align: left;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 600;
    min-height: 90px;
  }
  .validation-step::before {
    counter-increment: validstep;
    content: counter(validstep, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--purple, #6D28D9);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .validation-flow { counter-reset: validstep; }
  .validation-step [data-icon] {
    color: var(--purple, #6D28D9);
    width: 18px;
    height: 18px;
  }
  .validation-arrow {
    display: none !important;
  }


  /* ── ÉCOSYSTÈME : hub-zones et hub-channels propres ──────────────── */
  .hub-zones {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .hub-zone {
    background: var(--surface-card, #fff);
    border: 1px solid rgba(109, 40, 217, 0.18);
    border-radius: 14px;
    padding: 18px 18px !important;
  }
  .hub-zone-num {
    font-size: 12px !important;
    color: var(--purple, #6D28D9);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 6px;
  }
  .hub-zone h3 {
    font-size: 17px !important;
    margin-bottom: 6px !important;
  }
  .hub-zone p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .hub-channels-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.1em;
    color: var(--muted, #6B6B64) !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    text-align: center;
    text-transform: uppercase;
  }
  .hub-channels {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .hub-channel {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border, #E5E5E0);
  }
  .hub-channel-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px;
  }
  .hub-channel-icon svg { width: 16px; height: 16px; }
  .hub-channel h4 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  .hub-channel p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .mini-apps-cta-banner {
    padding: 14px 16px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
    line-height: 1.5;
  }
  .mini-apps-cta-banner span { font-size: 13px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE PASS 3 (audit visuel 2026-05-13 — refonte tableau & carrousel)
   - Tableau comparatif : MASQUÉ ENTIÈREMENT sur mobile
   - Hub-channels (9 canaux) : carrousel horizontal mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Section tableau comparatif retirée complètement de la version mobile */
  .comparison-section { display: none !important; }

  /* Hub channels en carrousel horizontal scroll-snap (comme features-list) */
  .hub-channels {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding: 4px var(--sp-4) 18px !important;
    margin: 0 calc(-1 * var(--sp-4)) !important;
    scrollbar-width: none;
  }
  .hub-channels::-webkit-scrollbar { display: none; }
  .hub-channel {
    flex: 0 0 78%;
    max-width: 280px;
    scroll-snap-align: start;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
    padding: 14px !important;
    border-radius: 14px !important;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border, #E5E5E0);
    border-left: 3px solid var(--accent, #6D28D9);
  }
  .hub-channel-icon {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .hub-channel-icon svg { width: 18px; height: 18px; }
  .hub-channel h4 {
    font-size: 14px !important;
    margin: 0 0 4px !important;
    line-height: 1.2;
  }
  .hub-channel p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--muted, #6B6B64);
    margin: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PRICING BREAKDOWN — accordéon "Pourquoi ce prix ?"
   Affiché sous la card pricing. Cohérent DA BDEASY (light).
   ═══════════════════════════════════════════════════════════════════ */
.pricing-breakdown {
  max-width: 720px;
  margin: var(--sp-8) auto 0;
  background: var(--surface-alt, #F3F3F0);
  border: 1px solid var(--border, #E5E5E0);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.pricing-breakdown[open] {
  border-color: rgba(109, 40, 217, 0.25);
  box-shadow: 0 4px 16px rgba(20, 20, 18, 0.04);
}
.pricing-breakdown summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  user-select: none;
}
.pricing-breakdown summary::-webkit-details-marker { display: none; }
.pricing-breakdown-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.pricing-breakdown-arrow {
  font-size: 16px;
  color: var(--purple, #6D28D9);
  font-weight: 700;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.pricing-breakdown[open] .pricing-breakdown-arrow {
  transform: rotate(180deg);
}
.pricing-breakdown:not([open]) summary:hover {
  background: rgba(0, 0, 0, 0.015);
}

.pricing-breakdown-body {
  padding: 4px 22px 22px;
  border-top: 1px solid var(--border, #E5E5E0);
}
.pricing-breakdown-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 14px 0 18px;
}
.pricing-breakdown-section {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple, #6D28D9);
  margin: 14px 0 8px;
}
.pricing-breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.pricing-breakdown-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 8px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  border-bottom: 1px dashed var(--border, #E5E5E0);
}
.pricing-breakdown-list li:last-child {
  border-bottom: 0;
}
.pricing-breakdown-list li strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--purple, #6D28D9);
  text-align: right;
  white-space: nowrap;
}
.pricing-breakdown-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--surface-card, #fff);
  border-radius: 10px;
  border-left: 3px solid var(--purple, #6D28D9);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.pricing-breakdown-note strong {
  color: var(--purple, #6D28D9);
}
.pricing-breakdown-note-alt {
  border-left-color: var(--gold, #D97706);
}
.pricing-breakdown-note-alt strong {
  color: var(--gold, #D97706);
}

@media (max-width: 768px) {
  .pricing-breakdown {
    margin: 24px 0 0;
    border-radius: 14px;
  }
  .pricing-breakdown summary {
    padding: 14px 16px;
  }
  .pricing-breakdown-title {
    font-size: 14px;
    line-height: 1.3;
  }
  .pricing-breakdown-body {
    padding: 4px 16px 18px;
  }
  .pricing-breakdown-intro {
    font-size: 13.5px;
    margin: 12px 0 14px;
  }
  .pricing-breakdown-list li {
    grid-template-columns: 56px 1fr;
    font-size: 13px;
    padding: 7px 0;
    gap: 8px;
  }
  .pricing-breakdown-note {
    font-size: 12.5px;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-breakdown,
  .pricing-breakdown-arrow {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING CONTACT CARD — design premium (Stripe / Linear inspired)
   Card centrée, 2 zones : steps numérotés + zone CTA avec avatar.
   ═══════════════════════════════════════════════════════════════════ */
.pricing-contact-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border, #E5E5E0);
  border-radius: 24px;
  padding: 48px 48px 44px;
  box-shadow:
    0 24px 64px -16px rgba(20, 20, 18, 0.10),
    0 8px 24px -8px rgba(20, 20, 18, 0.05),
    0 0 0 1px rgba(20, 20, 18, 0.02);
  position: relative;
  overflow: hidden;
}
.pricing-contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6D28D9 0%, #8B5CF6 50%, #D97706 100%);
}
.pricing-contact-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--purple, #6D28D9);
  margin: 0 0 var(--sp-6);
  text-align: left;
}

/* ── Steps numérotés ──────────────────────────────────────────────── */
.pricing-contact-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.pricing-contact-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
}
.pcs-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--purple, #6D28D9);
  background: rgba(109, 40, 217, 0.08);
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.pcs-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.pcs-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.pcs-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #6B6B64);
}

/* ── CTA zone (séparée par une fine ligne du dessus) ──────────────── */
.pricing-contact-cta-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border, #E5E5E0);
  text-align: center;
}

/* ── Founder strip ────────────────────────────────────────────────── */
.pricing-contact-founder {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pcf-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6D28D9 0%, #4C1D95 100%);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.22);
}
.pcf-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 1px;
}
.pcf-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.pcf-role {
  font-size: 12px;
  color: var(--text-muted, #6B6B64);
  line-height: 1.3;
}

/* ── CTA principal ────────────────────────────────────────────────── */
.pricing-contact-cta {
  min-width: 280px;
  padding: 16px 28px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  box-shadow:
    0 12px 32px -6px rgba(109, 40, 217, 0.40),
    0 4px 12px -2px rgba(109, 40, 217, 0.25);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease;
}
.pricing-contact-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px -8px rgba(109, 40, 217, 0.48),
    0 6px 16px -2px rgba(109, 40, 217, 0.30);
}
.pricing-contact-cta:active { transform: translateY(0); }

.pricing-contact-reassure {
  font-size: 12.5px;
  color: var(--text-muted, #6B6B64);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.005em;
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pricing-contact-card {
    padding: 32px 22px 28px;
    border-radius: 20px;
    margin: 0 4px;
  }
  .pricing-contact-card::before { height: 2px; }
  .pricing-contact-eyebrow {
    text-align: center;
    margin-bottom: var(--sp-5);
    font-size: 10px;
  }
  .pricing-contact-steps {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: var(--sp-6);
  }
  .pcs-num {
    width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 9px;
  }
  .pcs-title { font-size: 14px; }
  .pcs-desc { font-size: 12.5px; }
  .pricing-contact-cta {
    min-width: 0;
    width: 100%;
    font-size: 15px;
    padding: 15px 20px;
  }
  .pricing-contact-founder {
    flex-direction: column;
    gap: 6px;
  }
  .pcf-meta { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-contact-cta { transition: none; }
  .pricing-contact-cta:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FIXES AUDIT 15/05 — hero-eyebrow, social proof, footer socials
   ═══════════════════════════════════════════════════════════════════ */

/* Eyebrow au-dessus du H1 — signal SEO « app BDE » + ancre cognitive */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple, #6D28D9);
  background: rgba(109, 40, 217, 0.07);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: var(--sp-5);
  line-height: 1;
}

/* Ligne de social proof inline sous le hero-sub */
.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-6);
  padding: 8px 14px;
  background: rgba(20, 20, 18, 0.025);
  border: 1px solid var(--border, #E5E5E0);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted, #6B6B64);
  max-width: fit-content;
}
.hero-social-proof img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hero-social-proof strong {
  color: var(--text, #141412);
  font-weight: 600;
}

@media (max-width: 768px) {
  .hero-eyebrow {
    font-size: 10px;
    padding: 5px 10px;
    margin-bottom: var(--sp-4);
  }
  .hero-social-proof {
    font-size: 12px;
    padding: 7px 12px;
    gap: 8px;
    line-height: 1.35;
  }
}

/* Footer socials — Instagram */
.footer-socials {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  gap: 10px;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #9999BB);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.footer-socials a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  transform: translateY(-1px);
}
.footer-socials a:active {
  transform: scale(0.97);
}
.footer-socials svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .footer-socials a {
    padding: 10px 14px;
    font-size: 13.5px;
  }
}

/* Suppression du shield iframe — pas de styles à ajouter, déjà retiré du HTML */

/* ══════════════════════════════════════════════════════════════════
   Skeleton screen iframe démo — mimétisme app pendant le chargement
   ══════════════════════════════════════════════════════════════════ */
.phone-iframe-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0D0520 0%, #1A0A3C 100%);
  font-family: 'DM Sans', sans-serif;
  color: #F5F5FF;
  overflow: hidden;
}

.demo-skeleton-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 8px;
  font-size: 13px;
  font-weight: 600;
}
.demo-skeleton-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.demo-skeleton-signal,
.demo-skeleton-wifi,
.demo-skeleton-battery {
  display: inline-block;
  background: #F5F5FF;
  opacity: 0.85;
}
.demo-skeleton-signal { width: 14px; height: 9px; clip-path: polygon(0 100%, 22% 70%, 22% 100%, 50% 40%, 50% 100%, 78% 15%, 78% 100%, 100% 0, 100% 100%); }
.demo-skeleton-wifi { width: 12px; height: 9px; border-radius: 2px; }
.demo-skeleton-battery { width: 22px; height: 10px; border-radius: 3px; }

.demo-skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px 14px;
}
.demo-skeleton-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
}
.demo-skeleton-bell {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.demo-skeleton-tabs {
  display: flex;
  gap: 14px;
  padding: 0 18px 10px;
}
.demo-skeleton-tab {
  flex: 0 0 auto;
  width: 56px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
}
.demo-skeleton-tab.is-active {
  background: rgba(167, 139, 250, 0.5);
}

.demo-skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 18px 0;
  overflow: hidden;
}
.demo-skeleton-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo-skeleton-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.demo-skeleton-bar.w-50 { width: 50%; }
.demo-skeleton-bar.w-60 { width: 60%; }
.demo-skeleton-bar.w-70 { width: 70%; }
.demo-skeleton-bar.w-80 { width: 80%; }
.demo-skeleton-bar.w-90 { width: 90%; }

.demo-skeleton-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px 22px;
}
.demo-skeleton-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #A78BFA;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.demo-skeleton-label {
  font-size: 12.5px;
  color: rgba(245, 245, 255, 0.7);
  letter-spacing: 0.3px;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-skeleton-bar,
  .demo-skeleton-spinner {
    animation: none;
  }
}