/* ============================================================
   legal.css — pages de contenu texte (confidentialité, mentions).
   Chargé uniquement par ces pages.
   ============================================================ */

.prose {
  max-width: 72ch;
  padding-block: clamp(56px, 8vw, 92px);
}

.prose h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 14px;
}

.prose .updated {
  margin: 0 0 clamp(36px, 5vw, 56px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.prose h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-variation-settings: "wdth" 112;
  margin: clamp(38px, 5vw, 54px) 0 14px;
  padding-top: clamp(38px, 5vw, 54px);
  border-top: 1px solid var(--line);
}

.prose h2:first-of-type { border-top: 0; padding-top: 0; }

.prose h3 {
  font-size: 1rem;
  font-variation-settings: "wdth" 110;
  margin: 26px 0 8px;
}

.prose p,
.prose li { color: var(--text-2); }

.prose p { margin: 0 0 15px; }

.prose ul,
.prose ol { margin: 0 0 15px; padding-left: 20px; }

.prose li { margin-bottom: 8px; }

.prose a { color: var(--amber); }

.prose dl {
  margin: 0 0 15px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 22px;
}

.prose dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}

.prose dd { margin: 0; color: var(--text-2); }

@media (width <= 560px) {
  .prose dl { grid-template-columns: 1fr; gap: 2px 0; }
  .prose dd { margin-bottom: 14px; }
}

/* Encart d'avertissement pour les mentions à compléter */
.todo {
  margin: 0 0 28px;
  padding: 16px 20px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-3);
}

/* ---------- page 404 ----------
   Pas d'attribut style="" dans le HTML : la CSP (style-src 'self') les bloque. */
.not-found { text-align: center; }

.not-found .hero-logo {
  width: min(420px, 80vw);
  margin-inline: auto;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}