/* Infra Society, la page des mentions légales (site/mentions-legales.html : mentions, CGU, données personnelles,
   cookies ; refonte, bloc B8, construit en avance sur la branche refonte-b1).

   Maël n'a pas de page légale : la page prend ses composants (fiche B8, § 3) — la tête de ses pages intérieures
   (.page-hero de sa page Contact : titre centré, surtitre, chapeau) et, pour le texte long, une colonne de lecture
   reprise de l'ancienne .legal (commun/styles/site.css, « Page des mentions légales ») aux jetons de la charpente, avec
   des tableaux qui défilent de côté sur un petit écran. LE TEXTE NE CHANGE PAS D'UN MOT : seules les classes du corps
   changent (P-43 : aucune classe de site.css), et la page ne charge plus site.css, site.js ni ecto-vivant.js.
   Toutes les règles sont portées par body.ch-mentions (aucune règle nue, P-42). Liens du texte : l'orange « texte » de
   la charpente (4,78 pour 1 sur le papier ; l'ancien orange n'en faisait que 4,26 : fiche B8, § 9). Les deux tableaux
   sont des zones nommées qu'on peut faire défiler au clavier (accessibilité). Aucun script, aucune animation. */

/* ------------------------------------------------------------------ colonne */
body.ch-mentions .mentions-colonne { width: min(760px, calc(100% - 60px)); margin-inline: auto; }

/* ------------------------------------------------------------------ tête (la tête des pages intérieures de Maël) */
body.ch-mentions .mentions-tete { padding: 164px 0 0; }
body.ch-mentions .mentions-titre { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.ch-mentions .mentions-sur-ligne { margin-bottom: 18px; }
body.ch-mentions .mentions-titre h1 {
  max-width: 1020px; margin: 0 0 24px; font: 550 64px/1.08 var(--ch-switzer); letter-spacing: -.05em; color: var(--ch-encre); text-wrap: balance;
}
body.ch-mentions .mentions-chapeau { max-width: 620px; font-size: 16px; line-height: 1.65; }

/* sommaire : une ligne par partie, filets comme les listes de la maquette */
body.ch-mentions .mentions-sommaire { margin-top: 52px; border-top: 1px solid var(--ch-filet); }
body.ch-mentions .mentions-sommaire li {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 8px 28px; padding: 16px 0;
  border-bottom: 1px solid var(--ch-filet); font-size: 15px; line-height: 1.6;
}
body.ch-mentions .mentions-cle { font-weight: 500; color: var(--ch-encre); }
body.ch-mentions .mentions-cle a { text-decoration: underline; text-decoration-color: #c9c9c3; text-underline-offset: 3px; }
body.ch-mentions .mentions-cle a:hover { color: var(--ch-orange-texte); text-decoration-color: currentColor; }
body.ch-mentions .mentions-valeur { color: var(--ch-gris); }

/* ------------------------------------------------------------------ les quatre parties (l'ancienne .legal) */
body.ch-mentions .mentions-bloc { padding-top: clamp(56px, 6vw, 96px); }
body.ch-mentions .mentions-bloc h2 { padding-bottom: 14px; border-bottom: 1px solid var(--ch-encre); margin-bottom: 20px; }
body.ch-mentions .mentions-bloc h3 { margin: 32px 0 10px; font-size: 18.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--ch-encre); }
body.ch-mentions .mentions-bloc :is(p, li) { max-width: 74ch; font-size: 16px; line-height: 1.65; color: #3f4045; }
body.ch-mentions .mentions-bloc p { margin: 0 0 14px; }
body.ch-mentions .mentions-bloc ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
body.ch-mentions .mentions-bloc li { margin-bottom: 10px; }
body.ch-mentions .mentions-bloc strong { font-weight: 600; color: var(--ch-encre); }
body.ch-mentions .mentions-bloc a { color: var(--ch-orange-texte); text-decoration: underline; text-underline-offset: 3px; }
body.ch-mentions .mentions-bloc p.mentions-version { color: var(--ch-gris); }
body.ch-mentions .mentions-bloc p.mentions-note { margin-top: 28px; font-size: 14px; color: var(--ch-gris); }
body.ch-mentions .mentions-bloc code {
  padding: 2px 6px; border-radius: 4px; background: #ecece8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
}

/* tableaux : défilent de côté sur un petit écran ; la zone se prend au clavier */
body.ch-mentions .mentions-tableau { margin: 6px 0 20px; overflow-x: auto; }
body.ch-mentions .mentions-tableau:focus-visible { outline: 2px solid var(--ch-bleu); outline-offset: 4px; }
body.ch-mentions .mentions-tableau table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
body.ch-mentions .mentions-tableau :is(th, td) {
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ch-filet); color: #3f4045; text-align: left; vertical-align: top;
}
body.ch-mentions .mentions-tableau th { font-weight: 600; color: var(--ch-encre); border-bottom-color: #bdbdb6; }
body.ch-mentions .mentions-tableau :is(th, td):last-child { padding-right: 0; }

/* ------------------------------------------------------------------ paliers de Maël */
@media (max-width: 809px) {
  body.ch-mentions .mentions-colonne { width: calc(100% - 40px); }
  body.ch-mentions .mentions-tete { padding-top: 140px; }
  body.ch-mentions .mentions-titre h1 { font-size: 52px; }
}
@media (max-width: 600px) {
  body.ch-mentions .mentions-tete { padding-top: 124px; }
  body.ch-mentions .mentions-titre h1 { max-width: 350px; font-size: 42px; line-height: 1.1; }
  body.ch-mentions .mentions-chapeau { font-size: 15px; }
  body.ch-mentions .mentions-sommaire { margin-top: 36px; }
  body.ch-mentions .mentions-sommaire li { grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 14px; }
  body.ch-mentions .mentions-bloc :is(p, li) { font-size: 15px; }
}