/* =====================================================================
   Masterclass « Ton métier mérite d'être trouvé » — Divin Setondji
   DA reprise du challenge : noir, vert #2CB771, Poppins partout.
   Tout est scopé sous .wbn pour cohabiter sans conflit avec WordPress.
   ===================================================================== */

/* Anti-liseré blanc des thèmes WordPress. */
html, body { margin: 0; padding: 0; background: #000; }

.wbn {
  --bg: #000;
  --bg-1: #0b0b0b;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --bord: rgba(255, 255, 255, 0.14);
  --bord-fin: rgba(255, 255, 255, 0.08);
  --txt: #fff;
  --txt-doux: rgba(255, 255, 255, 0.72);
  --txt-pale: rgba(255, 255, 255, 0.52);

  /* Seul --vert est lisible en texte ; les autres sont réservés aux fonds. */
  --vert: #2CB771;
  --vert-vif: #3fd488;
  --vert-fond: #135135;
  --vert-nuit: #0A2418;
  --vert-voile: rgba(44, 183, 113, 0.12);
  --vert-bord: rgba(44, 183, 113, 0.34);

  /* Poppins partout ; repli système si le CDN de polices est bloqué. */
  --f: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Approche légèrement resserrée : Poppins est large de base. */
  --ls-texte: -0.012em;
  --ls-titre: -0.032em;

  --fs-xl: clamp(2.25rem, 5.8vw, 4.375rem);
  --fs-lg: clamp(1.75rem, 4.8vw, 3.125rem);
  --fs-h3: clamp(1.0625rem, 2.3vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 2.1vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  --max: 1160px;
  --etroit: 780px;
  --gout: clamp(1rem, 5vw, 2.5rem);
  --sec: clamp(4.5rem, 10vw, 7.5rem);
  --bandeau-h: 46px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--f);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: var(--ls-texte);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow-x: clip) { .wbn { overflow-x: hidden; } }

/* ---------- Reset local : neutralise l'héritage du thème ---------- */
.wbn, .wbn *, .wbn *::before, .wbn *::after { box-sizing: border-box; }
.wbn h1, .wbn h2, .wbn h3, .wbn p, .wbn ul, .wbn ol, .wbn li, .wbn table, .wbn th, .wbn td,
.wbn dl, .wbn dt, .wbn dd, .wbn blockquote, .wbn figure, .wbn figcaption {
  margin: 0; padding: 0; border: 0; background: none; text-transform: none;
}
.wbn ul, .wbn ol { list-style: none; }
.wbn p, .wbn li, .wbn dd, .wbn dt, .wbn h1, .wbn h2, .wbn h3, .wbn figcaption, .wbn th, .wbn td {
  overflow-wrap: break-word; min-width: 0;
}
.wbn h1, .wbn h2, .wbn h3 {
  font-family: var(--f);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-titre);
  color: var(--txt);
  text-wrap: balance;
}
.wbn p { text-wrap: pretty; }
.wbn a { color: inherit; text-decoration: none; box-shadow: none; }
.wbn strong, .wbn b { font-weight: 600; color: var(--txt); }
.wbn img { display: block; max-width: 100%; height: auto; }
.wbn sup { font-size: 0.7em; line-height: 0; vertical-align: super; }
.wbn svg { display: block; flex: 0 0 auto; }
.wbn .wbn-nw { white-space: nowrap; }
.wbn :focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; border-radius: 6px; }
.wbn [id] { scroll-margin-top: calc(var(--bandeau-h) + 16px); }
.wbn .wbn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.wbn .wbn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Grain très léger : donne de la matière au noir sans alourdir. */
.wbn::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Briques communes ---------- */
.wbn .wbn-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gout);
  padding-right: var(--gout);
}
.wbn .wbn-wrap--etroit { max-width: var(--etroit); }

.wbn .wbn-eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-pale);
  line-height: 1.3;
  margin-bottom: 1.25rem;
}
.wbn .wbn-eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.5rem;
  height: 1px;
  margin: -0.15em 0.75rem 0 0;
  background: var(--vert);
}

/* Le mot vert : un seul par écran, jamais pour décorer. */
.wbn .wbn-vert { color: var(--vert); }

.wbn .wbn-sec { position: relative; padding: var(--sec) 0; }
.wbn .wbn-sec--alt {
  background: var(--bg-1);
  border-top: 1px solid var(--bord-fin);
  border-bottom: 1px solid var(--bord-fin);
}
.wbn .wbn-tete { max-width: 780px; margin-bottom: clamp(2.5rem, 6vw, 3.75rem); }
.wbn .wbn-tete h2 { font-size: var(--fs-lg); }
.wbn .wbn-tete > p:not(.wbn-eyebrow) {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  color: var(--txt-doux);
  max-width: 640px;
}
.wbn .wbn-tete--centre { margin-left: auto; margin-right: auto; text-align: center; }
.wbn .wbn-tete--centre > p:not(.wbn-eyebrow) { margin-left: auto; margin-right: auto; }

.wbn .wbn-prose p { color: var(--txt-doux); }
.wbn .wbn-prose p + p { margin-top: 1.1em; }
.wbn .wbn-prose strong { color: var(--txt); }

/* Point « en direct » */
.wbn .wbn-point {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert);
  flex: 0 0 auto;
}
.wbn .wbn-point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--vert);
  animation: wbn-pouls 1.8s var(--ease) infinite;
}
@keyframes wbn-pouls {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ---------- Boutons ---------- */
.wbn .wbn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 1rem 2rem;
  border-radius: var(--r-pill);
  background: var(--vert);
  color: #000;
  font-family: var(--f);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
  border: 1.5px solid var(--vert);
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.2s, box-shadow 0.3s var(--ease), color 0.2s, border-color 0.2s;
}
.wbn .wbn-btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.wbn .wbn-btn:hover {
  background: var(--vert-vif);
  border-color: var(--vert-vif);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px rgba(44, 183, 113, 0.55);
}
.wbn .wbn-btn:hover svg { transform: translateX(4px); }
.wbn .wbn-btn:active { transform: translateY(0); }
.wbn .wbn-btn--contour { background: transparent; color: var(--txt); border-color: var(--bord); }
.wbn .wbn-btn--contour:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); color: var(--txt); box-shadow: none; }
.wbn .wbn-btn--bloc { width: 100%; }
.wbn .wbn-btn--petit { min-height: 44px; padding: 0.7rem 1.1rem; font-size: 0.875rem; }
@media (max-width: 420px) {
  .wbn .wbn-btn:not(.wbn-btn--petit) { padding: 0.95rem 1.25rem; }
}

.wbn .wbn-micro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--txt-pale);
  line-height: 1.45;
}
.wbn .wbn-micro svg { width: 16px; height: 16px; color: var(--vert); }

/* Relance « Je réserve ma place » sous chaque section */
.wbn .wbn-relance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.wbn .wbn-relance--centre { justify-content: center; text-align: center; flex-direction: column; }

/* Liste à coches */
.wbn .wbn-liste li {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--txt-doux);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.wbn .wbn-liste li + li { margin-top: 0.85rem; }
.wbn .wbn-liste svg { width: 20px; height: 20px; margin-top: 2px; color: var(--vert); }

/* =====================================================================
   0. BANDEAU (collant) — date du jour + compte à rebours
   ===================================================================== */
.wbn .wbn-bandeau {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 8, 8, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--vert-bord);
}
.wbn .wbn-bandeau__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1.25rem;
  row-gap: 0.15rem;
  min-height: var(--bandeau-h);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
}
.wbn .wbn-bandeau__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-doux);
  line-height: 1.4;
}
.wbn .wbn-bandeau__label .wbn-point { width: 7px; height: 7px; }
.wbn .wbn-cd {
  display: none;
  align-items: baseline;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.wbn.js .wbn-cd { display: inline-flex; }
.wbn .wbn-cd b { font-weight: 700; }
.wbn .wbn-cd__txt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-pale);
  margin-right: 0.15rem;
}
.wbn .wbn-cd i { font-style: normal; font-size: 0.6875rem; font-weight: 500; color: var(--txt-pale); margin-left: 1px; }
.wbn .wbn-bandeau__lien {
  display: none;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vert);
}
@media (max-width: 559px) {
  .wbn { --bandeau-h: 40px; }
  .wbn .wbn-cache-m, .wbn .wbn-cd__txt { display: none; }
  .wbn .wbn-bandeau__in { column-gap: 0.85rem; flex-wrap: nowrap; padding-left: 0.75rem; padding-right: 0.75rem; }
  .wbn .wbn-bandeau__label { font-size: 0.625rem; letter-spacing: 0.08em; white-space: nowrap; }
  .wbn .wbn-cd { font-size: 0.875rem; }
}

/* États pilotés par le script : avant / live / demain */
.wbn .quand-live { display: none; }
.wbn[data-etat="live"] .quand-live { display: inline; }
.wbn[data-etat="live"] .quand-hors { display: none; }
.wbn[data-etat="live"] .wbn-cd { display: none; }
.wbn[data-etat="live"] .wbn-bandeau__lien { display: inline-flex; }
.wbn .wbn-date { display: none; }
.wbn.js .wbn-date { display: inline; }

/* =====================================================================
   1. HERO
   ===================================================================== */
.wbn .wbn-hero { padding: 10px; }
.wbn .wbn-hero__cadre {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bord-fin);
  border-radius: var(--r-lg);
  background:
    radial-gradient(55% 65% at 88% 8%, rgba(44, 183, 113, 0.2), transparent 62%),
    radial-gradient(45% 55% at 0% 100%, rgba(19, 81, 53, 0.42), transparent 70%),
    #050505;
  padding: clamp(2.5rem, 5.5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}
/* Quadrillage discret, qui s'efface vers le bas. */
.wbn .wbn-hero__cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(80% 70% at 70% 20%, #000 10%, transparent 75%);
  pointer-events: none;
}
.wbn .wbn-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .wbn .wbn-hero__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
}
.wbn .wbn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 0.8rem;
  border: 1px solid var(--vert-bord);
  border-radius: var(--r-pill);
  background: var(--vert-voile);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--txt);
  line-height: 1.3;
}
.wbn .wbn-hero h1 {
  margin-top: 1.25rem;
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.wbn .wbn-hero__lead {
  margin-top: 1.25rem;
  max-width: 35em;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--txt-doux);
}
.wbn .wbn-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 1.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--bord-fin);
  border-bottom: 1px solid var(--bord-fin);
  max-width: 640px;
}
.wbn .wbn-meta dt {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-pale);
  margin-bottom: 0.3rem;
}
.wbn .wbn-meta dd { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--txt); }
.wbn .wbn-hero .wbn-relance { margin-top: 1.75rem; }

/* --- Le billet : photo + talon détachable --- */
.wbn .wbn-billet {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
  transition: transform 0.6s var(--ease);
}
@media (min-width: 960px) {
  .wbn .wbn-billet { transform: rotate(2.2deg); margin-right: 0; }
  .wbn .wbn-billet:hover { transform: rotate(0deg) translateY(-4px); }
}
.wbn .wbn-billet__photo {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--bg-2);
  -webkit-mask: radial-gradient(circle 14px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 14px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 14px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.wbn .wbn-billet__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  filter: grayscale(1) contrast(1.12) brightness(0.9);
}
.wbn .wbn-billet__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 22%, transparent 48%, rgba(5, 18, 12, 0.92) 100%),
    linear-gradient(0deg, rgba(19, 81, 53, 0.28), rgba(19, 81, 53, 0.28));
}
.wbn .wbn-billet__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wbn .wbn-billet__photo figcaption {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.4rem;
  z-index: 2;
  display: grid;
  gap: 0.15rem;
}
.wbn .wbn-billet__photo figcaption strong { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.wbn .wbn-billet__photo figcaption span { font-size: 0.75rem; color: var(--txt-doux); line-height: 1.45; }
.wbn .wbn-billet__talon {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 1.25rem 1.4rem 1.4rem;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: #f4f1ea;
  color: #0a0a0a;
  -webkit-mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 14px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 14px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
}
/* Pointillés de découpe */
.wbn .wbn-billet__talon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  border-top: 2px dashed rgba(0, 0, 0, 0.22);
}
.wbn .wbn-billet__k {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}
.wbn .wbn-billet__heure { padding-right: 1.1rem; border-right: 1px solid rgba(0, 0, 0, 0.14); }
.wbn .wbn-billet__h {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-top: 0.25rem;
  color: #0a0a0a;
}
.wbn .wbn-billet__tz { display: block; font-size: 0.6875rem; font-weight: 600; color: rgba(0, 0, 0, 0.55); margin-top: 0.25rem; }
.wbn .wbn-billet__infos strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0a0a0a;
  letter-spacing: -0.02em;
}
.wbn .wbn-billet__infos strong::first-letter { text-transform: uppercase; }
.wbn .wbn-billet__infos > span:last-child { display: block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 600; color: #135135; }
/* Code-barres décoratif */
.wbn .wbn-billet__code {
  width: 22px;
  height: 64px;
  background: repeating-linear-gradient(0deg, #0a0a0a 0 2px, transparent 2px 4px, #0a0a0a 4px 5px, transparent 5px 8px, #0a0a0a 8px 11px, transparent 11px 12px);
  opacity: 0.85;
  border-radius: 2px;
}

/* Animation d'arrivée */
@media (prefers-reduced-motion: no-preference) {
  .wbn .wbn-hero__texte > * { animation: wbn-monte 0.9s var(--ease) both; }
  .wbn .wbn-hero__texte > :nth-child(2) { animation-delay: 0.08s; }
  .wbn .wbn-hero__texte > :nth-child(3) { animation-delay: 0.16s; }
  .wbn .wbn-hero__texte > :nth-child(4) { animation-delay: 0.24s; }
  .wbn .wbn-hero__texte > :nth-child(5) { animation-delay: 0.32s; }
  .wbn .wbn-billet { animation: wbn-billet 1.1s 0.25s var(--ease) both; }
}
@keyframes wbn-monte {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes wbn-billet {
  from { opacity: 0; transform: translateY(40px) rotate(7deg); }
}

/* =====================================================================
   2. DÉFILÉ « CE QUE TU FAIS DÉJÀ »
   ===================================================================== */
.wbn .wbn-metiers { padding: clamp(2.5rem, 6vw, 3.5rem) 0; }
.wbn .wbn-metiers__intro {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--txt-pale);
  margin-bottom: 1.25rem;
  padding: 0 var(--gout);
}
.wbn .wbn-defile {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wbn .wbn-defile__piste { display: flex; width: max-content; animation: wbn-defile 52s linear infinite; }
.wbn .wbn-defile:hover .wbn-defile__piste { animation-play-state: paused; }
.wbn .wbn-defile ul { display: flex; align-items: center; }
.wbn .wbn-defile li {
  display: flex;
  align-items: center;
  font-size: clamp(1.375rem, 3.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
}
.wbn .wbn-defile li:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.42); }
.wbn .wbn-defile li::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 clamp(1rem, 2.6vw, 1.75rem);
  border-radius: 50%;
  background: var(--vert);
}
@keyframes wbn-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .wbn .wbn-defile__piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 var(--gout); }
  .wbn .wbn-defile__piste > ul:last-child { display: none; }
  .wbn .wbn-defile ul { flex-wrap: wrap; justify-content: center; }
}

/* =====================================================================
   3. LE CONSTAT
   ===================================================================== */
.wbn .wbn-constat__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .wbn .wbn-constat__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.wbn .wbn-constat h2 { font-size: var(--fs-lg); }
.wbn .wbn-constat .wbn-prose { margin-top: 1.75rem; max-width: 36em; font-size: var(--fs-lead); }

/* Illustration : une conversation de groupe que tout le monde connaît */
.wbn .wbn-chat {
  position: relative;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--bord-fin);
  border-radius: 28px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(44, 183, 113, 0.08), transparent 60%), #0d0f0e;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.wbn .wbn-chat__tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--bord-fin);
}
.wbn .wbn-chat__tete b { display: block; font-size: 0.9375rem; line-height: 1.25; }
.wbn .wbn-chat__tete small { display: block; font-size: 0.75rem; color: var(--txt-pale); }
.wbn .wbn-av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vert-fond);
  color: #d9f5e6;
  font-size: 0.8125rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.wbn .wbn-bulle {
  position: relative;
  width: fit-content;
  max-width: 88%;
  padding: 0.6rem 0.85rem 0.55rem;
  border-radius: 4px 16px 16px 16px;
  background: #1c1f1e;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.wbn .wbn-bulle + .wbn-bulle { margin-top: 0.55rem; }
.wbn .wbn-bulle b { display: block; font-size: 0.75rem; font-weight: 600; color: #7fd8a9; margin-bottom: 0.1rem; }
.wbn .wbn-bulle b.c2 { color: #f0b37e; }
.wbn .wbn-bulle b.c3 { color: #9fb8ff; }
.wbn .wbn-bulle time { display: block; text-align: right; font-size: 0.6875rem; color: var(--txt-pale); margin-top: 0.15rem; }
.wbn .wbn-bulle mark { background: var(--vert-voile); color: var(--vert); border-radius: 4px; padding: 0 0.25rem; font-weight: 600; }
.wbn .wbn-chat__note {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px dashed var(--bord);
  font-size: var(--fs-xs);
  color: var(--txt-doux);
  line-height: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wbn .wbn-chat .wbn-bulle { animation: wbn-bulle linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .wbn .wbn-chat .wbn-bulle:nth-of-type(2) { animation-range: entry 25% cover 42%; }
    .wbn .wbn-chat .wbn-bulle:nth-of-type(3) { animation-range: entry 40% cover 50%; }
  }
}
@keyframes wbn-bulle { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* =====================================================================
   4. PROGRAMME — les 3 secrets
   ===================================================================== */
.wbn .wbn-prog { border-top: 1px solid var(--bord-fin); }
.wbn .wbn-prog__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  border-bottom: 1px solid var(--bord-fin);
}
@media (min-width: 760px) {
  .wbn .wbn-prog__item { grid-template-columns: 8rem minmax(0, 1fr); align-items: center; }
}
.wbn .wbn-prog__num {
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.32);
}
.wbn .wbn-prog__k {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 0.6rem;
}
.wbn .wbn-prog h3 { font-size: var(--fs-h3); line-height: 1.3; }
/* =====================================================================
   5. POUR QUI
   ===================================================================== */
.wbn .wbn-qui {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 820px) { .wbn .wbn-qui { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.wbn .wbn-qui__col {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--r-md);
  border: 1px solid var(--bord-fin);
  background: var(--bg-2);
}
.wbn .wbn-qui__col--oui { border-color: var(--vert-bord); background: linear-gradient(180deg, rgba(44, 183, 113, 0.08), transparent 55%), var(--bg-2); }
.wbn .wbn-qui__col h3 { display: flex; align-items: center; gap: 0.65rem; font-size: 1.1875rem; margin-bottom: 1.5rem; }
.wbn .wbn-qui__col h3 svg { width: 26px; height: 26px; }
.wbn .wbn-qui__col--oui h3 svg { color: var(--vert); }
.wbn .wbn-qui__col--non h3 svg { color: var(--txt-pale); }
.wbn .wbn-qui__col .wbn-liste li { display: block; font-size: 0.96875rem; color: var(--txt); }
.wbn .wbn-qui__col--non .wbn-liste li { color: var(--txt-doux); }
.wbn .wbn-qui__col .wbn-liste li + li { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--bord-fin); }

/* =====================================================================
   6. TÉMOIGNAGES — vraies captures + légende
   ===================================================================== */
.wbn .wbn-captures {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 320px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--gout));
  padding: 0 var(--gout) 1rem;
  scroll-padding: 0 var(--gout);
  scrollbar-width: thin;
  scrollbar-color: var(--vert-fond) transparent;
  align-items: start;
}
@media (min-width: 760px) {
  .wbn .wbn-captures {
    display: block;
    columns: 3;
    column-gap: 1.25rem;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
}
.wbn .wbn-capture {
  scroll-snap-align: start;
  break-inside: avoid;
  margin-bottom: 1.5rem;
}
.wbn .wbn-capture__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / var(--r, 1.4);
  border: 1px solid var(--bord);
  border-radius: 18px;
  background: var(--bg-2);
}
.wbn .wbn-capture__img img {
  width: 100%;
  max-width: none;
  height: auto;
  /* Une marge en % se calcule sur la largeur : --t = haut du cadrage / largeur. */
  margin-top: calc(var(--t, 0) * -100%);
}
.wbn .wbn-capture__img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.wbn .wbn-capture figcaption { padding: 0.9rem 0.25rem 0; }
.wbn .wbn-capture figcaption strong { display: block; font-size: 0.96875rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.wbn .wbn-capture figcaption span { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--txt-pale); line-height: 1.4; }
.wbn .wbn-captures__aide { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--txt-pale); }
@media (min-width: 760px) { .wbn .wbn-captures__aide { display: none; } }

/* =====================================================================
   7. TON HÔTE
   ===================================================================== */
.wbn .wbn-hote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .wbn .wbn-hote { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .wbn .wbn-hote__photo { position: sticky; top: calc(var(--bandeau-h) + 2rem); }
}
.wbn .wbn-hote__photo { position: relative; max-width: 440px; width: 100%; margin: 0 auto; }
.wbn .wbn-hote__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--r-lg);
  filter: saturate(0.85);
}
.wbn .wbn-hote__photo figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.75rem;
  color: var(--txt-doux);
}
.wbn .wbn-hote h2 { font-size: var(--fs-lg); }
.wbn .wbn-hote .wbn-prose { margin-top: 1.5rem; }
.wbn .wbn-hote__role { margin-top: 0.6rem; font-weight: 600; color: var(--vert); font-size: 1rem; }
@media (min-width: 560px) { .wbn .wbn-infos > div { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.wbn .wbn-infos dt {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-pale);
  padding-top: 0.3rem;
}
.wbn .wbn-infos dd { color: var(--txt-doux); font-size: var(--fs-small); }

/* =====================================================================
   9. FAQ
   ===================================================================== */
.wbn .wbn-faq h2 { font-size: var(--fs-lg); margin-bottom: clamp(2rem, 5vw, 3rem); }
.wbn .wbn-faq details { border-bottom: 1px solid var(--bord-fin); }
.wbn .wbn-faq details:first-of-type { border-top: 1px solid var(--bord-fin); }
.wbn .wbn-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.wbn .wbn-faq summary::-webkit-details-marker { display: none; }
.wbn .wbn-faq summary:hover { color: var(--vert); }
.wbn .wbn-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform 0.35s var(--ease), border-color 0.2s;
}
.wbn .wbn-faq details[open] summary::after { transform: rotate(45deg); border-color: var(--vert-bord); }
.wbn .wbn-faq details p { padding: 0 3rem 1.5rem 0; color: var(--txt-doux); font-size: var(--fs-small); }
.wbn .wbn-faq details a { color: var(--vert); border-bottom: 1px solid var(--vert-bord); }

/* =====================================================================
   10. APPEL FINAL
   ===================================================================== */
.wbn .wbn-final { padding: 10px; }
.wbn .wbn-final__cadre {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 7rem) 0;
  border: 1px solid var(--bord-fin);
  border-radius: var(--r-lg);
  background: radial-gradient(50% 60% at 50% 100%, rgba(44, 183, 113, 0.22), transparent 70%), #050505;
  text-align: center;
}
.wbn .wbn-final h2 { font-size: var(--fs-lg); }
.wbn .wbn-final .wbn-meta { margin: 2rem auto 0; text-align: left; }

/* =====================================================================
   11. PIED DE PAGE
   ===================================================================== */
.wbn .wbn-pied {
  padding: 3rem 0 3.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
}
.wbn .wbn-pied p + p { margin-top: 0.5rem; }
.wbn .wbn-marque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: var(--vert-fond);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
}
.wbn .wbn-marque span span { font-weight: 400; }
.wbn .wbn-marque svg { width: 16px; height: 16px; }

/* =====================================================================
   12. BARRE D'ACTION MOBILE (collée en bas)
   ===================================================================== */
.wbn .wbn-collant { display: none; }
@media (max-width: 759px) {
  .wbn { padding-bottom: 84px; }
  .wbn .wbn-collant {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.55rem 0.55rem 1.1rem;
    border: 1px solid var(--vert-bord);
    border-radius: var(--r-pill);
    background: rgba(10, 14, 12, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
  }
  .wbn .wbn-collant b { display: block; font-size: 0.875rem; line-height: 1.25; white-space: nowrap; }
  .wbn .wbn-collant small { display: block; font-size: 0.6875rem; color: var(--txt-pale); line-height: 1.3; }
  /* N'apparaît qu'une fois le hero dépassé (navigateurs compatibles). */
  @supports (animation-timeline: scroll()) {
    .wbn .wbn-collant {
      animation: wbn-collant linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }
  }
}
@keyframes wbn-collant {
  0%, 70% { opacity: 0; transform: translateY(120%); pointer-events: none; }
  100% { opacity: 1; transform: none; pointer-events: auto; }
}

/* =====================================================================
   13. FENÊTRES (CSS :target, sans script)
   #choix : VIP ou gratuit, côte à côte · #avant-paiement : consignes
   ===================================================================== */
.wbn .wbn-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
}
.wbn .wbn-modal:target { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
.wbn .wbn-modal__fond { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wbn .wbn-modal__boite {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  padding: var(--pad);
  border: 1px solid var(--vert-bord);
  border-radius: var(--r-lg);
  background: #0d1110;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.4s var(--ease);
}
.wbn .wbn-modal__boite--large { max-width: 780px; }
.wbn .wbn-modal:target .wbn-modal__boite { transform: none; }
.wbn .wbn-modal__fermer {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt-doux);
}
.wbn .wbn-modal__fermer:hover { background: rgba(255, 255, 255, 0.12); color: var(--txt); }
.wbn .wbn-modal__fermer svg { width: 18px; height: 18px; }
.wbn .wbn-modal h2 { font-size: clamp(1.375rem, 4vw, 1.875rem); padding-right: 2.5rem; }
.wbn .wbn-modal__intro { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--txt-doux); }

/* --- Tableau comparatif VIP / gratuit --- */
.wbn .wbn-modal .wbn-eyebrow { padding-right: 3rem; margin-bottom: 0.9rem; }
.wbn .wbn-compare {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.8125rem;
}
.wbn .wbn-compare col.c-plan { width: 74px; }
.wbn .wbn-compare th, .wbn .wbn-compare td {
  padding: 0.55rem 0.3rem;
  border-bottom: 1px solid var(--bord-fin);
  vertical-align: middle;
  line-height: 1.4;
}
.wbn .wbn-compare tbody th { font-weight: 400; color: var(--txt-doux); text-align: left; padding-left: 0; padding-right: 0.6rem; }
.wbn .wbn-compare tbody th strong { font-weight: 600; color: var(--txt); }
.wbn .wbn-compare td { text-align: center; }
.wbn .wbn-compare td svg { width: 22px; height: 22px; margin: 0 auto; color: var(--vert); }
.wbn .wbn-compare td.non svg { color: rgba(255, 255, 255, 0.28); }
.wbn .wbn-compare .is-vip { background: rgba(44, 183, 113, 0.07); border-left: 1px solid var(--vert-bord); border-right: 1px solid var(--vert-bord); }
.wbn .wbn-compare thead th { vertical-align: bottom; text-align: center; padding-top: 0.8rem; padding-bottom: 0.7rem; border-bottom-color: var(--bord); }
.wbn .wbn-compare thead th.is-vip { border-top: 1px solid var(--vert-bord); border-radius: 14px 14px 0 0; }
.wbn .wbn-compare tbody tr:last-child .is-vip { border-bottom: 1px solid var(--vert-bord); border-radius: 0 0 14px 14px; }
.wbn .wbn-plan__badge {
  display: none;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--vert);
  color: #000;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}
.wbn .wbn-plan__nom {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--txt-pale);
}
.wbn .wbn-compare thead th.is-vip .wbn-plan__nom { color: var(--vert); }
.wbn .wbn-plan__prix { display: block; margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--txt); }
.wbn .wbn-plan__prix small { display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0; color: var(--txt-pale); }
@media (min-width: 560px) {
  .wbn .wbn-compare { font-size: 0.9375rem; }
  .wbn .wbn-compare col.c-plan { width: 170px; }
  .wbn .wbn-compare th, .wbn .wbn-compare td { padding: 0.6rem 0.5rem; }
  .wbn .wbn-plan__badge { display: inline-block; }
  .wbn .wbn-plan__nom { font-size: 0.75rem; }
  .wbn .wbn-plan__prix { font-size: 1.5rem; }
  .wbn .wbn-plan__prix small { display: inline; margin-left: 0.2rem; font-size: 0.75rem; }
}
/* Les deux boutons restent visibles en bas de la fenêtre pendant le défilement. */
.wbn .wbn-choix__actions {
  position: sticky;
  bottom: calc(-1 * var(--pad));
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1rem calc(-1 * var(--pad)) 0;
  padding: 0.9rem var(--pad) calc(0.9rem + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 17, 16, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--bord-fin);
}
@media (min-width: 560px) {
  .wbn .wbn-choix__actions { grid-template-columns: minmax(0, 1fr) 170px 170px; gap: 0; }
  .wbn .wbn-choix__actions::before { content: ""; }
  .wbn .wbn-choix__actions .wbn-btn { margin: 0 0.3rem; }
}
.wbn .wbn-choix__actions .wbn-btn { min-height: 50px; padding: 0.75rem 0.8rem; font-size: 0.875rem; }
.wbn .wbn-choix__note {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--vert-voile);
  border: 1px solid var(--vert-bord);
  font-size: var(--fs-xs);
  color: var(--txt-doux);
  line-height: 1.55;
}
.wbn .wbn-choix__note strong { color: var(--txt); }
.wbn .wbn-choix__secu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--txt-pale);
  text-align: center;
}
.wbn .wbn-choix__secu svg { width: 14px; height: 14px; }
@media (max-width: 559px) {
  .wbn .wbn-modal h2 { font-size: 1.3125rem; }
  .wbn .wbn-modal__intro { font-size: 0.875rem; }
}

/* --- Consignes avant paiement --- */
.wbn .wbn-etapes { margin: 1.75rem 0 1.25rem; counter-reset: etape; }
.wbn .wbn-etapes li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding-left: 3rem;
  color: var(--txt-doux);
  font-size: var(--fs-small);
  counter-increment: etape;
}
.wbn .wbn-etapes li + li { margin-top: 1rem; }
.wbn .wbn-etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--vert-bord);
  color: var(--vert);
  font-weight: 700;
  font-size: 0.875rem;
}
.wbn .wbn-alerte {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 196, 0, 0.08);
  border: 1px solid rgba(255, 196, 0, 0.28);
  font-size: var(--fs-small);
  color: #f6e3a8;
  line-height: 1.5;
}
.wbn .wbn-alerte svg { width: 20px; height: 20px; margin-top: 1px; color: #ffc400; }
.wbn .wbn-alerte strong { color: #fff3cc; }
.wbn .wbn-retour { display: block; margin-top: 1rem; text-align: center; font-size: var(--fs-xs); color: var(--txt-pale); }
.wbn .wbn-retour:hover { color: var(--txt); }

/* =====================================================================
   Apparitions au défilement (uniquement si le navigateur sait le faire)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wbn .wbn-rev {
      animation: wbn-monte linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wbn *, .wbn *::before, .wbn *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .wbn .wbn-point::after { display: none; }
}

/* =====================================================================
   14. INSCRIPTION (pop-up de la landing)
   ===================================================================== */
.wbn .wbn-etapes-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-bottom: 1.1rem;
  padding-right: 3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--txt-pale);
}
.wbn .wbn-etapes-mini li { display: inline-flex; align-items: center; gap: 0.45rem; }
.wbn .wbn-etapes-mini span {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--bord);
  font-size: 0.6875rem;
}
.wbn .wbn-etapes-mini svg { width: 1.4rem; height: 1.4rem; color: var(--vert); }
.wbn .wbn-etapes-mini .is-actif { color: var(--txt); }
.wbn .wbn-etapes-mini .is-actif span { background: var(--vert); border-color: var(--vert); color: #000; }
.wbn .wbn-etapes-mini .is-fait { color: var(--vert); }

.wbn .wbn-form { display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.wbn .wbn-champ { display: grid; gap: 0.35rem; min-width: 0; }
.wbn .wbn-champ > span { font-size: 0.8125rem; font-weight: 500; color: var(--txt-doux); }
.wbn .wbn-champ input, .wbn .wbn-champ select {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 0.9rem;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: #090c0b;
  color: var(--txt);
  font: inherit;
  font-size: 1rem; /* 16 px minimum : évite le zoom automatique sur iPhone */
  letter-spacing: 0;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wbn .wbn-champ input:focus, .wbn .wbn-champ select:focus { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-voile); }
.wbn .wbn-champ input:user-invalid { border-color: #e5604f; }
.wbn .wbn-tel { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 0.5rem; }
.wbn .wbn-champ select {
  appearance: none;
  padding-right: 2rem;
  background: #090c0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0.8rem center;
  text-overflow: ellipsis;
}
.wbn .wbn-champ select option { background: #0d1110; color: #fff; }
.wbn .wbn-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wbn .wbn-form .wbn-btn { margin-top: 0.4rem; }
.wbn .wbn-form .wbn-btn:disabled { opacity: 0.65; cursor: progress; transform: none; box-shadow: none; }
.wbn .wbn-form__legal { display: block; font-size: 0.75rem; line-height: 1.5; color: var(--txt-pale); text-align: center; }
/* Icône posée dans la ligne de texte : reste collée au premier mot si le texte passe sur deux lignes. */
.wbn .wbn-form__legal svg { display: inline-block; width: 13px; height: 13px; margin-right: 0.35rem; vertical-align: -2px; }
.wbn .wbn-form__erreur {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(229, 96, 79, 0.1);
  border: 1px solid rgba(229, 96, 79, 0.4);
  font-size: var(--fs-xs);
  color: #ffc9c1;
}
.wbn .wbn-form__erreur[hidden] { display: none; }
.wbn .wbn-form__erreur svg { width: 18px; height: 18px; color: #e5604f; margin-top: 1px; }
@media (max-width: 340px) { .wbn .wbn-tel { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   15. PAGE /acces — choix VIP ou gratuit après l'inscription
   ===================================================================== */
.wbn .wbn-acces {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
  background: radial-gradient(60% 40% at 50% 0%, rgba(44, 183, 113, 0.14), transparent 70%);
}
.wbn .wbn-acces .wbn-wrap { max-width: 820px; }
.wbn .wbn-acces .wbn-etapes-mini { justify-content: center; padding-right: 0; margin-bottom: 2rem; }
.wbn .wbn-acces__tete { text-align: center; }
.wbn .wbn-acces__tete .wbn-chip svg { width: 18px; height: 18px; color: var(--vert); }
.wbn .wbn-acces h1 { margin-top: 1.1rem; font-size: clamp(1.875rem, 5vw, 3rem); letter-spacing: -0.035em; }
.wbn .wbn-acces__lead { margin: 1rem auto 0; max-width: 34em; font-size: var(--fs-lead); color: var(--txt-doux); }
.wbn .wbn-carte-choix {
  --pad: clamp(1.1rem, 4vw, 2rem);
  position: relative;
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  padding: var(--pad);
  border: 1px solid var(--vert-bord);
  border-radius: var(--r-lg);
  background: #0d1110;
}
.wbn .wbn-carte-choix .wbn-compare { margin-top: 0; }
.wbn .wbn-carte-choix .wbn-choix__actions {
  bottom: 0;
  margin: 1.25rem calc(-1 * var(--pad)) calc(-1 * var(--pad));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.wbn .wbn-acces__infos { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.wbn .wbn-acces__infos p { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--txt-doux); line-height: 1.55; }
.wbn .wbn-acces__infos svg { width: 18px; height: 18px; margin-top: 1px; color: var(--vert); }

/* Le bouton VIP est un formulaire (création de la vente côté serveur). */
.wbn .wbn-choix__actions form { display: contents; }
.wbn .wbn-btn[aria-busy="true"] { opacity: 0.65; cursor: progress; transform: none; box-shadow: none; }

/* =====================================================================
   16. PAGE /merci-vip — après le paiement du Pass VIP
   ===================================================================== */
.wbn .wbn-merci { min-height: 70vh; text-align: center; }
.wbn .wbn-merci__etat { display: none; flex-direction: column; align-items: center; }
.wbn .wbn-merci[data-statut="verification"] [data-pour="verification"],
.wbn .wbn-merci[data-statut="paye"] [data-pour="paye"],
.wbn .wbn-merci[data-statut="en_attente"] [data-pour="en_attente"],
.wbn .wbn-merci[data-statut="echec"] [data-pour="echec"] { display: flex; }
.wbn .wbn-merci h1 { max-width: 16em; }
.wbn .wbn-merci .wbn-btn { margin-top: 2rem; }
.wbn .wbn-btn--wa { min-height: 62px; padding: 1.1rem 2.2rem; font-size: 1.0625rem; }
.wbn .wbn-btn--wa svg { width: 22px; height: 22px; }
.wbn .wbn-chip--alerte { border-color: rgba(229, 96, 79, 0.4); background: rgba(229, 96, 79, 0.1); }
.wbn .wbn-chip--alerte svg { width: 18px; height: 18px; color: #e5604f; }
.wbn .wbn-merci__liste {
  display: grid;
  gap: 0.7rem;
  margin-top: 2.25rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--bord-fin);
  border-radius: var(--r-md);
  background: var(--bg-2);
  text-align: left;
  font-size: var(--fs-small);
  color: var(--txt-doux);
}
.wbn .wbn-merci__liste li { display: flex; gap: 0.65rem; align-items: flex-start; }
.wbn .wbn-merci__liste svg { width: 20px; height: 20px; margin-top: 2px; color: var(--vert); }
.wbn .wbn-merci__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.75rem; }
.wbn .wbn-roue {
  width: 44px;
  height: 44px;
  margin-bottom: 1.5rem;
  border: 3px solid var(--vert-voile);
  border-top-color: var(--vert);
  border-radius: 50%;
  animation: wbn-tourne 0.9s linear infinite;
}
@keyframes wbn-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wbn .wbn-roue { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; } }

/* Icône dans un badge (pages /acces et /merci-vip) */
.wbn .wbn-chip svg { width: 18px; height: 18px; color: var(--vert); }

/* =====================================================================
   17. PAGE /offre — les deux offres de fin de webinaire
   ===================================================================== */
.wbn .wbn-offre-page .wbn-acces .wbn-wrap { max-width: 1000px; }
.wbn .wbn-offres {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  align-items: stretch;
}
@media (min-width: 800px) { .wbn .wbn-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.wbn .wbn-offre {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.wbn .wbn-offre--top {
  border: 1.5px solid var(--vert);
  background: radial-gradient(90% 60% at 100% 0%, rgba(44, 183, 113, 0.16), transparent 60%), #0d1210;
  box-shadow: 0 30px 80px -40px rgba(44, 183, 113, 0.45);
}
.wbn .wbn-offre__badge {
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--vert);
  color: #000;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wbn .wbn-offre__badge--neutre { background: rgba(255, 255, 255, 0.08); color: var(--txt-doux); }
.wbn .wbn-offre h2 { margin-top: 1.1rem; font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.wbn .wbn-offre__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--txt-doux);
}
.wbn .wbn-offre__prix strong { font-size: clamp(2.25rem, 5.5vw, 2.875rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--txt); }
.wbn .wbn-offre__prix s { font-size: 0.875rem; font-weight: 500; color: var(--txt-pale); }
.wbn .wbn-offre .wbn-liste { margin: 1.5rem 0 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bord-fin); }
.wbn .wbn-offre .wbn-btn { margin-top: auto; }
.wbn .wbn-offres__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--txt-pale);
  text-align: center;
}
.wbn .wbn-offres__note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.wbn .wbn-titre-sec { font-size: var(--fs-lg); }
.wbn .wbn-acces__lead.wbn-gauche { margin-left: 0; text-align: left; }
.wbn .wbn-incub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--bord-fin);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bord-fin);
}
@media (min-width: 640px) { .wbn .wbn-incub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wbn .wbn-incub li {
  padding: 1rem 1.15rem 1rem 2.6rem;
  background: var(--bg-1);
  font-size: var(--fs-small);
  color: var(--txt);
  position: relative;
}
.wbn .wbn-incub li::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert);
}
.wbn .wbn-etapes--page { margin: 2rem 0; }
.wbn .wbn-garantie {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--vert-bord);
  border-radius: var(--r-md);
  background: var(--vert-nuit);
}
.wbn .wbn-garantie > svg { width: 36px; height: 36px; color: var(--vert); }
.wbn .wbn-garantie h3 { font-size: 1.0625rem; }
.wbn .wbn-garantie p { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--txt-doux); }

/* Choix de l'option dans le formulaire */
.wbn .wbn-choix-offre { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.wbn .wbn-choix-offre label {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--bord);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.wbn .wbn-choix-offre label:has(input:checked) { border-color: var(--vert); background: var(--vert-voile); }
.wbn .wbn-choix-offre input { width: 18px; height: 18px; accent-color: var(--vert); flex: 0 0 auto; }
.wbn .wbn-choix-offre b { display: block; font-size: 0.9375rem; line-height: 1.3; }
.wbn .wbn-choix-offre small { display: block; font-size: 0.8125rem; color: var(--txt-pale); }

/* =====================================================================
   18. PAIEMENT CHARIOW INTÉGRÉ (pop-ups #paiement-vip, #paiement-30j, #paiement-15j)
   ===================================================================== */
.wbn .wbn-modal__boite--paiement { max-width: 480px; --pad: clamp(1.1rem, 4vw, 1.75rem); }
.wbn .wbn-modal__boite--paiement .wbn-eyebrow { margin-bottom: 0.5rem; }
.wbn .wbn-paiement__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--txt-doux);
}
.wbn .wbn-paiement__prix strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--txt); }
.wbn .wbn-paiement__prix s { font-size: 0.8125rem; font-weight: 500; color: var(--txt-pale); }
.wbn .wbn-paiement {
  position: relative;
  min-height: 420px;
  margin-top: 1.1rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
}
.wbn .wbn-paiement iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.wbn .wbn-paiement__charge {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #fff;
  color: #555;
  font-size: var(--fs-small);
  text-align: center;
  transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
}
.wbn .wbn-paiement.is-pret .wbn-paiement__charge { opacity: 0; visibility: hidden; }
.wbn .wbn-paiement__charge .wbn-roue { margin-bottom: 1rem; }
.wbn .wbn-modal__boite--paiement .wbn-form__legal { margin-top: 0.9rem; }

/* =====================================================================
   19. /acces : alerte « inscription pas encore terminée » (bien visible)
   ===================================================================== */
.wbn .wbn-acces__tete .wbn-chip--attention {
  gap: 0.55rem;
  padding: 0.6rem 1.15rem 0.6rem 0.95rem;
  border: 0;
  background: #ffc83d;
  color: #111;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.55), 0 12px 34px -12px rgba(255, 200, 61, 0.6);
}
.wbn .wbn-acces__tete .wbn-chip--attention svg { width: 20px; height: 20px; color: #111; }
@media (prefers-reduced-motion: no-preference) {
  .wbn .wbn-chip--attention { animation: wbn-attention 2s ease-out infinite; }
}
@keyframes wbn-attention {
  0% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.55), 0 12px 34px -12px rgba(255, 200, 61, 0.6); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(255, 200, 61, 0), 0 12px 34px -12px rgba(255, 200, 61, 0.6); }
}

/* =====================================================================
   20. HERO MOBILE : le bouton visible sans faire défiler
   (téléphone de 360 × 640 utiles, navigateur Facebook compris)
   ===================================================================== */
@media (max-width: 559px) {
  .wbn .wbn-hero__cadre { padding-top: 1.25rem; }
  .wbn .wbn-hero__texte { display: flex; flex-direction: column; align-items: flex-start; }
  .wbn .wbn-hero h1 { margin-top: 0.85rem; }
  .wbn .wbn-hero__lead { margin-top: 0.8rem; font-size: 0.9375rem; line-height: 1.5; }
  /* Le bouton passe avant le bloc Quand / Où / Prix, déjà résumé dans la pastille. */
  .wbn .wbn-hero .wbn-relance { order: 4; align-self: stretch; margin-top: 1.25rem; }
  .wbn .wbn-hero .wbn-relance .wbn-btn { width: 100%; }
  .wbn .wbn-hero .wbn-meta { order: 5; align-self: stretch; margin-top: 1.5rem; }
}

/* =====================================================================
   21. CHARGEMENTS : toujours visibles (bouton d'envoi, message d'attente)
   ===================================================================== */
.wbn .wbn-btn[aria-busy="true"],
.wbn .wbn-form .wbn-btn[aria-busy="true"]:disabled { opacity: 1; cursor: progress; }
.wbn .wbn-btn__roue {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wbn-tourne 0.8s linear infinite;
}
.wbn .wbn-form__attente { display: none; margin-top: 0.6rem; font-size: 0.8125rem; color: var(--vert); text-align: center; }
.wbn .wbn-form.is-envoi .wbn-form__attente { display: block; }
.wbn .wbn-form.is-envoi .wbn-form__legal { display: none; }