/* ============================================================
   website/legal.css — pages légales et écrans de la newsletter
   Refonte du 25/09/2026 : le haut de page compact du site (titre à gauche,
   même bord que le menu), le texte sur une colonne de lecture, et à gauche
   un sommaire qui suit la section lue. site.js le construit depuis les
   titres des blocs : le texte juridique n'est pas retouché.
   ============================================================ */

.legal-hero {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(40px, 9vh, 96px) 28px 24px;
}
.legal-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--t4);
    margin-bottom: 14px;
}
.legal-hero h1 {
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.02;
    letter-spacing: -.045em;
    max-width: 900px;
}
.legal-date { font-size: 14px; color: var(--t4); margin-top: 14px; }

.legal-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 28px 72px;
}
.legal-section.avec-sommaire {
    display: grid;
    grid-template-columns: 240px minmax(0, 720px);
    gap: 64px;
}
.legal-container { max-width: 720px; }

/* Le sommaire : il suit la section lue. */
.legal-toc {
    position: sticky;
    top: calc(var(--barre) + 28px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1.4;
}
.legal-toc a { padding: 6px 0; color: var(--t4); transition: color .2s ease; }
.legal-toc a:hover, .legal-toc a.on { color: var(--noir); }
.legal-toc a.on { font-weight: 600; }

.legal-block { scroll-margin-top: calc(var(--barre) + 20px); }
.legal-block + .legal-block { margin-top: 40px; }
.legal-block h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 12px; scroll-margin-top: calc(var(--barre) + 20px); }
.legal-block h3 { font-size: 17px; margin: 22px 0 8px; }
.legal-block p, .legal-block li { font-size: 15.5px; line-height: 1.7; color: var(--t2); }
.legal-block p + p { margin-top: 12px; }
.legal-block ul, .legal-block ol { margin: 10px 0 0 20px; }
.legal-block li + li { margin-top: 6px; }
.legal-block strong { color: var(--noir); font-weight: 600; }
/* `<em>` reste droit : l'italique est bannie du site. */
.legal-block em { font-style: normal; }
.legal-block a { color: var(--vert-encre); text-decoration: underline; text-decoration-color: rgba(0, 122, 82, .35); text-underline-offset: 3px; }
.legal-block a:hover { text-decoration-color: var(--vert-encre); }
/* Au doigt, les liens du texte juridique (e-mail de contact, renvois) passent
   de 19 px à 33 px de haut, sans bouger une ligne : le remplissage vertical
   d'un lien en ligne n'entre pas dans la hauteur de ligne. */
@media (pointer: coarse) {
    .legal-block a { padding: 7px 0; }
}

.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 14px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.legal-table th { font-weight: 600; color: var(--noir); border-bottom-color: rgba(0, 0, 0, .14); }
.legal-table td { color: var(--t2); }

.legal-updated { font-size: 13.5px; color: var(--t4); margin-top: 48px; }

/* ── Les écrans de la newsletter (confirmation, désabonnement) ── */
.legal-status { max-width: 620px; }
.legal-status-text { font-size: 19px; line-height: 1.55; color: var(--noir); }
.legal-status-note { font-size: 15px; line-height: 1.6; color: var(--t2); margin-top: 12px; }
.legal-status-actions { margin-top: 26px; }
.legal-status-btn {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--vert-bouton);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease;
}
.legal-status-btn:hover { background: var(--vert-bouton-survol); }
.legal-status-alt { font-size: 15px; color: var(--t4); margin-top: 18px; }
.legal-status-alt a { color: var(--vert-encre); text-decoration: underline; text-underline-offset: 3px; }

/* Au téléphone, le sommaire se replie : vingt et une entrées occupaient un
   écran entier avant la première ligne des CGU. */
.legal-toc-m { display: none; }
@media (max-width: 900px) {
    /* `minmax(0, 1fr)` et non `1fr` : la colonne prenait la largeur minimale
       de son contenu, et l'adresse d'API Google en `<code>` de la politique de
       confidentialité (372 px d'un bloc) élargissait la page à 405 px sur un
       écran de 360. Les adresses et e-mails se coupent au besoin. */
    .legal-section.avec-sommaire { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .legal-block code, .legal-block a { overflow-wrap: anywhere; }
    .legal-toc { display: none; }
    .legal-toc-m { display: block; margin-bottom: 28px; border-radius: 14px; background: var(--doux); }
    .legal-toc-m summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 14px 16px; font-size: 15px; font-weight: 600; }
    .legal-toc-m summary::-webkit-details-marker { display: none; }
    .legal-toc-m summary::after { content: "+"; color: var(--t4); font-weight: 400; font-size: 20px; line-height: 1; }
    .legal-toc-m[open] summary::after { content: "\2212"; }
    .legal-toc-m a { display: block; padding: 11px 16px; font-size: 14.5px; color: var(--t2); }
}