/* Mentions legales — bande unique au fond cerulean.

   Toutes les valeurs sont relevees sur la prod, fichier assets/css/styles.css,
   regles `.mentions__legales` (lignes 2419 a 2462). La prod compose en rem sur
   un `html { font-size: 62.5% }` : 1.6rem = 16px, 1.4rem = 14px, 4.2rem = 42px,
   3rem = 30px. Les valeurs sont reprises ici en pixels, a l'identique.

   Un ecart assume avec la prod : elle laisse le texte occuper toute la largeur
   de l'ecran avec 60px de gouttiere, la convention du millesime centre chaque
   bande sur 1200px. Sur un ecran de 1440 la ligne passe de 1320 a 1200px —
   c'est aussi ce que font les autres pages de 2026 (cf. pages/documentation.css). */

.exo-mentions {
    background: var(--exo-cerulean);
    color: var(--exo-blanc);
}

.exo-mentions__inner {
    /* La prod ne pose aucun max-width : la bande suit la fenetre, avec 120px
       de gouttiere comme toutes les bandes de contenu. */
    padding: 60px 120px;
}

.exo-mentions__corps {
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 400;
    /* La prod fixe `line-height: normal` ; base.css met le corps du site a 1.5.
       Sans ce rappel, les 49 paragraphes seraient nettement plus aeres qu'en prod. */
    line-height: normal;
}

/* La prod separe ses blocs de 20px avec un `gap` de flex. La marge fait le meme
   travail et, elle, survit au `<div class="editable-wrap">` que le socle
   interpose autour du bloc quand un admin est connecte : le gap ne s'appliquerait
   plus qu'a ce seul enfant. D'ou les deux selecteurs, visiteur et admin. */
.exo-mentions__corps > *,
.exo-mentions__corps > .editable-wrap > * {
    margin: 0 0 20px;
}

.exo-mentions__corps > :last-child,
.exo-mentions__corps > .editable-wrap > :last-child {
    margin-bottom: 0;
}

/* Le titre du bloc. La prod le pose en `<h2>` sur une page qui n'a aucun titre
   de niveau 1 ; le bloc migre le pose en `<h1>`. Les deux sont traites pareil,
   pour que le client puisse changer de niveau depuis TinyMCE sans casser le rendu. */
.exo-mentions__corps h1,
.exo-mentions__corps h2 {
    color: var(--exo-jaune);
    font-size: 42px;
    font-weight: 400;
    line-height: normal;
}

/* Les intertitres numerotes de la prod (« 1. Informations d'ordre general »)
   sont de simples `<p><strong>` : rien a styler. Ces niveaux ne servent que si
   le client passe un jour par les formats de titre de TinyMCE. */
.exo-mentions__corps h3,
.exo-mentions__corps h4,
.exo-mentions__corps h5,
.exo-mentions__corps h6 {
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
}

/* ----- Tableaux de cookies ------------------------------------------------- */

.exo-mentions__corps table {
    width: 100%;
    border-collapse: collapse;
    /* La prod fixe ses quatre colonnes a 24,9822% chacune via un `<colgroup>`
       en style en ligne, que la CSP interdit ici. `fixed` les repartit a
       egalite sans attribut, et resiste a l'ajout d'une colonne. */
    table-layout: fixed;
    font-size: 14px;
}

/* La prod n'utilise que des `<td>`, y compris sur sa ligne d'en-tete : les deux
   selecteurs sont la pour le jour ou le client passera la ligne en `<th>`. */
.exo-mentions__corps td,
.exo-mentions__corps th {
    padding: 10px;
    border: 1px solid var(--exo-blanc);
    text-align: left;
}

/* ----- Listes -------------------------------------------------------------- */

/* Le reset global retire les puces (`ul, ol { list-style: none }` dans
   base.css), exactement comme la prod : les items sont seulement decales. */
.exo-mentions__corps ul,
.exo-mentions__corps ol {
    padding-left: 20px;
}

.exo-mentions__corps li {
    margin-bottom: 8px;
}

/* ----- Liens ---------------------------------------------------------------- */

/* La prod n'a aucun lien dans ce texte, donc aucune regle. base.css retire la
   couleur et le soulignement de tous les liens : sans ce rappel, un lien ajoute
   plus tard par le client serait indiscernable du texte sur le fond cerulean. */
.exo-mentions__corps a {
    color: inherit;
    text-decoration: underline;
}

/* ----- Adaptations ----------------------------------------------------------- */

/* Point de rupture et valeurs de la prod (@media (max-width: 1050px)). */
@media screen and (max-width: 1050px) {
    .exo-mentions__inner {
        padding: 40px 20px;
    }

    .exo-mentions__corps {
        font-size: 14px;
    }

    .exo-mentions__corps h1,
    .exo-mentions__corps h2 {
        font-size: 30px;
    }
}

/* Les deux tableaux ont quatre colonnes de texte : en dessous de 700px ils ne
   tiennent plus dans la bande. La prod pose `overflow-x: auto` sur le `<table>`,
   ce qui ne produit rien sur une boite de type table ; il faut la passer en bloc
   pour que le debordement devienne defilable. */
@media screen and (max-width: 700px) {
    .exo-mentions__corps table {
        display: block;
        width: auto;
        overflow-x: auto;
    }
}