/* Pages du site public : accueil et mentions.
   Uniquement du gabarit — toute couleur, taille et durée vient des tokens. */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-4);
  padding: var(--ds-space-8) var(--ds-space-6);
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-font-sm);
}

.site-shell {
  max-width: var(--ds-layout-content);
  margin: auto;
  padding: var(--ds-space-8) var(--ds-space-6) var(--ds-space-12);
  display: grid;
  gap: var(--ds-space-12);
}

.site-hero { display: grid; gap: var(--ds-space-5); max-width: var(--ds-layout-reading); }
.site-hero h1 { font-size: var(--ds-font-h1); letter-spacing: -1.8px; line-height: var(--ds-line-tight); }
.site-hero p { color: var(--ds-muted); line-height: var(--ds-line-body); }
.site-hero .bb-row { margin-top: var(--ds-space-2); }

.site-section { display: grid; gap: var(--ds-space-5); }
.site-section > h2 { font-size: var(--ds-font-h3); }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ds-space-5); }

.site-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-space-5); }
.site-steps article { border-top: 1px solid var(--ds-line); padding-top: var(--ds-space-4); display: grid; gap: var(--ds-space-2); }
.site-steps span { font-family: var(--ds-font-mono); font-size: var(--ds-font-xs); color: var(--ds-accent); }
.site-steps h3 { font-size: var(--ds-font-title); }
.site-steps p { font-size: var(--ds-font-sm); color: var(--ds-muted); line-height: var(--ds-line-body); }

.site-prose { max-width: var(--ds-layout-reading); display: grid; gap: var(--ds-space-5); }
.site-prose h1 { font-size: var(--ds-font-h2); letter-spacing: -1px; }
.site-prose h2 { font-size: var(--ds-font-title); margin-top: var(--ds-space-4); }
.site-prose p, .site-prose li { color: var(--ds-secondary); line-height: var(--ds-line-body); font-size: var(--ds-font-body); }
.site-prose ul { display: grid; gap: var(--ds-space-2); padding-left: var(--ds-space-5); }

@media (max-width: 700px) {
  .site-shell { padding: var(--ds-space-6) var(--ds-space-4) var(--ds-space-10); gap: var(--ds-space-10); }
  .site-hero h1 { font-size: var(--ds-font-h2); letter-spacing: -1px; }
}

/* Page 500 : autonome, sans contexte de gabarit. */
.site-erreur { max-width: 520px; margin: 12vh auto; }

/* Liste de contrôle avant mise en ligne. Un point non fait ne se signale pas
   par la couleur seule : il porte son libellé et son icône. */
.site-checklist { display: grid; gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.site-checklist li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--ds-space-3);
  align-items: start; color: var(--ds-muted);
}
.site-checklist li[data-done="true"] { color: var(--ds-text); }
.site-checklist li[data-done="true"] .bb-icon { color: var(--ds-success); }
.site-checklist strong { display: block; font-size: var(--ds-font-body); }
.site-checklist small { display: block; font-size: var(--ds-font-sm); color: var(--ds-muted); }