/**
 * Vitrine publique ("/") — direction « Maison », identique à l'app.
 * Cette feuille ne déclare AUCUN token : tout vient de tokens.css, et le
 * vocabulaire (.panel, .btn-primary, .dash-eyebrow) vient de shell.css.
 * Objectif : un visiteur ne doit sentir aucune rupture entre la vitrine et
 * l'application derrière le bouton.
 */

.lp {
  max-width: 1100px;
  margin: 0 auto;
  /* En-tête fixe (shell.css) : même retrait haut que .dash / .mail. */
  padding: clamp(7rem, 12vh, 10rem) clamp(1.2rem, 4vw, 3rem) var(--sp-xl);
}
.lp section { padding: var(--sp-2xl) 0 0; }
.lp-rule { border: none; border-top: 1px solid var(--line-soft); margin: var(--sp-2xl) 0 0; }

/* ---------- En-tête de section ---------- */
.lp-head { margin-bottom: var(--sp-lg); }
.lp-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.lp-head p {
  margin-top: var(--sp-sm);
  max-width: 58ch;
  color: var(--ink-mute);
}

/* ---------- Hero ---------- */
/* `.lp section` pose un padding haut à toutes les sections ; le hero est le
   seul à ne pas en vouloir (il suit déjà le retrait de `.lp`). Sélecteur
   qualifié pour l'emporter sur `.lp section` sans recourir à !important. */
.lp section.lp-hero {
  display: grid;
  gap: var(--sp-xl);
  padding-top: 0;
}
@media (min-width: 900px) {
  .lp-hero { grid-template-columns: 7fr 5fr; align-items: center; }
}
.lp-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.lp-hero h1 em {
  font-style: normal;
  color: var(--burgundy-deep);
}
.lp-lede {
  margin-top: var(--sp-md);
  max-width: 54ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- Boutons (liens stylés comme les boutons de l'app) ---------- */
.lp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm) var(--sp-md);
  margin-top: var(--sp-lg);
}
.lp-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lp-btn--primary { background: var(--burgundy); color: var(--surface); border: 1px solid var(--burgundy); }
.lp-btn--primary:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); }
.lp-btn--ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.lp-btn--ghost:hover { color: var(--ink); border-color: var(--ink-soft); }
.lp-cta-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  flex-basis: 100%;
}

/* ---------- Feuillet d'aperçu (colonne droite du hero) ---------- */
.lp-feuillet {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-feuillet);
  overflow: hidden;
}
.lp-feuillet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-warm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lp-feuillet-body { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.lp-feuillet-line { display: flex; gap: var(--sp-sm); font-size: var(--text-sm); }
.lp-feuillet-line dt {
  min-width: 4.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: 0.15rem;
}
.lp-feuillet-line dd { margin: 0; color: var(--ink); }
.lp-feuillet-mail {
  margin-top: var(--sp-xs);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.lp-feuillet-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-mute);
}
.lp-dot {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--emerald); flex: none;
}

/* ---------- Figure : à la main vs Missiforge ---------- */
.lp-bars { display: flex; flex-direction: column; gap: var(--sp-md); }
.lp-bar-label {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lp-bar-value { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.lp-bar-track {
  height: 2.2rem;
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.lp-bar-fill { height: 100%; width: 0; transition: width var(--dur-slow) var(--ease-out); }
.lp-bar-fill--manual { background: var(--burgundy); }
.lp-bar-fill--forge { background: var(--emerald); }
.lp-bars.is-revealed .lp-bar-fill--manual { width: 100%; }
.lp-bars.is-revealed .lp-bar-fill--forge { width: 11.1%; }

/* ---------- Tableaux (comparatif + tarifs) ---------- */
.lp-table-wrap { overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.lp-table th, .lp-table td {
  text-align: left;
  padding: var(--sp-sm) var(--sp-md);
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
  font-size: var(--text-sm);
}
.lp-table thead th {
  border-top: none;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lp-table td:first-child, .lp-table th:first-child { padding-left: 0; }
.lp-table tbody th {
  font-weight: 500;
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
}
.lp-gain { color: var(--emerald); }
.lp-num { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.lp-table tr.is-featured td, .lp-table tr.is-featured th { border-top: 1px solid var(--gold); background: var(--gold-soft); }
.lp-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- Méthode ---------- */
.lp-steps { display: grid; gap: var(--sp-md); }
@media (min-width: 820px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { display: flex; flex-direction: column; gap: var(--sp-xs); box-shadow: var(--shadow-soft); }
.lp-step-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--burgundy-deep);
}
.lp-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--ink);
}
.lp-step p { color: var(--ink-mute); font-size: var(--text-sm); }

/* ---------- Garanties / confiance ---------- */
.lp-grid-2 { display: grid; gap: var(--sp-md); }
@media (min-width: 820px) { .lp-grid-2 { grid-template-columns: 3fr 2fr; align-items: start; } }
.lp-list { list-style: none; display: flex; flex-direction: column; }
.lp-list li { padding: var(--sp-sm) 0; border-top: 1px solid var(--line-soft); color: var(--ink-mute); font-size: var(--text-sm); }
.lp-list li:first-child { border-top: none; padding-top: 0; }
.lp-list strong { display: block; color: var(--ink); font-weight: 500; }

.lp-trust { display: grid; gap: var(--sp-md); }
@media (min-width: 780px) { .lp-trust { grid-template-columns: repeat(4, 1fr); } }
.lp-trust div { font-size: var(--text-sm); color: var(--ink-mute); }
.lp-trust strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 0.2rem; }

/* ---------- Achat de tokens : les 4 packs ---------- */
.lp-packs {
  list-style: none;
  display: grid;
  gap: var(--sp-md);
  margin: 0;
  padding: 0;
}
/* minmax(0, 1fr) et pas 1fr : le prix (--text-2xl) impose une largeur
   minimale de contenu, et `1fr` = minmax(auto, 1fr) laissait la grille
   déborder de son conteneur au lieu de rétrécir les cartes. */
@media (min-width: 700px) { .lp-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .lp-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-pack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: var(--sp-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.lp-pack.is-featured { border-color: var(--gold); background: var(--gold-soft); }
.lp-pack .lp-tag { margin-bottom: 0.15rem; }
.lp-pack-price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lp-pack-tokens { font-size: var(--text-sm); color: var(--ink); }
.lp-pack-unit { font-size: var(--text-xs); color: var(--ink-mute); margin-bottom: var(--sp-md); }
/* Le bouton est poussé en bas : les 4 cartes s'alignent même si le pack mis
   en avant porte une étiquette que les autres n'ont pas. */
.lp-pack-buy { margin-top: auto; align-self: stretch; text-align: center; }

.lp-note { margin-top: var(--sp-sm); font-size: var(--text-sm); color: var(--ink-mute); max-width: 62ch; }
.lp-source {
  margin-top: var(--sp-md);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  max-width: 62ch;
}

/* ---------- Deux portes (bloc final) ---------- */
.lp-doors { display: grid; gap: var(--sp-md); margin-top: var(--sp-lg); }
@media (min-width: 780px) { .lp-doors { grid-template-columns: 1fr 1fr; } }
.lp-door { display: flex; flex-direction: column; gap: var(--sp-xs); box-shadow: var(--shadow-soft); }
.lp-door h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--ink); }
.lp-door p { color: var(--ink-mute); font-size: var(--text-sm); flex: 1; }
.lp-door .lp-cta { margin-top: var(--sp-md); }

/* ---------- Pied de page ---------- */
.lp-footer {
  margin-top: var(--sp-2xl);
  padding: var(--sp-md) 0 var(--sp-lg);
  border-top: 1px solid var(--line-strong);
}
.lp-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  justify-content: space-between;
  align-items: baseline;
}
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-md); }
.lp-footer a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
}
.lp-footer a:hover { color: var(--burgundy); }
.lp-footer-legal { margin-top: var(--sp-md); font-size: var(--text-xs); color: var(--ink-dim); max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
  .lp-bar-fill { transition: none; }
}