/* 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); }

/* Mur des sponsors : ce que la marque a acheté, visible sans clic. */
.bb-mur {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 4; display: grid; gap: var(--ds-space-2); justify-items: center;
  max-width: min(560px, 84vw); pointer-events: none;
}
.bb-mur__titre {
  font: 600 8px/1 var(--ds-font-mono, ui-monospace, monospace);
  letter-spacing: .18em; color: var(--ds-muted);
}
.bb-mur__liste {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2);
  margin: 0; padding: 0; list-style: none;
}
.bb-mur__item a, .bb-mur__item span {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--ds-radius-sm, 8px);
  background: rgba(4, 16, 26, .66);
  box-shadow: inset 0 0 0 1px var(--ds-line-cyan, rgba(100, 230, 245, .18));
  color: var(--ds-text); text-decoration: none;
}
.bb-mur__item img { max-height: 18px; width: auto; }
.bb-mur__item b {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px;
  background: rgba(100, 230, 245, .12); color: var(--ds-cyan, #64e6f5);
  font: 700 9px/1 var(--ds-font-mono, monospace);
}
.bb-mur__item em { font-style: normal; font-size: var(--ds-font-xs, 11px); letter-spacing: .04em; }
.bb-marker__logo { max-width: 26px; max-height: 18px; object-fit: contain; }

@media (max-width: 900px) { .bb-mur { bottom: 132px; } .bb-mur__titre { display: none; } }

/* Fil d'Ariane des pages éditoriales. */
.site-breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-5); padding: 0; list-style: none;
  font-size: var(--ds-font-xs); color: var(--ds-muted);
}
.site-breadcrumb a { color: var(--ds-muted); text-decoration: none; }
.site-breadcrumb a:hover { color: var(--ds-text); text-decoration: underline; text-underline-offset: 3px; }