/* ==========================================================================
   legal.css — pages documentaires (mentions légales, confidentialité,
   accessibilité, plan du site, 404). Direction 2A : lecture confortable,
   alignée à gauche, titres hiérarchisés, aucun pavé centré ni carte marketing.
   Variables sémantiques uniquement.
   ========================================================================== */

/* --- En-tête de page documentaire --------------------------------------- */
.doc-hero { background: var(--surface-2); padding-block: var(--space-7) var(--space-6); }
.doc-hero__title { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem); line-height: 1.12; max-width: 24ch; margin-block: var(--space-1); }
.doc-hero__lead { color: var(--muted); max-width: var(--max-text); }
.doc-updated { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--faint); margin-top: var(--space-3); }

/* --- Corps du document --------------------------------------------------- */
.doc { padding-block: var(--space-7); }
.doc__layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 899.98px) { .doc__layout { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Sommaire interne */
.doc-toc {
  position: sticky; top: var(--space-5);
  border-left: var(--bw-strong) solid var(--border);
  padding-left: var(--space-4);
}
@media (max-width: 899.98px) {
  .doc-toc { position: static; border-left: 0; border: var(--bw) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); background: var(--surface); }
}
.doc-toc__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--space-3); }
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.doc-toc a { color: var(--muted); text-decoration: none; font-size: var(--fs-small); }
.doc-toc a:hover { color: var(--primary); text-decoration: underline; }
.doc-toc a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Contenu rédactionnel */
.doc-body { max-width: var(--max-text); min-width: 0; }
.doc-section { padding-top: var(--space-6); scroll-margin-top: 5rem; }
.doc-section:first-child { padding-top: 0; }
.doc-section > h2 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.doc-section h3 { font-size: var(--fs-body); font-weight: 700; margin-top: var(--space-4); margin-bottom: var(--space-2); }
.doc-section p { color: var(--text); margin-bottom: var(--space-3); line-height: var(--lh-body); }
.doc-section p.text-muted { color: var(--muted); }
.doc-section ul { margin: 0 0 var(--space-4); padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.doc-section li { line-height: var(--lh-body); }
.doc-section a { font-weight: 600; }
.doc-note { font-size: var(--fs-small); color: var(--muted); border-left: 3px solid var(--border-strong); padding: var(--space-2) 0 var(--space-2) var(--space-4); margin-bottom: var(--space-4); }

/* Bloc de coordonnées (éditeur, hébergeur) */
.doc-contactcard { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); font-style: normal; }
.doc-contactcard dt { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--faint); }
.doc-contactcard dd { margin: 0 0 var(--space-2); }

/* --- Plan du site -------------------------------------------------------- */
.sitemap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--max-text); }
.sitemap-list li { border-bottom: var(--bw) solid var(--border); padding-block: var(--space-3); }
.sitemap-list a { font-size: var(--fs-lead); font-weight: 600; text-decoration: none; }
.sitemap-list a:hover { text-decoration: underline; }
.sitemap-list p { color: var(--muted); font-size: var(--fs-small); margin-top: var(--space-1); }

/* --- Page 404 ------------------------------------------------------------ */
.notfound { padding-block: var(--space-9); }
.notfound__inner { max-width: 46rem; display: flex; flex-direction: column; gap: var(--space-4); }
.notfound__code { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: 0.1em; color: var(--faint); }
.notfound__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.1; }
.notfound__intro { color: var(--muted); font-size: var(--fs-lead); max-width: 52ch; }
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }