/* Feuille du site vitrine. Les VALEURS viennent de tokens.css, généré depuis
   src/theme/ — on ne réécrit ici que de la mise en page.
   ⚠️ Aucune couleur ni taille en dur : toute valeur littérale ajoutée ici
   échapperait au garde-fou de divergence (siteTokens.test.ts). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
}
a { color: var(--accent); }

/* ⚠️ Le conteneur est PLAFONNÉ : étirée sur 1400 px, une carte ne ressemble plus
   à l'app. C'est le trait le plus reconnaissable, il ne survit pas à l'étirement. */
.wrap { max-width: 1100px; margin: 0 auto; padding: var(--s-xl) var(--s-lg); }

/* Cartes : très arrondies, SANS bordure, beaucoup d'espace — comme dans l'app. */
.card {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-xxxl);
  margin-bottom: var(--s-xl);
}
.center { text-align: center; }

h1 { font-size: var(--t-screenTitle); line-height: 1.2; margin: 0 0 var(--s-md); }
h2 { font-size: var(--t-sectionTitle); margin: 0 0 var(--s-md); }
p  { margin: 0 0 var(--s-md); }
.muted { color: var(--text-2); }
.hint  { color: var(--text-3); font-size: var(--t-caption); }

.lead { font-size: var(--t-sectionTitle); color: var(--text-2); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: var(--s-md) var(--s-xxl);
  border-radius: var(--r-md);
  margin: var(--s-lg) 0;
}
.btn:active { background: var(--accent-press); }

.badge {
  width: 84px; height: 84px; line-height: 84px;
  margin: 0 auto var(--s-lg);
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--t-scoreDisplay);
}

/* En-tête « verre ». ⚠️ Repli en couleur pleine : sans lui, une barre
   translucide devient illisible là où backdrop-filter n'est pas suivi. */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-elev);
  padding: var(--s-md) var(--s-lg);
  display: flex; align-items: center; justify-content: space-between;
}
@supports (backdrop-filter: blur(1px)) {
  .bar { background: var(--surface-2); backdrop-filter: blur(18px) saturate(140%); }
}
.bar .name { font-weight: 700; }
.bar a { color: var(--text-2); text-decoration: none; font-size: var(--t-caption); margin-left: var(--s-lg); }

.grid { display: grid; gap: var(--s-lg); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid { grid-template-columns: 1fr 1fr; } }

/* Emplacements réservés — captures, badges de stores, adresse postale. */
.slot {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--s-xxxl) var(--s-lg);
  text-align: center;
  color: var(--text-3);
  font-size: var(--t-caption);
}

footer { color: var(--text-3); font-size: var(--t-caption); padding: var(--s-xxxl) var(--s-lg); text-align: center; }
footer a { color: var(--text-2); margin: 0 var(--s-sm); }

.reset { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--s-lg); }
.reset .card { max-width: 480px; }