/* ══════════════════════════════════════════════════════════════
   HOBAN — Page d'accueil de lancement
   Complète /assets/hoban-base.css (tokens, nav, footer).
══════════════════════════════════════════════════════════════ */

/* ═══════════════ HERO ═══════════════ */
.hero-section {
  width: 100%;
  padding: 32px 24px 16px;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .hero-section { padding: 24px 0 8px; }
}
.hero-grid {
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  /* Desktop : colonnes calées sur la largeur réelle de leur contenu, le texte
     plafonné à 640 px et le visuel à 760 px. Avec des colonnes en fr, le surplus
     de place se transformait en vide invisible à droite du texte et autour du
     SVG centré. Ici, le seul écart est le gap ci-dessous : une valeur, un effet. */
  grid-template-columns: minmax(0, 640px) minmax(0, 760px);
  justify-content: center;
  gap: 96px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2px; }
}
.hero-text { text-align: left; }
@media (max-width: 980px) {
  .hero-text { padding: 0 20px; }
}
.hero {
  max-width: 640px;
  width: 100%;
  padding: 0 0 24px;
  text-align: left;
}
@media (max-width: 980px) { .hero { padding-bottom: 0; } }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero h1 {
  font-size: clamp(40px, 7.7vw, 62px);
  font-weight: 800;
  color: var(--c-t1);
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin-bottom: 18px;
  text-align: left;
}
.hero h1 .highlight { color: #1A2E24; }
.hero h1 .highlight-accent { color: #2D7A4F; }
.hero h1 strong { font-weight: 900; color: #2D7A4F; }
.hero h1 .h1-risk { font-weight: 900; }

.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-t2);
  font-weight: 500;
  margin: 0 0 26px;
  max-width: 560px;
}
.hero-sub strong { color: var(--c-t1); font-weight: 700; }
@media (max-width: 980px) {
  .hero h1 { font-size: clamp(30px, 8.2vw, 44px); letter-spacing: -0.9px; }
  .hero-sub { font-size: 17px; margin-bottom: 22px; }
}

.hero-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-points li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-t2);
}
.hero-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 13px;
  height: 13px;
  background: no-repeat center/13px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7A4F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.hero-visual { display: flex; justify-content: center; align-items: center; }
.product-visual { width: 100%; max-width: 760px; }

/* ═══════════════ PREUVE SOCIALE ═══════════════ */
.socialproof {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-card);
  padding: 34px max(24px, calc((100vw - 1240px) / 2));
}
.socialproof-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  text-align: left;
}
.socialproof-number {
  font-variant-numeric: tabular-nums;   /* chiffres de largeur fixe : rien ne bouge pendant le comptage */
  min-width: 2.2ch;
  text-align: right;
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 800;
  letter-spacing: -2.5px;
  line-height: 1;
  color: var(--c-primary);
}
.socialproof-label {
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.4px;
  color: var(--c-t1);
}
@media (max-width: 560px) {
  .socialproof { padding: 26px 20px; }
  .socialproof-inner { gap: 14px; justify-content: flex-start; }
  .socialproof-label { font-size: 17px; }
}

/* ═══════════════ PARCOURS (repris de la landing v5.58) ═══════════════ */
.journey-section {
  width: 100%;
  padding: 64px 24px 56px;
  text-align: center;
  background: linear-gradient(180deg, #FAFAF7 0%, #F3EFE6 100%);
}
.journey-inner { max-width: 1700px; width: 100%; margin: 0 auto; }
.steps-header {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--c-t1);
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 8px;
}
.journey-map { width: 100%; margin: 0 auto; }
.journey-map-desktop { display: block; }
.journey-map-mobile { display: none; max-width: 480px; }
@media (max-width: 980px) {
  .journey-map-desktop { display: none; }
  .journey-map-mobile { display: block; }
  .journey-section { padding: 40px 16px 40px; }
  .journey-section .steps-header { margin-bottom: 4px; }
}
.journey-trail {
  stroke-dasharray: 9999;
  stroke-dashoffset: 9999;
  transition: stroke-dashoffset 0.08s linear;
}
.journey-step { opacity: 0; transition: opacity 0.08s linear; }
.journey-section.is-complete .journey-step .journey-marker {
  transform-origin: center;
  transform-box: fill-box;
  animation: journeyMarkerPulse 4.8s ease-in-out infinite;
}
.journey-section.is-complete .journey-step-2 .journey-marker { animation-delay: 0.2s; }
.journey-section.is-complete .journey-step-3 .journey-marker { animation-delay: 0.4s; }
.journey-section.is-complete .journey-step-4 .journey-marker { animation-delay: 0.6s; }
@keyframes journeyMarkerPulse {
  0%, 90%, 100% { transform: scale(1); }
  4% { transform: scale(1.12); }
  8% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .journey-section .journey-trail { stroke-dashoffset: 0 !important; transition: none; }
  .journey-section .journey-step { opacity: 1 !important; transition: none; }
  .journey-section .journey-marker { animation: none !important; }
}

/* ═══════════════ SECTIONS À VIGNETTES ═══════════════ */
.usecases { padding: 20px max(24px, calc((100vw - 1180px) / 2)) 8px; }

.uc {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 22px;
  padding: 44px 40px;
  margin: 26px 0;
}
.uc-title {
  font-size: clamp(24px, 3.1vw, 36px);
  font-weight: 800;
  color: var(--c-t1);
  letter-spacing: -0.7px;
  line-height: 1.18;
  text-align: center;
  margin-bottom: 32px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.uc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.uc--reverse .uc-visual { order: 2; }
.uc--reverse .uc-list   { order: 1; }

.uc-visual {
  background: var(--c-bg);
  border-radius: 18px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}
.uc-visual svg { width: 100%; height: auto; max-width: 340px; }

.uc-list { display: flex; flex-direction: column; gap: 10px; }

/* Vignette accordéon : une seule ouverte à la fois */
.vig {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-card);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vig.is-open {
  border-color: rgba(45,122,79,0.35);
  box-shadow: 0 4px 20px rgba(26,46,36,0.06);
}
.vig-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--c-t1);
  text-align: left;
  padding: 17px 18px;
  cursor: pointer;
}
.vig-head:hover { background: var(--c-primary-10); }
.vig.is-open .vig-head { color: var(--c-primary); }
.vig-chevron {
  flex-shrink: 0;
  width: 18px; height: 18px;
  transition: transform 0.25s ease;
  color: var(--c-t3);
}
.vig.is-open .vig-chevron { transform: rotate(180deg); color: var(--c-primary); }

/* Animation de hauteur automatique, sans max-height arbitraire */
.vig-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.vig.is-open .vig-panel { grid-template-rows: 1fr; }
.vig-panel-inner { overflow: hidden; }
.vig-panel-inner p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--c-t2);
  padding: 0 18px 18px;
  margin: 0;
}

@media (max-width: 900px) {
  .uc { padding: 30px 20px; border-radius: 18px; }
  .uc-body { grid-template-columns: 1fr; gap: 24px; }
  .uc--reverse .uc-visual { order: 0; }
  .uc--reverse .uc-list   { order: 0; }
  .uc-visual { min-height: 190px; padding: 18px; }
  .uc-title { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vig-panel, .vig-chevron { transition: none; }
}

/* ═══════════════ BANDEAU CTA INTERCALAIRE ═══════════════ */
.ctaband {
  /* Le conteneur .usecases porte déjà l'indentation horizontale. Reprendre la
     même marge ici la doublait : le bandeau était plus étroit que les cartes
     qui l'encadrent, donc visuellement décalé. */
  margin: 26px 0;
  background: var(--c-t1);
  border-radius: 20px;
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ctaband-text { color: #FFFFFF; }
.ctaband-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}
.ctaband-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
@media (max-width: 700px) {
  .ctaband { padding: 24px 20px; flex-direction: column; align-items: flex-start; }
}

/* ═══════════════ SECTION RÉSEAU (reprise landing v5.58) ═══════════════ */
.network-section {
  background: var(--c-t1);
  /* Même respiration verticale que le bandeau CTA (.ctaband, 30px) : ce bloc
     est en pleine largeur, donc un peu plus généreux, sans être massif. */
  padding: 40px max(40px, calc((100vw - 1240px) / 2)) 38px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.network-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(106,174,128,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.network-content { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
/* Palette et typographie calées sur le bandeau CTA (.ctaband) : même fond
   var(--c-t1), même blanc pur pour le texte principal, même opacité 0.7 pour
   le secondaire. Seule l'échelle diffère, ce bloc étant un moment de la page
   et non un encart. */
.network-headline {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.6px;
  margin: 0;
  /* Aucune coupure manuelle : les <br> calés sur le desktop produisaient des
     lignes en escalier sur téléphone. Le navigateur équilibre lui-même. */
  text-wrap: balance;
}
.network-accent { color: var(--c-success); }
.network-tagline {
  /* Sous-titre : nettement en dessous du titre, comme .ctaband-sub sous
     .ctaband-title. Graisse allégée, pas de sur-titrage. */
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.4px;
  line-height: 1.35;
  margin: 18px 0 0;
}
@media (max-width: 768px) {
  .network-section { padding: 34px 20px 32px; }
  .network-headline { font-size: clamp(21px, 5.4vw, 28px); line-height: 1.3; letter-spacing: -0.4px; }
  .network-tagline  { font-size: clamp(18px, 4.4vw, 22px); line-height: 1.35; margin-top: 14px; }
  .network-content  { max-width: 420px; }
}

/* ═══════════════ FAQ ═══════════════ */
.faq {
  padding: 64px max(24px, calc((100vw - 860px) / 2));
  background: var(--c-bg);
}
.faq-title {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.6px;
  text-align: center;
  margin-bottom: 28px;
}
.faq .vig { margin-bottom: 10px; }
.faq .vig-head { font-size: 16px; }
.faq-more {
  display: block;
  text-align: center;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
}
.faq-more:hover { text-decoration: underline; }

/* ═══════════════ TÉLÉCHARGEMENT FINAL ═══════════════ */
.download {
  background: var(--c-card);
  border-top: 1px solid var(--c-border);
  padding: 72px max(24px, calc((100vw - 1000px) / 2));
  text-align: center;
}
.download-title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -0.9px;
  line-height: 1.15;
  /* Le sous-titre a été retiré : le titre reprend l'écart qu'il portait. */
  margin-bottom: 28px;
}
.download .store-badges { justify-content: center; }
.download-points { align-items: center; margin-top: 20px; }
.download-points li { text-align: left; }

/* ═══════════════ CONFIDENTIALITÉ (ancre existante) ═══════════════ */
#confidentialite h2 { letter-spacing: -0.4px; }

/* ═══════════════ BADGES AU-DESSUS DU H1 ═══════════════ */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  color: var(--c-t2);
  white-space: nowrap;
}
.hero-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-t3);
  flex-shrink: 0;
}
.hero-badge-date { color: var(--c-t1); }
.hero-badge-date::before { background: var(--c-primary); }
/* La rareté est factuelle : elle mérite d'être vue, pas criée. */
.hero-badge-places {
  background: var(--c-primary-10);
  border-color: rgba(45,122,79,0.22);
  color: var(--c-primary);
}
.hero-badge-places::before { background: var(--c-primary); animation: blink 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-badge-places::before { animation: none; } }
@media (max-width: 480px) { .hero-badge { font-size: 12px; padding: 6px 11px; } }

/* ═══════════════ FORMULAIRE D'INSCRIPTION ═══════════════ */
.signup { margin-top: 22px; max-width: 520px; }
.signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-label { position: absolute; left: -9999px; }
.signup-input {
  flex: 1 1 220px;
  min-width: 0;
  font-family: inherit;
  font-size: 16px; /* 16px minimum : en dessous, iOS zoome au focus */
  font-weight: 500;
  color: var(--c-t1);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-btn);
  padding: 14px 15px;
}
.signup-input::placeholder { color: var(--c-t3); }
.signup-input:focus { outline: none; border-color: var(--c-primary); }
.signup-input.is-error { border-color: var(--c-danger); }
.signup-btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #FFFFFF;
  background: var(--c-t1);
  border: none;
  border-radius: var(--r-btn);
  padding: 14px 24px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.signup-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,46,36,0.18); }
.signup-btn[disabled] { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.signup-note { font-size: 12px; color: var(--c-t3); margin: 10px 0 0; }
.signup-feedback { font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.signup-feedback.is-error { color: var(--c-danger); }
.signup-feedback.is-ok { color: var(--c-primary); }
@media (max-width: 560px) { .signup-btn { flex: 1 1 100%; } }

/* ─── Rappel collé en bas ───
   Il n'apparaît qu'une fois le formulaire du hero sorti de l'écran, et jamais
   par-dessus le bandeau de consentement : le choix cookies passe d'abord. */
.signup-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -6px 24px rgba(26,46,36,0.10);
  padding: 12px max(20px, calc((100vw - 1100px) / 2));
  /* Place réservée à l'icône de réouverture des cookies, en bas à droite. */
  padding-right: max(76px, calc((100vw - 1100px) / 2));
  transform: translateY(110%);
  transition: transform 0.28s ease;
}
.signup-sticky.is-visible { transform: translateY(0); }
.signup-sticky[hidden] { display: none; }
.signup-sticky-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.signup-sticky-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--c-t1);
  /* Pas de base fixe : la colonne prend la largeur de son contenu et grandit
     ensuite. Une base en pixels laissait la ligne de détail se replier dès que
     le calcul du flex la ramenait sous sa largeur naturelle. */
  flex: 1 0 auto;
}
/* Enfant direct seulement : la ligne de détail contient un span intérieur pour
   le nombre, qu'un sélecteur de descendance passerait lui aussi en bloc, ce qui
   isolerait le nombre sur sa propre ligne. */
.signup-sticky-text > span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-t2);
  white-space: nowrap;   /* une ligne, ou rien : voir la règle à 980 px */
}
.signup-sticky .signup { margin: 0; flex: 1 1 340px; max-width: 460px; }
.signup-sticky .signup-note { display: none; }
.signup-sticky .signup-feedback { margin-top: 6px; }
/* Sous 980 px, la colonne de texte devient trop étroite pour la ligne de
   détail : elle se replierait sur trois lignes. On ne garde que le titre,
   la promesse Premium étant déjà lisible plus haut dans la page. */
@media (max-width: 980px) {
  .signup-sticky-text span { display: none; }
}
@media (max-width: 700px) {
  .signup-sticky { padding: 10px 16px 12px; }
  .signup-sticky-text { flex: 1 1 100%; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .signup-sticky { transition: none; } }

/* ═══════════════ CONFIRMATION D'INSCRIPTION ═══════════════ */
.confirm {
  padding: 56px max(24px, calc((100vw - 720px) / 2)) 64px;
  background: var(--c-bg);
}
.confirm[hidden] { display: none; }
.confirm-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 22px;
  padding: 38px 34px;
}
.confirm-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-10);
  padding: 6px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.confirm-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--c-t1);
  margin: 0 0 10px;
}
.confirm-sub { font-size: 15px; line-height: 1.6; color: var(--c-t2); margin: 0; }
.confirm-sub strong { color: var(--c-t1); }
.confirm-gain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0 0;
}
.confirm-gain-col {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px 16px 18px;
  background: var(--c-bg);
}
.confirm-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--c-primary);
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.confirm-pill-alt { background: var(--c-t1); }
.confirm-gain-title { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; color: var(--c-t1); }
.confirm-gain-sub { font-size: 13.5px; color: var(--c-t2); margin-top: 3px; line-height: 1.45; }
.confirm-share { margin-top: 26px; }
.confirm-share-title { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-t3); margin-bottom: 8px; }
.confirm-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-t1);
  background: var(--c-bg);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-btn);
  padding: 12px 14px;
  word-break: break-all;
}
.confirm-share-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.confirm-btn-sec {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-t1);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-btn);
  padding: 14px 20px;
  cursor: pointer;
}
.confirm-btn-sec:hover { background: var(--c-bg); }
.confirm-share-note { font-size: 13px; font-weight: 600; color: var(--c-primary); margin: 8px 0 0; min-height: 18px; }
.confirm-paliers { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.confirm-paliers li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--c-t2);
  border-top: 1px solid var(--c-border);
  padding-top: 8px;
}
.confirm-paliers strong { color: var(--c-t1); font-weight: 700; white-space: nowrap; }
.confirm-paliers span { text-align: right; }
@media (max-width: 620px) {
  .confirm { padding: 34px 16px 44px; }
  .confirm-card { padding: 26px 20px; border-radius: 18px; }
  .confirm-gain { grid-template-columns: 1fr; }
  .confirm-btn-sec, .confirm-share-btns .signup-btn { flex: 1 1 100%; }
}

/* QR sans destination avant le 30 septembre */

/* ═══════════════ APERÇU DU MESSAGE ENVOYÉ ═══════════════
   Toujours visible : sur téléphone, un dépliant de plus est un obstacle de plus
   au moment précis où l'on hésite à écrire à ses proches. */
.confirm-msg {
  margin-top: 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-btn);
  padding: 12px 14px 14px;
}
.confirm-msg-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-t3);
  margin-bottom: 5px;
}
.confirm-msg-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-t2);
  margin: 0;
  word-break: break-word;
}

/* ═══════════════ CE QUE PREMIUM AJOUTE ═══════════════ */
.confirm-premium { margin-top: 26px; }
.confirm-premium-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-t3);
  margin-bottom: 10px;
}
.confirm-premium-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}
.confirm-premium-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-t1);
}
.confirm-premium-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background: no-repeat center/12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7A4F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
@media (max-width: 620px) { .confirm-premium-list { grid-template-columns: 1fr; } }

/* ═══════════════ ÉTAT « DÉJÀ INSCRIT » ═══════════════
   Remplace le formulaire, au même endroit et avec le même encombrement. */
.signup-done {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 18px 20px 20px;
}
.signup-done[hidden] { display: none; }
.done-head { display: flex; align-items: flex-start; gap: 12px; }
.done-check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-success);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.done-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; color: var(--c-t1); }
.done-sub { font-size: 14px; color: var(--c-t2); margin-top: 2px; }
.done-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-t1);
  background: var(--c-bg);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-btn);
  padding: 11px 13px;
  margin-top: 14px;
  word-break: break-all;
}
.done-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.done-actions[hidden] { display: none; }
.done-actions .signup-btn,
.done-actions .confirm-btn-sec { padding: 12px 18px; font-size: 14.5px; }
.done-note { font-size: 12px; color: var(--c-t3); margin: 10px 0 0; }
.done-note:empty { display: none; }
.signup-sticky #stickyInvitation { margin: 0; flex: 0 0 auto; }

/* ═══════════════ CAPTURE E-MAIL ═══════════════ */
.lead {
  padding: 8px max(24px, calc((100vw - 1180px) / 2)) 40px;
  background: var(--c-bg);
}
.lead-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 32px 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.lead-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--c-t1);
}
.lead-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-t2);
  margin: 0;
}
.lead-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lead-label,
.lead-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lead-input {
  flex: 1 1 200px;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;          /* 16px minimum : en dessous, iOS zoome au focus */
  font-weight: 500;
  color: var(--c-t1);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-btn);
  padding: 13px 15px;
}
.lead-input::placeholder { color: var(--c-t3); }
.lead-input:focus {
  outline: none;
  border-color: var(--c-primary);
  background: #FFFFFF;
}
.lead-input.is-error { border-color: var(--c-danger); }
.lead-btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #FFFFFF;
  background: var(--c-t1);
  border: none;
  border-radius: var(--r-btn);
  padding: 13px 20px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.lead-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,46,36,0.18); }
.lead-btn[disabled] { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.lead-note {
  font-size: 12px;
  color: var(--c-t3);
  margin: 10px 0 0;
}
.lead-feedback {
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 0;
  min-height: 0;
}
.lead-feedback.is-ok    { color: var(--c-primary); }
.lead-feedback.is-error { color: var(--c-danger); }

@media (max-width: 860px) {
  .lead-card { grid-template-columns: 1fr; gap: 20px; padding: 26px 20px; }
  .lead-btn  { flex: 1 1 100%; }
}

/* ─── Fenêtre de sortie ─── */
.leadmodal {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(26,46,36,0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.leadmodal[hidden] { display: none; }
.leadmodal-card {
  position: relative;
  background: var(--c-card);
  border-radius: 20px;
  padding: 34px 32px 28px;
  width: min(460px, 100%);
  box-shadow: 0 24px 70px rgba(26,46,36,0.32);
}
.leadmodal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--c-border);
  background: none;
  font-family: inherit;
  font-size: 21px;
  line-height: 1;
  color: var(--c-t2);
  cursor: pointer;
}
.leadmodal-close:hover { background: var(--c-bg); }
/* La fenêtre de sortie n'a pas de sens sans curseur : jamais sur mobile. */
@media (max-width: 980px) { .leadmodal { display: none !important; } }