/* =============================================================
   JIANG COACHING — go.mincirsanscardio.com (styles composants)
   Tous les tokens (couleurs, polices, ombres, radius) sont définis
   dans styles/theme.css (source de vérité de la charte). Ce fichier
   ne référence QUE des tokens : aucune couleur/police/valeur en dur.
   Pour rebrander : modifier styles/theme.css, pas ce fichier.
   ============================================================= */

/* ---------- POLICES (self-hosted, chemin funnel) ----------
   Hors du thème portable : theme.css = tokens seuls, copiable tel quel.
   Les @font-face vivent ici car le chemin dépend de l'emplacement du site. */
/* ---------- FONTS (self-hosted) ---------- */
@font-face {
  font-family: 'Very Vogue Display';
  src: url('../assets/fonts/VeryVogue-Display.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Very Vogue Display';
  src: url('../assets/fonts/VeryVogue-Display-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Very Vogue Text';
  src: url('../assets/fonts/VeryVogue-Text.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Very Vogue Text';
  src: url('../assets/fonts/VeryVogue-Text-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apotheosis Sans';
  src: url('../assets/fonts/ApotheosisSans.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
  /* cap-height natif ~0.22em : on le ramene au niveau d'Urbanist (~0.70em). */
  size-adjust: 320%;
}
@font-face {
  font-family: 'Urbanist';
  src: url('../assets/fonts/Urbanist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- TOKENS FUNNEL (couche produit) ----
   Tokens propres au site, dérivés des tokens charte de theme.css.
   theme.css = la charte pure (copiable telle quelle, cf. sync-theme.py) ;
   cette couche-ci est la nôtre : décisions de marque du funnel (CTA,
   bandeaux), overlays, alias hérités. */
:root {
/* ---- CTA principal ----
     Décision : jaune charte (touche accent, OK charte « CTA accent »),
     texte charbon pour le contraste. Pour repasser le CTA en charbon
     (CTA primaire charte par défaut) : --cta-bg = var(--c-ink) et
     --cta-fg = var(--c-white). */
  --cta-bg:       var(--c-yellow);
  --cta-bg-hover: var(--c-yellow-deep);
  --cta-fg:       var(--c-ink);
  /* Ombres CTA alignées sur charte .btn--cta : douce au repos, md au hover. */
  --cta-shadow:       var(--shadow-sm);
  --cta-shadow-hover: var(--shadow-md);

  /* ---- Surfaces d'accent ----
     Bandeaux pleine largeur en jaune charte (note Lorenzo : CTA + bandeaux
     jaune #fbff85, remplace l'ancien beige #e8dac8). Pour repasser en wash
     bleu doux : --band-bg = var(--blue-wash-55). */
  --blue-wash-55: color-mix(in srgb, var(--c-blue) 55%, transparent);
  --yellow-wash:  color-mix(in srgb, var(--c-yellow) 20%, transparent);
  --band-bg:      var(--c-yellow);
  --band-dark-bg: var(--c-ink);
  /* Petits cartouches / pills : jaune en touche ponctuelle (OK charte). */
  --cartouche-bg: var(--c-yellow);
  --cartouche-fg: var(--c-ink);
  /* Surbrillance de texte (highlight) : bleu clair (note Lorenzo + charte). */
  --highlight-bg: var(--c-blue);

  /* ---- Décoratif / état ----
     La charte n'a ni vert ni terracotta : les anciennes pastilles
     « validé » (vert) passent en charbon. */
  --ok:           var(--c-ink);

  /* ---- Overlays (modale opt-in, lightbox vidéo) ---- */
  --overlay:        rgba(49, 51, 51, 0.58);
  --overlay-strong: rgba(49, 51, 51, 0.88);

  /* ---- Alias hérités (vocabulaire historique de site.css) ----
     Conservés pour ne pas réécrire chaque sélecteur ; pointent vers la
     charte. À terme, migrer les composants vers les tokens charte directs. */
  --accent:       var(--c-ink);
  --accent-deep:  var(--c-ink-deep);
  --card:         var(--c-white);
  --card-warm:    var(--c-cream);
  --ink:          var(--c-ink);
  --ink-2:        var(--c-ink);
  --ink-soft:     var(--c-ink-soft);
  --line:         var(--c-line);
  --font-serif:   var(--font-display);
  --shadow:        var(--shadow-sm);
  --shadow-strong: var(--shadow-md);
  --radius-full:   50%;
  --ls-button:     0.16em;

  /* Largeurs de contenu (vocabulaire funnel ; alias de --maxw-*) */
  --max-page:    var(--maxw-content);
  --max-header:  720px;
  --max-text:    var(--maxw-read);
  --max-compact: 480px;
  --max-modal:   600px;
}
@media (min-width: 1000px) { :root { --max-page: var(--maxw-wide); } }
@media (min-width: 1600px) { :root { --max-page: var(--maxw-xwide); } }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* Very Vogue ne ships qu'en weight 400 : pas de faux-bold synthétique
     sur les titres serif (règle charte). Urbanist (variable) garde ses
     vrais poids. */
  font-synthesis-weight: none;
  /* sticky footer : le footer reste collé en bas même sur page courte */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.cf-page {
  flex: 1 0 auto;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  border-bottom: var(--border-hair);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hotbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-tight);
  min-height: 34px;
  padding: var(--gap-tight) var(--gap-stack) var(--gap-tight);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

.hotbar span:first-child {
  color: var(--c-yellow);
  font-size: 15px;
  line-height: 1;
}

.hotbar strong {
  color: var(--c-yellow);
  font-weight: 600;
  text-transform: uppercase;
}

.brand-header {
  display: flex;
  justify-content: center;
  max-width: var(--max-header);
  margin: 0 auto;
  padding: var(--gap-stack) var(--gap-inline) var(--gap-mid);
}

.brand-header a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-tight);
  color: var(--ink);
  text-decoration: none;
}

.brand-logo {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
}

.brand-tag {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1.55;
  text-transform: uppercase;
}

main {
  overflow: hidden;
}

.hero-section {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--mb-heading) var(--gap-inline) var(--pad-block);
}

.hero-copy {
  max-width: var(--max-text);
  margin: 0 auto var(--mb-heading);
  text-align: center;
}

.eyebrow {
  margin: 0 0 var(--gap-stack);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--gap-stack);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: var(--w-reg);
  letter-spacing: var(--ls-titre);
  line-height: var(--lh-tight);
}

h1 span {
  display: block;
  color: var(--accent-deep);
  font-style: italic;
  font-weight: 500;
}

.hero-lead {
  max-width: 560px;
  margin-bottom: var(--mb-heading);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.38;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-mid);
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: var(--gap-stack) var(--mb-heading);
  border-radius: var(--radius-pill);
  font-family: var(--btn-font);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  text-decoration: none;
  text-transform: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: var(--cta-shadow);
}

.btn-primary:hover {
  background: var(--cta-bg-hover);
  box-shadow: var(--cta-shadow-hover);
}

.btn-secondary {
  background: var(--card);
  border: 0.5px solid var(--line);
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}

.hero-portrait {
  position: relative;
  align-self: stretch;
  min-height: 500px;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, var(--blue-wash), var(--yellow-wash)),
    var(--card-warm);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center top;
}

.portrait-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: var(--gap-inline);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-cream) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.portrait-label {
  margin-bottom: var(--gap-tight);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.portrait-name {
  margin-bottom: var(--gap-tight);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 25px;
  font-style: italic;
  line-height: 1.1;
}

.portrait-card p:last-child {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.content-section,
.proof-section {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--mb-heading) var(--gap-inline) var(--pad-block);
}

.section-heading {
  max-width: 620px;
  margin-bottom: var(--gap-inline);
}

h2 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
  line-height: 1.15;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-stack);
}

.feature-card,
.checklist-card {
  border: 0.5px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow);
}

.feature-card {
  padding: var(--gap-inline) var(--gap-inline);
}

.feature-card.is-accented {
  background: var(--blue-wash);
}

.feature-index {
  display: inline-flex;
  margin-bottom: var(--gap-stack);
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 30px;
  font-style: italic;
  line-height: 1;
}

h3 {
  margin-bottom: var(--gap-mid);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
}

.feature-card p,
.proof-copy p {
  color: var(--ink-soft);
}

.proof-section {
  border-top: 0.5px solid var(--line);
}

.checklist-card {
  padding: var(--gap-inline);
}

.checklist-title {
  margin-bottom: var(--gap-stack);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
}

.checklist-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-card li {
  position: relative;
  padding: var(--gap-mid) 0 var(--gap-mid) var(--mb-heading);
  border-top: 0.5px solid var(--line);
  color: var(--ink-soft);
}

.checklist-card li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: inset 0 0 0 3px var(--card);
}

.site-footer {
  width: 100%;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
}

.footer-inner {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--gap-inline) var(--gap-inline) var(--gap-stack);
}

.footer-legal-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-mid);
  max-width: 100%;
  margin: 0 0 var(--gap-mid);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  white-space: nowrap;
}

.footer-legal-line a {
  color: var(--bg);
  text-decoration: none;
}

.footer-legal-line a:hover {
  color: var(--c-yellow);
}

.footer-separator {
  color: color-mix(in srgb, var(--bg) 52%, transparent);
}

.facebook-disclaimer {
  width: 100%;
  margin: 0;
  color: color-mix(in srgb, var(--bg) 62%, transparent);
  font-size: 11.5px;
  line-height: 1.55;
}

.facebook-disclaimer span {
  display: block;
}

/* Real /cadeau-1 page: CF order, shared Jiang design width/tokens. */
.cf-hotbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-mid);
  width: 100%;
  padding: var(--gap-tight) var(--gap-stack) var(--gap-tight);
  background: var(--ink);
  color: var(--bg);
  text-align: center;
}

.cf-icon {
  display: inline-block;
  flex: 0 0 auto;
}

.cf-icon path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cf-hotbar-icon {
  width: 24px;
  height: 24px;
}

.cf-hotbar-icon circle {
  fill: var(--c-yellow);
}

.cf-hotbar-icon path {
  stroke: var(--ink);
  stroke-width: 3;
}

.cf-hotbar strong {
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.cf-page {
  width: 100%;
  padding: var(--gap-mid) 0 0;
  background: var(--bg);
  overflow: hidden;
}

.cf-logo-row {
  width: 100%;
  max-width: var(--max-header);
  margin: 0;
  padding: 0 var(--gap-mid);
  text-align: center;
  margin-inline: auto;
}

.cf-logo-row img {
  display: inline-block;
  width: 180px;
}

.cf-hero {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--pad-block) var(--pad-inline) var(--mb-heading);
  text-align: center;
}

.cf-hero h1 {
  margin: 0 0 var(--mb-h1-h2);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: var(--w-reg);
  letter-spacing: var(--ls-titre);
  line-height: var(--lh-tight);
  text-align: center;
  text-wrap: balance;
}

.headline-line {
  display: block;
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.headline-line em {
  background: linear-gradient(to top, var(--highlight-bg) 0 45%, transparent 45% 100%);
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
}

.cf-subtitle {
  margin: 0 0 var(--mb-before-media);
  color: var(--text);
  /* coupe le leading de la boîte de ligne : le gap visible = la marge (32),
     sinon Apotheosis + size-adjust 320% gonfle la boîte (gros au-dessus,
     serré en dessous). Technique charte. */
  text-box: trim-both cap alphabetic;
  font-family: var(--font-sub);
  font-size: var(--fs-h2);
  font-weight: var(--w-reg);
  letter-spacing: var(--ls-sub);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  text-align: center;
  word-break: break-word;
}

.cf-vsl {
  display: block;
  width: 100%;
  margin: 0 auto var(--mb-after-media);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cf-vsl img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
}

/* cadeau-1 desktop : thumbnail vidéo réduite pour que le CTA passe au-dessus
   de la ligne de flottaison sans scroller (note Lorenzo). */
@media (min-width: 1000px) {
  body[data-page="cadeau-1"] .cf-vsl {
    max-width: 440px;
  }
}

.cf-button {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
  margin: var(--mb-heading) auto 0;
  padding: var(--gap-stack) var(--mb-heading);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-family: var(--btn-font);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  line-height: 1.25;
  text-transform: none;
  box-shadow: var(--cta-shadow);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cf-button:hover {
  background: var(--cta-bg-hover);
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-1px);
}

.cf-button:focus-visible,
.cf-vsl:focus-visible,
.optin-close:focus-visible,
.optin-field input:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

.cf-button-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-mid);
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

.cf-button-icon {
  width: 21px;
  height: 21px;
}

.cf-button-icon circle {
  fill: var(--cta-fg);
}

.cf-button-icon path {
  stroke: var(--cta-bg);
  stroke-width: 3;
}

.cf-button-sub {
  display: block;
  margin-top: var(--mb-micro);
  color: var(--cta-fg);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.35;
}

.cf-proof {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0 var(--gap-inline) var(--pad-block);
  text-align: center;
}

.cf-proof-label {
  margin: var(--gap-inline) 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cf-press-logos {
  width: 100%;
  margin: var(--gap-inline) auto;
  filter: grayscale(1) opacity(0.82);
}

.cf-media-proof {
  display: block;
  width: 100%;
  /* Cap à la taille native du fichier (800px) : au-delà l'image était
     upscalée donc floue sur desktop (note Lorenzo « retombées presse »). */
  max-width: 800px;
  margin: var(--gap-inline) auto 0;
}

.cf-footer {
  width: 100%;
  padding: var(--gap-inline) var(--gap-inline) var(--gap-stack);
  background: var(--ink);
  color: var(--bg);
}

.cf-footer-inner {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  text-align: center;
}

.cf-footer-legal,
.cf-footer-disclaimer {
  margin: 0;
  color: var(--bg);
  font-size: 11.5px;
  line-height: 1.55;
}

.cf-footer-legal {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--gap-tight);
  white-space: nowrap;
}

.cf-footer-legal a {
  color: var(--bg);
  text-decoration: none;
}

.cf-footer-legal a:hover {
  color: var(--c-yellow);
}

.cf-footer-disclaimer {
  margin-top: var(--gap-tight);
  opacity: 0.74;
}

.cf-footer-disclaimer span {
  display: block;
}

.optin-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gap-inline);
  background: var(--overlay);
}

.optin-modal.open {
  display: flex;
}

.optin-panel {
  position: relative;
  width: min(100%, var(--max-modal));
  padding: var(--mb-heading) var(--mb-heading);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-strong);
  text-align: center;
}

.optin-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}

.optin-kicker {
  margin: 0 0 var(--gap-stack);
  color: var(--accent);
  font-size: clamp(8.8px, 2.4vw, 11px);
  font-weight: 700;
  letter-spacing: clamp(0.14em, 0.45vw, 0.28em);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.optin-panel h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
  line-height: 1.15;
}

.optin-subtitle {
  margin: var(--gap-tight) 0 var(--gap-stack);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.35;
}

.optin-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-mid);
}

.optin-field {
  display: block;
  min-width: 0;
  text-align: left;
}

.optin-field input {
  width: 100%;
  padding: var(--gap-stack) var(--gap-stack);
  border: 1.2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--c-white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  box-shadow: var(--shadow);
}

.optin-field input::placeholder {
  color: var(--c-placeholder);
}

.optin-field input:focus {
  border-color: var(--c-blue-deep);
  box-shadow: var(--ring-shadow);
  outline: none;
}

.optin-error {
  display: block;
  min-height: 0;
  margin: 0 var(--mb-micro);
  color: var(--accent-deep);
  font-size: 12px;
}

.optin-error:not(:empty) {
  min-height: 16px;
  margin-top: var(--mb-micro);
}

.optin-submit {
  margin-top: var(--pad-block);
}

.optin-legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-tight);
  max-width: 100%;
  margin: var(--pad-block) 0 0;
  color: var(--ink-soft);
  font-size: clamp(10.2px, 2.5vw, 11.5px);
  line-height: 1.45;
  white-space: nowrap;
}

.optin-lock-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.optin-lock-icon rect,
.optin-lock-icon path {
  fill: none;
  stroke: var(--accent-deep);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.optin-legal a {
  color: var(--accent-deep);
  text-decoration: none;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 820px) {
  .hero-section {
    padding-top: var(--mb-heading);
  }

  /* mobile/tablette : autorise le retour à la ligne du titre (évite le débordement) */
  .headline-line {
    white-space: normal;
  }

  .hero-portrait,
  .hero-portrait img {
    min-height: 420px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: auto;
  }

  .feature-index {
    margin-bottom: var(--gap-inline);
  }

}

@media (max-width: 520px) {
  .hotbar {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mb-micro) var(--gap-tight);
    padding-inline: var(--gap-mid);
    font-size: 12px;
  }

  .brand-header {
    padding: var(--gap-mid) var(--gap-inline) var(--gap-tight);
  }

  .brand-logo {
    font-size: 15px;
  }

  .brand-tag {
    font-size: 10px;
    letter-spacing: 0.22em;
  }

  .hero-section {
    padding: var(--gap-stack) var(--gap-inline) var(--mb-heading);
  }

  h1 {
    line-height: 1.05;
  }

  .hero-lead {
    font-size: clamp(14px, 3.6vw, 15px);
    line-height: 1.5;
  }

  .hero-actions {
    align-items: center;
    flex-direction: column;
  }

  .hero-portrait,
  .hero-portrait img {
    min-height: 390px;
  }

  .portrait-card {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .content-section,
  .proof-section {
    padding: var(--gap-stack) var(--gap-inline) var(--mb-heading);
  }

  .footer-inner {
    padding: var(--gap-inline) var(--gap-inline) var(--gap-stack);
  }

  .footer-legal-line,
  .facebook-disclaimer,
  .cf-footer-legal,
  .cf-footer-disclaimer {
    font-size: 10.5px;
  }

  .cf-hotbar {
    padding-inline: var(--gap-mid);
  }

  .cf-hotbar strong {
    font-size: 12px;
  }

  .cf-hero h1 {
    line-height: 1.05;
  }

  .cf-hero {
    padding: var(--gap-stack) var(--gap-inline) var(--mb-heading);
  }

  .cf-button {
    padding: var(--gap-stack) var(--gap-inline);
    font-size: var(--btn-fs);
    letter-spacing: var(--btn-ls);
  }

  .cf-button-main {
    font: inherit;
    letter-spacing: inherit;
  }

  .cf-button-sub {
    font-size: 10.5px;
  }

  .optin-modal {
    padding-inline: var(--gap-tight);
  }

  .optin-panel {
    padding: var(--gap-inline) var(--gap-stack);
  }

  .optin-kicker {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .optin-legal {
    gap: var(--mb-micro);
    font-size: 8.4px;
  }

  .optin-lock-icon {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 380px) {
  .cf-footer-legal {
    gap: var(--gap-tight);
    font-size: 9.8px;
  }
}

/* ===== masterclass-f4 : sections riches (clone CF) ===== */
.mc-unmute {
  display: block;
  width: 100%;
  max-width: var(--max-page);
  margin: var(--gap-mid) auto 0;
  padding: 0 var(--gap-inline);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.mc-band {
  width: 100%;
  padding: var(--pad-block) var(--gap-inline) var(--pad-block);
}

.mc-band--teal { background: var(--band-bg); }
.mc-band--dark { background: var(--ink); }
.mc-band-title {
  max-width: var(--max-page);
  margin: 0 auto var(--mb-heading);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-band--dark .mc-band-title { color: var(--c-yellow); }

/* témoignages vidéo : carte vidéo (gauche) + citation (droite) */
.mc-testi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mb-heading);
  align-items: center;
  max-width: var(--max-page);
  margin: 0 auto var(--gap-inline);
}
.mc-testi-row img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.mc-testi-quote { text-align: left; }
.mc-testi-quote blockquote {
  margin: 0 0 var(--gap-mid);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mc-testi-quote cite {
  color: var(--accent-deep);
  font-style: normal;
  font-weight: 600;
}

/* avant/après 3 colonnes */
.mc-ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-inline);
  max-width: var(--max-page);
  margin: 0 auto;
}
.mc-ba img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.mc-ba p { margin: var(--gap-stack) 0 0; font-size: 14px; color: var(--ink-soft); text-align: left; }
.mc-ba cite { color: var(--accent-deep); font-style: normal; font-weight: 600; }

/* étapes (section sombre) : gros visuel + texte, alternés */
.mc-stepblock {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--mb-heading);
  align-items: center;
  max-width: var(--max-page);
  margin: 0 auto var(--mb-heading);
}
.mc-stepblock.is-rev { grid-template-columns: 1.4fr 1fr; }
.mc-stepblock.is-rev .mc-stepimg { order: 2; }
.mc-stepimg img { width: 100%; max-width: 320px; }
.mc-stepblock h3 { color: var(--c-yellow); font-size: 26px; margin: 0 0 var(--gap-mid); }
.mc-stepblock p { color: var(--bg); text-align: left; margin: 0 0 var(--gap-mid); }
.mc-stepblock strong { color: var(--card); }

.mc-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-stack);
  max-width: var(--max-page);
  margin: 0 auto;
}
.mc-results-grid figure { margin: 0; }
.mc-results-grid img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow); }
.mc-results-grid figcaption { margin-top: var(--gap-mid); font-size: 13.5px; color: var(--ink-soft); text-align: left; }
.mc-results-grid cite { color: var(--accent-deep); font-style: normal; font-weight: 600; }

/* bandeau promo top (new-masterclass-f) : texte + bouton vers Instagram */
.mc-promo {
  width: 100%;
  background: var(--band-bg);
  padding: var(--gap-stack) var(--gap-inline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-stack);
  text-align: center;
}
.mc-promo-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
}
.mc-promo-text strong { color: var(--accent-deep); }
.mc-promo-btn { width: auto; flex: 0 0 auto; }

/* vignette vidéo cliquable (lien lightbox YouTube comme sur CF) */
.mc-vthumb {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.mc-vthumb img { display: block; width: 100%; }
.mc-vthumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cta-bg);
  box-shadow: var(--shadow-strong);
  transition: background 0.18s ease, transform 0.18s ease;
}
.mc-vthumb-play svg { width: 28px; height: 28px; fill: var(--cta-fg); margin-left: var(--mb-micro); }
.mc-vthumb:hover .mc-vthumb-play { background: var(--cta-bg-hover); transform: translate(-50%, -50%) scale(1.06); }
.mc-results-grid .mc-vthumb { border-radius: var(--radius-md); }

/* lightbox vidéo (overlay --ink translucide) */
.mc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gap-inline);
  background: var(--overlay-strong);
}
.mc-lightbox.is-open { display: flex; }
.mc-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}
.mc-lightbox-inner iframe { width: 100%; height: 100%; border: 0; }
.mc-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.mc-limit {
  max-width: var(--max-page);
  margin: var(--mb-heading) auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-weight: 600;
}
.mc-band--dark .mc-limit { color: var(--c-yellow); }

@media (max-width: 820px) {
  .mc-testi-row, .mc-ba-grid, .mc-stepblock, .mc-stepblock.is-rev, .mc-results-grid {
    grid-template-columns: 1fr;
  }
  .mc-stepblock.is-rev .mc-stepimg { order: 0; }
  .mc-stepimg img { max-width: 200px; }
}

/* ===== Page masterclass-f4 : VSL + timer + bloc débloqué ===== */
.mc-eyebrow {
  margin: 0 0 var(--gap-mid);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Pastille "Voici ta MasterClass" — même place/forme que CF, habillée brand. */
.mc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  margin: 0 auto var(--mb-micro);
  padding: var(--gap-mid) var(--gap-inline);
  border-radius: var(--radius-pill);
  background: var(--cartouche-bg);
  color: var(--cartouche-fg);
  font-family: var(--font-serif);
  font-size: clamp(16px, 3.4vw, 20px);
  font-style: italic;
  font-weight: 600;
}

.mc-pill svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.mc-pill svg path {
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-vsl {
  width: 100%;
  margin: var(--mb-heading) auto 0;
}

.mc-vsl > div {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--card-warm);
  box-shadow: var(--shadow-strong);
}

/* Le player Vidalytics injecte son propre wrapper : il remplit le conteneur. */
.mc-vsl > div > * {
  width: 100%;
  height: 100%;
}

.mc-timer {
  width: 100%;
  max-width: var(--max-page);
  margin: var(--mb-heading) auto 0;
  padding: 0 var(--gap-inline);
  text-align: center;
}

.mc-timer.is-done {
  display: none;
}

.mc-timer-caption {
  margin: 0 0 var(--gap-stack);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: clamp(16px, 3.4vw, 19px);
  font-style: italic;
}

.mc-timer-units {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--gap-mid);
}

.mc-timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}

.mc-timer-unit span {
  color: var(--accent-deep);
  font-family: var(--font-serif);
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 700;
  line-height: 1;
}

.mc-timer-unit small {
  margin-top: var(--gap-tight);
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mc-timer-sep {
  align-self: center;
  color: var(--c-blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 700;
}

/* Bloc débloqué une fois le timer terminé */
.mc-reveal {
  display: none;
}

.mc-reveal.is-open {
  display: block;
  animation: mc-fade-in 0.5s ease both;
}

@keyframes mc-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mc-steps,
.mc-testimonials,
.mc-faq {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--pad-block) var(--gap-inline) 0;
  text-align: center;
}

.mc-steps h2,
.mc-testimonials h2,
.mc-faq h2 {
  margin-bottom: var(--gap-inline);
}

.mc-step-card {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--gap-inline) var(--gap-inline);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--blue-wash);
  box-shadow: var(--shadow);
  text-align: left;
}

.mc-step-index {
  display: inline-flex;
  margin-bottom: var(--gap-mid);
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mc-step-card h3 {
  margin-bottom: var(--gap-tight);
}

.mc-step-card p {
  margin-bottom: var(--gap-stack);
  color: var(--ink-soft);
}

.mc-step-meta {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-step-meta li {
  position: relative;
  padding: var(--gap-tight) 0 var(--gap-tight) var(--gap-inline);
  border-top: 0.5px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
}

.mc-step-meta li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: inset 0 0 0 3px var(--card);
}

.mc-typeform {
  width: 100%;
  max-width: var(--max-page);
  margin: var(--mb-heading) auto 0;
  padding: 0 var(--gap-inline);
}

.mc-typeform [data-tf-widget] {
  width: 100%;
  height: 600px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.mc-cta-row {
  width: 100%;
  text-align: center;
  padding: var(--pad-block) var(--gap-inline);
}

.mc-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-stack);
}

.mc-quote {
  margin: 0;
  padding: var(--gap-inline) var(--gap-inline) var(--gap-inline);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: left;
}

.mc-quote blockquote {
  margin: 0 0 var(--gap-mid);
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
}

.mc-quote figcaption {
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mc-faq-item {
  max-width: 620px;
  margin: 0 auto var(--gap-mid);
  padding: 0 var(--gap-inline);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: left;
}

.mc-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-stack);
  padding: var(--gap-stack) 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.mc-faq-item summary::-webkit-details-marker {
  display: none;
}

.mc-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.mc-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.mc-faq-body {
  padding: 0 0 var(--gap-stack);
  border-top: 0.5px solid var(--line);
}

.mc-faq-body p {
  margin: var(--gap-stack) 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.mc-faq + .mc-cta-row {
  margin-top: var(--mb-heading);
}

/* ===== call-reservation : hero image de fond + contenu à gauche ===== */
.callres-hero {
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: url("../assets/proof/callres-hero-bg.png") right center / contain no-repeat;
}

.callres-inner {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--pad-block) var(--gap-inline) var(--pad-block);
}

.callres-content {
  max-width: 540px;
  text-align: left;
}

.callres-content h1 {
  margin: 0 0 var(--gap-stack);
  text-align: left;
}

.callres-lead {
  margin: 0 0 var(--gap-inline);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.45;
}

.callres-video {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-strong);
}

.callres-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.callres-content .cf-button {
  display: flex;
  width: fit-content;
  margin: var(--gap-inline) auto 0;
}

@media (max-width: 820px) {
  .callres-hero {
    min-height: auto;
    display: block;
    background-image: none;
  }
  .callres-content {
    max-width: 100%;
    text-align: center;
  }
  .callres-content h1 { text-align: center; }
}

/* ===== confirmation-achat : clone layout CF (2 sections) ===== */
.achat-hero {
  width: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--mb-heading) var(--gap-inline) var(--pad-block);
}

.achat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad-block);
  align-items: start;
}

.achat-text {
  text-align: left;
}

.achat-text h1 {
  margin: 0 0 var(--gap-stack);
  text-align: left;
  font-size: var(--fs-h1);
}

.achat-subtitle {
  margin: 0 0 var(--gap-inline);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
}

.achat-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--gap-inline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.achat-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.achat-text p {
  margin: 0 0 var(--gap-stack);
  color: var(--ink-soft);
}

.achat-text a {
  color: var(--accent-deep);
}

.achat-media {
  position: relative;
}

.achat-media::before {
  content: "";
  position: absolute;
  right: -14px;
  bottom: 40px;
  width: 180px;
  height: 70px;
  border-radius: var(--radius-lg);
  background: var(--c-blue);
  z-index: 0;
}

.achat-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 120px 18px 18px 18px;
  object-fit: cover;
}

.achat-steps {
  width: 100%;
  background: var(--band-bg);
  padding: var(--pad-block) var(--gap-inline) var(--pad-block);
}

.achat-steps h2 {
  max-width: var(--max-page);
  margin: 0 auto var(--mb-heading);
  text-align: center;
}

.achat-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-inline);
  max-width: var(--max-page);
  margin: 0 auto;
}

.achat-step {
  padding: var(--gap-inline) var(--gap-inline);
  border: 0.5px solid var(--line);
  border-radius: 18px 60px 18px 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: left;
}

.achat-step h3 {
  margin: 0 0 var(--gap-mid);
  font-size: 28px;
}

.achat-step-label {
  display: block;
  margin-bottom: var(--gap-mid);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.achat-step p {
  margin: 0 0 var(--gap-stack);
  color: var(--ink-soft);
  font-size: 15px;
}

.achat-step .cf-button {
  margin: 0;
  width: 100%;
}

@media (max-width: 820px) {
  .achat-grid {
    grid-template-columns: 1fr;
    gap: var(--mb-heading);
  }
  .achat-media {
    display: none;
  }
  .achat-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* Pages de confirmation (booking / onboard / achat) */
.mc-confirm {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--gap-tight) var(--gap-inline) 0;
  text-align: center;
}

.mc-confirm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--gap-inline);
  border-radius: 50%;
  background: var(--ok);
  box-shadow: var(--shadow);
}

.mc-confirm-badge svg {
  width: 32px;
  height: 32px;
}

.mc-confirm-badge svg path {
  fill: none;
  stroke: var(--card);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-confirm-msg {
  font-size: var(--fs-h2);
  line-height: 1.3;
}

.mc-confirm-lead {
  margin: var(--gap-stack) auto 0;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.45;
}

.mc-confirm-note {
  margin: var(--gap-stack) auto 0;
  max-width: 540px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.mc-confirm-note a {
  color: var(--accent-deep);
  text-decoration: none;
}

.mc-step-card .cf-button {
  margin-top: var(--gap-stack);
}

/* Page de réservation Calendly */
.mc-cal {
  width: 100%;
  max-width: var(--max-page);
  margin: var(--gap-mid) auto 0;
  padding: 0 var(--gap-inline);
}

/* Resserre l'écart sous-titre -> calendrier sur les pages de réservation. */
.cf-hero:has(+ .mc-cal) {
  padding-bottom: var(--gap-tight);
}

.mc-cal-frame {
  width: 100%;
}

/* Bouton fallback Calendly (injecté par calendly.js) : style bouton charte
   secondaire, centré sous le calendrier. */
.mc-cal-fallback {
  display: block;
  width: fit-content;
  margin: var(--gap-stack) auto 0;
  padding: var(--pad-btn-sm);
  border: var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  font-family: var(--btn-font);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  text-align: center;
  text-decoration: none;
  transition: var(--t-fast);
}
.mc-cal-fallback:hover {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: var(--c-ink);
}

@media (max-width: 520px) {
  .mc-timer-unit {
    min-width: 60px;
    padding: var(--gap-mid) var(--gap-tight) var(--gap-tight);
  }

  .mc-quote-grid {
    grid-template-columns: 1fr;
  }

  .mc-faq-item summary {
    font-size: 16px;
  }
}

/* ===================================================================
   Page question « Combien de kilos ? » (quizz-combien-de-kilos.html)
   Vraie modale : backdrop assombri (scrim charte) + carte crème centrée.
   =================================================================== */
.quiz-page {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--pad-block) var(--pad-inline);
  /* Backdrop : crème charte voilé par le scrim de la modale opt-in. */
  background: var(--bg);
}

.quiz-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-strong);
  pointer-events: none;
}

/* La carte (panneau modale) posée sur le backdrop. */
.quiz-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-modal);
  margin: 0 auto;
  padding: var(--pad-block) var(--pad-inline);
  background: var(--c-cream);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
  text-align: center;
}

.quiz-title {
  margin: 0 0 var(--mb-heading);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: var(--w-reg);
  letter-spacing: var(--ls-titre);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  max-width: var(--max-compact);
  margin: 0 auto;
}

.quiz-opt {
  display: block;
  width: 100%;
  padding: var(--pad-btn);
  border: var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  font-family: var(--btn-font);
  font-size: var(--fs-body);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--t-fast);
}

.quiz-opt:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-ink);
}

.quiz-message {
  margin: 0 auto var(--mb-h2-body);
  max-width: var(--max-text);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.quiz-social {
  display: flex;
  justify-content: center;
  gap: var(--gap-inline);
  margin-top: var(--mb-heading);
}

.quiz-social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  padding: var(--pad-btn-sm);
  border-radius: var(--btn-radius);
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--btn-font);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: var(--btn-ls);
  text-decoration: none;
  transition: var(--t-fast);
}

.quiz-social-link:hover {
  background: var(--c-yellow);
  color: var(--c-ink);
}

.quiz-social-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}