/* ============================================================
   Cheval 3F — vente du guide (guide.html, merci.html) et pages
   légales. Reprend les variables de base.css.
   ============================================================ */

/* ── Page du guide ─────────────────────────────────────────── */
.guide-hero { padding: 64px 0 40px; }
.guide-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: 56px; align-items: start;
}
.guide-couverture {
  width: 100%; height: auto; display: block;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(35, 34, 28, .08), 0 24px 48px rgba(35, 34, 28, .18);
  transform: rotate(-1.2deg);
}
.guide-hero h1 { margin: 10px 0 14px; }
.guide-faits {
  list-style: none; padding: 0; margin: 22px 0 28px;
  display: grid; gap: 10px;
}
.guide-faits li {
  display: flex; gap: 12px; align-items: baseline;
  color: var(--c-ink-soft);
}
.guide-faits li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-clay); transform: translateY(-2px);
}
.guide-faits strong { color: var(--c-ink); font-weight: 600; }

/* La boîte d'achat. Les deux cases conditionnent le bouton : c'est la
   renonciation au droit de rétractation, qui doit être expresse. */
.achat {
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-m);
  padding: 22px 24px;
  max-width: 520px;
}
.achat-badge {
  display: inline-block; margin: 0 0 10px; padding: 4px 12px;
  border-radius: 999px; background: var(--c-clay); color: #fff;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.achat-prix {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.achat-prix strong {
  font-family: var(--font-display); font-size: 2.3rem; font-weight: 600;
  color: var(--c-moss); line-height: 1;
}
.achat-prix s {
  font-size: 1.2rem; color: var(--c-ink-soft); font-weight: 500;
}
.achat-prix span { color: var(--c-ink-soft); font-size: .92rem; flex-basis: 100%; }
.achat-quota {
  font-size: .88rem; font-weight: 600; color: var(--c-clay-dark); margin: 0 0 12px;
}
.achat-mention { font-size: .82rem; color: var(--c-ink-soft); margin: 0 0 16px; }
#achat-sans-bilan {
  background: var(--c-bg-alt); border-radius: var(--radius-s);
  padding: 14px 16px; margin-bottom: 16px; font-size: .92rem;
}
#achat-sans-bilan p { margin: 0 0 10px; }
.achat label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .9rem; line-height: 1.45; margin: 0 0 12px; cursor: pointer;
}
.achat input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--c-moss);
}
.achat .btn { width: 100%; justify-content: center; margin-top: 6px; }
.achat .btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none; filter: grayscale(.3);
}
.achat-garanties {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .8rem; color: var(--c-ink-soft); margin: 14px 0 0;
}
.achat-bientot p { margin: 0 0 10px; }
.extrait-lien {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; font-weight: 600; color: var(--c-clay-dark);
  text-decoration: none; border-bottom: 1.5px solid currentColor;
}

/* ── Sommaire ──────────────────────────────────────────────── */
.partie-titre {
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-clay-dark);
  margin: 40px 0 12px;
}
.chapitres { display: grid; gap: 12px; }
.chapitre {
  background: var(--c-surface); border-radius: var(--radius-m);
  padding: 18px 22px; border: 1.5px solid var(--c-line);
  scroll-margin-top: 90px;
}
.chapitre:target { border-color: var(--c-clay); box-shadow: var(--shadow-card); }
.chapitre h3 { font-size: 1.08rem; margin: 2px 0 4px; }
.chapitre p { margin: 0; color: var(--c-ink-soft); font-size: .95rem; }
.chapitre-num {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-clay-dark);
}
.chapitre-extrait {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; background: var(--c-moss-pale); color: var(--c-moss);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: none;
}

/* ── Ce que vous recevez (guide + rapport) ────────────────── */
.recu-grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px;
  align-items: start;
}
.recu-colonne {
  background: var(--c-surface); border-radius: var(--radius-m);
  padding: 30px; box-shadow: var(--shadow-card);
}
.recu-colonne h3 { margin: 0 0 6px; }
.recu-rapport { border-top: 4px solid var(--c-clay); }
.recu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.recu-liste li {
  position: relative; padding-left: 26px; color: var(--c-ink); line-height: 1.5;
}
.recu-liste li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  color: var(--c-clay-dark); font-weight: 700;
}
.recu-note {
  margin: 18px 0 0; padding: 10px 14px; border-radius: var(--radius-s);
  background: var(--c-moss-pale); color: var(--c-moss); font-size: .88rem; font-weight: 600;
}

/* ── FAQ achat ─────────────────────────────────────────────── */
.faq-liste { display: grid; gap: 12px; margin-top: 28px; }
.faq-liste details {
  background: var(--c-surface); border: 1.5px solid var(--c-line);
  border-radius: var(--radius-m); padding: 16px 20px;
}
.faq-liste summary {
  cursor: pointer; font-weight: 600; color: var(--c-ink);
  list-style: none;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after {
  content: "+"; float: right; color: var(--c-clay-dark); font-weight: 700;
}
.faq-liste details[open] summary::after { content: "–"; }
.faq-liste p { margin: 12px 0 0; color: var(--c-ink-soft); }

@media (max-width: 760px) {
  .recu-grille { grid-template-columns: 1fr; }
}

/* ── Page de retour du paiement ───────────────────────────── */
.merci-carte {
  background: var(--c-surface); border: 1.5px solid var(--c-line);
  border-radius: var(--radius-m); padding: 26px 28px; margin: 26px 0;
}
.merci-carte .btn { margin-top: 6px; }
.merci-note { font-size: .9rem; color: var(--c-ink-soft); }
.retractation {
  border-top: 1px solid var(--c-line); margin-top: 34px; padding-top: 22px;
  font-size: .92rem; color: var(--c-ink-soft);
}
.retractation h2 { font-size: 1.05rem; color: var(--c-ink); }
.message-erreur { color: var(--c-alert); }

/* ── Pages légales ────────────────────────────────────────── */
.legal { max-width: 760px; }
.legal h1 { margin-bottom: 6px; }
.legal h2 { font-size: 1.25rem; margin: 2.2em 0 .6em; }
.legal h3 { font-size: 1.02rem; margin: 1.5em 0 .4em; }
.legal p, .legal li { color: var(--c-ink); line-height: 1.7; }
.legal .maj { color: var(--c-ink-soft); font-size: .9rem; }
.legal dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 18px; margin: 0; }
.legal dt { font-weight: 600; color: var(--c-ink-soft); }
.legal dd { margin: 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1em 0; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--c-line); }
.legal th { color: var(--c-moss); background: var(--c-moss-pale); }
/* Ce qui reste à compléter se voit, à l'écran ET pour outils/verifier.mjs. */
.acompleter {
  background: #fde7c9; color: #7a3e12; padding: 0 5px; border-radius: 4px;
  outline: 1.5px dashed #d98a3d;
}
.formulaire-type {
  background: var(--c-bg-alt); border-radius: var(--radius-s);
  padding: 16px 20px; font-size: .92rem;
}

@media (max-width: 760px) {
  .guide-hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .guide-couverture { max-width: 230px; margin: 0 auto; }
  .legal dl { grid-template-columns: 1fr; gap: 2px; }
  .legal dt { margin-top: 10px; }
}