/* ==========================================================================
   Marie — Carrières Bancaires
   Direction : banque privée / corporate haut de gamme, chaleureux, pas froid.
   Encre marine + brass discret + papier — pas de crème/serif/terracotta générique,
   pas de dark mode néon.
   ========================================================================== */

:root {
  /* Couleurs */
  --ink: #0d1b30;         /* marine profond — fonds sombres, textes forts */
  --ink-2: #17284a;       /* marine légèrement plus clair — cartes sur fond sombre */
  --ink-soft: #3a4a6b;    /* texte secondaire sur fond sombre */
  --paper: #f5f5f5;       /* gris clair — seule teinte de fond claire non-blanche du site */
  --paper-alt: #f5f5f5;   /* même gris — anciennement une teinte différente, unifié sur demande Jérémie */
  --white: #ffffff;
  --gold: #a9814c;        /* brass discret — accent, jamais flashy */
  --gold-light: #c9a874;
  --gold-wash: rgba(169, 129, 76, 0.12);
  --line: rgba(13, 27, 48, 0.12);
  --line-soft: rgba(13, 27, 48, 0.08);
  --text: #1d1d1d;        /* texte "noir" du site — demande Jérémie : #1D1D1D partout */
  --text-muted: #5b6577;
  --text-on-ink: #eef0f4;
  --text-on-ink-muted: #a7b0c2;

  /* Typo */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rythme */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 20px 40px -20px rgba(13, 27, 48, 0.25);
  --shadow-soft: 0 12px 28px -18px rgba(13, 27, 48, 0.35);
  --max-width: 1160px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--text); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.kicker {
  /* Rendu "badge" — forme dorée pleine, texte blanc, pas cliquable (juste visuel). */
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--gold);
  padding: 6px 14px;
  border-radius: 999px;
}

.section-intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 640px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  /* Dégradé diagonal subtil (même angle 135deg que le fond navy des sections
     offre) — garde le marron comme couleur dominante, juste un reflet clair
     en haut à gauche pour un rendu plus premium qu'un aplat plat (demande
     Marie/Jérémie du 2026-08-16). */
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-light) 60%, var(--gold) 100%);
  transform: translateY(-1px);
}
/* Reflet qui balaie le bouton de gauche à droite au survol — pseudo-élément
   séparé du fond (garde le dégradé de base intact), clippé par overflow:hidden
   du bouton. Utilise du blanc translucide (déjà dans la palette) plutôt qu'une
   nouvelle couleur (demande Marie/Jérémie du 2026-08-16). */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-large { padding: 17px 34px; font-size: 1rem; }
.btn-small { padding: 9px 18px; font-size: 0.85rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  gap: 24px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.scroll-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.scroll-top-btn svg { width: 18px; height: 18px; }
.scroll-top-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.main-nav { display: flex; gap: 32px; margin: 0 auto; }
.main-nav a {
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  padding-bottom: 4px;
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--gold); }
.main-nav a.active { color: var(--gold); font-weight: 600; }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 24px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ink);
}
.cart-toggle svg { width: 21px; height: 21px; }
.cart-toggle:hover { color: var(--gold); }
.cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-badge[hidden] { display: none; }


.hero {
  background: var(--ink);
  background-image:
    linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%),
    radial-gradient(ellipse at top right, rgba(169, 129, 76, 0.14), transparent 55%),
    repeating-linear-gradient(90deg, rgba(238, 240, 244, 0.035) 0px, rgba(238, 240, 244, 0.035) 1px, transparent 1px, transparent 96px);
  color: var(--text-on-ink);
  padding: 108px 0 96px;
  position: relative;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}
.hero h1 {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  color: var(--white);
  margin: 14px 0 4px;
  letter-spacing: -0.01em;
}
.hero-role {
  font-size: 1rem;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 18px;
}
.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-on-ink-muted);
  max-width: 520px;
  margin-bottom: 22px;
}
.hero-credentials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.hero-credentials li {
  /* Coche "vérifiée" au lieu d'un simple point — lit comme une preuve concrète,
     pas une liste générique (renforce la crédibilité, demande Jérémie). */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-on-ink);
  padding-left: 30px;
  position: relative;
}
.hero-credentials li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(238, 240, 244, 0.14);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(169, 129, 76, 0.35);
  border-radius: var(--radius);
  pointer-events: none;
}

/* ---------- Expériences ---------- */
.experience { padding: 96px 0; background: var(--white); border-top: 1px solid var(--line-soft); }
.experience h2 { text-align: center; margin-bottom: 36px; }
/* Desktop : grille 2x2 (2 lignes de 2) — chaque expérience a assez de place pour
   le nom + le détail. Repasse en liste verticale simple sur mobile (voir media query). */
.experience-list {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 28px;
  column-gap: 64px;
}
.experience-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 0;
  transition: transform 0.15s ease;
}
.experience-item:hover { transform: translateY(-1px); }
.experience-badge {
  /* Plus de cadre/carré autour du logo — il flotte directement sur le fond de page. */
  flex-shrink: 0;
  width: 108px;
  height: 108px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  overflow: hidden;
}
.experience-badge img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.experience-text { display: flex; flex-direction: column; gap: 8px; }
.experience-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
}
.experience-detail {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
}

/* ---------- Coordonnées — 4 cartes horizontales ---------- */
.connect { padding: 96px 0; background: var(--paper-alt); border-top: 1px solid var(--line-soft); }
.connect h2 { text-align: center; margin-bottom: 32px; }
.connect-list {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.connect-item {
  /* Même traitement que la section Expériences : pas de cadre, le logo flotte
     directement sur le fond de page. */
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  transition: transform 0.15s ease;
}
.connect-item:hover { transform: translateY(-1px); }
.connect-item:hover .connect-value { color: var(--gold); text-decoration-color: var(--gold); }
.connect-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.connect-item:hover .connect-icon { transform: scale(1.06); }
.connect-icon img { width: 100%; height: 100%; object-fit: contain; }
.connect-labels { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.connect-value {
  /* Soulignement discret permanent — signale que c'est cliquable même sans survol
     (essentiel sur mobile, qui n'a pas de hover). */
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Sections communes ---------- */
/* Décale le point d'ancrage pour que le header sticky ne cache pas le haut de la cible. */
section[id],
.bundle-card[id],
.offer-detail[id] {
  scroll-margin-top: 120px;
}
section h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 14px;
}
.problem, .testimonials, .faq { padding: 96px 0; }
/* .offer-detail-section et .offer forment une seule vitrine continue (même fond,
   pas de rupture) — leurs paddings internes sont réduits pour que la transition entre
   le dernier bloc ebook/Call et le pack garde le même rythme que l'espacement entre
   deux blocs ebooks (112px), au lieu de s'additionner en un vide disproportionné. */
.offer-detail-section { padding: 96px 0 0; }
.offer { padding: 56px 0 96px; }
.problem { background: var(--white); border-top: 1px solid var(--line-soft); }
.offer-navy-wrapper {
  /* Un seul dégradé posé ici, sur toute la hauteur des 2 sections filles — évite
     que le dégradé "redémarre" à chaque section (ce qui créait une cassure visible
     à la jonction). */
  background: var(--ink);
  background-image: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%);
  border-top: 1px solid rgba(238, 240, 244, 0.12);
}
.offer { background: none; }
.offer-detail-section { background: none; }
.offer-detail-section h2 { color: var(--white); }
.offer-detail-intro .section-intro { color: var(--text-on-ink-muted); }
.offer-detail { border-top-color: rgba(238, 240, 244, 0.14); }
.testimonials {
  background: var(--paper-alt);
  border-top: 1px solid var(--line-soft);
}
.faq { background: var(--white); border-top: 1px solid var(--line-soft); }

/* ---------- Problème ---------- */
.problem h2 { text-align: center; }
.problem .section-intro { text-align: center; margin: 0 auto; max-width: 760px; white-space: nowrap; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 32px;
  margin-top: 48px;
}
.problem-card {
  /* Les 3 cartes sont étirées à la même hauteur (align-items: stretch) donc les
     traits du haut restent alignés — le texte, lui, se centre verticalement à
     l'intérieur de cet espace égal via ce flex column. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 2px solid var(--gold);
  padding-top: 20px;
  text-align: center;
}
.problem-index {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 14px;
}
.problem-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.problem-card p { color: var(--text-muted); font-size: 0.96rem; }
.problem-note {
  text-align: center;
  max-width: 640px;
  margin: 40px auto 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ---------- Offre ---------- */
.offer-showcase {
  /* Même gap que .offer-detail-inner (56px) — pour que la colonne du pack fasse
     exactement la même largeur que les cadres ebooks/Call juste au-dessus. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 56px;
}
.offer-pitch {
  /* Aligné à gauche — même format que les blocs ebooks/Call juste au-dessus
     (cohérence demandée par Jérémie). Le centrage vertical reste géré par
     align-items: center sur .offer-showcase. */
}
.offer-pitch h3 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin: 14px 0 8px;
  color: var(--white);
}
.offer-pitch-subtitle {
  font-size: 1rem;
  color: var(--text-on-ink-muted);
  margin-bottom: 22px;
}
.offer-pitch-list {
  /* Pas d'align-items: center — sinon chaque ligne se centre indépendamment selon
     sa propre largeur et les coches ne s'alignent plus en colonne (effet brouillon).
     Même traitement que .offer-detail-bullets juste au-dessus. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.offer-pitch-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-on-ink);
  text-align: left;
}
.offer-trust { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 22px; }
.offer-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-on-ink-muted);
}
.offer-trust-item svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }

.offer-bundle-col { display: flex; flex-direction: column; align-items: center; }
.offer-bundle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bundle-card {
  /* Même format EXACT que les cadres ebooks/Call juste au-dessus (demande
     Jérémie) : ces cadres ne sont pas du 16:9 pur, ils ont un bandeau d'en-tête
     (~53px) en plus du visuel 16:9 — donc le ratio réel est ~1.489, pas 1.778.
     Contenu réorganisé en lignes compactes pour tenir dans ce format. */
  position: relative;
  background: var(--white);
  color: var(--text);
  border: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px 40px;
  max-width: 600px;
  width: 100%;
  aspect-ratio: 1.489;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  text-align: left;
  box-shadow: var(--shadow-card);
}
.bundle-includes {
  /* Les 3 ebooks sur une seule ligne, garanti (pas de wrap) — nécessaire pour
     tenir dans la hauteur réduite du format 16:9. */
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.bundle-includes li {
  flex: 1 1 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(169, 129, 76, 0.14);
  border: 1px solid rgba(169, 129, 76, 0.4);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}
.bundle-includes li::before {
  /* Forme rectangulaire 16:9 — écho à la forme des aperçus slide plus haut sur la
     page, au lieu d'un rond générique. Réduite pour laisser de la place au texte
     et tenir sur une seule ligne dans ces chips étroits. */
  content: "✓";
  flex-shrink: 0;
  width: 22px;
  height: 12.4px;
  border-radius: 3px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bundle-bonus-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
  background: rgba(201, 168, 116, 0.14);
  border: 1px solid rgba(201, 168, 116, 0.45);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.bundle-bonus-icon {
  /* Même forme 16:9 que les coches juste au-dessus — écho aux aperçus slide,
     cohérent dans toute la carte (avant : rond, seul élément qui détonnait). */
  flex-shrink: 0;
  width: 48px;
  height: 27px;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bundle-bonus-icon svg { width: 18px; height: 18px; }
.bundle-bonus-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.bundle-footer {
  /* Prix + bouton sur une seule ligne (au lieu d'empilés) — gain de hauteur
     nécessaire pour le format 16:9. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.bundle-price-row { display: flex; align-items: baseline; gap: 10px; }
.price-compare { text-decoration: line-through; color: var(--text-muted); font-size: 1rem; }
.price-main { font-family: var(--font-display); font-size: 1.9rem; color: var(--text); font-weight: 600; }
.bundle-card .btn-primary { white-space: nowrap; }


/* ---------- 4 pages dédiées (une par offre) ---------- */
/* Pas de max-width sur le bloc entier — sinon le titre passe sur 2 lignes en desktop.
   Seul le sous-titre est contraint (via .section-intro, 640px, hérité). Sur mobile,
   le titre peut repasser sur 2 lignes naturellement, pas de contrainte forcée. */
.offer-detail-intro { text-align: center; margin: 0 auto 56px; }
.offer-detail-intro .section-intro { margin: 0 auto; }

.offer-detail { padding: 56px 0; border-top: 1px solid var(--line-soft); }
.offer-detail:first-child { border-top: none; padding-top: 0; }
.offer-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.offer-detail.reverse .offer-detail-mockup { order: -1; }
.offer-detail-text h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 14px 0;
  color: var(--white);
}
.offer-detail-desc { color: var(--text-on-ink-muted); font-size: 1rem; max-width: 480px; margin-bottom: 28px; }
.offer-detail-bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  margin-bottom: 32px;
}
.offer-detail-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-on-ink);
}
.offer-detail-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.offer-detail-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--white); }

/* Slider d'aperçu flouté (ebooks) — montre la forme de la page, pas le contenu.
   Même traitement bordure/ombre que .mockup-card pour rester cohérent. */
.preview-slider {
  /* Plus de bordure/ombre propre — hérite du cadre ".mockup-card" qui l'englobe
     désormais, pour rester cohérent avec la carte checklist (ex: Call). */
  position: relative;
  overflow: hidden;
}
.preview-slider-viewport { overflow: hidden; }
.preview-slider-track { display: flex; transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.preview-slide { flex: 0 0 100%; position: relative; aspect-ratio: 16 / 9; }
.preview-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(7px);
  transform: scale(1.06);
}
.preview-slide-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  text-align: center;
  background: linear-gradient(to top, rgba(13, 27, 48, 0.75), transparent);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.preview-slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.preview-slider-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transition: background 0.2s ease; }
.preview-slider-dot.active { background: var(--gold); }
.preview-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(13, 27, 48, 0.5);
  color: var(--white);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.preview-slider-arrow:hover { background: rgba(13, 27, 48, 0.75); }
.preview-slider-arrow.prev { left: 12px; }
.preview-slider-arrow.next { right: 12px; }

.mockup-card {
  background: var(--paper-alt);
  border: 5px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mockup-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mockup-title {
  margin-left: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.mockup-list { padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; background: var(--white); }
.mockup-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.94rem;
  color: var(--text);
}
.mockup-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Témoignages / carrousel ---------- */
.testimonials h2 { color: var(--text); text-align: center; margin-bottom: 48px; }
.carousel {
  /* 3 cartes côte à côte sur desktop pour occuper la largeur de l'écran —
     repasse à 1 carte sur mobile (voir media query). */
  --visible: 3;
  --gap: 28px;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}
.carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius);
}
.carousel-track {
  display: flex;
  gap: var(--gap);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.testimonial-card {
  /* Fond gris clair volontairement — pour bien ressortir sur le fond bleu marine
     de la section (au lieu de se fondre dedans comme avec un fond marine). */
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  background: var(--white);
  border: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.testimonial-stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  color: var(--gold);
  margin-bottom: 18px;
}
.testimonial-stars svg { width: 16px; height: 16px; }
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 20px;
}
.testimonial-result {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(169, 129, 76, 0.14);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
  align-self: center;
}
.testimonial-card footer { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.testimonial-name { font-weight: 600; color: var(--text); font-size: 0.92rem; }
.testimonial-role { font-size: 0.82rem; color: var(--text-muted); }

.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.carousel-dots[hidden] { display: none; }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
  transition: background 0.2s ease;
}
.carousel-dot.active { background: var(--gold); }
.carousel-counter {
  text-align: center;
  margin-top: 26px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--white);
  color: var(--gold);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s ease;
}
.carousel-arrow:hover { background: var(--gold-wash); }
.carousel-arrow-prev { left: -68px; }
.carousel-arrow-next { right: -68px; }

/* ---------- FAQ ---------- */
.faq h2 { text-align: center; margin-bottom: 44px; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4px;
  text-align: left;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
}
.faq-icon {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 4px;
}
.faq-item.open .faq-answer { max-height: 320px; padding-bottom: 22px; }
.faq-answer p { color: var(--text-muted); font-size: 0.95rem; max-width: 620px; }

/* ---------- Panier (tiroir) ---------- */
body.cart-open { overflow: hidden; }

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 48, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 90;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--white);
  box-shadow: -20px 0 40px -20px rgba(13, 27, 48, 0.35);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 91;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-drawer-header h2 { font-size: 1.3rem; }
.cart-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-close:hover { background: var(--paper-alt); color: var(--text); }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }

.cart-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
}

.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart-line-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line-name { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.cart-line-price { font-family: var(--font-display); font-size: 0.92rem; color: var(--text-muted); }
.cart-line-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.cart-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.88rem;
  font-weight: 600;
}
.cart-qty-btn { width: 16px; color: var(--text-muted); font-size: 1rem; line-height: 1; }
.cart-qty-btn:hover { color: var(--gold); }
.cart-remove { color: var(--text-muted); font-size: 1.2rem; line-height: 1; width: 20px; }
.cart-remove:hover { color: var(--gold); }

.cart-drawer-footer { padding: 20px 24px 24px; border-top: 1px solid var(--line-soft); }
.cart-subtotal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.cart-checkout-btn { width: 100%; }

.cart-checkout-panel { padding: 20px 24px 28px; overflow-y: auto; }
.cart-back-btn {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-back-btn:hover { color: var(--gold); }
.cart-checkout-panel h3 { font-size: 1.15rem; margin-bottom: 18px; }
.checkout-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.checkout-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 20px;
}
.checkout-input:focus { outline: none; border-color: var(--gold); }
.cart-checkout-panel .btn { width: 100%; margin-top: 8px; }
.checkout-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.5;
}
.checkout-note-confirm { color: var(--gold); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  background-image: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%);
  color: var(--text-on-ink-muted);
  padding: 64px 0 0;
  border-top: 1px solid rgba(238, 240, 244, 0.12);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(238, 240, 244, 0.1);
}
.footer-brand .brand { color: var(--white); display: block; margin-bottom: 8px; }
.footer-brand p { font-size: 0.9rem; max-width: 320px; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { font-size: 0.88rem; }
.footer-links a:hover { color: var(--gold-light); }
.footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 24px 28px;
  font-size: 0.76rem;
  color: rgba(167, 176, 194, 0.7);
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  body.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 20px 24px 28px;
    border-bottom: 1px solid var(--line);
    gap: 18px;
  }
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .offer-showcase { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .offer-pitch-list { text-align: left; }
  .offer-trust { justify-content: center; }
  /* Le format 16:9 compact (3 ebooks sur une ligne) devient trop serré sur mobile —
     on repasse en empilé classique, plus lisible sur petit écran. */
  .bundle-card { aspect-ratio: auto; }
  .bundle-includes { flex-direction: column; }
  .bundle-includes li { flex: none; }
  .bundle-footer { flex-direction: column; align-items: stretch; }
  .bundle-card .btn-primary { width: 100%; }
  .offer-detail-inner { grid-template-columns: 1fr; gap: 32px; }
  .offer-detail.reverse .offer-detail-mockup { order: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { order: -1; max-width: 280px; margin: 0 auto; aspect-ratio: 1 / 1; }
  .carousel { --visible: 1; }
  .carousel-arrow { display: none; }
  .hero { padding: 88px 0 72px; }
  .footer-inner { flex-direction: column; }
  .connect-list { grid-template-columns: 1fr; }
  /* Mobile : on garde le rendu d'origine (liste simple, badges normaux, pas de cartes bordées). */
  .experience-list { grid-template-columns: 1fr; max-width: 100%; gap: 0; }
  .experience-item {
    align-items: flex-start;
    gap: 18px;
    border: none;
    border-radius: 0;
    padding: 18px 4px;
    border-bottom: 1px solid var(--line-soft);
  }
  .experience-item:hover { border-color: transparent; transform: none; }
  .experience-item:last-child { border-bottom: none; }
  .experience-badge { width: 48px; height: 48px; border-radius: var(--radius-sm); font-size: 0.82rem; }
  .experience-badge img { padding: 6px; }
  .experience-name { font-size: 1.1rem; }
  .problem .section-intro { white-space: normal; max-width: 100%; }
}

@media (max-width: 1024px) and (min-width: 861px) {
  .connect-list { grid-template-columns: repeat(2, 1fr); }
  .carousel { --visible: 2; }
}

@media (max-width: 520px) {
  .bundle-card { padding: 34px 26px; }
  .testimonial-card { padding: 32px 24px; }
}