/*
 * Textes juridiques — chargée sur les CGV.
 *
 * Une page qu'on ne lit pas d'un bout à l'autre : on y cherche un article. Le
 * dessin ne sert donc qu'à deux choses — trouver, puis lire. Le sommaire tient
 * la colonne de gauche et y reste au défilement ; le texte garde une mesure de
 * lecture et un corps plus petit que celui du site, parce qu'il y en a cent
 * soixante-cinq paragraphes et qu'à 21 px ils font des pages entières.
 *
 * Aucune image : un contrat n'a pas de vue d'ambiance.
 */

/* Hauteur de l'en-tête collant : 16+64+16 de rembourrage et de blason, plus
   le filet. Les ancres et le sommaire s'y calent — sans quoi un article
   rejoint par le sommaire se retrouve caché derrière l'en-tête. */
:root{ --ml-entete:97px }

/* Le bandeau est celui du thème — voir .ml-page-head dans la feuille de
   socle. La date de version y passe en mention. */

/* ---------- l'ensemble ---------- */
.ml-legal{padding:var(--air) 0 var(--air-fort)}

/* ---------- sommaire ---------- *
 * Numéroté par le document lui-même : les articles portent déjà leur numéro
 * dans leur intitulé (« 1 – Objet »), donc pas de compteur en plus, qui en
 * mettrait deux côte à côte. */
.ml-legal__sommaire{border-top:1px solid var(--filet);padding-top:20px;
  margin-bottom:clamp(30px,4vw,44px)}
.ml-legal__sommaire-titre{font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--serif);color:var(--texte-doux);margin:0 0 16px}
.ml-legal__sommaire ol{list-style:none;margin:0;padding:0;
  display:grid;gap:9px;
  /* En pleine largeur, la liste se range en colonnes plutôt que de faire une
     échelle de vingt-deux barreaux au-dessus du texte. */
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  column-gap:clamp(20px,3vw,40px)}
.ml-legal__sommaire a{display:block;color:var(--texte);font-size:16.5px;line-height:1.4;
  border-bottom:1px solid transparent}
.ml-legal__sommaire a:hover{color:var(--accent-texte);border-bottom-color:var(--accent)}

/* ---------- le texte ---------- */
/* 72 caractères : un peu plus large que la prose du site, parce qu'un texte
   juridique se parcourt en diagonale autant qu'il se lit. */
.ml-legal__corps{max-width:72ch;font-size:18px;line-height:1.72;color:var(--texte)}
.ml-legal__corps p{margin:0 0 1.15em}
/* Les titres d'article. Le filet au-dessus fait le seul découpage de la page :
   sur un texte de cette longueur, l'espace seul ne suffit pas à dire qu'un
   article se termine et qu'un autre commence. */
.ml-legal__corps h2{font-size:clamp(21px,2.2vw,26px);line-height:1.25;
  margin:clamp(38px,5vw,58px) 0 clamp(14px,1.8vw,18px);
  padding-top:clamp(16px,2.2vw,22px);border-top:1px solid var(--filet);
  /* L'ancre doit s'arrêter SOUS l'en-tête collant, pas dessous. */
  scroll-margin-top:calc(var(--ml-entete) + 16px)}
.ml-legal__corps > h2:first-child{margin-top:0;padding-top:0;border-top:0}
/* Aucun h3 dans le texte d'aujourd'hui : la règle est là pour le jour où un
   article prendra des sous-parties, saisies au « Titre 3 » de l'éditeur. */
.ml-legal__corps h3{font-size:clamp(19px,1.8vw,21px);margin:clamp(28px,3.4vw,38px) 0 12px;
  scroll-margin-top:calc(var(--ml-entete) + 16px)}
.ml-legal__corps b,.ml-legal__corps strong{font-weight:600}
.ml-legal__corps em{font-style:italic;color:var(--texte-doux)}
.ml-legal__corps a{color:var(--accent-texte);border-bottom:1px solid var(--filet)}
.ml-legal__corps a:hover{color:var(--texte);border-bottom-color:currentColor}
/* Les puces, reconstruites depuis les « • » du texte : le trait tient la place
   du caractère, aligné hors de la colonne pour que le texte des points reste
   sur la même verticale que les paragraphes. */
.ml-legal__puces{list-style:none;margin:0 0 1.15em;padding:0;display:grid;gap:.6em}
.ml-legal__puces li{position:relative;padding-left:1.5em}
.ml-legal__puces li::before{content:"";position:absolute;left:0;top:.62em;
  width:.7em;height:1px;background:var(--accent)}

/* ---------- deux colonnes ---------- *
 * À partir de 1080 px le sommaire passe à gauche et suit le défilement : sur
 * un texte de cette longueur, devoir remonter en haut de page pour changer
 * d'article revient à ne pas avoir de sommaire du tout. */
@media (min-width:1080px){
  .ml-legal{display:grid;grid-template-columns:minmax(240px,270px) minmax(0,1fr);
    gap:clamp(40px,5vw,76px);align-items:start}
  .ml-legal__sommaire{position:sticky;top:calc(var(--ml-entete) + 20px);
    margin-bottom:0;
    /* Vingt-deux entrées ne tiennent pas toujours dans la fenêtre : la colonne
       défile pour elle-même plutôt que de déborder sous le pied de page. */
    max-height:calc(100vh - var(--ml-entete) - 40px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--filet) transparent}
  .ml-legal__sommaire ol{grid-template-columns:1fr}
  .ml-legal__sommaire a{font-size:15.5px}
}

/* ---------- impression ---------- *
 * Le texte lui-même invite à imprimer ces conditions : autant qu'elles
 * sortent lisibles. En-tête, pied de page et sommaire ne servent à rien sur
 * le papier ; les titres ne se laissent pas couper de leur article. */
@media print{
  .ml-header,.ml-header__mention,.ml-footer,.ml-legal__sommaire,.ml-mobile{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .ml-page-head{background:none;padding:0 0 12pt;text-align:left}
  .ml-page-head .ml-accolade{display:none}
  .ml-legal{display:block;padding:0}
  .ml-legal__corps{max-width:none;font-size:11pt;line-height:1.5}
  .ml-legal__corps h2{break-after:avoid;page-break-after:avoid;
    margin:18pt 0 6pt;padding-top:6pt;font-size:13pt}
  .ml-legal__corps p,.ml-legal__puces li{break-inside:avoid;page-break-inside:avoid}
  .ml-legal__corps a{color:#000;border:0}
}

/* ---------- documents Complianz ---------- *
 * La déclaration de confidentialité et la politique de cookies sont produites
 * par le plugin, qui les habille aussi : 14 px pour tout le corps, 22 px pour
 * tous les titres, sur une laisse de 800 px. Ses règles portent un id —
 * « #cmplz-document » — et gagnent donc contre celles du thème : il faut leur
 * opposer une classe DE PLUS, pas un simple ordre de chargement.
 *
 * On ne touche pas au plugin, et on ne défait que l'habillage : les tiroirs,
 * leurs chevrons et leurs tableaux de traceurs restent à lui. */
.ml-legal__corps #cmplz-document{font-size:inherit;max-width:none;
  font-family:var(--serif);color:var(--texte);text-justify:auto}
.ml-legal__corps #cmplz-document p,
.ml-legal__corps #cmplz-document li,
.ml-legal__corps #cmplz-document td{font-size:inherit;line-height:inherit}
.ml-legal__corps #cmplz-document p{margin:0 0 1.15em}
/* Les titres reprennent la fonte et le filet de la page. Le h3 garde sa place
   de sous-partie : dans ces documents il en existe pour de bon, à l'intérieur
   des tiroirs. */
.ml-legal__corps #cmplz-document h2{font-family:var(--display);color:var(--texte-titre);
  font-size:clamp(21px,2.2vw,26px);line-height:1.25;
  margin:clamp(38px,5vw,58px) 0 clamp(14px,1.8vw,18px);
  padding-top:clamp(16px,2.2vw,22px);border-top:1px solid var(--filet);border-bottom:0;
  scroll-margin-top:calc(var(--ml-entete) + 16px)}
.ml-legal__corps #cmplz-document h3{font-family:var(--display);color:var(--texte-titre);
  font-size:clamp(18px,1.7vw,20px);line-height:1.3}
.ml-legal__corps #cmplz-document ul{list-style:disc;margin:0 0 1.15em;padding-left:1.4em}
.ml-legal__corps #cmplz-document li{margin-bottom:.35em}
.ml-legal__corps #cmplz-document a{color:var(--accent-texte);text-decoration:none;
  border-bottom:1px solid var(--filet)}
.ml-legal__corps #cmplz-document a:hover{color:var(--texte);border-bottom-color:currentColor}
/* Les tiroirs : le gris de rechange du plugin devient le beige de la maison,
   sinon la page ouvre deux gris froids au milieu du crème. */
.ml-legal__corps #cmplz-document .cmplz-dropdown{background:transparent;
  border:1px solid var(--filet);margin-bottom:14px}
.ml-legal__corps #cmplz-document .cmplz-dropdown summary{background:var(--fond-doux);
  margin:0;padding:12px 16px}
.ml-legal__corps #cmplz-document .cmplz-dropdown summary h3{font-size:clamp(17px,1.5vw,19px)}
.ml-legal__corps #cmplz-document .cmplz-dropdown > *:not(summary){padding-inline:16px}
.ml-legal__corps #cmplz-document .cmplz-subtitle{color:var(--texte-doux);
  font-size:.92em;margin-bottom:.4em}