/* ────────────────────────────────────────────────────────────────
   Alma Navarro — design system
   Palette "Rose mystique" (choisie parmi 6 variations proposées) :
   blush clair + mauve poudré (accent) + prune profond (CTA, couleur
   rare ailleurs sur la page, réservée à l'action).
──────────────────────────────────────────────────────────────── */

/* Règles chargées par TOUTES les pages (fonts, reset, composants
   réellement partagés par 2+ pages). Chaque page charge en plus son
   propre css/pages/<page>.css pour les règles qui ne lui servent qu'à
   elle (généré par audit automatique de l'usage réel des classes dans
   le HTML/JS de chaque page, pas par recopie des commentaires de
   section ci-dessous, qui datent d'avant ce découpage et peuvent être
   trompeurs). Si une règle est ambiguë ou utilisée nulle part de façon
   détectable (ex. classe posée dynamiquement en JS via template
   literal), elle reste ici par défaut : mieux vaut un octet de trop
   sur une page qui ne l'utilise pas qu'un style manquant. */

/* ── Polices self-hébergées (fonts/, servies par Netlify) ─────────
   Remplace les <link> Google Fonts par page : évite le double
   aller-retour (CSS Google puis fichier .woff2 sur fonts.gstatic.com,
   ~1,6s en 4G lente d'après Lighthouse) en servant les fichiers
   directement depuis la même origine que le site. Un seul jeu de
   règles ici (chargé par toutes les pages via ce fichier déjà commun)
   plutôt qu'un <link> par page : le navigateur ne télécharge que les
   fichiers réellement utilisés par le texte affiché sur chaque page
   (chargement paresseux natif des polices déclarées en CSS), donc pas
   besoin de dupliquer/varier ces règles par page.
   Sous-ensemble "latin" uniquement (suffisant pour le français, tous
   les caractères accentués courants — é, è, à, ê, ç, œ... — sont
   dans cette plage Unicode) : plus léger que les fichiers Google
   Fonts par défaut, qui embarquent aussi cyrillique/grec/vietnamien. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dm-sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter : Google sert le même fichier "latin" pour les 4 graisses
   (variable font), vérifié dans la réponse CSS officielle avant de
   dupliquer la règle 4 fois plutôt que de deviner. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora : seule utilisation réelle sur tout le site, .pull-quote, en
   italique et graisse 500 — vérifié (grep) avant de charger autre
   chose. Les pages qui demandaient Lora en 400 à Google Fonts ne
   l'ont en réalité jamais affiché en 400 : le navigateur synthétisait
   un faux gras/italique depuis la graisse la plus proche disponible,
   invisible à l'œil mais jamais la vraie police (cf. CLAUDE.md sur les
   graisses manquantes). */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/lora-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #FFF8FF;
  --bg-card: #FFFFFF;
  --ink: #2B1E24;
  --ink-soft: #7A5560;
  --line: #F0DEE0;
  --accent: #74237C;
  --accent-soft: #F5E3E8;
  --cta: #74237C;
  --cta-hover: #7F3586;
  --error: #B3413A;
  --deep: #2A0E2D;
  --deep-2: #45164A;
  --on-deep: #F6E9EE;
  --on-deep-soft: #C9A0B4;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-quote: 'Lora', Georgia, 'Times New Roman', serif;
  --font-title: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--ink); }

::-webkit-scrollbar { width: 6px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }

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

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

/* ── Typographie de la page offre (seule page à utiliser h2) ──────
   Inter posé une seule fois au niveau du conteneur : tout ce qui est
   à l'intérieur (listes, value-stack, FAQ, bio...) en hérite, plutôt
   que de corriger chaque sélecteur enfant un par un. Un seul style de
   h2 pour toute la page, aucune variante par section. */

/* Inter posé sur les 3 conteneurs racine qui rendent du texte courant
   en dehors du quiz (offer.js/up1.js/up2.js) : sans ce scope explicite,
   le texte hérite de body { font-family: var(--font-body) } (police
   système), pas d'Inter — bug resté invisible tant que seule la page
   offre avait cette règle. */
#offer-root, #up1-root, #up2-root, #merci-root {
  font-family: 'Inter', var(--font-body);
}

a { color: var(--accent); }

button { font-family: inherit; color: inherit; -webkit-appearance: none; appearance: none; }

/* ── Wrapper commun (quiz + offre) ────────────────────────────── */

.wrapper {
  position: relative;
  z-index: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 96px;
  min-height: 100dvh;
}

.wrapper::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 75%);
  pointer-events: none;
  z-index: -1;
}

/* ── Steps / transitions (repris du pattern quiz existant) ──────── */

.step { display: none; }
.step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.step.active.fading-out { opacity: 0; transform: translateY(6px); }

/* ── Titres d'étape ───────────────────────────────────────────── */

.step-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 30px;
  margin-bottom: 20px;
}

.step-title .glyph { margin-right: 4px; }

.zodiac-icon {
  display: inline-block;
  overflow: visible;
}

.zodiac-icon path { fill: url(#zodiac-grad); }

.sign-btn .zodiac-icon { width: 26px; height: 26px; }
.step-title .zodiac-icon { width: 38px; height: 38px; vertical-align: -5px; }

/* ── Sélecteur de signe (grille de boutons) ──────────────────── */

.sign-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sign-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 4px 22px;
  min-height: 88px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.sign-btn:hover { border-color: var(--accent); }
.sign-btn:active { transform: scale(0.97); }
.sign-btn.selected { border-color: var(--cta); background: var(--accent-soft); }

.sign-btn .glyph { line-height: 0; margin-bottom: 6px; }
.sign-btn .name { font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.sign-btn .dates { font-size: 12px; color: var(--ink-soft); text-align: center; opacity: 0.8; }
.sonsigne-cta .cta-arrow { flex: none; width: 0.7em; height: 0.7em; }

.sonsigne-toast.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.calc-phrase.visible { opacity: 1; transform: translateY(0); }

.calc-phrase.visible .calc-check { opacity: 1; transform: scale(1); }

/* ── CTA principal ────────────────────────────────────────────── */

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 85%;
  margin: 24px auto 0;
  min-height: 56px;
  padding: 12px 24px;
  background: var(--cta);
  color: var(--bg);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}

/* Même taille que le CTA sticky (.sticky-cta .cta-btn, 17px). */
#offer-root .cta-btn {
  width: 100%;
  max-width: 440px;
  font-size: 17px;
  line-height: 1.3;
}

.cta-arrow { flex: none; width: 18px; height: 18px; margin-left: 6px; transition: transform 0.15s ease; }
.cta-btn:hover .cta-arrow { transform: translateX(4px); }
.cta-label { margin-top: -4px; }

.cta-btn:hover { background: var(--cta-hover); }
.cta-btn:disabled { opacity: 0.6; cursor: default; }

.cta-microcopy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 9px;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* #offer-root p (id+élément) bat sinon .cta-microcopy (classe seule) et
   écrase font-size/color/margin : même bug de spécificité que pour les
   autres classes utilitaires de cette page (cf. commentaire ligne ~60). */
#offer-root .cta-microcopy {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.score-card-link {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 10px;
}

.testimonial-scroller.dragging .testimonial-card { pointer-events: none; }

.testimonial-scroller .testimonial-card {
  flex: 0 0 70%;
  scroll-snap-align: start;
  margin-bottom: 0;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 18px 16px;
  margin-bottom: 12px;
}

.photo-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 30px;
  background: var(--accent-soft);
  margin-bottom: 14px;
}
.combo-stars-icon .zodiac-icon { width: 80px; height: 80px; }


.stars-row { display: flex; gap: 3px; margin-bottom: 10px; }
.star-icon { width: 15px; height: 15px; }

.testimonial-text,
#offer-root .testimonial-text {
  font-family: 'Inter', var(--font-body);
  font-style: normal;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}

.testimonial-byline,
#offer-root .testimonial-byline { font-size: 12px; font-weight: 400; color: #B79AA3; margin-bottom: 0; }

.rating-line {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

/* Origin story : plus de règles ici, .origin-heading et les <p> de
   cette section héritent maintenant du système unifié #offer-root
   h2/h3/p ci-dessus, pour que rien ne jure entre les sections. */

/* ── Carte produit (mise en avant du guide) ───────────────────── */

.product-card {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: 32px 26px;
  margin: 8px 0 24px;
}

#offer-root .product-card h2 { margin-top: 0; font-style: italic; color: var(--deep); }
.product-card .photo-placeholder { margin-bottom: 18px; }

/* Variante sombre de .product-card (même dégradé que .price-section),
   utilisée sur up1 pour la carte de présentation de l'OTO. */
.product-card--violet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(175deg, var(--deep-2) 0%, var(--deep) 100%);
  border: none;
  color: var(--on-deep);
  padding: 56px 28px 16px;
}
.product-card--violet .price-glyph-watermark--left { left: 18px; right: auto; }
.product-card--violet .price-glyph-watermark--right { right: 18px; left: auto; }
.product-card--violet h2 { color: var(--on-deep); text-align: center; margin-bottom: 8px; }
.product-card--violet p { color: var(--on-deep-soft); }
.product-card--violet .secret-list li { color: var(--on-deep); }
.product-card--violet .secret-list li::before { color: var(--on-deep); }

.product-card--violet .price-row { padding: 14px 0; }
.product-card--violet .price-row:first-child { padding-top: 0; }
.product-card--violet .price-desc { font-size: 14.5px; max-width: 100%; }
.product-card--violet .price-name { font-size: 15px; }
.product-card--violet .price-body { gap: 2px; }

#oto1-decline:hover, #oto2-decline:hover { font-style: italic; }

/* ── Secrets / value stack ────────────────────────────────────── */

.secret-list, .value-stack { list-style: none; padding: 0; margin: 16px 0; }

/* B — sparkles à 4 branches éparpillées sur le fond */
.price-sparkle {
  position: absolute;
  fill: var(--on-deep);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
.price-sparkle--1 { top: 8%;  left: 14%; width: 12px; height: 12px; opacity: 0.65; }
.price-sparkle--2 { top: 14%; left: 82%; width: 8px;  height: 8px;  opacity: 0.4; }
.price-sparkle--3 { top: 34%; left: 92%; width: 14px; height: 14px; opacity: 0.55; }
.price-sparkle--4 { top: 58%; left: 5%;  width: 9px;  height: 9px;  opacity: 0.45; }
.price-sparkle--5 { top: 72%; left: 88%; width: 11px; height: 11px; opacity: 0.5; }
.price-sparkle--6 { top: 90%; left: 30%; width: 8px;  height: 8px;  opacity: 0.4; }
.price-sparkle--7 { top: 4%;  left: 46%; width: 7px;  height: 7px;  opacity: 0.35; }

/* D — glyphe du signe en filigrane */
.price-glyph-watermark {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 130px;
  height: 130px;
  fill: var(--on-deep);
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

/* C — constellation, coin bas-gauche */
.price-constellation {
  position: absolute;
  bottom: 10px;
  left: 12px;
  width: 74px;
  height: 74px;
  color: var(--on-deep);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

/* Étoile, coin bas-droit */
.price-moon {
  position: absolute;
  bottom: 18px;
  right: 20px;
  width: 26px;
  height: 26px;
  fill: var(--on-deep);
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

.price-eyebrow {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-deep-soft);
  margin-bottom: 10px;
}

.price-heading {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  text-align: center;
  color: var(--on-deep);
  margin: 0 0 28px;
}

.price-row {
  display: flex;
  gap: 12px;
  padding: 18px 0;
}

.price-row:first-child { padding-top: 0; }

.price-check {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--on-deep);
  background: rgba(246, 233, 238, 0.12);
  border-radius: 50%;
  padding: 4px;
}

.price-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.price-top { display: flex; align-items: baseline; gap: 16px; }

.price-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--on-deep); }

.price-desc { flex: none; max-width: 84%; font-size: 12.5px; color: var(--on-deep-soft); line-height: 1.5; }

.price-total { margin-top: 8px; padding-top: 26px; text-align: center; }

.price-total--inline {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  margin-top: 0;
  padding-top: 0;
}
.price-inline-struck {
  font-size: 18px;
  text-decoration: line-through;
  color: var(--on-deep-soft);
}
.price-inline-final {
  font-family: var(--font-title);
  font-size: 62px;
  font-weight: 700;
  color: #FFFFFF;
}

.price-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 14px auto 0;
  min-height: 56px;
  padding: 12px 24px;
  background: #FFFFFF;
  color: var(--deep);
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 28px 4px rgba(201, 160, 180, 0.45);
  transition: transform 0.15s ease;
}

.price-cta:hover { transform: scale(1.02); }
.price-cta:hover .cta-arrow { transform: translateX(4px); }

.price-microcopy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--on-deep-soft);
  margin-top: 12px;
}

.price-shield { flex: none; width: 20px; height: 20px; }

/* Dans la popup de paiement, on garde la taille d'origine (espace réduit). */
.checkout-recap-total .price-shield { width: 15px; height: 15px; }

/* ── Formulaire de checkout ───────────────────────────────────── */

.checkout-field { margin-bottom: 14px; }

.checkout-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
#checkout-exit-card .price-eyebrow { margin-bottom: 4px; }

/* Confetti au chargement de up1 (cf. up1.js spawnConfetti), une seule
   fois, jamais en boucle : canvas plein écran, dessiné en JS (explosion
   centrale avec gravité), pas d'animation CSS ici. */
.confetti-burst {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 200;
}

.modal-dialog--oto { padding-left: 44px; padding-right: 44px; }
.modal-dialog--oto .cta-btn { max-width: 280px; }

.checkout-field input,
#card-element {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Inter', var(--font-body);
  font-size: 15px;
  color: var(--ink);
}

.checkout-field input:focus,
#card-element.focused {
  outline: none;
  border-color: var(--cta);
}

.field-error {
  color: var(--error);
  font-size: 12.5px;
  margin-top: 6px;
  display: none;
}

.field-error.visible { display: block; }
.lead-form .checkout-field { margin-bottom: 0; }
.lead-form .checkout-field + .checkout-field { margin-top: -1px; }
.lead-form .checkout-field input { font-size: 17px; position: relative; }
.lead-form .checkout-field input:focus { z-index: 1; }

.sticky-cta.visible { display: block; }

.sticky-cta .cta-btn {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.3;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(43, 30, 36, 0.28);
}

/* ── Modale de checkout (déclenchée par les CTA) ──────────────── */

/* Le scroll vit sur le backdrop (donc la barre de défilement du
   navigateur se retrouve au bord de la page/fenêtre), pas sur
   `.modal-dialog` : évite à la fois la barre incrustée dans les coins
   arrondis de la modale, et le flexbug classique où `align-items:
   center` sur un conteneur scrollable coupe le haut du contenu qui
   déborde. `margin: auto` sur `.modal-dialog` (plutôt que `align-items:
   center` sur le parent) centre verticalement sans jamais rogner
   l'overflow. */
/* padding-top inclut env(safe-area-inset-top) : sur pas mal d'iPhones
   (notch/Dynamic Island, ou barre d'adresse Safari qui masque le haut
   de l'écran), une modale collée à 10px du haut se retrouve en partie
   cachée. Même logique que .sticky-cta côté bas d'écran. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(34, 31, 43, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 100;
  padding: calc(env(safe-area-inset-top) + 24px) 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.modal-backdrop::-webkit-scrollbar { width: 5px; }
.modal-backdrop::-webkit-scrollbar-track { background: transparent; }
.modal-backdrop::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }

.modal-backdrop.visible { display: flex; }

.modal-dialog {
  background: var(--bg-card);
  width: 100%;
  max-width: 480px;
  margin: 0;
  border-radius: 20px;
  padding: 20px 20px calc(env(safe-area-inset-bottom) + 24px);
  position: relative;
  animation: modal-slide-up 0.25s ease both;
}

@keyframes modal-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-title { font-size: 19px; margin: 4px 40px 2px 0; }

.modal-subtitle { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; }
.modal-dialog--checkout .modal-title { margin-top: 32px; margin-left: 20px; margin-right: 20px; }

.checkout-recap-total .cta-microcopy { justify-content: flex-start; text-align: left; margin-top: -5px; font-size: 12.5px; }

@media (min-width: 640px) {
  .modal-backdrop { padding: calc(env(safe-area-inset-top) + 40px) 20px 40px; }
  .modal-dialog { margin: auto 0; }
}

/* ── Pages légales ─────────────────────────────────────────────── */

.legal-page { max-width: 620px; }
.legal-page h2 { font-size: 17px; margin-top: 1.8em; }
.legal-page p { font-size: 15px; color: var(--ink-soft); }
.legal-page a { color: var(--accent); }

/* ── Footer minimal ───────────────────────────────────────────── */

.site-footer {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 32px 20px 24px;
}

.site-footer a { color: var(--ink-soft); text-decoration: underline; }

@media (min-width: 640px) {
  .wrapper { padding-top: 40px; }
  .score-value { font-size: 64px; }
}

/* Boutons "Acheter" des fiches produit : le .cta-btn de base est taillé
   pour un CTA plein écran (56px, 22px de texte), beaucoup trop lourd
   répété deux fois dans une petite carte. Scopé à .catalog-page pour ne
   jamais toucher aux CTA du quiz/de l'offre, qui gardent leur taille. */
.catalog-page .pricing-card .cta-btn {
  width: 100%;
  margin: 0;
  min-height: 42px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
}

.pricing-dual-ctas .cta-btn:last-child {
  background: transparent;
  color: var(--cta);
  border: 1px solid var(--line);
}
.pricing-dual-ctas .cta-btn:last-child:hover {
  background: var(--accent-soft);
  border-color: var(--cta);
}