/* Mentions legales & politique des cookies : une section de texte sur fond
   blanc, dans le retrait de 180 px de la charte (`.sy-section`), suivie de
   l'encart « mesure d'audience » (plus bas dans ce fichier).

   La maquette Figma n'a pas de page dediee : la page suit la typographie des
   pages de contenu (titre bleu nuit 32, intertitres 24, corps 16 DIN Pro) et
   les deux tableaux de cookies prennent la trame bleu clair des tableaux du
   site. */

.sy-mentions {
    color: var(--sy-nuit);
}

/* Le bloc separe ses paragraphes de 10 px. La marge, elle, survit au
   `<div class="editable-wrap">` que le socle interpose autour du bloc quand un
   admin est connecte : d'ou les deux selecteurs, visiteur et admin. */
.sy-mentions__corps > *,
.sy-mentions__corps > .editable-wrap > * {
    margin: 0 0 10px;
}

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

/* Le titre du bloc. Le legacy le pose en `<h2>` sur une page qui n'a aucun titre
   de niveau 1 ; les deux niveaux sont traites pareil, pour que le client puisse
   changer de niveau depuis TinyMCE sans casser le rendu. */
.sy-mentions__corps h1,
.sy-mentions__corps h2 {
    margin-bottom: 20px;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    color: var(--sy-minuit);
}

/* Les intertitres (« 1. Informations d'ordre general ») sont des `<h3>` dans le
   legacy : bleu clair 24, comme les intertitres des pages de contenu. */
.sy-mentions__corps h3 {
    margin-top: 30px;
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: normal;
    color: var(--sy-bleu);
}

.sy-mentions__corps h4,
.sy-mentions__corps h5,
.sy-mentions__corps h6 {
    margin-top: 20px;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: normal;
}

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

.sy-mentions__corps table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    /* Le legacy 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;
}

/* Le legacy n'utilise que des `<td>`, y compris sur sa ligne d'en-tete : la
   premiere ligne est mise en avant par sa position, pas par sa balise. */
.sy-mentions__corps td,
.sy-mentions__corps th {
    padding: 10px;
    border: 1px solid var(--sy-bleu-20);
    text-align: left;
    vertical-align: top;
}

.sy-mentions__corps tr:first-child td,
.sy-mentions__corps th {
    background: var(--sy-bleu-20);
    font-weight: 700;
    color: var(--sy-minuit);
}

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

.sy-mentions__corps ul,
.sy-mentions__corps ol {
    padding-left: 20px;
}

.sy-mentions__corps ul {
    list-style: disc;
}

.sy-mentions__corps ol {
    list-style: decimal;
}

.sy-mentions__corps li {
    margin-bottom: 6px;
}

/* ----- Encart « mesure d'audience » ---------------------------------------- */

/* Information sur la mesure Matomo et lien de refus, en bas des mentions
   legales (cf. src/View/templates/public/mentions_legales.php). C'est un bloc a
   part entiere et non un element de `.sy-mentions` : son contenu ne vient pas
   du meme bloc TinyMCE, et il garde son cadre meme quand le corps de la page
   n'est pas encore rempli.

   Le cadre reprend la charte SANS couleur nouvelle : le beige des pastilles de
   menu en fond, l'Innovative Orange en lisere et sur le lien d'action, le dark
   silver pour le texte. Le lisere est pose en `border-inline-start` et non en
   `border-left` : en arabe ou en hebreu il passe alors tout seul a droite, du
   cote ou commence la lecture. */
.sy-audience {
    margin-top: 32px;
    padding: 20px 24px;
    border-inline-start: 4px solid var(--sy-orange);
    border-radius: 0 16px 16px 0;
    background: var(--sy-beige);
    color: var(--sy-gris-fonce);
}

/* Le rayon suit lui aussi le sens de lecture : en RTL, le bord droit devient
   celui du lisere, c'est donc la gauche qui s'arrondit. */
[dir="rtl"] .sy-audience {
    border-radius: 16px 0 0 16px;
}

/* Un cran en dessous du titre du corps (32 capitales) : l'encart est une
   annexe, il ne doit pas concurrencer le titre de la page. */
.sy-audience__titre {
    margin-bottom: 12px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-titre);
    color: var(--sy-gris-fonce);
}

/* Un paragraphe de droit long a lire : un interligne plus aere que le corps du
   site, qui tient ses `p` a 1.12. L'interligne doit etre pose sur les ENFANTS :
   `syensqo-public.css` cible `p, li, td, span, a, strong` directement, et une
   valeur heritee perd toujours contre une declaration directe. Les deux
   selecteurs encaissent le `<div class="editable-wrap">` que le socle interpose
   autour du bloc quand un admin est connecte. */
.sy-audience__texte {
    font-size: 16px;
}

.sy-audience__texte > *,
.sy-audience__texte > .editable-wrap > * {
    margin: 0 0 10px;
    line-height: 1.5;
}

.sy-audience__texte > :last-child,
.sy-audience__texte > .editable-wrap > :last-child {
    margin-bottom: 0;
}

/* Le refus se lit comme une action, pas comme une mention : orange, gras,
   souligne (RGAA 10.6 - la couleur seule ne suffit pas a signaler un lien). */
.sy-audience__refus {
    display: inline-block;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sy-orange);
    text-decoration: underline;
    transition: color 0.3s;
}

.sy-audience__refus:hover,
.sy-audience__refus:focus-visible {
    color: var(--sy-gris-fonce);
}

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

@media screen and (max-width: 1050px) {
    .sy-mentions__corps h1,
    .sy-mentions__corps h2 {
        font-size: 24px;
    }
}

/* Les deux tableaux ont quatre colonnes de texte : en dessous de 700 px ils ne
   tiennent plus dans la section. Une boite de type table n'a pas de
   debordement defilable ; il faut la passer en bloc. */
@media screen and (max-width: 700px) {
    .sy-mentions__corps table {
        display: block;
        width: auto;
        overflow-x: auto;
    }

    /* Sur un telephone de 375 px, les 24 px de retrait lateral mangeaient un
       mot par ligne : on les ramene a 16 px et le titre au corps du site. */
    .sy-audience {
        padding: 16px;
    }

    .sy-audience__titre {
        font-size: var(--font-size-md);
    }
}