/* =========================================================================
   components.css — boutons, cartes, lecteur (flipbook), avis, offres
   ========================================================================= */

/* --- Boutons ------------------------------------------------------------- */
.btn {
  --btn-py: .82rem;
  --btn-px: 1.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .015em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: var(--grad-gold);
  color: #2A1F06;
  box-shadow: var(--glow-gold);
}
.btn--gold::after {           /* balayage lumineux */
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease-out);
}
.btn--gold:hover::after { left: 115%; }
.btn--gold:hover { box-shadow: 0 0 0 1px rgba(240,220,169,.5), 0 22px 60px -18px rgba(201,162,77,.8); }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,.02);
}
.btn--ghost:hover { border-color: var(--gold-400); color: var(--gold-200); }

.btn--sm  { --btn-py: .55rem; --btn-px: 1.05rem; font-size: var(--fs-xs); }
.btn--lg  { --btn-py: 1rem;   --btn-px: 2rem;    font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn__meta {
  padding-left: .7rem;
  margin-left: .1rem;
  border-left: 1px solid rgba(42,31,6,.28);
  font-weight: 600;
}

/* --- Cartes bénéfices ---------------------------------------------------- */
.card {
  position: relative;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(27,36,64,.5), rgba(10,14,27,.45));
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .5s, box-shadow .5s;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,193,118,.55), transparent);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card__num {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .2em;
  color: var(--gold-500);
}
.card h3 { margin: .6rem 0 .5rem; }
.card p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* --- Bandeau de faits ---------------------------------------------------- */
.marquee {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-top: var(--sp-4);
}
.marquee li {
  padding: .45rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,255,255,.02);
}

/* =========================================================================
   LECTEUR / FLIPBOOK
   ========================================================================= */
.reader {
  --page-w: 268px;
  --page-h: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.reader--large { --page-w: 360px; --page-h: 510px; }

.reader__stage {
  position: relative;
  width: 100%;
  min-height: calc(var(--page-h) + 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2400px;
}
.reader__loading {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: pulse-soft 1.8s ease-in-out infinite;
}

/* Livre — moteur CSS 3D natif (repli de page-flip) */
.fb {
  position: relative;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  transform-style: preserve-3d;
  transition: width .4s var(--ease), transform .85s var(--ease-out);
}
.fb[data-mode="single"] { width: var(--page-w); }

/* Livre fermé : seule la couverture est visible, on la recentre.
   Livre terminé : la dernière page se retrouve seule à gauche. */
.fb.is-closed { transform: translateX(-25%); }
.fb.is-ended  { transform: translateX(25%); }
.fb[data-mode="single"].is-closed,
.fb[data-mode="single"].is-ended { transform: none; }

.fb__base {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(180deg, #0F1524, #070A12);
  box-shadow: var(--shadow-lg);
  transition: left .85s var(--ease-out), right .85s var(--ease-out);
}
/* Livre fermé ou terminé : le corps du livre se réduit à la moitié occupée. */
.fb.is-closed .fb__base { left: 50%; }
.fb.is-ended  .fb__base { right: 50%; }
.fb[data-mode="single"] .fb__base { left: 0; right: 0; }
.fb__base::after {                 /* tranche de pages */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0 2px, transparent 3px);
  opacity: .5;
}

.fb__page {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .85s var(--ease-out);
  will-change: transform;
  cursor: grab;
}
.fb[data-mode="single"] .fb__page { left: 0; width: 100%; }
.fb__page.is-flipped { transform: rotateY(-180deg); }
.fb__page.is-turning { z-index: 900 !important; cursor: grabbing; }
.fb__page.is-dragging { transition: none; }

.fb__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--paper-ink);
  padding: clamp(1.1rem, 3.4%, 2.1rem);
  display: flex;
  flex-direction: column;
  font-size: clamp(.7rem, calc(var(--page-w) * .042), .95rem);
  line-height: 1.62;
}
.fb__face--front {
  border-radius: 3px 8px 8px 3px;
  box-shadow: inset 14px 0 22px -16px rgba(0,0,0,.55);
}
.fb__face--back {
  transform: rotateY(180deg);
  border-radius: 8px 3px 3px 8px;
  box-shadow: inset -14px 0 22px -16px rgba(0,0,0,.55);
}
.fb__page.is-turning .fb__face { box-shadow: inset 0 0 60px rgba(0,0,0,.22); }

/* Contenu des pages ------------------------------------------------------- */
.fb__face p { color: var(--paper-ink); margin: 0 0 .75em; }
.fb__face h2, .fb__face h3 { color: var(--paper-ink); }

.pg-folio {
  margin-top: auto;
  padding-top: .8em;
  font-size: .72em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-mute);
  display: flex;
  justify-content: space-between;
}

/* couverture */
.fb__face--cover {
  background:
    radial-gradient(120% 80% at 50% -10%, #1B2440 0%, #0B1020 60%, #070A12 100%);
  color: var(--gold-200);
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(226,193,118,.22);
}
.fb__face--cover .pg-rule {
  width: 46px; height: 1px;
  background: var(--grad-gold);
  margin: .9em auto;
}
.fb__face--cover .pg-kicker {
  font-size: .7em;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.fb__face--cover .pg-title {
  font-family: var(--font-display);
  font-size: 2.05em;
  line-height: 1.02;
  margin: .2em 0;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fb__face--cover .pg-subtitle {
  font-size: .74em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240, 220, 169, .82) !important;
}
.fb__face--cover .pg-author {
  font-size: .78em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240,220,169,.75);
}

/* page de titre / dédicace */
.fb__face--plate { align-items: center; justify-content: center; text-align: center; }
.pg-dedication { font-family: var(--font-display); font-size: 1.3em; font-style: italic; line-height: 1.4; }

/* sommaire */
.pg-toc-title, .pg-eyebrow {
  font-size: .7em;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 1.1em;
}
.pg-toc { display: flex; flex-direction: column; gap: .55em; }
.pg-toc li {
  display: flex;
  align-items: baseline;
  gap: .5em;
  font-family: var(--font-display);
  font-size: 1.06em;
}
.pg-toc li span:first-child { color: var(--gold-600); font-size: .8em; min-width: 1.6em; }
.pg-toc li i {
  flex: 1;
  height: 1px;
  border-bottom: 1px dotted rgba(107,97,81,.5);
  transform: translateY(-.25em);
}

/* ouverture de chapitre */
.fb__face--chapter { justify-content: center; }
.pg-chapter-num {
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: .9;
  color: rgba(168,127,44,.28);
}
.pg-chapter-title {
  font-family: var(--font-display);
  font-size: 1.75em;
  line-height: 1.1;
  margin: .15em 0 .5em;
}
.pg-lead { font-style: italic; color: var(--paper-mute) !important; }

/* texte courant */
.fb__face--text p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.05em;
  line-height: .8;
  padding: .06em .12em 0 0;
  color: var(--gold-600);
}
.pg-pull {
  margin: .4em 0 .9em;
  padding: .7em .9em;
  border-left: 2px solid var(--gold-500);
  background: rgba(201,162,77,.09);
  font-family: var(--font-display);
  font-size: 1.12em;
  font-style: italic;
  line-height: 1.35;
}

/* citation pleine page */
.fb__face--quote { align-items: center; justify-content: center; text-align: center; }
.fb__face--quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45em;
  font-style: italic;
  line-height: 1.28;
}
.fb__face--quote cite {
  display: block;
  margin-top: 1.1em;
  font-family: var(--font-body);
  font-size: .74em;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

/* dernière page (appel à l'action) */
.fb__face--end { align-items: center; justify-content: center; text-align: center; gap: .5em; }
.fb__face--end .pg-title { font-family: var(--font-display); font-size: 1.5em; line-height: 1.15; }
.fb__face--end .pg-cta {
  margin-top: .6em;
  padding: .6em 1.3em;
  border-radius: 999px;
  background: linear-gradient(115deg, #C9A24D, #A87F2C);
  color: #FFF6E2;
  font-size: .8em;
  letter-spacing: .06em;
}

/* Barre de contrôle ------------------------------------------------------- */
.reader__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: min(100%, calc(var(--page-w) * 2));
  padding: .4rem .5rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
}
.reader__nav {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--gold-300);
  border: 1px solid var(--line);
  transition: background .3s var(--ease), color .3s, transform .3s var(--ease-out);
}
.reader__nav:hover:not(:disabled) { background: var(--grad-gold); color: var(--ink-900); transform: scale(1.06); }
.reader__nav:disabled { opacity: .3; cursor: not-allowed; }
.reader__progress {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.reader__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-gold);
  transition: width .6s var(--ease-out);
}
.reader__count {
  flex: none;
  min-width: 3.6rem;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.reader__hint {
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: #6E7690;
}

/* --- Témoignages --------------------------------------------------------- */
.quote {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(27,36,64,.42), rgba(10,14,27,.4));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform .5s var(--ease-out), border-color .5s;
}
.quote:hover { transform: translateY(-5px); border-color: var(--line); }
.quote__stars { color: var(--gold-400); letter-spacing: .18em; font-size: .95rem; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.42;
  color: #F1EFEA;
}
.quote figcaption { display: flex; flex-direction: column; margin-top: auto; }
.quote figcaption strong { font-size: var(--fs-sm); color: #fff; font-weight: 500; }
.quote figcaption span { font-size: var(--fs-xs); color: var(--muted); }

.press {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.press span { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; }
.press em { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--text-soft); }
.press i { color: var(--gold-600); }

/* --- Offres -------------------------------------------------------------- */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--sp-3);
  align-items: center;
}
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(19,27,48,.55), rgba(10,14,27,.5));
}
.offer--featured {
  border-color: rgba(226,193,118,.4);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(226,193,118,.14), transparent 70%),
    linear-gradient(180deg, rgba(27,36,64,.8), rgba(10,14,27,.7));
  box-shadow: var(--shadow-lg);
  padding-block: var(--sp-5);
  z-index: 1;
}
.offer__flag {
  position: absolute;
  top: -.75rem; left: 50%;
  transform: translateX(-50%);
  padding: .3rem .9rem;
  border-radius: 999px;
  background: var(--grad-gold);
  color: #2A1F06;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.offer__name { font-size: 1.3rem; margin: 0; }
.offer__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.offer__price span { font-size: 3rem; line-height: 1; color: var(--gold-300); }
.offer__price small { font-size: .72rem; letter-spacing: .12em; color: var(--muted); font-family: var(--font-body); }
.offer__old { font-size: 1rem; color: var(--muted); }
.offer__list { display: flex; flex-direction: column; gap: .55rem; margin: .3rem 0 var(--sp-2); }
.offer__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.offer__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold-400);
  border-bottom: 1.5px solid var(--gold-400);
  transform: rotate(-45deg);
}
.offer__note { margin: .3rem 0 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); }

.reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.reassure li {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.reassure li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 8px var(--gold-500);
}

/* --- Barre d'achat mobile ------------------------------------------------ */
.sticky-buy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(7,10,18,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
  transform: translateY(110%);
  transition: transform .45s var(--ease-out);
}
.sticky-buy strong { display: block; font-family: var(--font-display); font-size: 1rem; color: #fff; }
.sticky-buy span { font-size: var(--fs-xs); color: var(--muted); }
.sticky-buy.is-visible { transform: none; }

@media (max-width: 760px) {
  .sticky-buy { display: flex; }

  /* Page simple : format plus haut et texte légèrement réduit, pour que le
     contenu d'une page tienne entièrement sans être rogné. */
  .reader { --page-w: min(78vw, 300px); --page-h: calc(min(78vw, 300px) * 1.55); }
  .reader--large { --page-w: min(84vw, 340px); --page-h: calc(min(84vw, 340px) * 1.55); }
  .fb__face { font-size: clamp(.66rem, calc(var(--page-w) * .038), .88rem); }

  .quote blockquote p { font-size: 1.12rem; }
  .offer--featured { padding-block: var(--sp-4); }
}

/* Pages confiées à la bibliothèque page-flip (StPageFlip gère le positionnement) */
.fb--lib { width: 100%; height: auto; }
.fb__face--lib {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

/* Bouton lecture / pause de la lecture automatique */
.reader__nav--play {
  width: 30px; height: 30px;
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--muted);
  border-color: var(--line-2);
}
.reader__nav--play[aria-pressed="false"] { color: var(--gold-300); border-color: var(--line); }
.reader__nav--play:hover { color: var(--ink-900); }

/* =========================================================================
   SOMMAIRE DU LIVRE
   ========================================================================= */
.toc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 0 var(--sp-4);
  counter-reset: toc;
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .4s var(--ease), transform .4s var(--ease-out);
}
.toc-list__item:hover { border-bottom-color: var(--gold-500); transform: translateX(4px); }
.toc-list__num {
  flex: none;
  min-width: 2.1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--gold-500);
  line-height: 1;
}
.toc-list__body { display: flex; flex-direction: column; gap: .15rem; }
.toc-list__label {
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc-list__title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.22;
  color: #fff;
}

/* --- Bonus --------------------------------------------------------------- */
.bonus {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(226,193,118,.08), transparent 65%),
    linear-gradient(180deg, rgba(19,27,48,.6), rgba(10,14,27,.55));
}
.bonus__title {
  text-align: center;
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}
.bonus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-3);
  text-align: center;
}
.bonus__grid li { display: flex; flex-direction: column; gap: .2rem; }
.bonus__grid strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--gold-200);
}
.bonus__grid span { font-size: var(--fs-xs); color: var(--muted); }

/* --- Extraits : libellé de chapitre à la place des étoiles ---------------- */
.quote__source {
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.quote figcaption span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

/* --- Offre unique -------------------------------------------------------- */
.offers--single {
  grid-template-columns: minmax(0, 30rem);
  justify-content: center;
}

/* --- Mention légale ------------------------------------------------------ */
.disclaimer {
  max-width: 46rem;
  margin: var(--sp-4) auto 0;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: #6E7690;
}

/* =========================================================================
   PARCOURS D'ACHAT
   ========================================================================= */
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy::before {
  content: "";
  width: 13px; height: 13px;
  margin-right: .1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.checkout-note {
  margin: .7rem 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--gold-300);
}

/* --- Page de remerciement ------------------------------------------------ */
.thanks {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-5);
  text-align: center;
}
.thanks .container { max-width: 46rem; }

.thanks__seal {
  width: 68px; height: 68px;
  margin: 0 auto var(--sp-3);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold-300);
  background: radial-gradient(circle, rgba(201,162,77,.22), transparent 70%);
  box-shadow: var(--glow-gold);
}
.thanks .eyebrow::before { display: none; }
.thanks__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-3);
}
.thanks__lead {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 34rem;
  margin: 0 auto var(--sp-4);
}

.thanks__card {
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid rgba(226,193,118,.4);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(226,193,118,.14), transparent 70%),
    linear-gradient(180deg, rgba(27,36,64,.8), rgba(10,14,27,.7));
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.thanks__card-title { font-size: var(--fs-h3); margin-bottom: .4rem; }
.thanks__card-text { color: var(--muted); font-size: var(--fs-sm); }
.thanks__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: var(--sp-2) 0 var(--sp-3);
}
.thanks__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.thanks__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}
.thanks .reassure, .thanks .disclaimer { margin-top: var(--sp-4); }

.demo-banner {
  margin: 0 0 var(--sp-4);
  padding: .8rem 1.1rem;
  border: 1px dashed rgba(226,193,118,.45);
  border-radius: var(--radius);
  background: rgba(201,162,77,.08);
  font-size: var(--fs-sm);
  color: var(--gold-200);
  text-align: left;
}
.demo-banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  color: var(--gold-300);
}

/* Barre de navigation réduite (page de remerciement) */
.nav__links--bare a { font-size: var(--fs-sm); color: var(--text-soft); white-space: nowrap; }
.nav__links--bare a:hover { color: var(--gold-300); }
@media (max-width: 760px) {
  .nav__links--bare {
    position: static;
    flex-direction: row;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__links--bare a { padding: 0; border: 0; font-size: var(--fs-sm); }
}

/* États de la page de remerciement -------------------------------------- */
.thanks__spinner {
  display: flex;
  justify-content: center;
  margin: var(--sp-3) 0 .5rem;
}
.thanks__spinner span {
  width: 22px; height: 22px;
  border: 2px solid rgba(226,193,118,.28);
  border-top-color: var(--gold-300);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.thanks__card-note {
  margin: .8rem 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* =========================================================================
   PAGE LÉGALE (mentions-legales.html)
   ========================================================================= */
.legal {
  padding: calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-6);
}
.legal .container { max-width: 50rem; }

.legal .eyebrow::before { display: none; }
.legal__title { font-size: var(--fs-h2); margin-bottom: .6rem; }
.legal__meta {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--muted);
}
.legal__lead {
  font-size: var(--fs-lg);
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
}

/* Sommaire ---------------------------------------------------------------- */
.legal__toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: var(--sp-3);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(27,36,64,.45), rgba(10,14,27,.4));
}
.legal__toc a {
  padding: .35rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.legal__toc a:hover { border-color: var(--gold-400); color: var(--gold-200); }

/* Sections ---------------------------------------------------------------- */
.legal__section {
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-top: 1px solid var(--line-2);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.legal__section h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
  color: var(--gold-200);
}
.legal__section h3 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: var(--sp-3) 0 .5rem;
}
.legal__section p { font-size: var(--fs-sm); line-height: 1.8; }
.legal__section strong { color: #fff; font-weight: 500; }

.legal__list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin: 0 0 var(--sp-2);
}
.legal__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-soft);
}
.legal__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}
.legal__list em { color: var(--muted); font-size: .92em; }

/* Bloc d'identité --------------------------------------------------------- */
.legal__id {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: .7rem var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
}
.legal__id dt {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .15em;
}
.legal__id dd { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }

/* Champ à compléter ------------------------------------------------------- */
.fill {
  display: inline-block;
  padding: .1em .55em;
  border: 1px dashed rgba(226,193,118,.55);
  border-radius: 6px;
  background: rgba(201,162,77,.08);
  color: var(--gold-200);
  font-size: .95em;
  white-space: normal;
}

/* Encarts ----------------------------------------------------------------- */
.legal__note {
  display: block;
  margin-top: .5rem;
  font-size: var(--fs-xs);
  font-style: italic;
  line-height: 1.65;
  color: var(--muted);
}
.legal__basis {
  font-size: var(--fs-xs) !important;
  color: #6E7690;
  font-style: italic;
}
.legal__warning {
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
  border-left: 2px solid var(--gold-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(201,162,77,.08);
  color: var(--text-soft) !important;
}
.legal__contact {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: var(--sp-2) 0;
}

@media (max-width: 640px) {
  .legal__id { grid-template-columns: 1fr; gap: .2rem; padding: var(--sp-2); }
  .legal__id dt { margin-top: .7rem; }
  .legal__id dt:first-child { margin-top: 0; }
}