/* ============================================
   FasoTravel — Site vitrine
   Univers : terre de voyage, nuit sahélienne
   ============================================ */

:root {
  --bg: #0b0a08;
  --bg-2: #110f0c;
  --bg-3: #1a1612;
  --cream: #f4ece0;
  --cream-dim: #c9bfae;
  --muted: #7a715f;
  --line: rgba(244, 236, 224, 0.08);
  --line-2: rgba(244, 236, 224, 0.14);

  /* Drapeau */
  --red: #dc2626;
  --red-glow: #ef4444;
  --gold: #f59e0b;
  --gold-glow: #fbbf24;
  --green: #16a34a;
  --green-glow: #22c55e;

  /* Accents dérivés */
  --copper: #b45309;
  --sand: #eab676;

  --font-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  scroll-behavior: smooth;
}

html.light {
  --bg: #faf6ee;
  --bg-2: #f4ece0;
  --bg-3: #ece2d0;
  --cream: #1a1612;
  --cream-dim: #3d362b;
  --muted: #7a715f;
  --line: rgba(26, 22, 18, 0.08);
  --line-2: rgba(26, 22, 18, 0.16);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245, 158, 11, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(22, 163, 74, 0.10), transparent 60%),
    var(--bg);
}

#root { position: relative; z-index: 1; }

/* Cursor custom (desktop) */
@media (hover: hover) {
  * { cursor: none !important; }
}

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 9999px;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--cream); transition: transform .1s ease-out; }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--cream);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), width .25s, height .25s, border-color .25s;
  opacity: .6;
}
.cursor-ring.hovering {
  width: 64px; height: 64px;
  border-color: var(--gold);
  background: rgba(251, 191, 36, 0.10);
  opacity: 1;
}
.cursor-ring.magnetic {
  width: 84px; height: 84px;
  border-color: var(--gold);
  border-width: 1.5px;
  background: rgba(251, 191, 36, 0.16);
  opacity: 1;
}
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* Selection */
::selection { background: var(--gold); color: var(--bg); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(244,236,224,.1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(244,236,224,.2); }

/* Utilitaires */
.font-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.font-mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold);
  display: inline-block;
}

.section {
  position: relative;
  width: 100%;
  padding: 120px 48px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .section { padding: 80px 20px; }
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}

/* Scroll snap */
.snap-wrap {
  scroll-snap-type: y proximity;
}
.snap { scroll-snap-align: start; scroll-snap-stop: normal; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cream);
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--cream);
  color: var(--bg);
}
.btn-primary:hover { background: var(--gold); }

.btn-ghost {
  border-color: var(--line-2);
  color: var(--cream);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-store {
  background: linear-gradient(180deg, rgba(244,236,224,.06), rgba(244,236,224,.02));
  border: 1px solid var(--line-2);
  padding: 14px 22px 14px 18px;
  color: var(--cream);
  min-width: 200px;
  justify-content: flex-start;
}
.btn-store:hover { border-color: var(--gold); background: rgba(245,158,11,.08); }
.btn-store .store-icon { width: 28px; height: 28px; flex-shrink: 0; }
.btn-store .store-txt { text-align: left; line-height: 1.1; }
.btn-store .store-txt .s1 { font-size: 10px; color: var(--cream-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.btn-store .store-txt .s2 { font-size: 15px; font-weight: 500; }
.btn-store .badge-soon {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  background: var(--gold);
  color: var(--bg);
  border-radius: 4px;
  text-transform: uppercase;
}

/* Headings */
.display {
  font-family: var(--font-serif);
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.h3 {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lead {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--cream-dim);
  line-height: 1.55;
  max-width: 62ch;
}

/* Gradient text */
.grad-flag {
  background: linear-gradient(95deg, var(--red) 0%, var(--gold) 50%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cards */
.card {
  background: linear-gradient(180deg, rgba(244,236,224,.04), rgba(244,236,224,.015));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.card:hover { border-color: var(--line-2); }

/* Dust particles background */
.dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

/* Noise overlay */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Marquee */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  overflow: hidden;
  gap: 48px;
  white-space: nowrap;
}
.marquee-track {
  display: flex;
  gap: 48px;
  animation: marquee-x 40s linear infinite;
  flex-shrink: 0;
}

/* Bus crossing */
@keyframes bus-cross {
  0% { transform: translateX(-30vw); }
  100% { transform: translateX(130vw); }
}

/* =====================================================
   LOGO 3D — verre volumétrique avec épaisseur réelle
   ===================================================== */
@keyframes logo-spin-y {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes logo-float-y {
  0%,100% { transform: translateY(-6px); }
  50%     { transform: translateY(6px); }
}
@keyframes logo-halo-pulse {
  0%,100% { opacity: .8; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.12); }
}
@keyframes logo-caustic-drift {
  0%   { transform: translate(-10%, -8%) rotate(0deg); }
  50%  { transform: translate(8%, 6%) rotate(180deg); }
  100% { transform: translate(-10%, -8%) rotate(360deg); }
}
.logo-3d {
  position: relative;
  display: inline-block;
  animation: logo-float-y 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 22px 42px rgba(0,0,0,.6))
    drop-shadow(0 0 32px rgba(245,158,11,.3));
}
.logo-halo {
  position: absolute; inset: -28%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(251,191,36,.4) 0%, rgba(239,43,45,.2) 26%, rgba(22,163,74,.14) 48%, transparent 68%);
  filter: blur(36px);
  animation: logo-halo-pulse 4.5s ease-in-out infinite;
}
.logo-caustic {
  position: absolute; inset: -45%;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(251,191,36,.18) 30deg, transparent 60deg,
      rgba(239,43,45,.14) 120deg, transparent 150deg,
      rgba(22,163,74,.16) 210deg, transparent 240deg,
      rgba(251,191,36,.18) 300deg, transparent 360deg);
  filter: blur(40px);
  mix-blend-mode: screen;
  animation: logo-caustic-drift 16s linear infinite;
  opacity: .75;
}
html.light .logo-caustic { opacity: .5; }
.logo-reflection {
  position: absolute;
  left: 10%; right: 10%; bottom: -12%; height: 25%;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.38), rgba(239,43,45,.15) 40%, transparent 75%);
  filter: blur(16px);
  pointer-events: none;
  transform: scaleY(-1);
}
.logo-stage {
  position: relative;
  width: 100%; height: 100%;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}
.logo-spin {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: logo-spin-y 9s linear infinite;
  will-change: transform;
}
.logo-slice {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.logo-slice img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.logo-slice-face img {
  filter:
    drop-shadow(0 0 14px rgba(245,158,11,.45))
    drop-shadow(0 0 28px rgba(239,43,45,.2))
    drop-shadow(0 -2px 6px rgba(22,163,74,.25));
}
.logo-slice:not(.logo-slice-face) img {
  filter: blur(0.5px) brightness(0.88) saturate(1.5);
}
.logo-spec {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 35% at 28% 18%, rgba(255,255,255,.55), transparent 65%),
    radial-gradient(ellipse 30% 18% at 72% 78%, rgba(255,255,255,.2), transparent 70%);
  mix-blend-mode: screen;
}
.logo-rim {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 0 22px rgba(245,158,11,.22),
    inset 0 0 50px rgba(255,255,255,.1);
  background:
    conic-gradient(from 90deg,
      rgba(255,255,255,.0) 0deg,
      rgba(255,255,255,.22) 60deg,
      rgba(245,158,11,.14) 120deg,
      rgba(255,255,255,.0) 180deg,
      rgba(22,163,74,.12) 240deg,
      rgba(255,255,255,.26) 300deg,
      rgba(255,255,255,.0) 360deg);
  mix-blend-mode: screen;
  opacity: .85;
}

/* Ticket */
.ticket-perf {
  background-image: radial-gradient(circle, var(--bg) 2px, transparent 2.5px);
  background-size: 10px 10px;
  background-position: 0 center;
  background-repeat: repeat-y;
}

/* Phone frame */
.phone-frame {
  position: relative;
  width: 280px;
  aspect-ratio: 9 / 19.5;
  border-radius: 42px;
  background: linear-gradient(180deg, #2a2520, #15120e);
  padding: 10px;
  box-shadow:
    0 0 0 1.5px rgba(244,236,224,.12),
    0 60px 120px -30px rgba(0,0,0,.7),
    0 30px 60px -20px rgba(245, 158, 11, 0.15);
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg-2);
}
.phone-notch {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px;
  background: #000;
  border-radius: 99px;
  z-index: 5;
}

/* Animation utils */
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.float-y { animation: float-y 6s ease-in-out infinite; }

@keyframes pulse-glow {
  0%,100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes dash-travel {
  to { stroke-dashoffset: -100; }
}

/* Section dividers */
.divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* Number counter */
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* Map */
.map-svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  overflow: visible;
}
.map-svg .route {
  stroke-dasharray: 6 6;
  animation: dash-travel 2.5s linear infinite;
}
.map-svg .city {
  transition: transform .3s;
}
.map-svg .city:hover { transform: scale(1.4); transform-origin: center; }

/* Fade in on scroll */
.reveal {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1);
}
.reveal[data-variant="up"]    { transform: translateY(34px); }
.reveal[data-variant="blur"]  { transform: translateY(18px); filter: blur(10px); }
.reveal[data-variant="scale"] { transform: scale(0.94) translateY(14px); }
.reveal[data-variant="left"]  { transform: translateX(-42px); }
.reveal[data-variant="right"] { transform: translateX(42px); }
.reveal[data-variant="mask"]  { transform: translateY(40px); clip-path: inset(100% 0 0 0); }

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* RevealStagger wrapper — pas de transform propre, juste container des enfants */
.reveal-stagger > .reveal { will-change: opacity, transform, filter; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in {
    transition: none;
    transform: none;
    filter: none;
    clip-path: none;
    opacity: 1;
  }
}

/* ---------- Tilt 3D card ---------- */
.tilt-card {
  transition: box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.tilt-card:hover {
  box-shadow: 0 28px 70px -22px rgba(0, 0, 0, 0.55), 0 6px 16px -10px rgba(0, 0, 0, 0.35);
}
html.light .tilt-card:hover {
  box-shadow: 0 28px 60px -22px rgba(26, 22, 18, 0.22), 0 4px 12px -8px rgba(26, 22, 18, 0.18);
}
@media (pointer: coarse) {
  .tilt-card { transform: none !important; }
}

/* ---------- Magnetic wrapper ---------- */
.magnetic { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
@media (pointer: coarse) {
  .magnetic { transform: none !important; }
}


/* Nav */
.nav {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  /* Fond sombre semi-transparent en dark — bascule en clair en light */
  background: rgba(11, 10, 8, 0.78);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  transition: top .35s cubic-bezier(.2,.8,.2,1),
              padding .35s cubic-bezier(.2,.8,.2,1),
              background .35s cubic-bezier(.2,.8,.2,1),
              backdrop-filter .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.nav.scrolled {
  top: 10px;
  padding: 4px;
  background: rgba(11, 10, 8, 0.92);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 24px 80px -20px rgba(0,0,0,.75), 0 2px 8px -2px rgba(0,0,0,.4);
}
html.light .nav {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(26, 22, 18, 0.12);
  box-shadow: 0 14px 40px -16px rgba(26, 22, 18, 0.25);
}
html.light .nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 18px 50px -16px rgba(26, 22, 18, 0.35);
}
.nav-link {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--cream-dim);
  text-decoration: none;
  border-radius: 999px;
  transition: color .2s, background .2s;
  letter-spacing: -0.005em;
}
.nav-link:hover { color: var(--cream); }
.nav-link.active {
  color: var(--cream);
  background: rgba(244,236,224,.08);
}
html.light .nav-link.active {
  background: rgba(26, 22, 18, 0.08);
}
.nav-brand-name { color: var(--cream); }

.nav-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
}
.nav-brand img { width: 30px; height: 30px; object-fit: contain; }
.nav-brand-name { font-weight: 500; font-size: 14px; letter-spacing: -0.01em; }

/* Conteneur d'actions à droite de la navbar */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Bouton burger — caché par défaut, visible sur mobile */
.nav-burger {
  display: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.nav-burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.25s, opacity 0.2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Drawer mobile (caché par défaut) */
.nav-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  transform: translateY(-110%);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  display: none;
}
.nav-drawer.open { transform: translateY(0); }
.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  padding: 78px 24px 28px;
  gap: 4px;
  max-height: 100vh;
  overflow-y: auto;
}
.nav-drawer-link {
  display: block;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 16px;
  color: var(--cream);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
  border: 1px solid transparent;
}
.nav-drawer-link:hover {
  background: var(--bg-2);
  border-color: var(--line);
}
.nav-drawer-link.active {
  background: var(--bg-2);
  border-color: var(--gold);
  color: var(--gold);
}
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,10,8,0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 98;
  animation: ftModalFadeIn 0.2s ease;
}
html.light .nav-drawer-backdrop { background: rgba(26,22,18,0.45); }

@media (max-width: 900px) {
  .nav-links-mid { display: none; }
  .nav {
    top: 10px;
    /* La nav doit toujours rester dans la fenêtre — sinon elle déborde
       sur petits écrans à cause du translateX(-50%) + contenu trop large. */
    max-width: calc(100vw - 16px);
    padding: 5px;
  }
  .nav-burger { display: inline-flex; }
  .nav-drawer { display: block; }
}
/* Téléphones moyens (Pixel 7 ~412px, iPhone 13 ~390px). On cache le mot
   "FasoTravel" dès 720px : sans les liens du milieu, garder le mot prenait
   de la place pour rien et débordait sur certains profils. L'icône suffit. */
@media (max-width: 720px) {
  .nav-brand-name { display: none; }
  .nav-actions { gap: 8px; }
  .nav-brand { padding: 6px 6px 6px 6px; }
}
@media (max-width: 480px) {
  /* Petit écran (< 480px) : on resserre encore. */
  .nav-actions { gap: 6px; }
  .lang-switch button { padding: 4px 8px; font-size: 10px; }
  .theme-track { width: 38px; height: 20px; }
  .theme-thumb[data-theme="light"] { transform: translateX(16px); }
  .nav-burger { width: 32px; height: 32px; }
  .nav-brand img { width: 26px; height: 26px; }
}

/* Lang toggle */
.lang-switch {
  display: inline-flex;
  background: rgba(244,236,224,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.lang-switch button {
  border: 0; background: transparent;
  color: var(--cream-dim);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.lang-switch button.active {
  background: var(--cream);
  color: var(--bg);
}

/* Theme toggle — switch */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.theme-track {
  display: inline-flex;
  width: 44px;
  height: 22px;
  border-radius: 999px;
  background: rgba(244,236,224,.06);
  border: 1px solid var(--line-2);
  padding: 2px;
  position: relative;
  transition: background .25s;
}
.theme-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream);
  color: var(--bg);
  transition: transform .28s cubic-bezier(.5,1.6,.5,1), background .25s;
  transform: translateX(0);
}
.theme-thumb[data-theme="light"] {
  transform: translateX(22px);
  background: var(--gold);
  color: #fff;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Decorative flag strip */
.flag-strip {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--red) 0% 50%, var(--green) 50% 100%);
  position: relative;
}
.flag-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--gold) 0, var(--gold) 6px, transparent 6px);
}

/* =====================================================
   HERO SCENE — cinematic immersive journey
   ===================================================== */
.hero-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Sky */
.hero-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(245,158,11,.18) 0%, transparent 50%),
    radial-gradient(ellipse 100% 70% at 80% 25%, rgba(239,43,45,.14) 0%, transparent 55%),
    linear-gradient(180deg, #05040a 0%, #0a0810 25%, #1a0e0a 55%, #2d1810 75%, #3d2414 100%);
}
html.light .hero-sky {
  background:
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(245,158,11,.45) 0%, transparent 50%),
    radial-gradient(ellipse 100% 70% at 75% 20%, rgba(245,158,11,.4) 0%, transparent 55%),
    linear-gradient(180deg, #cde4f7 0%, #f0dcc4 35%, #f3c88a 65%, #e88a48 100%);
}

/* Sun / Moon */
.hero-celestial {
  position: absolute;
  top: 14%; right: 14%;
  width: 120px; height: 120px;
  pointer-events: none;
}
.celestial-core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fef3c7 0%, #fcd34d 45%, #f59e0b 80%, transparent 100%);
  box-shadow:
    0 0 60px 20px rgba(251, 191, 36, .35),
    0 0 120px 40px rgba(245, 158, 11, .2);
  animation: celestial-pulse 6s ease-in-out infinite;
}
html.light .celestial-core {
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #fef3c7 50%, #fbbf24 100%);
  box-shadow:
    0 0 80px 30px rgba(253, 224, 71, .6),
    0 0 160px 60px rgba(245, 158, 11, .35);
}
.celestial-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(251, 191, 36, .2);
  pointer-events: none;
}
.celestial-ring-1 {
  inset: -30px;
  animation: ring-rot 30s linear infinite;
}
.celestial-ring-2 {
  inset: -60px;
  border-color: rgba(251, 191, 36, .1);
  animation: ring-rot 60s linear reverse infinite;
}
@keyframes celestial-pulse {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.15); }
}
@keyframes ring-rot {
  to { transform: rotate(360deg); }
}

/* Stars */
.hero-stars {
  position: absolute; inset: 0;
  width: 100%; height: 65%;
  pointer-events: none;
  transition: opacity .4s;
}
html.light .hero-stars { opacity: 0; }

/* Shooting stars */
.shooting-stars {
  position: absolute; inset: 0;
  width: 100%; height: 50%;
  pointer-events: none;
  transition: opacity .4s;
}
html.light .shooting-stars { opacity: 0; }
@keyframes shoot-anim {
  0%, 70% { opacity: 0; transform: translate(0,0); }
  72% { opacity: 1; }
  95% { opacity: 1; transform: translate(120px, 50px); }
  100% { opacity: 0; transform: translate(180px, 80px); }
}

/* Distant city glow */
.city-glow {
  position: absolute;
  left: 58%; right: 12%;
  bottom: 28%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(245,158,11,.55) 0%, rgba(239,43,45,.2) 40%, transparent 80%);
  filter: blur(14px);
  animation: city-flicker 4s ease-in-out infinite;
}
html.light .city-glow { opacity: 0; }
@keyframes city-flicker {
  0%,100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Mountains */
.hero-mountains {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
}
.hero-mountains-far {
  bottom: 24%;
  height: 28%;
  opacity: .95;
}
.hero-mountains-mid {
  bottom: 20%;
  height: 22%;
  opacity: 1;
}
:root {
  --mnt-far-top: #4a2a1a;
  --mnt-far-bot: #1a0e0a;
  --mnt-mid-top: #2d1810;
  --mnt-mid-bot: #0a0806;
  --road-top: #1a0e0a;
  --road-bot: #050403;
  --mountain-far: #2d1810;
  --mountain-mid: #1a0e0a;
  --mountain-near: #0a0806;
}
html.light {
  --mnt-far-top: #8c5a3a;
  --mnt-far-bot: #5d3a22;
  --mnt-mid-top: #5d3a22;
  --mnt-mid-bot: #3a2415;
  --road-top: #3a2415;
  --road-bot: #1a0e08;
  --mountain-far: #b88a5e;
  --mountain-mid: #8c5a3a;
  --mountain-near: #5d3a22;
}

/* Hero section frame & near mountain & sun & grid layout */
.hero-section { position: relative; }
.hero-mountains-near {
  position: absolute;
  left: 0; right: 0;
  bottom: 14%;
  width: 100%;
  height: 18%;
  opacity: 1;
}
.hero-sun {
  position: absolute;
  top: 18%; right: 16%;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fef3c7 0%, #fcd34d 50%, #d97706 100%);
  box-shadow: 0 0 36px 8px rgba(251,191,36,.22), 0 0 80px 22px rgba(245,158,11,.12);
  animation: celestial-pulse 7s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.92;
}
html.light .hero-sun {
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #fef3c7 55%, #fbbf24 100%);
  box-shadow: 0 0 50px 14px rgba(253,224,71,.5), 0 0 110px 36px rgba(245,158,11,.22);
}
.shooting-star {
  position: absolute;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent, #fef3c7, transparent);
  opacity: 0;
  animation: shoot-anim 8s linear infinite;
  filter: blur(0.5px);
}
html.light .shooting-star { opacity: 0; animation: none; }
.hero-logo-side {
  display: grid;
  place-items: center;
}
/* Mobile : on garde la mascotte (elle disparaissait avant à cause d'un
   display:none). Le grid passe à 1 colonne donc elle vient sous le texte ;
   on réduit la taille pour ne pas dominer l'écran. */
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-logo-side { max-width: 320px; margin: 0 auto; width: 100%; }
  .hero-logo-side .mascot { width: 100% !important; }
}
@media (max-width: 480px) {
  .hero-logo-side { max-width: 260px; }
}

/* ─── Reveal wrappant la Mascot : neutralise le clip-path ──────────
 * La règle `.reveal.in { clip-path: inset(0) }` (ligne ~531) clippe à la
 * bbox tout reveal terminé. Comme la tête de la mascotte dépasse au-dessus
 * de sa bbox via `top:-25%`, elle se fait couper en haut. On override pour
 * tout Reveal qui contient un `.mascot`. `:has()` supporté Chrome 105+,
 * Firefox 121+, Safari 15.4+ (large compat 2024+). */
.reveal:has(.mascot),
.reveal.in:has(.mascot) {
  clip-path: none !important;
  overflow: visible !important;
}

/* ─── LogoCoin floating top-right du hero ────────────────────────── */
/* Conserve l'animation SPIN du LogoCoin (signature de la marque) mais
 * neutralise les effets de flou/halo/caustic qui sont calibrés pour la
 * version centrale 340px et s'étalent disproportionnés en 140px floating.
 * Pointer-events:none pour ne pas bloquer la nav. */
.hero-logo-floating {
  position: absolute;
  top: 100px;          /* sous la nav, ne chevauche pas */
  right: 48px;
  z-index: 2;          /* au-dessus du HeroScene, sous le contenu textuel */
  pointer-events: none;
  opacity: 0.85;       /* léger pour ne pas voler la vedette au Mascot */
}
/* Neutralise les effets "lumineux" trop voyants en petite taille :
 * - .logo-halo : auréole colorée 36px blur → cachée
 * - .logo-caustic : caustic conic 40px blur → cachée
 * - .logo-coin : retire le drop-shadow doré, garde juste la base ombre */
.hero-logo-floating .logo-halo,
.hero-logo-floating .logo-caustic,
.hero-logo-floating .logo-reflection {
  display: none;
}
.hero-logo-floating .logo-coin {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
@media (max-width: 1100px) {
  .hero-logo-floating { top: 90px; right: 24px; opacity: 0.55; }
  .hero-logo-floating .logo-coin { transform: scale(0.75); transform-origin: top right; }
}
@media (max-width: 720px) {
  /* Pas de display:none : on garde le LogoCoin signature, mais en encore plus
     petit + plus opaque-faible pour ne pas voler la vedette à la mascotte. */
  .hero-logo-floating { top: 78px; right: 16px; opacity: 0.42; }
  .hero-logo-floating .logo-coin { transform: scale(0.55); transform-origin: top right; }
}

/* ─── Mascot (Burkina flag head + 3D body) ───────────────────────── */
/* Composant React `Mascot` dans hero.jsx :
 *  - `.mascot-body` : statique, le corps porte le ticket Faso Travel
 *  - `.mascot-head` : positionnée en absolute au-dessus du cou
 *    + animation idle (balance gauche/droite 5s)
 *    + tilt JS dynamique (tracking souris ±8°) appliqué via inline style
 *  - Au hover (`.is-active`), l'animation idle est mise en pause pour
 *    laisser le tracking souris dominer (plus expressif).
 */
.mascot {
  position: relative;
  display: inline-block;
  line-height: 0;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}
.mascot-body {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.mascot-head {
  position: absolute;
  /* Body PNG (trimmed 575×637) : le BRAS gauche tient le ticket FasoTravel
   * en l'air → le centre du body container N'EST PAS le centre du torse !
   * Mesure pixel runtime via sharp (script `cd LANDINGPAGE && node -e ...`) :
   *   - Centre du torse = X 394px = 68.43% du body width (PAS 50%)
   *   - Bowtie tout en haut du body trimmed (Y=0%)
   *   - Head PNG : circle centrée à 40.27% du PNG width, menton à 69.95% du PNG H
   * Calcul CSS pour width:42% (head visuel ~241×340 si body container 575×637) :
   *   - left:72% pour aligner le centre VISUEL de la circle sur le centre du torse
   *     (compensation : translateX(-50%) centre le PNG, mais centre PNG ≠ centre
   *     visuel head circle → ajout de +4% pour compenser le manche à droite)
   *   - top:-38% pour que le menton (à 70% × hauteur_head visible) tombe pile
   *     sur le bowtie (Y=0% du body)
   *   - transform-origin 40% 70% : pivot sur le menton VISUEL pour rotations
   *     idle/tracking propres (le pivot suit le menton, pas la bbox du PNG) */
  /* Itération 2026-05-24 : valeurs runtime confirmées par captures :
   * top:-20% : 3e ajustement, soulève légèrement pour libérer le bowtie
   * (à -15% la tête mordait sur le col). left:68% colle au centre du torse
   * visible (le bras gauche tire le centre bbox vers la gauche). */
  top: -27%;
  left: 71%;
  width: 42%;
  height: auto;
  transform: translateX(-50%);
  transform-origin: 40% 70%;
  animation: mascot-head-idle 5s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
/* Quand la souris entre dans la zone mascotte, on coupe l'idle pour
 * que le tracking dynamique JS prenne le relais sans superposition. */
.mascot.is-active .mascot-head {
  animation: none;
}
@keyframes mascot-head-idle {
  /* translate3d() force la création d'une couche GPU dédiée (compositor-only,
   * pas de paint au repeint) → animation 60fps sans surcharge CPU. */
  0%, 100% { transform: translate3d(-50%, 0, 0) rotate(0deg); }
  20%      { transform: translate3d(-50%, -1px, 0) rotate(-4deg); }
  40%      { transform: translate3d(-50%, 0, 0) rotate(-1deg); }
  60%      { transform: translate3d(-50%, -1px, 0) rotate(4deg); }
  80%      { transform: translate3d(-50%, 0, 0) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-head { animation: none; }
}

/* Atmospheric fog */
.hero-fog-band {
  position: absolute;
  left: 0; right: 0;
  bottom: 26%;
  height: 14%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(251,191,36,.08) 30%, rgba(251,191,36,.18) 60%, transparent 100%);
  filter: blur(6px);
  pointer-events: none;
  animation: fog-drift 14s ease-in-out infinite;
}
html.light .hero-fog-band {
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.35) 40%, rgba(245,158,11,.25) 80%, transparent 100%);
}
@keyframes fog-drift {
  0%,100% { transform: translateX(0); opacity: .8; }
  50% { transform: translateX(20px); opacity: 1; }
}

/* Horizon with road + driving bus */
.hero-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  pointer-events: none;
}
.hero-road {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
}
@keyframes road-dash-move {
  to { stroke-dashoffset: -64; }
}
.road-dash {
  animation: road-dash-move 1.2s linear infinite;
}

/* Vignette */
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, transparent 55%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}
html.light .hero-vignette {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, transparent 60%, rgba(0,0,0,.2) 100%);
}

/* =====================================================
   NEW HERO LAYERS — nebula, rays, birds, motes, fog-2
   ===================================================== */
.hero-nebula {
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  height: 60%;
  background:
    radial-gradient(ellipse 60% 50% at 22% 38%, rgba(220,38,38,.25), transparent 60%),
    radial-gradient(ellipse 50% 40% at 78% 28%, rgba(245,158,11,.18), transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 18%, rgba(22,163,74,.12), transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: nebula-breathe 14s ease-in-out infinite;
  pointer-events: none;
}
html.light .hero-nebula {
  opacity: 0.5;
  background:
    radial-gradient(ellipse 60% 50% at 22% 38%, rgba(245,158,11,.35), transparent 60%),
    radial-gradient(ellipse 50% 40% at 78% 28%, rgba(251,191,36,.3), transparent 65%);
  mix-blend-mode: multiply;
}
@keyframes nebula-breathe {
  0%,100% { transform: scale(1) translateY(0); opacity: 0.85; }
  50%     { transform: scale(1.06) translateY(8px); opacity: 1; }
}

.hero-rays {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.22;
}
html.light .hero-rays { opacity: 0.18; mix-blend-mode: multiply; }
@keyframes ray-pulse {
  from { opacity: 0.4; }
  to   { opacity: 0.95; }
}

.hero-birds {
  position: absolute;
  top: 18%;
  left: 0; right: 0;
  height: 200px;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes bird-fly {
  0%   { transform: translateX(-10vw); }
  100% { transform: translateX(110vw); }
}
.bird-flap {
  transform-origin: center;
  animation: bird-flap 0.5s ease-in-out infinite alternate;
}
@keyframes bird-flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.55); }
}

.hero-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-motes span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.95), rgba(251,191,36,0));
  box-shadow: 0 0 6px rgba(251,191,36,.6);
  animation-name: mote-float;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes mote-float {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.9; }
  50%  { transform: translate(40px, -30px) scale(1.1); opacity: 0.7; }
  80%  { opacity: 0.5; }
  100% { transform: translate(80px, -60px) scale(0.4); opacity: 0; }
}

.hero-fog-band-2 {
  bottom: 38%;
  height: 14%;
  opacity: 0.5;
  filter: blur(10px);
  animation-duration: 18s;
  animation-direction: reverse;
}

/* =====================================================
   DRIVING BUS — travels across horizon
   ===================================================== */
.bus-travel {
  position: absolute;
  bottom: 16%;
  left: -20%;
  animation: bus-drive 22s linear infinite;
  will-change: transform;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.6));
}
@keyframes bus-drive {
  0%   { transform: translateX(-20vw) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translateX(45vw) scale(1); }
  90%  { opacity: 1; }
  100% { transform: translateX(120vw) scale(1.1); opacity: 0; }
}
.bus-shake {
  animation: bus-shake 0.18s infinite;
}
@keyframes bus-shake {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
.wheel-spin {
  transform-origin: center;
  animation: wheel-spin 0.4s linear infinite;
}
@keyframes wheel-spin {
  to { transform: rotate(360deg); }
}
.bus-dust {
  position: absolute;
  left: -60px;
  bottom: 6px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.bus-dust span {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,170,130,.8), rgba(200,170,130,0));
  animation: dust-puff 1.4s ease-out infinite;
  opacity: 0;
}
@keyframes dust-puff {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translate(-80px, -18px) scale(2.2); opacity: 0; }
}

/* Panel background var (used in hero stats pill) */
:root { --panel-bg: rgba(11,10,8,.5); }
html.light { --panel-bg: rgba(255,255,255,.6); }

/* Phase / vision timeline */
.phase-card {
  padding: 36px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(244,236,224,.035), rgba(244,236,224,.01));
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.phase-num {
  font-family: var(--font-serif);
  font-size: 120px;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  position: absolute;
  top: -12px; right: 18px;
  opacity: .6;
}

/* FAQ */
.faq-item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.2,.8,.2,1), padding .4s;
  color: var(--cream-dim);
  font-size: 15px;
  line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 260px; padding-top: 14px; }
.faq-item .chev { transition: transform .3s; }
.faq-item.open .chev { transform: rotate(45deg); color: var(--gold); }

/* Hide cursor dot on touch */
@media (hover: none) {
  * { cursor: auto !important; }
}

/* ---------- DIORAMA 3D — Immersive travel scene ---------- */
.diorama {
  position: relative;
  margin-top: 72px;
  height: 460px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: #0b0a08;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(244,236,224,.06);
}
.dio-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 18% 25%, #fbbf24 0%, #dc2626 25%, #7c2d12 50%, #1a1612 75%, #0b0a08 100%);
  opacity: .95;
}
.dio-sun {
  position: absolute;
  left: 15%; top: 28%;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff7d6 0%, #fbbf24 35%, #f59e0b 60%, #dc2626 82%, rgba(220,38,38,0) 100%);
  filter: blur(.5px);
  box-shadow: 0 0 120px 40px rgba(245,158,11,.45), 0 0 200px 80px rgba(220,38,38,.3);
}
.dio-horizon {
  position: absolute; left: 0; right: 0; top: 42%;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.7), rgba(251,191,36,.9), rgba(245,158,11,.7), transparent);
  filter: blur(2px);
  opacity: .8;
}
.dio-mountains-far {
  position: absolute; left: 0; right: 0; top: 36%;
  width: 100%; height: 110px;
  opacity: .9;
}
.dio-hills-mid {
  position: absolute; left: 0; right: 0; bottom: 22%;
  width: 100%; height: 80px;
  filter: drop-shadow(0 -1px 0 rgba(245,158,11,.12));
}
.dio-baobabs {
  position: absolute; inset: 0;
  pointer-events: none;
  perspective: 900px;
  transform-style: preserve-3d;
}
.dio-baobab {
  position: absolute;
  bottom: 16%;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.5));
}
.dio-road {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 38%;
  perspective: 500px;
  transform-style: preserve-3d;
  overflow: hidden;
}
.dio-road-surface {
  position: absolute;
  left: 50%; bottom: 0; transform: translateX(-50%) rotateX(70deg);
  transform-origin: 50% 100%;
  width: 260%;
  height: 900px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(26,22,18,.6) 14%, #2a1f16 40%, #1a1310 100%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.2) 0 4px, transparent 4px 8px);
  border-top: 1px solid rgba(245,158,11,.35);
  box-shadow: 0 -30px 60px -10px rgba(245,158,11,.18);
}
.dio-road-line {
  position: absolute;
  left: 50%; bottom: 0;
  width: 8px; height: 70%;
  background: linear-gradient(180deg, #fbbf24 0 40%, transparent 40% 60%, #fbbf24 60% 100%);
  background-size: 100% 60px;
  transform: translateX(-50%) perspective(600px) rotateX(70deg);
  transform-origin: 50% 100%;
  animation: road-rush 1.2s linear infinite;
  opacity: .9;
}
.dio-road-edges {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background:
    linear-gradient(90deg, rgba(11,10,8,.9) 0%, transparent 15%, transparent 85%, rgba(11,10,8,.9) 100%);
  pointer-events: none;
}
@keyframes road-rush {
  0% { background-position: 0 0; }
  100% { background-position: 0 60px; }
}
.dio-dust {
  position: absolute;
  right: 18%; bottom: 20%;
  width: 260px; height: 140px;
  background: radial-gradient(ellipse at right center, rgba(245,158,11,.22), rgba(180,83,9,.12) 30%, transparent 70%);
  filter: blur(10px);
  animation: dust-waft 4s ease-in-out infinite alternate;
}
@keyframes dust-waft {
  from { opacity: .7; transform: scaleX(1); }
  to   { opacity: 1;  transform: scaleX(1.15); }
}
.dio-bus-wrap {
  position: absolute;
  left: 50%; bottom: 14%;
  transform: translateX(-50%);
  animation: bus-sway 4s ease-in-out infinite;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(245,158,11,.1));
  z-index: 5;
}
.dio-bus {
  display: block;
  animation: bus-bounce .6s ease-in-out infinite alternate;
}
@keyframes bus-sway {
  0%,100% { transform: translateX(calc(-50% - 2px)) rotate(-.4deg); }
  50%     { transform: translateX(calc(-50% + 2px)) rotate(.4deg); }
}
@keyframes bus-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-1.5px); }
}
.dio-tag {
  position: absolute;
  padding: 8px 14px;
  background: rgba(11,10,8,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244,236,224,.15);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #f4ece0;
  z-index: 10;
  animation: tag-float 4s ease-in-out infinite;
}
.dio-tag .tag-dot {
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.dio-tag-a { top: 20px; left: 24px; animation-delay: 0s; }
.dio-tag-b { top: 20px; right: 24px; animation-delay: 1s; }
.dio-tag-c { bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: .2em; }
@keyframes tag-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.dio-tag-c { animation-name: tag-float-c; }
@keyframes tag-float-c {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-3px); }
}
.dio-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .6 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (max-width: 800px) {
  .diorama { height: 380px; }
  .dio-bus { width: 300px; height: 118px; }
  .dio-sun { width: 100px; height: 100px; left: 12%; top: 22%; }
  .dio-tag-c { font-size: 8px; padding: 6px 10px; }
}
@media (max-width: 520px) {
  .diorama { height: 320px; }
  .dio-bus { width: 240px; height: 95px; }
  .dio-tag { font-size: 9px; padding: 6px 10px; }
  .dio-tag-a, .dio-tag-b { top: 14px; }
}

/* BF 3D Map */
.bf-3d-wrap {
  position: relative;
  perspective: 1600px;
}
.bf-3d-stage {
  position: relative;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 40%, rgba(245,158,11,.08), rgba(11,10,8,.9) 70%);
  border: 1px solid var(--line);
  padding: 14px;
  transform: rotateX(6deg);
  transition: transform .6s ease;
}
.bf-3d-stage:hover { transform: rotateX(2deg) rotateY(-2deg); }
.bf-3d-map { width: 100%; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.bf-city text { transition: fill .2s; }
.bf-city.active text { fill: #fbbf24 !important; }
.bf-legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 12px 14px 4px;
  font-size: 11px;
  color: var(--cream-dim);
}
.bf-legend > div { display: inline-flex; align-items: center; gap: 6px; }
.bf-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }
.bf-legend .dash { width: 16px; height: 2px; background: repeating-linear-gradient(90deg, #fbbf24 0 4px, transparent 4px 7px); display: inline-block; }

/* Progress scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
  z-index: 200;
  transition: width .1s;
}

/* Partenaires transporteurs */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.partner-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(244,236,224,.035), rgba(244,236,224,.01));
  transition: transform .3s, border-color .3s, background .3s;
}
.partner-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.35);
  background: linear-gradient(180deg, rgba(244,236,224,.06), rgba(244,236,224,.015));
}
.partner-mark {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
@media (max-width: 900px) {
  .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .partners-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   HERO V2 — sober premium (Apple/Linear style)
   ===================================================== */
.hero-section-v2 {
  background: var(--bg);
}
.hero-backdrop {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-sky-deep {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(28,18,12,0.0) 0%, rgba(8,5,4,0.55) 70%, var(--bg) 100%),
    var(--bg);
}
html.light .hero-sky-deep {
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255,255,255,0) 0%, rgba(245,238,225,0.55) 70%, var(--bg) 100%),
    var(--bg);
}
.hero-spotlight {
  position: absolute;
  top: 50%; left: 50%;
  width: 1100px; height: 1100px;
  background:
    radial-gradient(circle at 50% 50%, rgba(245,158,11,0.22) 0%, rgba(220,38,38,0.10) 28%, rgba(22,163,74,0.06) 50%, transparent 72%);
  filter: blur(50px);
  pointer-events: none;
  animation: spot-pulse 9s ease-in-out infinite;
}
html.light .hero-spotlight {
  background:
    radial-gradient(circle at 50% 50%, rgba(245,158,11,0.18) 0%, rgba(220,38,38,0.06) 30%, transparent 70%);
}
@keyframes spot-pulse {
  0%,100% { opacity: 0.85; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;    transform: translate(-50%,-50%) scale(1.05); }
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,236,224,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,236,224,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
}
html.light .hero-grid-bg {
  background-image:
    linear-gradient(rgba(20,12,8,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,12,8,0.05) 1px, transparent 1px);
}
.hero-vignette-2 {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
html.light .hero-vignette-2 {
  background:
    radial-gradient(ellipse 95% 85% at 50% 50%, transparent 60%, rgba(0,0,0,0.15) 100%);
}

/* Eyebrow pill */
.hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.hero-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-glow);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pill-pulse 2.4s ease-in-out infinite;
}
@keyframes pill-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.45; }
}

/* Hero title v2 */
.hero-title-v2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--cream);
  text-wrap: balance;
}
.hero-title-v2 .hero-line-1 {
  display: block;
  font-style: normal;
}
.hero-title-v2 .hero-line-2 {
  display: block;
  font-style: italic;
  background: linear-gradient(95deg, #f4a23e 0%, #fbbf24 28%, #f4ece0 55%, #6cd6a3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-top: 8px;
}
.hero-sub-v2 {
  margin: 32px auto 0;
  max-width: 62ch;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--cream-dim);
  font-weight: 400;
}

/* Logo center stage */
.hero-logo-stage {
  position: relative;
  margin: 64px auto 0;
  width: min(420px, 80vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.hero-orbit {
  position: absolute;
  inset: -8%;
  width: 116%; height: 116%;
  pointer-events: none;
}

/* Stats row */
.hero-stats-row {
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 880px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.hero-stat {
  text-align: center;
  border-right: 1px solid var(--line);
  padding: 0 16px;
}
.hero-stat:last-child { border-right: 0; }
.hero-stat-num {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  color: var(--cream);
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 8px;
}
@media (max-width: 720px) {
  .hero-stats-row { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(2) { border-right: 0; }
  .hero-stat:nth-child(1), .hero-stat:nth-child(2) { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
  .hero-stat:nth-child(3), .hero-stat:nth-child(4) { padding-top: 18px; }
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* =====================================================
   DIORAMA ROUTE — replaces the old SVG bus
   ===================================================== */
.dio-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}
.dio-route-dash {
  animation: dio-dash 2s linear infinite;
}
@keyframes dio-dash {
  to { stroke-dashoffset: -28; }
}
.dio-pin-pulse {
  transform-origin: center;
  animation: pin-pulse 2.4s ease-in-out infinite;
}
@keyframes pin-pulse {
  0%,100% { transform: scale(1); opacity: 0.25; }
  50%     { transform: scale(1.6); opacity: 0; }
}
.dio-route-bead {
  offset-path: path("M 60 420 Q 400 360 800 380 T 1540 360");
  offset-distance: 0%;
  filter: drop-shadow(0 0 8px #fbbf24) drop-shadow(0 0 14px rgba(251,191,36,.5));
  animation: bead-travel 6s linear infinite;
}
@keyframes bead-travel {
  0%   { offset-distance: 0%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ============================================================
   ÂME BURKINABÉ — Heritage / Voices / Contrast / Hero greetings
   Ajouté en mai 2026 (voir Correction en cours.md section 14).
   ============================================================ */

/* ---------- HERO — Salutations rotatives Mooré/Dioula/FR/EN ---------- */
.hero-greetings {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  /* Pill posée sur l'overlay sombre du hero — couleurs forcées car
     l'overlay reste sombre quel que soit le thème global. */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  min-height: 32px;
}
.hero-greetings-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  animation: greetingFade 0.7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, filter;
}
.hero-greetings-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: #f4ece0;
  letter-spacing: 0.01em;
}
.hero-greetings-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fbbf24;
  opacity: 0.9;
}
@keyframes greetingFade {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ====================================================================
   PHONE FRAME — iframe vers l'app Mobile réelle (mode démo)
   ==================================================================== */
.sim-section {
  padding: 100px 0 120px;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, var(--bg-2) 30%, var(--bg-2) 70%, transparent 100%);
}
.phone-frame-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}
/* Cadre téléphone — simule un iPhone 15 Pro (393×852 CSS pixels).
   Dynamic Island au lieu d'un notch. L'app reçoit un viewport réaliste
   et s'adapte comme sur un vrai téléphone. */
.phone-frame {
  position: relative;
  border-radius: 54px;
  background: #000;
  padding: 10px;
  overflow: hidden;
  border: 3px solid #2a2a2a;
  box-shadow:
    inset 0 0 4px rgba(255,255,255,0.05),
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  flex-shrink: 0;
}
/* Viewport intérieur 393×852 → extérieur 393+20+6 = 419 × 852+20+6 = 878.
   aspect-ratio garantit que sur petits écrans, quand la width est plafonnée
   par max-width, la height suit automatiquement (au lieu d'un scale visuel). */
.phone-frame-lg, .phone-frame-md {
  width: 419px;
  height: auto;
  aspect-ratio: 419 / 878;
  max-width: calc(100vw - 32px);
}
html.light .phone-frame {
  background: #1a1a1a;
  border-color: #3a3a3a;
  box-shadow:
    inset 0 0 4px rgba(255,255,255,0.03),
    0 40px 80px -20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0,0,0,0.1);
}
.phone-frame:hover { transform: translateY(-4px); }

/* Dynamic Island (iPhone 14 Pro+) */
.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 34px;
  background: #000;
  border-radius: 20px;
  z-index: 3;
  pointer-events: none;
}

.phone-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 44px;
  background: #fff;
  display: block;
}

.phone-loading,
.phone-fallback {
  position: absolute;
  inset: 12px;
  border-radius: 36px;
  display: grid;
  place-items: center;
  background: var(--bg);
  text-align: center;
  padding: 24px;
  z-index: 2;
}
.phone-loading p,
.phone-fallback p {
  color: var(--cream-dim);
  font-size: 13px;
  margin-top: 14px;
}
.phone-loading-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--line-2);
  border-top-color: var(--gold);
  animation: phoneSpin 0.9s linear infinite;
  margin: 0 auto;
}
@keyframes phoneSpin {
  to { transform: rotate(360deg); }
}

.phone-restart {
  position: absolute;
  bottom: -52px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--cream-dim);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  transition: all 0.2s;
}
.phone-restart:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Légende latérale */
.phone-side-hint {
  max-width: 220px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.phone-side-hint-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
  animation: phoneHintPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes phoneHintPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.0); }
}
.phone-side-hint p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cream-dim);
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .phone-frame-wrap { flex-direction: column; gap: 28px; }
  .phone-side-hint { max-width: 100%; text-align: center; flex-direction: column; align-items: center; }
}
/* Plus de transform:scale ici : le téléphone se redimensionne naturellement
   via aspect-ratio + max-width sur .phone-frame-lg/-md (voir plus haut). */


/* ---------- Section Features avec démo iframe centrée ---------- */
.features-grid-demo {
  display: grid;
  grid-template-columns: 1fr 440px 1fr;
  gap: 40px;
  align-items: center;
}
.features-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.features-demo-stage {
  position: relative;
  display: grid;
  place-items: center;
}
.features-demo-glow {
  position: absolute;
  inset: -50px;
  background: radial-gradient(circle, rgba(245,158,11,.22), transparent 65%);
  filter: blur(28px);
  pointer-events: none;
}
@media (max-width: 1100px) {
  .features-grid-demo {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Sur tablette/mobile, la démo passe en haut et les features dessous */
  .features-grid-demo > .features-demo-stage {
    order: -1;
    margin-bottom: 8px;
  }
}
/* Idem ici : suppression du scale 0.7 — le redimensionnement passe par
   aspect-ratio + max-width: calc(100vw - 32px). */

/* === ANCIEN simulateur SVG (fallback non utilisé maintenant que l'iframe
   est en place) — règles conservées pour compat si on devait revenir. === */


/* Stepper */
.sim-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.sim-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--cream-dim);
  transition: all 0.3s;
}
.sim-step-pill.active {
  background: var(--gold);
  color: #0b0a08;
  border-color: var(--gold);
  font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(245, 158, 11, 0.6);
}
.sim-step-pill.done {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border-color: rgba(22, 163, 74, 0.4);
}
.sim-step-pill-num {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.sim-step-pill.active .sim-step-pill-num { background: rgba(0,0,0,0.2); }
.sim-step-pill-label {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  font-size: 11px;
  text-transform: uppercase;
}

/* Stage container — cadre commun */
.sim-stage {
  max-width: 720px;
  margin: 0 auto;
}
.sim-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
  animation: simCardIn 0.4s cubic-bezier(.2,.8,.2,1);
}
@keyframes simCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sim-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.sim-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold);
  color: #0b0a08;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 14px;
  flex-shrink: 0;
}
.sim-step-num-success { background: #16a34a; color: #fff; font-size: 18px; }
.sim-step-head-success { border-color: rgba(22, 163, 74, 0.3); }
.sim-step-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
}
.sim-back {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--cream-dim);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
  margin-right: 4px;
}
.sim-back:hover { color: var(--cream); border-color: var(--gold); }

/* Champs */
.sim-fields {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.sim-fields:has(.sim-field:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}
.sim-step-search .sim-fields:nth-of-type(2) {
  grid-template-columns: 1fr 1fr;
}
.sim-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sim-field span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.sim-field select,
.sim-field input {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--cream);
  padding: 13px 14px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sim-field select:focus,
.sim-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.sim-swap {
  align-self: end;
  padding-bottom: 4px;
}
.sim-swap button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--cream-dim);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.25s;
}
.sim-swap button:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: rotate(180deg);
}
.sim-cta {
  width: 100%;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sim-hint {
  text-align: center;
  font-size: 11px;
  color: var(--cream-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  margin-top: 18px;
  opacity: 0.7;
}

/* Étape 2 — liste de trajets */
.sim-trip-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sim-trip {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  color: var(--cream);
  font-family: inherit;
}
.sim-trip:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(245, 158, 11, 0.3);
}
.sim-trip-best {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, var(--bg-2), rgba(245, 158, 11, 0.06));
}
.sim-trip-badge {
  position: absolute;
  top: -10px; left: 18px;
  padding: 3px 10px;
  background: var(--gold);
  color: #0b0a08;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
}
.sim-trip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.sim-trip-time {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
}
.sim-trip-dot {
  font-size: 10px;
  letter-spacing: -2px;
  color: var(--gold);
}
.sim-trip-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
}
.sim-trip-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--cream-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.sim-trip-meta strong { color: var(--cream); }
.sim-trip-seats {
  margin-left: auto;
  color: #4ade80;
}

/* Étape 3 — sélection siège */
.sim-seat-driver {
  text-align: center;
  padding: 10px;
  background: var(--bg-2);
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--cream-dim);
  border: 1px dashed var(--line-2);
}
.sim-seat-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  margin: 0 auto 20px;
  padding: 18px;
  background: var(--bg-2);
  border-radius: 16px;
  border: 1px solid var(--line);
}
.sim-seat-row {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.sim-seat-aisle { width: 18px; }
.sim-seat {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(244, 236, 224, 0.06);
  border: 1px solid var(--line-2);
  color: var(--cream-dim);
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.18s;
}
html.light .sim-seat { background: rgba(26, 22, 18, 0.04); }
.sim-seat:hover:not(.occupied):not(.selected) {
  border-color: var(--gold);
  color: var(--cream);
  transform: scale(1.05);
}
.sim-seat.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0a08;
  font-weight: 700;
  transform: scale(1.05);
  box-shadow: 0 6px 14px -4px rgba(245, 158, 11, 0.6);
}
.sim-seat.occupied {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.35);
  color: rgba(220, 38, 38, 0.7);
  cursor: not-allowed;
  text-decoration: line-through;
}
.sim-seat-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
  font-size: 11px;
  color: var(--cream-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.sim-seat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sim-leg {
  width: 12px; height: 12px;
  border-radius: 3px;
}
.sim-leg-free { background: rgba(244, 236, 224, 0.1); border: 1px solid var(--line-2); }
.sim-leg-sel  { background: var(--gold); }
.sim-leg-occ  { background: rgba(220, 38, 38, 0.5); }
.sim-seat-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sim-total-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 4px;
}
.sim-total-amount {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--gold);
}

/* Étape 4 — billet */
.sim-ticket {
  position: relative;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1410;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 20px 50px -16px rgba(245, 158, 11, 0.5);
  overflow: hidden;
}
.sim-ticket::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.3), transparent 60%);
  pointer-events: none;
}
.sim-ticket-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.sim-ticket-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}
.sim-ticket-route {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
}
.sim-ticket-op {
  padding: 6px 12px;
  background: rgba(11, 10, 8, 0.15);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.sim-ticket-mid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.sim-ticket-mid > div { display: flex; flex-direction: column; }
.sim-ticket-mid > div > span:last-child {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}
.sim-ticket-perf {
  height: 1px;
  background-image: linear-gradient(90deg, currentColor 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  opacity: 0.4;
  margin-bottom: 18px;
  position: relative;
}
.sim-ticket-perf::before,
.sim-ticket-perf::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  background: var(--bg);
  border-radius: 50%;
  top: -8px;
}
.sim-ticket-perf::before { left: -32px; }
.sim-ticket-perf::after { right: -32px; }
.sim-ticket-bottom {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.sim-ticket-qr {
  flex-shrink: 0;
  background: #fff;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sim-ticket-qr svg { display: block; }
.sim-ticket-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.sim-ticket-code {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sim-ticket-total {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
}
.sim-success-hint {
  text-align: center;
  font-size: 13px;
  color: var(--cream-dim);
  margin: 0 0 18px;
}
.sim-restart {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 700px) {
  .sim-card { padding: 22px; border-radius: 16px; }
  .sim-fields { grid-template-columns: 1fr !important; }
  .sim-swap { display: none; }
  .sim-stepper { gap: 4px; }
  .sim-step-pill { padding: 6px 10px; font-size: 11px; }
  .sim-step-pill-label { display: none; }
  .sim-step-title { font-size: 17px; }
  .sim-trip-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sim-trip-meta { flex-wrap: wrap; gap: 8px; }
  .sim-ticket-mid { grid-template-columns: repeat(2, 1fr); }
  .sim-ticket-bottom { flex-direction: column; align-items: stretch; text-align: center; }
  .sim-ticket-qr { margin: 0 auto; }
  .sim-seat { width: 38px; height: 38px; font-size: 10px; }
}

/* ====================================================================
   MODALS UNIFIÉES — Liste d'attente WhatsApp + Devenir partenaire
   Adaptables au thème, focus accessible, transitions douces.
   ==================================================================== */
.ft-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 10, 8, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: ftModalFadeIn 0.22s ease;
}
html.light .ft-modal-backdrop { background: rgba(26, 22, 18, 0.55); }
@keyframes ftModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ft-modal {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 36px 32px;
  max-width: 460px;
  width: 100%;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.65);
  animation: ftModalRise 0.32s cubic-bezier(.2,.8,.2,1);
  max-height: 90vh;
  overflow-y: auto;
}
.ft-modal-large { max-width: 620px; padding: 36px 36px 28px; }
@keyframes ftModalRise {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.ft-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--cream-dim);
  font-size: 22px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}
.ft-modal-close:hover {
  background: var(--line);
  color: var(--cream);
}
.ft-modal-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.ft-modal-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.ft-modal-sub {
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.ft-modal-head { text-align: left; }
.ft-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ft-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ft-field { display: flex; flex-direction: column; gap: 6px; }
.ft-field-full { grid-column: 1 / -1; }
.ft-field span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.ft-field input,
.ft-field select,
.ft-field textarea {
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--cream);
  padding: 12px 14px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ft-field input:focus,
.ft-field select:focus,
.ft-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.ft-field textarea { resize: vertical; min-height: 80px; font-family: var(--font-sans); }

/* Champ téléphone avec préfixe drapeau Burkina */
.ft-input-phone {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ft-input-phone:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.ft-input-phone .ft-input-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  color: var(--cream-dim);
  background: var(--line);
  border-right: 1px solid var(--line-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ft-input-phone input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 16px;
  color: var(--cream);
  font-size: 14px;
  outline: none;
  font-family: var(--font-sans);
}
/* Variante du champ utilisée dans la grille de formulaire (rectangulaire) */
.ft-field .ft-input-phone { border-radius: 12px; }

.ft-modal-success {
  padding: 14px 20px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.18);
  color: #4ade80;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.ft-modal-success-large {
  padding: 22px 24px;
  border-radius: 16px;
  font-size: 15px;
}

/* CTA final — formulaire WhatsApp en pill */
.ft-cta-final-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 540px;
  margin: 0 auto 40px;
  background: rgba(244, 236, 224, 0.06);
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ft-cta-final-form:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
html.light .ft-cta-final-form { background: rgba(26, 22, 18, 0.04); }
.ft-cta-final-form .ft-input-prefix {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ft-cta-final-form input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--cream);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
}

/* Cartes de contact (WhatsApp + Bureau) */
.ft-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.ft-contact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  min-width: 200px;
  transition: border-color 0.2s, transform 0.3s;
}
a.ft-contact-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.ft-contact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ft-contact-value {
  font-size: 15px;
  color: var(--cream);
  font-weight: 500;
}

@media (max-width: 600px) {
  .ft-form-grid { grid-template-columns: 1fr; }
  .ft-modal { padding: 28px 22px; }
  .ft-modal-large { padding: 28px 22px; }
  .ft-cta-final-form { flex-direction: column; border-radius: 18px; padding: 10px; }
}

/* ---------- HERO — Lisibilité forcée quel que soit le thème ----------
   La photo de fond + overlay sombre reste toujours sombre, donc le texte
   doit rester clair en permanence (sinon en light mode on aurait du texte
   sombre sur overlay sombre = illisible). On force les couleurs des
   éléments du hero à des valeurs claires fixes. */
.hero-section .eyebrow { color: #d4c8b0; }
.hero-section .eyebrow::before { background: #fbbf24; }
.hero-section .display { color: #f4ece0; }
.hero-section .lead    { color: #d4c8b0; }
.hero-section .hero-stat-num { color: #f4ece0; }
.hero-section .hero-stat-label { color: #c9bfae; }
.hero-section .btn-store {
  border-color: rgba(255,255,255,0.22);
  color: #f4ece0;
  background: rgba(255,255,255,0.04);
}
.hero-section .btn-store:hover {
  border-color: #fbbf24;
  background: rgba(245,158,11,0.12);
}
.hero-section .btn-store .store-txt .s1 { color: #c9bfae; }
.hero-section .btn-store .badge-soon {
  background: rgba(245,158,11,0.18);
  color: #fbbf24;
}

/* ---------- HERO — Background photo Burkina Faso ---------- */
.hero-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
  /* Léger zoom pulsant ultra-lent pour donner de la vie */
  animation: heroPhotoBreath 28s ease-in-out infinite;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Dégradé sombre pour la lisibilité du texte (plus prononcé à gauche
     où se trouve le titre, plus léger à droite où on garde la richesse
     de la photo). En dark mode + plus opaque ; en light + lecture sombre. */
  background:
    linear-gradient(95deg, rgba(11,10,8,0.82) 0%, rgba(11,10,8,0.55) 45%, rgba(11,10,8,0.22) 100%),
    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}
html.light .hero-photo-overlay {
  background:
    linear-gradient(95deg, rgba(11,10,8,0.65) 0%, rgba(11,10,8,0.35) 50%, rgba(11,10,8,0.1) 100%);
}
@keyframes heroPhotoBreath {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.04); }
}

/* Quand la photo est posée, on masque les couches SVG illustratives
   (montagnes, soleil, ciel dégradé, brouillard, route) qui faisaient
   doublon visuel et alourdissaient le rendu. Les particules dorées
   restent pour la profondeur. */
.hero-scene .hero-sky,
.hero-scene .hero-nebula,
.hero-scene .hero-stars,
.hero-scene .hero-rays,
.hero-scene .hero-sun,
.hero-scene .hero-mountains-far,
.hero-scene .hero-mountains-mid,
.hero-scene .hero-mountains-near,
.hero-scene .hero-fog-band,
.hero-scene .hero-horizon,
.hero-scene .hero-vignette,
.hero-scene .shooting-star,
.hero-scene .hero-birds {
  display: none !important;
}

/* ---------- DRAPEAU BURKINA — banderole défilante horizontale infinie ---------- */
.ft-danfani {
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 6px 12px -6px rgba(0, 0, 0, 0.4),
    inset 0 -6px 12px -6px rgba(0, 0, 0, 0.4);
}
.ft-danfani-track {
  display: flex;
  width: max-content;
  animation: danfani-scroll 30s linear infinite;
  will-change: transform;
}
.ft-danfani-track:hover { animation-play-state: paused; }
@keyframes danfani-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Vignette latérale très douce pour fondre les bords (effet bannière) */
.ft-danfani::before,
.ft-danfani::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.ft-danfani::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.ft-danfani::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}
.light .ft-danfani::before { background: linear-gradient(90deg, var(--bg) 0%, transparent 100%); }
.light .ft-danfani::after  { background: linear-gradient(270deg, var(--bg) 0%, transparent 100%); }

/* ---------- OUAGA AERIAL — photo aérienne dans la section Mission ---------- */
.ouaga-aerial-frame {
  margin: 64px 0 0;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.ouaga-aerial-frame:hover { transform: translateY(-4px); }
.ouaga-aerial-frame img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.ouaga-aerial-frame:hover img { transform: scale(1.03); }
.ouaga-aerial-frame figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 28px 20px;
  /* Overlay sombre fixe : la photo a son propre univers de couleurs
     et on garantit la lisibilité quel que soit le thème global. */
  background: linear-gradient(180deg, transparent 0%, rgba(11,10,8,0.92) 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #f4ece0;
}
.ouaga-aerial-label {
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  letter-spacing: 0.005em;
  color: #f4ece0;
}
.ouaga-aerial-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fbbf24;
}

/* ---------- LOGO SIMPLE — juste le logo qui tourne, sans verre ---------- */
.logo-simple {
  display: grid;
  place-items: center;
  margin: 0 auto;
  position: relative;
}
.logo-simple img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: logoSpinSlow 18s linear infinite;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
@keyframes logoSpinSlow {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ---------- HERITAGE — Monument + citation Sankara ---------- */
.heritage-section {
  padding: 120px 0;
  position: relative;
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(124, 45, 18, 0.06) 50%,
    var(--bg) 100%
  );
}
.heritage-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.heritage-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sankara-quote {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  margin: 0;
  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(220, 38, 38, 0.08) 0%,
    rgba(251, 191, 36, 0.06) 50%,
    rgba(22, 163, 74, 0.08) 100%);
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.sankara-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(251,191,36,0.08), transparent 60%);
  pointer-events: none;
}
.sankara-portrait {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 2px rgba(251,191,36,0.5);
  background: #1a1410;
}
.sankara-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.sankara-quote:hover .sankara-portrait img { transform: scale(1.08); }
.sankara-words { position: relative; z-index: 1; }
.sankara-words blockquote {
  margin: 0 0 10px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cream);
  letter-spacing: 0.005em;
}
.sankara-words figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.heritage-bridge {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cream-dim);
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  margin: 0;
}
.heritage-visual { position: relative; }
.monument-frame {
  margin: 0;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,191,36,0.1);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.monument-frame:hover { transform: translateY(-4px); }
.monument-frame img {
  display: block;
  width: 100%;
  height: 540px;
  margin-top: -30px;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.monument-frame:hover img.no-parallax { transform: scale(1.04); }
.monument-frame figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Overlay sombre fixe : la photo est riche en couleurs, on protège
     toujours la lisibilité avec un fond sombre + texte clair forcé,
     indépendamment du thème global du site. */
  background: linear-gradient(180deg, transparent, rgba(11,10,8,0.92));
  color: #f4ece0;
}
.monument-label {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: #f4ece0;
}
.monument-city {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fbbf24;
}

/* ---------- VOICES — 3 témoignages ---------- */
.voices-section { padding: 120px 0; }
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.voice-card {
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--bg-2), rgba(244,236,224,0.02));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.voice-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--gold), transparent);
  opacity: 0.08;
  transition: opacity 0.3s;
}
.voice-card:hover { transform: translateY(-6px); border-color: var(--line-2); }
.voice-card:hover::before { opacity: 0.18; }
.voice-head { display: flex; gap: 14px; align-items: center; }
.voice-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--cream);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border: 2px solid rgba(244,236,224,0.15);
}
.voice-name { margin: 0; font-size: 18px; font-weight: 600; color: var(--cream); }
.voice-role {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--cream-dim);
  font-family: var(--font-mono);
}
.voice-quote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}
.voice-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.voice-trip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cream);
  font-weight: 500;
}
.voice-trip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #dc2626, #16a34a);
  box-shadow: 0 0 8px rgba(251,191,36,0.6);
}
.voice-freq {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- CONTRAST — Avant / Avec ---------- */
.contrast-section { padding: 120px 0; }
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 32px;
  align-items: stretch;
}
.contrast-col {
  padding: 32px 28px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--line);
}
.contrast-before {
  background: linear-gradient(180deg, rgba(124, 45, 18, 0.12), rgba(11,10,8,0.4));
  border-color: rgba(220, 38, 38, 0.2);
}
.contrast-after {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.1), rgba(251,191,36,0.05));
  border-color: rgba(22, 163, 74, 0.3);
}
.contrast-header { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contrast-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.contrast-before .contrast-label { color: #fca5a5; }
.contrast-after  .contrast-label { color: #86efac; }
.contrast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contrast-item { display: flex; gap: 14px; align-items: flex-start; }
.contrast-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  /* Background semi-transparent qui pioche dans le contraste opposé du
     thème (crème sur dark, sombre sur light) — toujours visible. */
  background: var(--line-2);
  border: 1px solid var(--line);
}
.contrast-title { font-size: 15px; font-weight: 600; color: var(--cream); margin-bottom: 4px; }
.contrast-desc { font-size: 13px; color: var(--cream-dim); line-height: 1.5; }
.contrast-divider { position: relative; display: grid; place-items: center; }
.contrast-divider-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%, #dc2626 20%, #fbbf24 50%, #16a34a 80%, transparent 100%);
  opacity: 0.6;
}
.contrast-divider-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.4);
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(251, 191, 36, 0.4); }
  50%      { box-shadow: 0 0 36px rgba(251, 191, 36, 0.7); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .heritage-grid { grid-template-columns: 1fr; gap: 40px; }
  .voices-grid { grid-template-columns: 1fr; gap: 16px; }
  .contrast-grid { grid-template-columns: 1fr; gap: 16px; }
  .contrast-divider { height: 60px; }
  .contrast-divider-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%, #dc2626 20%, #fbbf24 50%, #16a34a 80%, transparent 100%);
  }
  .contrast-divider-arrow { transform: translate(-50%, -50%) rotate(90deg); }
  .monument-frame img { height: 360px; }
}

/* ---------- Light mode adjustments ---------- */
.light .heritage-section {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(251, 191, 36, 0.05) 50%, var(--bg) 100%);
}
.light .voice-card { background: linear-gradient(135deg, #ffffff, rgba(11,10,8,0.02)); }
.light .contrast-before { background: linear-gradient(180deg, rgba(220, 38, 38, 0.06), rgba(255,255,255,0.5)); }
.light .contrast-after  { background: linear-gradient(180deg, rgba(22, 163, 74, 0.06), rgba(251,191,36,0.04)); }

/* ====================================================================
   RESPONSIVE GLOBAL — Patch unifié pour tablette + mobile + très petit
   Couvre les sections où les breakpoints individuels manquaient ou
   débordaient. Append-only à la fin pour écraser les règles plus haut.
   ==================================================================== */

/* Tablette + mobile (< 900px) — colonnes en stack, paddings réduits */
@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .section { padding: 80px 0; }

  /* Hero : padding plus serré, grille en colonne, photo de fond plus
     visible (l'overlay est moins prononcé pour qu'on devine la carte). */
  .hero-section .container {
    padding: 110px 20px 50px !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: left;
  }
  /* Mascotte conservée : grille en 1 colonne, mascotte sous le texte,
     pas de display:none (réglages de taille gérés plus haut au breakpoint 720px). */
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Heritage : grille en colonne, photo monument + texte empilés */
  .heritage-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .heritage-section { padding: 80px 0; }
  .monument-frame img { height: 320px; }
  .sankara-quote { flex-direction: column; gap: 14px; }

  /* Voices : carrousel léger en colonne */
  .voices-grid { grid-template-columns: 1fr !important; }
  .voices-section { padding: 80px 0; }

  /* Contrast : une colonne, séparateur horizontal */
  .contrast-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .contrast-divider { height: 50px; }
  .contrast-divider-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%, #dc2626 20%, #fbbf24 50%, #16a34a 80%, transparent 100%);
  }
  .contrast-divider-arrow { transform: translate(-50%, -50%) rotate(90deg); }
  .contrast-section { padding: 80px 0; }

  /* Photo Ouaga */
  .ouaga-aerial-frame img { max-height: 320px; }
  .ouaga-aerial-frame figcaption { padding: 16px 20px 14px; }
  .ouaga-aerial-label { font-size: 22px; }

  /* Drapeau Burkina banderole — un peu moins haut */
  .ft-danfani { height: 28px !important; }
}

/* Mobile (< 600px) — typo réduite, paddings encore plus serrés */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .section { padding: 60px 0; }

  /* Hero stats en 2x2 même sur petit */
  .hero-stats-row { gap: 12px !important; }

  /* CTAs Apple Store / Google Play en colonne */
  .hero-section .btn-store { flex: 1 1 100%; }

  /* Diorama (Mission) : pas trop grand */
  .diorama { height: 320px !important; }

  /* Photo Sankara plus petite */
  .sankara-portrait { width: 80px; height: 80px; }

  /* Voice cards moins paddées */
  .voice-card { padding: 22px; }
  .voice-quote { font-size: 14px; }

  /* Contrast items resserrés */
  .contrast-col { padding: 22px 18px; }
  .contrast-icon { width: 32px; height: 32px; font-size: 18px; }
  .contrast-title { font-size: 14px; }
  .contrast-desc { font-size: 12px; }

  /* Hero greetings pill plus discrete */
  .hero-greetings { padding: 5px 12px; }
  .hero-greetings-word { font-size: 16px; }

  /* Modals adaptées */
  .ft-modal { padding: 26px 20px 22px; border-radius: 18px; }
  .ft-modal-large { padding: 26px 20px 22px; }
  .ft-modal-title { font-size: 22px; }

  /* CTA final pill devient stack */
  .ft-cta-final-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
    padding: 12px;
    gap: 10px;
  }
  .ft-cta-final-form .ft-input-prefix {
    align-self: flex-start;
  }

  /* Cartes contact stack */
  .ft-contact-row { flex-direction: column; align-items: stretch; }
  .ft-contact-card { width: 100%; min-width: 0; }

  /* Scroll progress un peu moins visible mais conservé */
  .scroll-progress { height: 2px; }
}

/* Très petit écran (< 380px) — sécurité absolue */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  .display { font-size: clamp(36px, 11vw, 56px) !important; }
  .h2 { font-size: clamp(28px, 8vw, 44px) !important; }
}

/* ====================================================================
   STATIC PHONE DEMO — Simulation interactive dans le phone frame
   Affiche les vrais écrans de l'app avec transitions et navigation.
   ==================================================================== */
.phone-screen-static {
  position: absolute;
  inset: 12px;
  border-radius: 36px;
  overflow: hidden;
  background: #fafafa;
  z-index: 2;
}
.static-phone-demo {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.static-phone-screen {
  flex: 1;
  position: relative;
  overflow: hidden;
  animation: screenSlideIn 0.4s cubic-bezier(.2,.8,.2,1);
}
@keyframes screenSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.static-phone-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}
.static-phone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}
.static-phone-dot.active {
  width: 24px;
  border-radius: 999px;
  background: #fbbf24;
}
.static-phone-dot-label {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  background: rgba(0,0,0,0.8);
  padding: 3px 8px;
  border-radius: 4px;
}
.static-phone-dot:hover .static-phone-dot-label {
  opacity: 1;
}
.static-phone-tap-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  animation: tapHintFade 4s ease-in-out 2s 1 forwards;
  z-index: 20;
}
@keyframes tapHintFade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}