/* ===== Page de présentation publique (sprint P) =====
   Seule page qu'un visiteur non connecté verra jamais avant de créer un
   compte — voir docs/produit/BACKLOG.md §P. Volontairement séparée du reste
   du thème plutôt que de réutiliser `.table-wrap`/`table` (droite-alignés,
   `nowrap`, pensés pour des séries de chiffres) : ce contenu est de la prose,
   pas une donnée de marché. */
.pres-body { margin: 0; }
.pres-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s4) var(--s5);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.pres-brand { display: flex; align-items: center; gap: var(--s3); }
.pres-logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  /* #000 ici n'est pas une couleur affichée : c'est le point noir pur vers
     lequel color-mix() assombrit --accent, indépendant du thème (S6.3). */
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--on-accent);
}
.pres-brand strong { font-family: var(--font-display); font-size: 1.1rem; }
.pres-actions { display: flex; align-items: center; gap: var(--s3); }
.pres-actions a { font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.pres-hero {
  max-width: 760px; margin: 0 auto; padding: var(--s6, 2rem) var(--s5) var(--s5);
  text-align: center;
}
.pres-hero h1 {
  font-family: var(--font-display); font-size: var(--fs-display);
  line-height: 1.12; margin: 0 0 var(--s4);
}
.pres-hero .pres-lede { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 var(--s3); }
/* H6.1 : ce sélecteur était niché sous `.pres-hero`, or `.pres-not-for` sert
   aussi seul sous le tableau des paliers — hors de ce nid, il tombait à la
   feuille de style par défaut : texte pleine taille, pleine largeur de
   section (1080px). C'est la « mauvaise largeur » constatée. `max-width` le
   ramène à une ligne de lecture confortable. */
.pres-not-for { font-size: 0.86rem; color: var(--text-muted); margin: 0; max-width: 640px; }
.pres-section { max-width: 1080px; margin: 0 auto; padding: var(--s6, 2rem) var(--s5); }
.pres-section h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 var(--s5); text-align: center; }
.pres-features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4);
}
.pres-feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
}
.pres-feature-card h3 { margin: 0 0 var(--s2); font-size: 1.02rem; }
.pres-feature-card p { margin: 0 0 var(--s2); color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; }
.pres-feature-card .pres-source { font-size: 0.76rem; color: var(--accent); font-weight: 600; }
.pres-tiers table {
  width: 100%; border-collapse: collapse; font-variant-numeric: normal;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.pres-tiers th {
  text-align: left; white-space: normal; padding: var(--s4); vertical-align: top;
  border-bottom: 1px solid var(--border); font-size: 0.86rem; line-height: 1.5;
}
.pres-tiers td {
  text-align: left; white-space: normal; padding: var(--s4); vertical-align: top;
  border-bottom: 1px solid var(--border); font-size: 0.86rem; line-height: 1.5;
}
.pres-tiers thead th {
  text-transform: none; letter-spacing: normal; font-size: 0.78rem;
  color: var(--text-muted); position: static;
}
.pres-tiers tbody th { font-weight: 700; white-space: nowrap; width: 8em; }
.pres-tiers tr:last-child th { border-bottom: none; }
.pres-tiers tr:last-child td { border-bottom: none; }
.pres-cta { text-align: center; padding: var(--s6, 2rem) var(--s5); }
.pres-cta p { color: var(--text-muted); margin: 0 0 var(--s4); font-size: 0.9rem; }
.pres-footer {
  text-align: center; padding: var(--s5); font-size: 0.78rem; color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.pres-footer a { color: var(--text-muted); }
.pres-footer a:hover { color: var(--accent); }
@media (max-width: 720px) {
.pres-features { grid-template-columns: 1fr; }
/* Les deux actions restent visibles (P.2 : atteignables sans défiler même
     à 390 px) — seul le libellé se resserre pour tenir à côté du bouton. */
.pres-header { padding: var(--s3) var(--s4); }
.pres-actions { gap: var(--s2); }
.pres-brand strong { display: none; }
.pres-tiers { overflow-x: auto; }
}