/* =========================================================================
   legal.css — Pages légales publiques (privacy, terms), rendues par
   partials/legal-page.php. Un document se lit, il ne se parcourt pas :
   colonne étroite, interlignage généreux, hiérarchie sobre.
   Tokens uniquement (white-label), light + dark.
   ========================================================================= */

.legal {
    max-width: 760px;          /* ~75 caractères par ligne : au-delà, l'œil perd la ligne suivante */
    margin: 0 auto;
    padding: 8px var(--gutter, 20px) 56px;
}

.legal__hero {
    padding: 8px 0 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}
.legal__title {
    font-family: var(--display);
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 6px 0 12px;
    color: var(--ink);
}
.legal__intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.85;
    margin: 0;
    max-width: 62ch;
}
/* Date dérivée du mtime du fragment i18n (cf. legal-page.php) : discrète, mais présente —
   un document légal sans date de version n'est pas opposable. */
.legal__updated {
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink-60);
}

.legal__section { padding: 24px 0 0; }
.legal__h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--ink);
}
.legal__p {
    font-size: 14.5px;
    line-height: 1.7;   /* lecture longue : plus aéré que le reste du produit */
    color: var(--ink);
    opacity: 0.88;
    margin: 0;
    max-width: 68ch;
}

/* Bloc contact : détaché du corps par une carte discrète — c'est une SORTIE (où écrire), pas une
   clause de plus. Fond dérivé du token de marque, jamais un gris figé. */
.legal__section--contact {
    margin-top: 32px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in oklch, var(--brand-primary) 5%, var(--surface));
}
.legal__section--contact .legal__h2 { margin-top: 0; }

.legal__back { margin-top: 36px; }

@media (max-width: 480px) {
    .legal { padding-bottom: 40px; }
    .legal__section { padding-top: 20px; }
}