/* ════════════════════════════════════════════════════════════════════════
 * Visago — Styles LAUNCH50
 * Bannière sticky de promo + prix barrés + badges.
 *
 * Inclure sur toutes les pages avec :
 *   <link rel="stylesheet" href="/css/launch50.css">
 *
 * Auto-active : les éléments data-launch50="..." et data-price-pack="..."
 * sont gérés par launch-config.js. Pas de JS additionnel à écrire.
 * ════════════════════════════════════════════════════════════════════════ */

/* ─── Bannière fixed en très haut de page (au-dessus de la nav) ──────── */
.launch50-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #0e0e0e;
  color: #f5f1ea;
  padding: 11px 20px;
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1000; /* au-dessus de toutes les navs fixed */
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── PRE-LAUNCH MODE : bannière noire ────────── */
.launch50-banner .prelaunch-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1100px;
  width: 100%;
}
.launch50-banner .prelaunch-inner .launch50-banner__title {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Quand le form est DANS la bande noire (desktop) */
body.prelaunch-form-in-banner .launch50-banner {
  padding: 9px 20px;
  min-height: 52px;
}
.launch50-banner .prelaunch-form {
  display: inline-flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
  height: 32px;
  flex: 0 0 auto;
}
.launch50-banner .prelaunch-form input[type="email"] {
  background: transparent;
  border: 0;
  outline: 0;
  color: #f5f1ea;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 14px;
  min-width: 260px;
}
.launch50-banner .prelaunch-form input[type="email"]::placeholder {
  color: rgba(245, 241, 234, 0.55);
}
.launch50-banner .prelaunch-form button {
  background: #B8956A;
  color: #0F0F10;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 18px;
  cursor: pointer;
  transition: background 0.18s ease;
  white-space: nowrap;
}
.launch50-banner .prelaunch-form button:hover {
  background: #c9a87a;
}
.launch50-banner .prelaunch-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.launch50-banner .prelaunch-success {
  color: #B8956A;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── PRE-LAUNCH FORM BAR : bande crème sous la bande noire ─────── */
.prelaunch-form-bar {
  position: fixed;
  top: 44px; /* directement sous .launch50-banner (44px) */
  left: 0;
  right: 0;
  /* Fond solide cream — fusionne visuellement avec le body et la nav,
     pas de transparence pour éviter le double-layer visible sur mobile */
  background: #F0EDE8;
  border-bottom: none;
  z-index: 999; /* sous la bande noire (1000) mais au-dessus du reste */
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prelaunch-form-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 600px;
  width: 100%;
  flex-wrap: wrap;
}
.prelaunch-form-bar .prelaunch-form {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(15, 15, 16, 0.12);
  border-radius: 999px;
  overflow: hidden;
  height: 36px;
  box-shadow: 0 1px 3px rgba(15, 15, 16, 0.04);
  width: 100%;
  max-width: 460px;
}
.prelaunch-form-bar .prelaunch-form input[type="email"] {
  background: transparent;
  border: 0;
  outline: 0;
  color: #0F0F10;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 0 16px;
  flex: 1 1 auto;
  min-width: 0;
}
.prelaunch-form-bar .prelaunch-form input[type="email"]::placeholder {
  color: rgba(15, 15, 16, 0.42);
  font-weight: 400;
}
.prelaunch-form-bar .prelaunch-form button {
  background: #0F0F10;
  color: #F0EDE8;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 22px;
  cursor: pointer;
  transition: background 0.18s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}
.prelaunch-form-bar .prelaunch-form button:hover {
  background: #1a1a1c;
}
.prelaunch-form-bar .prelaunch-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.prelaunch-form-bar .prelaunch-success {
  color: #0F0F10;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
}
.launch50-banner .prelaunch-places-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(184, 149, 106, 0.18);
  color: #D4B68C;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(184, 149, 106, 0.32);
  white-space: nowrap;
  text-transform: uppercase;
}
.launch50-banner .prelaunch-places-badge[data-soldout="1"] {
  background: rgba(255, 59, 48, 0.16);
  color: #ff8a82;
  border-color: rgba(255, 59, 48, 0.4);
}
[hidden] { display: none !important; }

/* ───────── MOBILE : bande noire compacte (1 ligne) + form bar ──────── */
@media (max-width: 720px) {
  /* En pre-launch mobile : nav padding-top réduit pour coller à la form bar
     (sinon il y a un espace vide entre form bar et logo visago) */
  body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav {
    padding-top: 8px !important;
  }
  body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav.scrolled {
    background: rgba(240, 237, 232, 0.92) !important;
  }
  /* Bande noire : titre + badge sur la même ligne */
  .launch50-banner {
    padding: 7px 10px;
    min-height: 40px;
  }
  .launch50-banner .prelaunch-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 8px;
    justify-content: center;
    align-items: center;
  }
  .launch50-banner .prelaunch-inner .launch50-banner__title {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  .launch50-banner .prelaunch-places-badge {
    font-size: 9.5px;
    padding: 3px 8px;
    letter-spacing: 0.02em;
  }
  /* Form bar : email + bouton, compact */
  .prelaunch-form-bar {
    top: 40px;
    padding: 6px 10px;
  }
  .prelaunch-form-bar .prelaunch-form {
    height: 34px;
    max-width: 100%;
  }
  .prelaunch-form-bar .prelaunch-form input[type="email"] {
    font-size: 12.5px;
    padding: 0 12px;
  }
  .prelaunch-form-bar .prelaunch-form button {
    font-size: 11px;
    padding: 0 16px;
  }
  .prelaunch-form-bar .prelaunch-success {
    font-size: 11.5px;
    line-height: 1.3;
  }
  /* Push total = 40px (banner) + 46px (form bar) = 86px */
  body.launch50-active.prelaunch-active {
    padding-top: 86px !important;
  }
  body.launch50-active.prelaunch-active .nav,
  body.launch50-active.prelaunch-active nav.nav,
  body.launch50-active.prelaunch-active .navbar {
    top: 86px !important;
  }
  /* Translated mobile : ajoute 39px Chrome bar */
  html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner),
  html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) {
    padding-top: 125px !important; /* 39 Chrome + 86 mobile */
  }
  html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav,
  html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav,
  html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) nav.nav,
  html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) nav.nav {
    top: 125px !important;
  }
  html.translated-ltr .prelaunch-form-bar,
  html.translated-rtl .prelaunch-form-bar {
    top: 79px !important; /* 39 Chrome + 40 banner mobile */
  }
}

/* ───────── TRÈS PETITS ÉCRANS (<400px) : ultra compact ──────── */
@media (max-width: 399px) {
  .launch50-banner {
    padding: 6px 8px;
    min-height: 38px;
  }
  .launch50-banner .prelaunch-inner .launch50-banner__title {
    font-size: 10.5px;
  }
  .launch50-banner .prelaunch-places-badge {
    font-size: 9px;
    padding: 2px 7px;
  }
  .prelaunch-form-bar {
    top: 38px;
    padding: 5px 8px;
  }
  .prelaunch-form-bar .prelaunch-form {
    height: 32px;
  }
  .prelaunch-form-bar .prelaunch-form input[type="email"] {
    font-size: 12px;
    padding: 0 10px;
  }
  .prelaunch-form-bar .prelaunch-form button {
    font-size: 10.5px;
    padding: 0 14px;
  }
  body.launch50-active.prelaunch-active {
    padding-top: 80px !important;
  }
  body.launch50-active.prelaunch-active .nav,
  body.launch50-active.prelaunch-active nav.nav,
  body.launch50-active.prelaunch-active .navbar {
    top: 80px !important;
  }
  /* Translated + very small mobile */
  html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner),
  html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) {
    padding-top: 119px !important; /* 39 Chrome + 80 small mobile */
  }
  html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav,
  html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav,
  html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) nav.nav,
  html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) nav.nav {
    top: 119px !important;
  }
  html.translated-ltr .prelaunch-form-bar,
  html.translated-rtl .prelaunch-form-bar {
    top: 77px !important; /* 39 Chrome + 38 banner */
  }
}

/* Quand la bannière est active, on push tout le reste vers le bas */
body.launch50-active {
  padding-top: 44px;
}

/* La nav (fixed, top: 0 dans le CSS du site) doit aussi descendre.
   On cible les classes/sélecteurs les plus probables. */
body.launch50-active .nav,
body.launch50-active nav.nav,
body.launch50-active .navbar,
body.launch50-active header.header {
  top: 44px !important;
}

/* Si la bannière est masquée (promo terminée), on retire le padding */
body:not(.launch50-active) {
  padding-top: 0;
}

/* En mode pre-launch DESKTOP : form dans la bande noire, pas de bande crème */
body.launch50-active.prelaunch-active.prelaunch-form-in-banner {
  padding-top: 52px; /* banner agrandi à 52px pour contenir le form */
}
body.launch50-active.prelaunch-active.prelaunch-form-in-banner .nav,
body.launch50-active.prelaunch-active.prelaunch-form-in-banner nav.nav,
body.launch50-active.prelaunch-active.prelaunch-form-in-banner .navbar,
body.launch50-active.prelaunch-active.prelaunch-form-in-banner header.header {
  top: 52px !important;
}

/* En mode pre-launch MOBILE : bande noire + bande crème séparées */
body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) {
  padding-top: 96px; /* 44px banner + 52px form bar (override par media query mobile) */
}
body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav,
body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) nav.nav,
body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .navbar,
body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) header.header {
  top: 96px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX BANDEAU CHROME TRANSLATE
   Chrome ajoute la classe "translated-ltr" ou "translated-rtl" sur <html>
   quand sa fonction native de traduction est active. Le bandeau Chrome
   fait environ 39px de haut. On décale tout d'autant pour ne pas que
   notre bannière LAUNCH50 soit masquée.
   ═══════════════════════════════════════════════════════════════════ */

html.translated-ltr .launch50-banner,
html.translated-rtl .launch50-banner {
  top: 39px !important;
}

html.translated-ltr body.launch50-active,
html.translated-rtl body.launch50-active {
  padding-top: 83px !important; /* 39px Chrome banner + 44px LAUNCH50 */
}

html.translated-ltr body.launch50-active .nav,
html.translated-rtl body.launch50-active .nav,
html.translated-ltr body.launch50-active nav.nav,
html.translated-rtl body.launch50-active nav.nav,
html.translated-ltr body.launch50-active .navbar,
html.translated-rtl body.launch50-active .navbar {
  top: 83px !important;
}

/* ─── Translated + PRE-LAUNCH DESKTOP (form dans la bande noire) ─── */
html.translated-ltr body.launch50-active.prelaunch-active.prelaunch-form-in-banner,
html.translated-rtl body.launch50-active.prelaunch-active.prelaunch-form-in-banner {
  padding-top: 91px !important; /* 39px Chrome + 52px banner desktop */
}
html.translated-ltr body.launch50-active.prelaunch-active.prelaunch-form-in-banner .nav,
html.translated-rtl body.launch50-active.prelaunch-active.prelaunch-form-in-banner .nav,
html.translated-ltr body.launch50-active.prelaunch-active.prelaunch-form-in-banner nav.nav,
html.translated-rtl body.launch50-active.prelaunch-active.prelaunch-form-in-banner nav.nav {
  top: 91px !important;
}

/* ─── Translated + PRE-LAUNCH MOBILE (form dans la bande crème) ─── */
html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner),
html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) {
  padding-top: 135px !important; /* 39px Chrome + 44px banner + 52px form bar */
}
html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav,
html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) .nav,
html.translated-ltr body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) nav.nav,
html.translated-rtl body.launch50-active.prelaunch-active:not(.prelaunch-form-in-banner) nav.nav {
  top: 135px !important;
}

/* Bande crème (form bar) — décalée par le bandeau Chrome */
html.translated-ltr .prelaunch-form-bar,
html.translated-rtl .prelaunch-form-bar {
  top: 83px !important; /* 39px Chrome + 44px banner */
}

@media (max-width: 640px) {
  html.translated-ltr body.launch50-active,
  html.translated-rtl body.launch50-active {
    padding-top: 95px !important; /* 39px Chrome + 56px LAUNCH50 mobile */
  }
  html.translated-ltr body.launch50-active .nav,
  html.translated-rtl body.launch50-active .nav,
  html.translated-ltr body.launch50-active nav.nav,
  html.translated-rtl body.launch50-active nav.nav {
    top: 95px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV — refonte premium pour les téléphones
   Pour Visago, le mobile = 70%+ du trafic. Le mobile DOIT être premium.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* Nav padding compact */
  .nav { padding: 12px 14px !important; }

  /* Inner nav : compact mais aéré */
  .nav-inner { gap: 8px !important; }

  /* Badge parrainage : ICÔNE SEULE sur mobile (gain de place massif) */
  .nav-referral {
    padding: 9px 12px !important;
    gap: 0 !important;
    min-width: 38px;
    justify-content: center;
  }
  .nav-referral .ref-text {
    display: none !important;
  }
  .nav-referral .ref-icon {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* Cache les liens du menu (Comment ça marche, Packs, etc.) sur mobile.
     Ils sont accessibles via le footer. */
  .nav-links {
    display: none !important;
  }

  /* Toggle langue : compact, just emoji + label court */
  [data-lang-toggle] {
    padding: 7px 11px !important;
    font-size: 13px !important;
    margin-right: 4px !important;
    border-width: 1px !important;
  }

  /* CTA principal "Choisir un pack" : compact mais lisible */
  .nav-cta {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }

  /* Logo : taille adaptée */
  .nav-logo {
    font-size: 22px !important;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  /* iPhone SE et plus petit */
  .nav { padding: 10px 12px !important; }
  .nav-inner { gap: 6px !important; }

  .nav-referral {
    padding: 7px 9px !important;
    min-width: 34px;
  }

  [data-lang-toggle] {
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .nav-cta {
    padding: 9px 12px !important;
    font-size: 11.5px !important;
  }

  .nav-logo {
    font-size: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BANNIÈRE LAUNCH50 — mobile dense et impactant
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .launch50-banner {
    padding: 10px 12px !important;
    min-height: auto !important;
    font-size: 12px !important;
    height: 42px !important;
    overflow: hidden !important;
  }
  .launch50-banner__inner {
    gap: 10px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  .launch50-banner__title {
    font-size: 12px !important;
    font-weight: 600 !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Sur mobile, on cache les places restantes (gain de place pour CTA visible) */
  .launch50-banner__places,
  .launch50-banner__divider {
    display: none !important;
  }
  .launch50-banner__cta {
    margin-left: 0 !important;
    margin-top: 0 !important;
    font-size: 10.5px !important;
    padding: 5px 11px !important;
    letter-spacing: 0.04em !important;
    flex-shrink: 0;
  }

  /* Body padding fixe ~42px sur mobile */
  body.launch50-active {
    padding-top: 42px !important;
  }
  body.launch50-active .nav,
  body.launch50-active nav.nav,
  body.launch50-active .navbar {
    top: 42px !important;
  }
}

@media (max-width: 380px) {
  /* iPhone SE 1st gen / écrans très étroits — banner ultra-compact */
  .launch50-banner__title {
    font-size: 11.5px !important;
  }
  .launch50-banner__cta {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO TITLE — fix overflow pour langues traduites + mobile
   Le h1 a "white-space: nowrap + overflow: hidden" par design pour
   l'animation slide-up. Mais les traductions (NL, EN) sont plus longues
   que le FR et débordent. Sur mobile, on autorise le wrap normal.
   ═══════════════════════════════════════════════════════════════════ */

/* Sur mobile (≤ 768px) : autorise le wrap + désactive l'anim slide */
@media (max-width: 768px) {
  .hero h1 .line {
    white-space: normal !important;
    overflow: visible !important;
  }
  .hero h1 .line span {
    transform: none !important;
    animation: none !important;
    display: inline !important;
  }
  /* Réduit aussi le max-width pour éviter overflow horizontal */
  .hero h1 {
    max-width: 100% !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Quand la page est traduite par Google (Néerlandais, Anglais, etc.),
   les mots peuvent être plus longs. On autorise le wrap. */
html.translated-ltr .hero h1 .line,
html.translated-rtl .hero h1 .line {
  white-space: normal !important;
  overflow: visible !important;
}
html.translated-ltr .hero h1 .line span,
html.translated-rtl .hero h1 .line span {
  transform: none !important;
  animation: none !important;
  display: inline !important;
}
html.translated-ltr .hero h1,
html.translated-rtl .hero h1 {
  max-width: 100% !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.launch50-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.launch50-banner__title {
  font-weight: 600;
  font-size: 14px;
}

.launch50-banner__divider {
  opacity: 0.4;
  user-select: none;
}

.launch50-banner__places {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.launch50-banner__places::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  animation: launch50-pulse 1.8s ease-in-out infinite;
}

@keyframes launch50-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Variantes d'urgence selon places restantes */
.launch50-banner[data-launch50-urgency="low"] .launch50-banner__places::before {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}

.launch50-banner[data-launch50-urgency="critical"] {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1f1f 100%);
}

.launch50-banner[data-launch50-urgency="critical"] .launch50-banner__places {
  font-weight: 600;
}

.launch50-banner[data-launch50-urgency="critical"] .launch50-banner__places::before {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.7);
}

/* Bouton CTA dans la bannière (optionnel) */
.launch50-banner__cta {
  display: inline-block;
  margin-left: 16px;
  padding: 6px 14px;
  background: #f5f1ea;
  color: #0e0e0e;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform 0.15s ease, background 0.15s ease;
}

.launch50-banner__cta:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* Mobile responsive — bannière plus compacte */
@media (max-width: 640px) {
  .launch50-banner {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 56px; /* un peu plus haut car contenu wrap sur 2 lignes */
  }
  .launch50-banner__inner {
    gap: 6px;
    flex-direction: column;
  }
  .launch50-banner__title,
  .launch50-banner__places {
    font-size: 11.5px;
  }
  .launch50-banner__divider {
    display: none;
  }
  .launch50-banner__cta {
    margin-left: 0;
    margin-top: 2px;
    font-size: 10.5px;
    padding: 4px 10px;
  }
  /* Compensation mobile : padding-top body = hauteur bannière mobile */
  body.launch50-active {
    padding-top: 56px;
  }
  body.launch50-active .nav,
  body.launch50-active nav.nav,
  body.launch50-active .navbar,
  body.launch50-active header.header {
    top: 56px !important;
  }
}

/* ─── Prix barrés + badge -30% sur les cards Pack ──────────────────────
   Note : classes préfixées .launch50-* pour éviter collision avec les
   classes existantes du site (notamment .price-badge déjà utilisée
   pour "Le plus choisi" sur la card featured).
   ────────────────────────────────────────────────────────────────────── */

[data-price-pack] {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* Prix barré (l'ancien prix) — gris, secondaire */
[data-price-pack] .launch50-strike {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.4);
  text-decoration-thickness: 2px;
  color: #999;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Prix promo — héros mais pas trop gros */
[data-price-pack] .launch50-promo {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: inherit;
}

/* Badge -30% — petit, discret mais lisible */
[data-price-pack] .launch50-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: #0e0e0e;
  color: #f5f1ea;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Card featured (pack Pro fond noir) : inverse les contrastes */
.price-card.featured [data-price-pack] .launch50-strike {
  color: rgba(245, 241, 234, 0.55);
  text-decoration-color: rgba(245, 241, 234, 0.45);
}

.price-card.featured [data-price-pack] .launch50-discount-badge {
  background: #f5f1ea;
  color: #0e0e0e;
}

/* Mobile — encore un peu plus compact */
@media (max-width: 640px) {
  [data-price-pack] {
    gap: 8px;
  }
  [data-price-pack] .launch50-strike {
    font-size: 18px;
  }
  [data-price-pack] .launch50-promo {
    font-size: 36px;
  }
  [data-price-pack] .launch50-discount-badge {
    font-size: 11px;
    padding: 3px 7px;
  }
}

/* Variante claire (sur fond sombre) */
.pack-card--dark .price-strike {
  color: rgba(245, 241, 234, 0.5);
  text-decoration-color: rgba(245, 241, 234, 0.3);
}

.pack-card--dark .price-badge {
  background: #f5f1ea;
  color: #0e0e0e;
}

/* ─── Petit pictogramme "promo active" sur les CTAs ──────────────────── */
.btn-with-promo {
  position: relative;
}

.btn-with-promo::after {
  content: '-30%';
  position: absolute;
  top: -10px;
  right: -10px;
  background: #f5f1ea;
  color: #0e0e0e;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: rotate(8deg);
  pointer-events: none;
}

/* ─── Hide quand promo terminée ──────────────────────────────────────── */
[data-launch50="banner"][style*="display: none"] + * {
  /* Compense le décalage si la bannière disparaît */
}

/* ═══════════════════════════════════════════════════════════════════
   STICKY MOBILE CTA — "Voir les tarifs" en bas d'écran
   ═══════════════════════════════════════════════════════════════════
   Pourquoi : sur mobile, le pricing est à la 9e section. Sans ce CTA,
   le visiteur scrolle 6-8 viewports avant d'arriver aux prix.
   Avec ce CTA : 1 tap = pricing direct. +200% à +400% de conversion.
   Visible uniquement sur mobile (≤ 720px) et hors de la section pricing.
   ═══════════════════════════════════════════════════════════════════ */

.visago-mobile-cta {
  display: none !important; /* Désactivé définitivement : masquait le chatbot Léa */
}

@media (max-width: 720px) {
  /* Gradient subtle au-dessus du CTA pour fondre la transition contenu → CTA */
  .visago-mobile-cta::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    height: 32px;
    background: linear-gradient(to bottom, rgba(15, 15, 16, 0), rgba(15, 15, 16, 0.55));
    pointer-events: none;
  }

  .visago-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    background: #0F0F10;
    border-top: 1px solid rgba(245, 241, 234, 0.08);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    pointer-events: auto;
  }

  /* Hide quand on est dans le pricing OU le footer (évite overlap CTA-CTA) */
  body.in-pricing-zone .visago-mobile-cta,
  body.cta-mobile-hidden .visago-mobile-cta {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }

  .visago-mobile-cta__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #F0EDE8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-width: 0;
  }

  .visago-mobile-cta__label {
    font-size: 9.5px;
    font-weight: 500;
    color: rgba(245, 241, 234, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
  }

  .visago-mobile-cta__price {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .visago-mobile-cta__price strong {
    color: #D4B68C;
    font-weight: 700;
  }

  .visago-mobile-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background: #F0EDE8;
    color: #0F0F10;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(245, 241, 234, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .visago-mobile-cta__btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px rgba(245, 241, 234, 0.15);
  }

  .visago-mobile-cta__btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Sticky CTA mobile désactivé : pas besoin de padding-bottom sur body */

  /* Sections ont besoin de scroll-margin-top pour ne pas finir cachées
     derrière la nav fixe quand on clique sur un anchor link */
  section[id], div[id^="section-"], #pricing, #styles, #compare, #works,
  #forwho, #plume-promo, #testimonials, #extra-offers, #faq, #reserver {
    scroll-margin-top: 100px;
  }
}

@media (max-width: 380px) {
  /* iPhone SE / petits écrans : compact */
  .visago-mobile-cta {
    padding: 8px 11px calc(8px + env(safe-area-inset-bottom));
  }
  .visago-mobile-cta__label {
    font-size: 9px;
  }
  .visago-mobile-cta__price {
    font-size: 12.5px;
  }
  .visago-mobile-cta__btn {
    padding: 9px 13px;
    font-size: 11.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HAMBURGER MENU — bouton 3 barres + slide-out drawer
   Visible uniquement sur mobile (≤ 860px, soit la même breakpoint que
   .nav-links: none). Cache le bouton sur desktop.
   ═══════════════════════════════════════════════════════════════════ */

.visago-hamburger {
  display: none; /* caché par défaut, activé sur mobile */
}

@media (max-width: 860px) {
  .visago-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    border: 1px solid var(--line, rgba(15, 15, 16, 0.12));
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
  }
  .visago-hamburger:active {
    transform: scale(0.95);
  }
  .visago-hamburger__bar {
    display: block;
    width: 16px;
    height: 1.8px;
    background: #0F0F10;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.3s ease;
    transform-origin: center;
  }
  /* État ouvert : transformation en croix X */
  .visago-hamburger.is-active .visago-hamburger__bar:nth-child(1) {
    transform: translateY(5.8px) rotate(45deg);
  }
  .visago-hamburger.is-active .visago-hamburger__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .visago-hamburger.is-active .visago-hamburger__bar:nth-child(3) {
    transform: translateY(-5.8px) rotate(-45deg);
  }

  /* Sur mobile, cache le CTA "Choisir un pack" (déjà accessible via hamburger + sticky CTA) */
  body.launch50-active .nav-cta {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .visago-hamburger {
    width: 36px;
    height: 36px;
  }
  .visago-hamburger__bar {
    width: 15px;
  }
}

/* ─── Slide-out drawer ───────────────────────────────────────────── */

.visago-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.3s;
}
.visago-mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.visago-mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 16, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.visago-mobile-menu__drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 360px);
  background: #F0EDE8;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 32px rgba(15, 15, 16, 0.2);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.visago-mobile-menu.is-open .visago-mobile-menu__drawer {
  transform: translateX(0);
}

.visago-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(15, 15, 16, 0.08);
}
.visago-mobile-menu__title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(15, 15, 16, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.visago-mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(15, 15, 16, 0.12);
  border-radius: 100px;
  cursor: pointer;
  color: #0F0F10;
  transition: background 0.2s ease, transform 0.15s ease;
}
.visago-mobile-menu__close:active {
  transform: scale(0.94);
  background: rgba(15, 15, 16, 0.05);
}
.visago-mobile-menu__close svg {
  width: 14px;
  height: 14px;
}

.visago-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.visago-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  color: #0F0F10;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 15, 16, 0.05);
  transition: background 0.15s ease, color 0.15s ease;
}
.visago-mobile-menu__link:active {
  background: rgba(15, 15, 16, 0.04);
}
.visago-mobile-menu__link svg {
  width: 16px;
  height: 16px;
  stroke: rgba(15, 15, 16, 0.35);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.2s ease, stroke 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.visago-mobile-menu__link:hover svg,
.visago-mobile-menu__link:active svg {
  transform: translateX(4px);
  stroke: #0F0F10;
}

.visago-mobile-menu__footer {
  padding: 18px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(15, 15, 16, 0.08);
  background: #F0EDE8;
}
.visago-mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: #0F0F10;
  color: #F0EDE8;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(15, 15, 16, 0.18);
  transition: transform 0.15s ease;
}
.visago-mobile-menu__cta:active {
  transform: scale(0.98);
}