/* Vitrine publique + pages légales (Task 12) — feuille autonome, aucune ressource
   externe : c'est la première page qu'ouvre un reviewer TikTok, le CSP du cluster et
   la revue n'aiment ni CDN ni police distante. Une seule couleur d'action
   (--action) : jamais un second point chaud sur cette page.

   Couleurs, rayons, espacements ET TAILLES DE TEXTE viennent de `tokens.css`
   (chargée avant celle-ci par `site/_layout.html`), plus recopiés ici : les trois
   exemplaires de la palette divergeaient déjà. Les tailles ont suivi le 29/07 : la
   décision « l'échelle typographique est ramenée sur ses valeurs documentées » ne
   restreignait sa portée à aucune surface, mais n'avait été appliquée qu'au
   dashboard — cette feuille gardait 14 / 17 / 18 / 26 px et un hero en
   `clamp(32px, 4.2vw, 52px)`, aucune de ces valeurs n'étant dans l'échelle
   11/12/13/15/19/24/30/48/84.

   Ce qui reste propre à cette feuille, ce sont les FAMILLES : la vitrine ne charge
   aucune police. Une page qui ne demande RIEN au réseau est plus rapide qu'une page
   qui télécharge 68 ko de Geist, et c'est la première impression du produit —
   fusionner avec le châssis imposerait l'un des deux dommages (Geist sur la page la
   plus exposée, ou plus de Geist dans l'app). Deux surfaces, une échelle et une
   palette, deux piles typographiques. */
:root {
  --display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body.site {
  margin: 0; background: var(--paper); color: var(--ink);
  font: var(--fs-md)/1.6 var(--body);
}
.site-main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; }

/* En-tête : jamais de largeur fixe sur les libellés, le français est plus long
   (docs/DESIGN.md, section Langues). */
.site-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; max-width: 1180px; margin: 0 auto; padding: 20px 24px;
}
.site-brand {
  font-weight: 800; font-size: var(--fs-lg); text-decoration: none; color: var(--ink);
}
.site-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--gray-1); font-size: var(--fs-sm); font-weight: 500; }
.site-nav a:hover { color: var(--ink); }
.site-nav-cta {
  padding: 7px 16px; border-radius: var(--r-sm); border: 1px solid var(--gray-3);
  color: var(--ink) !important;
}
.site-nav-cta:hover { border-color: var(--ink-3); }

/* Hero asymétrique : jamais de centré-partout (docs/DESIGN.md, Layout). La
   colonne de texte domine, le panneau décoratif de calendrier est secondaire —
   un rappel visuel du produit, pas une illustration importée. */
.hero {
  display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center;
  padding: 56px 0 72px;
}
.eyebrow {
  margin: 0 0 12px; color: var(--action-ink); font-weight: 700; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .08em;
}
.hero h1 { font-size: clamp(var(--fs-2xl), 4.2vw, var(--fs-3xl)); line-height: 1.12; margin: 0 0 20px; font-weight: 800; }
.hero-sub { font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-3); margin: 0 0 28px; max-width: 46rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 14px; }
.hero-note { color: var(--gray-1); font-size: var(--fs-sm); margin: 0; }

.btn-cta {
  display: inline-block; background: var(--action); color: var(--action-contrast);
  font-weight: 700; font-size: var(--fs-md); text-decoration: none; padding: 12px 22px;
  border-radius: var(--r-sm); white-space: nowrap;
  transition: background 140ms ease-out;
}
/* `--action-hover` et non `--action-ink` : depuis que l'encre posée sur l'orange est
   sombre (`--action-contrast`, tokens.css), l'orange foncé du survol ne tenait plus
   que 3,8:1 sous ce libellé de 15 px gras — le survol assombrissait aussi le texte. */
.btn-cta:hover { background: var(--action-hover); }
.btn-quiet {
  color: var(--ink-3); font-weight: 600; font-size: var(--fs-md); text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid var(--gray-3);
}
.btn-quiet:hover { color: var(--ink); border-color: var(--ink-3); }

/* Panneau décoratif : une évocation du calendrier, dessinée en CSS — pas une image
   importée, cohérent avec « aucune dépendance externe ». */
.hero-panel { display: flex; justify-content: center; }
.panel-card {
  width: 100%; max-width: 320px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
.panel-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; font-size: var(--fs-xs); color: var(--gray-1); }
.panel-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.dot-pub { background: var(--pub); } .dot-sched { background: var(--sched); } .dot-draft { background: var(--draft); }
.panel-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.panel-cell { aspect-ratio: 1; border-radius: 3px; background: var(--surface); }
.panel-cell.filled { background: var(--sched); }
.panel-cell.filled.s2, .panel-cell.filled.s18 { background: var(--pub); }
.panel-cell.filled.s24 { background: var(--draft); }

/* Corps : sections empilées, densité confortable (docs/DESIGN.md, Spacing). */
.features, .who, .cta-band { padding: 40px 0; border-top: 1px solid var(--line); }
.features h2, .who h2, .cta-band h2 { font-size: var(--fs-xl); margin: 0 0 20px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.feature-grid h3 { font-size: var(--fs-lg); margin: 0 0 8px; }
.feature-grid p { margin: 0; color: var(--ink-3); line-height: 1.55; }
.who p { max-width: 46rem; color: var(--ink-3); font-size: var(--fs-lg); line-height: 1.6; }
.cta-band {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.cta-band h2 { max-width: 32rem; }

.site-footer {
  border-top: 1px solid var(--line); margin-top: 24px; padding: 24px; color: var(--gray-1);
  font-size: var(--fs-sm); max-width: 1180px; margin-left: auto; margin-right: auto;
}
.site-footer p { margin: 0 0 8px; }
.site-footer a { color: var(--gray-1); }
.site-footer a:hover { color: var(--ink); }
.site-footer-links a { margin-right: 14px; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-panel { order: -1; max-width: 380px; margin: 0 auto 8px; }
}

/* Pages légales (terms/privacy) : colonne de lecture, jamais de largeur fixe sur un
   élément porteur de texte — seule la largeur de LECTURE (max-width) est bornée,
   pour le confort, pas la taille d'un mot ou d'un bouton. */
.legal { max-width: 46rem; margin: 0 auto; padding: 48px 0 80px; }
.legal h1 { font-size: var(--fs-2xl); line-height: 1.25; margin: 0 0 8px; }
.legal-date { color: var(--gray-1); font-size: var(--fs-sm); margin: 0 0 32px; }
.legal h2 { font-size: var(--fs-lg); margin: 36px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal a { color: var(--action-ink); }
.legal ul { padding-left: 22px; }
.legal table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: var(--fs-md); }
.legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--surface); }