/* The 21-Day Body-Led Current — sales page.
 * Même direction éditoriale premium que saturday-reset.css (namespace `blc-`).
 * Motif de l'eau et du courant : lignes SVG, dégradés ocean → teal, ondes.
 */
.page-current {
  --blc-ink: #062f40;
  --blc-deep: #012b3d;
  --blc-deep-2: #01202e;
  --blc-plum: #6e526b;
  --blc-plum-2: #564058;
  --blc-cream: #f6efe9;
  --blc-paper: #fbf8f4;
  --blc-sage: #b3c9c0;
  --blc-teal: #7ab2c4;
  --blc-rule: rgb(1 51 73 / .17);
  --blc-rule-light: rgb(246 239 233 / .22);
  background: var(--blc-paper);
  color: var(--blc-ink);
  font-size: clamp(1.04rem, 1rem + .14vw, 1.16rem);
}

/* ── Topbar : même comportement que la page Reset ─────────────────── */
.page-current .topbar {
  position: absolute;
  transition: padding .35s var(--ease-out-5), background .35s ease, box-shadow .35s ease;
}
.page-current--confirmed .topbar__logo {
  /* Page de confirmation : fond crème, pas de hero bleu. On garde le réglage sombre
     du reste du site, sinon le lettrage se délave sur le crème. */
  filter: saturate(1.25) contrast(1.12) brightness(.83) drop-shadow(0 3px 16px rgb(255 255 255 / .65));
}
.page-current:not(.page-current--confirmed) .topbar__logo {
  height: clamp(92px, 7vw, 110px);
  /* Hero bleu profond : on ÉCLAIRCIT le lettrage. L'assombrir, comme sur la page
     Reset dont l'entête se détache sur une image pâle, le rendrait illisible ici. */
  /* Deux ombres : la serrée tient le lettrage sur le haut clair de la photo en
     mobile, la large le pose sur le bleu profond en bureau. */
  filter: saturate(1.2) contrast(1.05) brightness(1.45)
          drop-shadow(0 1px 3px rgb(1 34 49 / .85))
          drop-shadow(0 3px 22px rgb(1 34 49 / .6));
}
.page-current .topbar.is-scrolled .topbar__logo {
  /* Une fois l'entête sur fond crème, on repasse au réglage sombre du reste du site. */
  filter: saturate(1.25) contrast(1.12) brightness(.83) drop-shadow(0 3px 16px rgb(255 255 255 / .65));
}
.page-current .topbar.is-scrolled {
  padding-block: .55rem;
  background: rgb(246 239 233 / .9);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.page-current .topbar.is-scrolled .topbar__logo { height: 76px; }

/* ── Primitives ──────────────────────────────────────────────────── */
.blc-kicker {
  display: inline-flex;
  align-items: flex-start;
  gap: .7rem;
  font: 600 .8rem/1.2 var(--font-sans);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.blc-kicker::before {
  content: "";
  flex: none;
  width: 1.8rem;
  height: 1px;
  /* Aligné sur la première ligne : une accroche qui passe sur deux lignes ne doit
     pas voir son trait glisser au milieu du bloc. */
  margin-top: .58em;
  background: currentColor;
  opacity: .55;
}

.blc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.15rem 2.2rem;
  border-radius: 999px;
  background: var(--blc-plum);
  color: var(--blc-cream);
  font: 500 .88rem/1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  box-shadow: 0 14px 34px -18px rgb(110 82 107 / .85);
  transition: background .25s ease, transform .35s var(--ease-out-5), box-shadow .25s ease;
}
.blc-button:hover { background: var(--blc-plum-2); transform: translateY(-2px); }
.blc-button:focus-visible { outline: 3px solid var(--blc-teal); outline-offset: 3px; }
.blc-button--ghost {
  background: transparent;
  color: var(--blc-ink);
  border-color: rgb(6 47 64 / .32);
  box-shadow: none;
}
.blc-button--ghost:hover { background: var(--blc-ink); color: var(--blc-cream); }
.blc-button--wide { width: 100%; }

.blc-textlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: 500 .82rem/1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: .35rem;
}

/* ── Compte à rebours ────────────────────────────────────────────── */
.blc-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .75rem;
  padding: .85rem 1.25rem;
  border: 1px solid var(--blc-rule-light);
  border-radius: 16px;
  background: rgb(255 255 255 / .06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.blc-count__label {
  font: 600 .7rem/1.3 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
  flex: 1 1 100%;
}
.blc-count__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.1rem;
  padding: .35rem .3rem .3rem;
  border-radius: 10px;
  background: rgb(255 255 255 / .08);
}
.blc-count__num {
  font: 500 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1 var(--font-serif);
  font-variant-numeric: tabular-nums;
}
.blc-count__cap {
  font: 500 .58rem/1.4 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
}
.blc-count__sep { opacity: .3; font-size: 1.1rem; }
.blc-count__closed {
  flex: 1 1 100%;
  font: 500 .9rem/1.5 var(--font-sans);
  display: none;
}
/* Variante claire, pour la section finale sur papier. */
.blc-count--light {
  border-color: var(--blc-rule);
  background: rgb(1 51 73 / .04);
}
.blc-count--light .blc-count__unit { background: rgb(1 51 73 / .07); }

/* Fermeture des inscriptions : posée par le middleware Cloudflare (serveur)
   et par body-led-current.js (client). Les deux mènent au même état. */
.page-current[data-enrollment="closed"] .blc-count__timer { display: none; }
.page-current[data-enrollment="closed"] .blc-count__label { display: none; }
.page-current[data-enrollment="closed"] .blc-count__closed { display: block; }
.page-current[data-enrollment="closed"] .blc-buy { display: none; }
.page-current[data-enrollment="closed"] .blc-closed { display: block; }
.blc-closed { display: none; }
.blc-closed__panel {
  border: 1px solid var(--blc-rule);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: rgb(179 201 192 / .16);
}
.blc-closed__panel h3 {
  font: 400 var(--font-size-fluid-2)/1.2 var(--font-serif);
  margin-bottom: .6rem;
}
.blc-closed__panel p { max-width: 52ch; }
.blc-closed__panel .blc-button { margin-top: 1.2rem; }

/* ── Hero ────────────────────────────────────────────────────────── */
/* Hero de page de vente, pas hero de marque. Une seule colonne centree : la
   video est le seul point de fixation, et le bouton d'achat la suit
   immediatement. Rien ne s'intercale entre les deux. La photo de Jen est
   passee en fond (voir .blc-hero__visual) : deux images d'elle cote a cote se
   disputaient le regard, et celle qui devait gagner, c'est celle qui parle. */
.blc-hero {
  position: relative;
  min-height: min(920px, 100svh);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--blc-deep);
  color: var(--blc-cream);
  overflow: hidden;
}
.blc-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 1.15rem;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  /* La barre du haut est en `position: absolute` et descend a 136px : sous
     9rem le kicker lui passait dessous. Ce plancher n'est pas decoratif. */
  padding: clamp(9rem, 12vw, 10rem) clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
}
.blc-hero__copy .blc-kicker { color: var(--blc-sage); }
/* Centre, un trait uniquement a gauche fait pencher la ligne. On le double. */
.blc-hero__copy .blc-kicker::after {
  content: "";
  flex: none;
  width: 1.8rem;
  height: 1px;
  margin-top: .58em;
  background: currentColor;
  opacity: .55;
}
.blc-hero__title {
  font: 400 var(--font-size-fluid-4)/1.04 var(--font-serif);
  letter-spacing: -.015em;
  max-width: 20ch;
  margin-inline: auto;
}
.blc-hero__title em {
  display: block;
  font-style: italic;
  color: var(--blc-sage);
}
.blc-hero__lede {
  max-width: 50ch;
  margin-inline: auto;
  color: rgb(246 239 233 / .82);
  line-height: 1.65;
}
.blc-hero__lede strong { color: var(--blc-cream); font-weight: 500; }
.blc-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: 100%;
}
.blc-hero__micro {
  font-size: .92rem;
  color: rgb(246 239 233 / .72);
  max-width: 46ch;
  margin-inline: auto;
}
.blc-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.blc-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  /* Floutee volontairement. Sous un voile assez fort pour lire le texte, la
     photo ne montrait plus qu'un demi-visage fantome derriere la video : deux
     Jen se disputaient le regard et aucune ne gagnait. Floutee, elle redevient
     ce qu'elle doit etre ici, une matiere et une couleur. Le `scale` mange les
     bords delaves que le flou cree contre le cadre. */
  filter: blur(22px) saturate(.85);
  transform: scale(1.08);
}
.blc-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  /* La photo est passee derriere le contenu : elle donne l'atmosphere, elle ne
     porte plus l'information. Le voile est donc calcule pour la lisibilite du
     texte par-dessus, pas pour la mise en valeur de la photo. Le radial creuse
     le centre (la ou tombent le titre et la video), le lineaire ferme le bas
     sur la couleur de fond pour que la section suivante enchaine sans couture. */
  background:
    radial-gradient(115% 88% at 50% 38%, rgb(1 43 61 / .86) 0%, rgb(1 43 61 / .8) 42%, rgb(1 43 61 / .62) 100%),
    linear-gradient(180deg, rgb(1 43 61 / .6) 0%, rgb(1 43 61 / .4) 38%, var(--blc-deep) 100%);
}
/* Courant : ondes lentes au bas du hero. Elles ont ete dessinees pour passer
   derriere une colonne de texte calee a gauche. Le hero est maintenant une
   colonne centree, et a 62% de hauteur elles traversaient le compte a rebours
   et la bande des essentiels de part en part : trois traits en travers du seul
   endroit de la page ou la visiteuse decide. Ramenees au tiers bas et a une
   opacite de texture, elles habillent sans couper. */
.blc-hero__current {
  position: absolute;
  inset: auto 0 -6% 0;
  height: 34%;
  z-index: 0;
  opacity: .2;
  pointer-events: none;
}
.blc-hero__current path { fill: none; stroke: var(--blc-teal); stroke-width: 1.1; opacity: .5; }
.blc-hero__current path:nth-child(2) { stroke: var(--blc-sage); opacity: .34; }
.blc-hero__current path:nth-child(3) { stroke: var(--blc-cream); opacity: .16; }

.blc-hero__facts {
  display: grid;
  /* Le hero est passe en colonne flex centree : sans cette largeur, le <ul> se
     retracte a la largeur de son texte et les cinq reperes s'empilent en un
     ruban etroit au lieu de tenir sur une ligne. */
  width: 100%;
  /* 136px et pas 148 : dans les 720px du conteneur centre, 148 ne laissait
     passer que quatre colonnes et le cinquieme repere tombait seul sur une
     deuxieme ligne. Les cinq essentiels se lisent d'un coup ou pas du tout. */
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 1px;
  margin-top: .8rem;
  background: var(--blc-rule-light);
  border: 1px solid var(--blc-rule-light);
  border-radius: 14px;
  overflow: hidden;
}
.blc-hero__facts li {
  background: var(--blc-deep);
  padding: .95rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.blc-hero__facts strong {
  font: 500 .95rem/1.3 var(--font-sans);
  letter-spacing: .01em;
}
.blc-hero__facts span {
  font-size: .82rem;
  color: rgb(246 239 233 / .66);
}

/* ── Bridge ──────────────────────────────────────────────────────── */
.blc-bridge {
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: 1400px;
  margin-inline: auto;
}
.blc-bridge__head h2 {
  font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif);
  margin-top: 1rem;
  max-width: 16ch;
}
.blc-bridge__body p { margin-bottom: 1.15rem; max-width: 62ch; line-height: 1.72; }
.blc-bridge__body p:last-child { margin-bottom: 0; }
.blc-bridge__body em { font-style: italic; }
.blc-bridge__body .blc-lift {
  font: 400 var(--font-size-fluid-2)/1.35 var(--font-serif);
  color: var(--blc-plum);
}

/* ── Ce que c'est + pull quote ───────────────────────────────────── */
.blc-what {
  background: var(--blc-cream);
  border-block: 1px solid var(--blc-rule);
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
}
.blc-what__inner {
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.blc-what h2 {
  font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif);
  margin: 1rem 0 1.3rem;
  max-width: 18ch;
}
.blc-what p { max-width: 58ch; line-height: 1.72; margin-bottom: 1.1rem; }
.blc-pullquote {
  border-left: 2px solid var(--blc-plum);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
}
.blc-pullquote p {
  font: 400 var(--font-size-fluid-2)/1.4 var(--font-serif);
  font-style: italic;
  color: var(--blc-plum);
  max-width: 24ch;
}

/* ── Ce qui est inclus ───────────────────────────────────────────── */
.blc-included {
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
  max-width: 1400px;
  margin-inline: auto;
}
.blc-included__head { max-width: 34ch; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.blc-included__head h2 {
  font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif);
  margin-top: 1rem;
}
.blc-included__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.blc-card {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border: 1px solid var(--blc-rule);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-3);
}
.blc-card__num {
  font: 400 1.1rem/1 var(--font-serif);
  color: var(--blc-plum);
  letter-spacing: .1em;
}
.blc-card h3 {
  font: 400 var(--font-size-fluid-2)/1.22 var(--font-serif);
  max-width: 20ch;
}
.blc-card p { line-height: 1.68; }
.blc-card ul { display: flex; flex-direction: column; gap: .75rem; }
.blc-card li { line-height: 1.6; }
.blc-card li strong { font-weight: 500; display: block; }
.blc-card li span { color: rgb(6 47 64 / .72); font-size: .95rem; }

/* ── Frise des 3 semaines (le courant) ───────────────────────────── */
.blc-weeks {
  position: relative;
  background: var(--blc-deep);
  color: var(--blc-cream);
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
  overflow: hidden;
}
.blc-weeks__inner { max-width: 1400px; margin-inline: auto; position: relative; z-index: 2; }
.blc-weeks__head { max-width: 34ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.blc-weeks__head .blc-kicker { color: var(--blc-sage); }
.blc-weeks__head h2 {
  font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif);
  margin-top: 1rem;
}
.blc-weeks__stream {
  position: absolute;
  left: 0; right: 0;
  top: 46%;
  height: 220px;
  opacity: .55;
  z-index: 1;
  pointer-events: none;
}
.blc-weeks__stream path { fill: none; stroke-width: 1.1; }
.blc-weeks__stream path:nth-child(1) { stroke: var(--blc-teal); opacity: .55; }
.blc-weeks__stream path:nth-child(2) { stroke: var(--blc-sage); opacity: .34; }
.blc-weeks__stream path:nth-child(3) { stroke: var(--blc-cream); opacity: .14; }

.blc-weeks__track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
  position: relative;
}
/* Le fil horizontal qui relie les trois semaines. */
.blc-weeks__track::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 1.05rem;
  height: 1px;
  background: linear-gradient(90deg,
    rgb(122 178 196 / 0) 0%,
    rgb(122 178 196 / .85) 12%,
    rgb(179 201 192 / .85) 88%,
    rgb(179 201 192 / 0) 100%);
}
.blc-week { position: relative; padding-top: 3.4rem; }
.blc-week::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--blc-teal);
  box-shadow: 0 0 0 6px rgb(122 178 196 / .18);
}
.blc-week:nth-child(2)::before { background: var(--blc-sage); box-shadow: 0 0 0 6px rgb(179 201 192 / .18); }
.blc-week:nth-child(3)::before { background: var(--blc-cream); box-shadow: 0 0 0 6px rgb(246 239 233 / .16); }
.blc-week__label {
  font: 600 .74rem/1.3 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blc-sage);
  margin-bottom: .5rem;
}
.blc-week h3 {
  font: 400 var(--font-size-fluid-2)/1.2 var(--font-serif);
  margin-bottom: .7rem;
}
.blc-week p { color: rgb(246 239 233 / .78); line-height: 1.68; max-width: 34ch; }

/* ── Pour qui ────────────────────────────────────────────────────── */
.blc-who {
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.blc-who h2 {
  font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif);
  margin: 1rem 0 1.6rem;
  max-width: 16ch;
}
.blc-who__list { display: flex; flex-direction: column; gap: 1.3rem; }
/* Puce en position absolue, PAS en grid. En grid, chaque element enfant devient
   un item de grille : le <em> de « more of that, please. » sortait de sa phrase
   pour devenir un troisieme item, renvoye en colonne 1 de la ligne suivante. Et
   comme une colonne `auto` se dimensionne sur son item le plus large, c'etait ce
   <em> de 240px qui fixait la largeur de la colonne de la puce — d'ou le trou
   entre le point et le texte du premier point.
   Ici le contenu du <li> reste un flux inline normal : n'importe quel <em>,
   <strong> ou <a> ajoute plus tard reste dans sa phrase.
   1.55rem = la puce (.55rem) plus l'ecart d'un rem, donc le rendu est identique
   a ce que la grille donnait sur les deux points qui marchaient. */
.blc-who__list li {
  position: relative;
  padding-left: 1.55rem;
  line-height: 1.68;
  max-width: 58ch;
}
.blc-who__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--blc-plum);
}
.blc-who__list em { font-style: italic; }
.blc-who__not {
  border: 1px solid var(--blc-rule);
  border-radius: 22px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: rgb(179 201 192 / .16);
}
.blc-who__not h3 {
  font: 400 var(--font-size-fluid-2)/1.2 var(--font-serif);
  margin-bottom: .8rem;
}
.blc-who__not p { line-height: 1.68; }

/* ── Prix ────────────────────────────────────────────────────────── */
.blc-price {
  background: var(--blc-cream);
  border-block: 1px solid var(--blc-rule);
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
}
.blc-price__inner { max-width: 1120px; margin-inline: auto; }
.blc-price__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.blc-price__head .blc-kicker::before { display: none; }
.blc-price__head h2 {
  font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif);
  margin-top: 1rem;
}
.blc-price__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
}
.blc-plan {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.8rem, 3.4vw, 2.6rem);
  border: 1px solid var(--blc-rule);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-3);
}
.blc-plan--feature {
  border-color: rgb(110 82 107 / .45);
  box-shadow: var(--shadow-5);
}
.blc-plan__tag {
  align-self: flex-start;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-plum) 14%, #fff);
  color: var(--blc-plum);
  font: 500 .68rem/1.4 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.blc-plan__name {
  font: 400 var(--font-size-fluid-2)/1.2 var(--font-serif);
}
.blc-plan__price {
  font: 400 var(--font-size-fluid-3)/1 var(--font-serif);
  color: var(--blc-plum);
}
.blc-plan__note { color: rgb(6 47 64 / .78); line-height: 1.6; flex: 1; }
.blc-plan .blc-button { margin-top: .8rem; }
.blc-price__same {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
  max-width: 58ch;
  margin-inline: auto;
  line-height: 1.7;
}
.blc-price__consent {
  margin: 1.4rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .86rem;
  line-height: 1.65;
  color: rgb(6 47 64 / .72);
}
.blc-price__closed { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ── Jen ─────────────────────────────────────────────────────────── */
.blc-jen {
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
}
.blc-jen__inner {
  max-width: 1300px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.blc-jen__portrait {
  border-radius: var(--blob-a);
  overflow: hidden;
  box-shadow: var(--shadow-5);
}
.blc-jen__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.blc-jen h2 { font: 400 var(--font-size-fluid-3)/1.1 var(--font-serif); margin: 1rem 0 .4rem; }
.blc-jen__role {
  font: 500 .82rem/1.4 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blc-plum);
  margin-bottom: 1.2rem;
}
.blc-jen p + p { margin-top: 1rem; }
.blc-jen__copy { max-width: 58ch; line-height: 1.72; }
.blc-jen .blc-textlink { margin-top: 1.6rem; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.blc-faq {
  background: var(--blc-cream);
  border-block: 1px solid var(--blc-rule);
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
}
.blc-faq__inner { max-width: 900px; margin-inline: auto; }
.blc-faq__head { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.blc-faq__head h2 { font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif); margin-top: 1rem; }
.blc-faq details {
  border-top: 1px solid var(--blc-rule);
  padding: 1.3rem 0;
}
.blc-faq details:last-of-type { border-bottom: 1px solid var(--blc-rule); }
.blc-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  font: 400 var(--font-size-fluid-1)/1.45 var(--font-serif);
}
.blc-faq summary::-webkit-details-marker { display: none; }
.blc-faq summary::after {
  content: "+";
  font: 300 1.4rem/1 var(--font-sans);
  color: var(--blc-plum);
  transition: transform .3s var(--ease-out-5);
  flex: none;
}
.blc-faq details[open] summary::after { transform: rotate(45deg); }
.blc-faq summary:focus-visible { outline: 3px solid var(--blc-teal); outline-offset: 4px; }
.blc-faq details p { margin-top: .9rem; max-width: 68ch; line-height: 1.72; }

/* ── CTA final ───────────────────────────────────────────────────── */
.blc-final {
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1400px;
  margin-inline: auto;
}
.blc-final__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }
.blc-final__copy h2 {
  font: 400 var(--font-size-fluid-3)/1.14 var(--font-serif);
  max-width: 22ch;
}
.blc-final__lede { max-width: 52ch; line-height: 1.7; }
.blc-final__micro { font-size: .92rem; color: rgb(6 47 64 / .72); }
.blc-final__sign {
  font: 400 clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem)/1.2 var(--font-script);
  color: var(--blc-plum);
}
.blc-final__sign span {
  display: block;
  font: 500 .78rem/1.4 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(6 47 64 / .6);
  margin-top: .4rem;
}
.blc-final__image {
  border-radius: var(--blob-b);
  overflow: hidden;
  box-shadow: var(--shadow-5);
}
.blc-final__image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .blc-hero { min-height: 0; }
  .blc-hero__copy { padding-top: clamp(6rem, 14vw, 7rem); }
  .blc-bridge,
  .blc-what__inner,
  .blc-who,
  .blc-jen__inner,
  .blc-final { grid-template-columns: 1fr; }
  .blc-jen__portrait { max-width: 420px; }
  .blc-final__image { max-width: 460px; }
}

@media (max-width: 860px) {
  .blc-weeks__track { grid-template-columns: 1fr; gap: 2.4rem; }
  .blc-weeks__track::before {
    left: .5rem;
    right: auto;
    top: 1rem;
    bottom: 1rem;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      rgb(122 178 196 / 0) 0%,
      rgb(122 178 196 / .8) 8%,
      rgb(179 201 192 / .8) 92%,
      rgb(179 201 192 / 0) 100%);
  }
  .blc-week { padding-top: 0; padding-left: 2.6rem; }
  .blc-week::before { top: .35rem; left: 0; }
  .blc-weeks__stream { display: none; }
}

@media (max-width: 620px) {
  .blc-count { padding: .75rem .9rem; }
  .blc-count__unit { min-width: 2.7rem; }
  .blc-hero__title { max-width: none; }
  .blc-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .blc-hero__current path,
  .blc-weeks__stream path { animation: none !important; }
  .blc-button { transition: none; }
}

/* ── Page de confirmation post-achat ─────────────────────────────────
 * Les quatre choses que Jen demande dans ses build notes : le lien de la
 * communauté, les deux dates d'appel au calendrier, le choix du canal du
 * check-in quotidien, et le jour où le premier arrive. Dans cet ordre, parce
 * que rien ne se débloque avant que le compte soit réclamé.
 */
.page-current--confirmed { background: var(--blc-paper); }

.blc-done {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(9rem, 8vw + 6rem, 12rem) clamp(1.5rem, 5vw, 3rem) clamp(4rem, 8vw, 7rem);
}
.blc-done__head { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.blc-done__head h1 {
  font: 400 var(--font-size-fluid-3)/1.12 var(--font-serif);
  margin: 1rem 0 1.2rem;
  max-width: 20ch;
}
.blc-done__lede { max-width: 58ch; line-height: 1.72; }

.blc-done__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.4rem);
}
.blc-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--blc-rule);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-3);
}
.blc-step__num {
  font: 400 1.05rem/1 var(--font-serif);
  color: var(--blc-plum);
  letter-spacing: .1em;
  padding-top: .35rem;
}
.blc-step h2 {
  font: 400 var(--font-size-fluid-2)/1.22 var(--font-serif);
  margin-bottom: .7rem;
  max-width: 24ch;
}
.blc-step p { line-height: 1.68; max-width: 58ch; }
.blc-step .blc-button { margin-top: 1.2rem; }
.blc-step__note {
  margin-top: 1rem;
  font-size: .9rem;
  color: rgb(6 47 64 / .72);
}
.blc-step__note a { border-bottom: 1px solid currentColor; }
.blc-step__dates {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin: 1rem 0 .2rem;
}
.blc-step__dates li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-left: 1rem;
  border-left: 2px solid var(--blc-sage);
}
.blc-step__dates strong { font-weight: 500; }
.blc-step__dates span { color: rgb(6 47 64 / .74); font-size: .95rem; }

.blc-done__when {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--blc-rule);
  border-radius: 24px;
  background: rgb(179 201 192 / .18);
}
.blc-done__when h2 {
  font: 400 var(--font-size-fluid-2)/1.22 var(--font-serif);
  margin: 1rem 0 1rem;
  max-width: 26ch;
}
.blc-done__when p { line-height: 1.72; max-width: 60ch; }
.blc-done__sign {
  margin-top: 1.6rem;
  font: 400 clamp(1.7rem, 1.3rem + 1.3vw, 2.4rem)/1.2 var(--font-script);
  color: var(--blc-plum);
}
.blc-done__sign span {
  display: block;
  font: 500 .78rem/1.4 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(6 47 64 / .6);
  margin-top: .3rem;
}

@media (max-width: 620px) {
  .blc-step { grid-template-columns: 1fr; gap: .6rem; }
  .blc-step__num { padding-top: 0; }
}

/* ── La video de Jen, dans le hero ───────────────────────────────────
 * Tournee le soir du 4 septembre, juste apres l'atelier, au telephone. Elle
 * s'adresse a des femmes qui viennent de raccrocher : le bloc est donc HAUT dans
 * la page, avant meme le bouton.
 *
 * Le bloc arrive `hidden` et n'est revele par body-led-current.js que si le
 * fichier existe vraiment. Un lecteur video casse au-dessus du bouton d'achat
 * coute plus cher que pas de video du tout.
 */
.blc-vsl[hidden] { display: none; }
.blc-vsl {
  width: 100%;
  /* 1:1 : la largeur EST la hauteur, donc une video plus large est une video
     plus HAUTE, et c'est la hauteur de fenetre qui decide si elle se coupe.
     D'ou une largeur calee sur la hauteur disponible : 27rem sur un grand
     ecran, moins sur un portable au format 900px ou elle depassait de six
     pixels. Le plancher a 20rem l'empeche de devenir un timbre. */
  max-width: clamp(20rem, calc(100svh - 30rem), 27rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .7rem;
}
.blc-vsl__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--blc-deep-2);
  border: 1px solid var(--blc-rule-light);
  box-shadow: 0 26px 60px -30px rgb(1 20 30 / .9);
}
.blc-vsl__player {
  display: block;
  width: 100%;
  /* Jen a tourne a la verticale: le montage sort en 1:1. Un cadre 16/9 avec
     object-fit:cover n'aurait garde qu'une bande horizontale au milieu, donc
     son torse et pas son visage. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--blc-deep-2);
}
.blc-vsl__cap {
  text-align: center;
  font: 500 .78rem/1.4 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(246 239 233 / .62);
}

@media (max-width: 1040px) {
  .blc-vsl { max-width: 27rem; }
}

/* ── Le bandeau du code RESET ──────────────────────────────────────────
   Les femmes de l'atelier du 4 septembre paient 98,50 $ avec le code RESET,
   jusqu'au dimanche 13 a 20 h ET. Deux echeances vivent donc sur la page : la
   fermeture des inscriptions (30 septembre) et l'expiration du code (13). Le
   bandeau porte la seconde et ne parle jamais de la premiere.

   IL EST `hidden` DANS LE HTML et c'est body-led-current.js qui le montre —
   voir le commentaire la-bas. `display` doit donc ceder devant `hidden`, sinon
   un flex l'emporte sur l'attribut et l'offre morte reste a l'ecran. */
.blc-promo[hidden] { display: none !important; }
.blc-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  width: 100%;
  max-width: 34rem;
  margin: 0 0 1.6rem;
  padding: 1.15rem 1.35rem 1.25rem;
  border: 1px solid rgb(246 239 233 / .3);
  border-left: 3px solid var(--blc-teal);
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(122 178 196 / .16), rgb(110 82 107 / .14));
}
.blc-promo__eyebrow {
  margin: 0;
  font: 600 .68rem/1.3 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .8;
}
.blc-promo__line {
  margin: 0;
  font: 400 clamp(1.02rem, .98rem + .3vw, 1.2rem)/1.5 var(--font-serif);
}
.blc-promo__line strong {
  font-weight: 600;
  /* Le code et le prix sont les deux seules choses qu'elle doit retenir. */
  border-bottom: 2px solid var(--blc-teal);
}
.blc-promo__count { width: 100%; }
.blc-promo__micro {
  margin: 0;
  font: 500 .82rem/1.5 var(--font-sans);
  opacity: .78;
}
/* Sur papier creme, la section prix : mêmes proportions, contraste inverse. */
.blc-promo--light {
  max-width: none;
  margin: 0 0 1.9rem;
  border-color: var(--blc-rule);
  border-left-color: var(--blc-plum);
  background: linear-gradient(135deg, rgb(122 178 196 / .13), rgb(110 82 107 / .09));
}
.blc-promo--light .blc-promo__line strong { border-bottom-color: var(--blc-plum); }

/* La ligne dans la formule « paiement unique » : le rappel a l'endroit exact
   ou elle est en train de choisir. */
.blc-plan__promo {
  display: block;
  margin-top: .5rem;
  font-weight: 600;
  color: var(--blc-plum);
}
/* Le plan en deux versements ne prend pas le code : le dire LA, dans la carte,
   plutot que de laisser une femme taper RESET sur un champ qui n'existe pas. */
.blc-plan__promo--muted { color: var(--blc-ink); font-weight: 500; opacity: .72; }