/* ═══ LES PAGES LÉGALES — mentions légales et politique de confidentialité ═══
   *(créée le 19 septembre 2026.)*

   ⚠️⚠️ CES RÈGLES ÉTAIENT ÉCRITES DEUX FOIS, EN LIGNE, DANS LES DEUX GABARITS. Mesuré avant ce
   lot : 716 octets de CSS, **identiques à l'octet près**, dans un bloc `<style>` de chaque page.
   Deux copies de la même règle divergent au premier ajustement — et celle qu'on oublie est celle
   qu'on ne regarde jamais, ce qui est exactement le cas d'une page légale. Elles vivent donc ici,
   dans une feuille que les deux chargent.

   ⚠️ ET UN BLOC `<style>` EN LIGNE A UN SECOND COÛT, INVISIBLE : les balayages de classes mortes
   de ce dépôt lisent les feuilles et les gabarits séparément. Un lot précédent a failli supprimer
   des règles de ces pages-là parce qu'il n'avait pas lu leurs `<style>`. Ce qui est dans un
   fichier se balaie ; ce qui est en ligne se contourne.

   ⚠️ SUPPRIMÉES LE MÊME JOUR : `legal_notices.css` et `privacy.css` existaient — 28 classes
   chacune — et **aucun gabarit ne les chargeait**, donc aucune de leurs règles ne s'est jamais
   appliquée. `common.css` (17 classes) et `services.css` (20) étaient dans le même cas et sont
   parties avec. Une feuille que personne ne charge n'est pas une réserve, c'est un piège : elle
   se lit comme la source du style d'une page, et on la modifie sans effet.

   ⚠️ PAS DE `padding-top` DE HERO : `components.css` le pose sur `main > section:first-of-type`,
   plus spécifique. Le `180px` que les deux blocs en ligne écrivaient était la troisième copie de
   cette valeur. */

.legal-page {
    padding-bottom: 100px;
}

.legal-contenu {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 20px;
    background: rgba(15, 22, 41, 0.4);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.legal-contenu h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 2.5rem);
}

/* La date de dernière mise à jour est une information LÉGALE, pas une coquetterie : elle dit au
   lecteur quelle version il lit, et c'est ce qu'on lui demandera s'il conteste un traitement. */
.legal-maj {
    margin: 0 0 40px;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.legal-contenu h2 {
    margin: 36px 0 15px;
    font-size: 1.35rem;
    color: var(--accent-blue);
}

.legal-contenu p,
.legal-contenu ul {
    margin-bottom: 20px;
    color: var(--text-secondary);
    line-height: 1.75;
}

.legal-contenu ul {
    padding-left: 20px;
    list-style: disc;
}

.legal-contenu li {
    margin-bottom: 8px;
}

.legal-contenu strong {
    color: var(--text-primary);
}

.legal-contenu a {
    color: var(--accent-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-contenu a:hover {
    color: var(--accent-green);
}

/* ⚠️ `overflow-wrap` PARCE QU'UNE PAGE LÉGALE PORTE DES CHAÎNES QUI NE SE COUPENT PAS : une
   adresse e-mail, un numéro SIRET, une référence de règlement. Sur un téléphone, une seule de ces
   chaînes élargit le bloc et donne un défilement horizontal à toute la page. */
.legal-contenu {
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    .legal-contenu {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .legal-page {
        padding-bottom: 60px;
    }
}