/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Pages juridiques (mentions légales, confidentialité)
   ───────────────────────────────────────────────────────────────────────
   Deux pages de LECTURE LONGUE dans la même salle que les autres : même
   nuit, même verre, mêmes jetons. Ce qui change, ce n'est pas le décor,
   c'est le rythme — une mesure bridée à 72 caractères, un interlignage
   ouvert, un sommaire qui reste sous les yeux, et des sections numérotées
   qu'un contrat peut citer par leur ancre.

   La pièce maîtresse est `.lg-trou` : l'emplacement à remplir. Le dépôt
   ne contient AUCUNE donnée d'identité de Scroler — pas de SIRET, pas de
   siège, pas de raison sociale. Plutôt que d'inventer un faux document,
   chaque donnée manquante est un trou visible, en pointillés orange, que
   le client remplit son Kbis sous les yeux. Un trou se voit ; un faux
   numéro, non.

   Aucun !important : tout est préfixé `lg-` et posé après page.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. Jetons propres aux pages juridiques ═══════════════════════════ */
:root {
  /* Décalage d'ancrage : hauteur de l'en-tête collant + une respiration.
     Valeur en dur plutôt que calc(var(--scr-header) …) car --scr-header
     bascule sur `auto` sous 860 px, ce qui casserait le calcul.       */
  --lg-ancre: 90px;

  /* Mesure de lecture. 72ch : au-delà, l'œil rate le retour à la ligne. */
  --lg-mesure: 72ch;

  /* Orange clair réservé aux liens et aux emplacements. Sur la nuit il
     donne 7,3:1, sur le verre 6,5:1, dans un trou teinté 6,6:1 — quand
     l'orange de marque tombait à 4,5 sur le verre.                    */
  --lg-lien:  #FF7A3D;
  --lg-trou-fond: rgba(233,78,26,.10);
  --lg-trou-bord: rgba(233,78,26,.55);
}

/* ═══ 2. Tête de page ══════════════════════════════════════════════════ */
.lg-tete { padding-block: clamp(56px, 8vw, 104px) clamp(30px, 4vw, 46px); }
.lg-tete h1 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 200;
  letter-spacing: -.018em;
  color: var(--scr-paper);
}
.lg-tete .scr-lede { max-width: var(--lg-mesure); }

/* La ligne de service : date de révision, version, impression.
   Elle porte des emplacements, elle est donc en mono comme eux. */
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--scr-bord);
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.lg-meta b { font-weight: 500; color: var(--scr-on-night-soft); }

/* ═══ 3. Le corps : sommaire collant + article ═════════════════════════ */
.lg-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 58px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
@media (min-width: 980px) {
  .lg-corps { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  /* Le sommaire suit le défilement : sur une page de douze sections,
     c'est lui qui dit en permanence où l'on en est.                 */
  .lg-somm { position: sticky; top: var(--lg-ancre); }
}

/* ─── Le sommaire ─────────────────────────────────────────────────────
   Un <details open> : repliable à la demande sur mobile, où douze
   entrées coûtent un écran ; sur grand écran le résumé disparaît et la
   liste reste ouverte en permanence.                                */
.lg-somm {
  padding: 20px 22px;
  border: 1px solid var(--scr-bord);
  border-radius: 14px;
  background: var(--scr-verre-1);
}
/* Le seul interrupteur du sommaire sous 980 px : sa boîte cliquable ne
   peut pas se réduire à une hauteur de ligne de 18 px. Les marges
   négatives lui rendent les 44 px demandés sans décaler le cadre.   */
.lg-somm > summary {
  cursor: pointer;
  list-style: none;
  margin: -13px -22px -11px;
  padding: 13px 22px 11px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.lg-somm > summary::-webkit-details-marker { display: none; }
.lg-somm > summary::after {
  content: "+";
  font-family: var(--scr-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--scr-orange);
}
.lg-somm[open] > summary::after { content: "–"; }
.lg-somm__titre {
  margin: 0 0 14px;
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.lg-somm ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: 14px;
  line-height: 1.45;
}
.lg-somm a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--scr-on-night-soft);
  transition: color .22s ease, background-color .22s ease;
}
.lg-somm a:hover { color: var(--scr-paper); background: rgba(242,239,234,.07); }
.lg-somm a > span:first-child {
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--scr-orange);
  padding-top: .18em;
}
@media (min-width: 980px) {
  .lg-somm > summary { display: none; }
  .lg-somm ol { margin-top: 0; }
}
@media (max-width: 979px) {
  .lg-somm__titre { display: none; }   /* le <summary> le remplace */
}

/* ═══ 4. L'article ═════════════════════════════════════════════════════ */
.lg-txt {
  max-width: var(--lg-mesure);
  font-size: clamp(16px, .9vw + 12px, 17.5px);
  line-height: 1.8;
  color: var(--scr-on-night-soft);
}
.lg-txt p { margin: 0 0 1.15em; }
.lg-txt ul, .lg-txt ol { margin: 0 0 1.3em; padding-left: 1.25em; }
.lg-txt li { margin-bottom: .5em; }
.lg-txt li::marker { color: var(--scr-orange); }
.lg-txt strong, .lg-txt b { font-weight: 400; color: var(--scr-paper); }
.lg-txt a { color: var(--lg-lien); text-decoration: underline; text-underline-offset: .2em; }
.lg-txt a:hover { color: var(--scr-paper); }
.lg-txt abbr { text-decoration: none; border-bottom: 1px dotted var(--scr-on-night-mute); cursor: help; }

/* ─── Sections numérotées et ancrables ────────────────────────────── */
.lg-sect {
  padding-top: clamp(34px, 4.4vw, 52px);
  margin-top: clamp(34px, 4.4vw, 52px);
  border-top: 1px solid var(--scr-bord);
  /* Pour qu'une ancre ne se glisse pas sous l'en-tête collant. */
  scroll-margin-top: var(--lg-ancre);
}
.lg-sect:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

.lg-sect > h2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  margin: 0 0 18px;
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 200;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--scr-paper);
}
/* Le numéro est écrit dans le HTML, pas généré par un compteur CSS :
   il doit survivre au copier-coller et à l'impression, puisqu'un
   contrat peut renvoyer à « l'article 4 des mentions légales ».    */
.lg-num {
  font-family: var(--scr-mono);
  font-size: .52em;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--scr-orange);
}
.lg-sect h3 {
  margin: 1.9em 0 .6em;
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--scr-paper);
}

/* Retour en haut, en pied de section. Navigation : hors impression.
   `inline-flex` + une hauteur minimale : le texte fait 19 px de haut,
   la cible doit en faire 44. Le retrait horizontal négatif garde le
   libellé aligné sur la colonne de texte malgré son rembourrage.   */
.lg-haut {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1em;
  margin-left: -10px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--scr-on-night-mute);
}
.lg-haut:hover { color: var(--scr-orange); }

/* ═══ 5. L'EMPLACEMENT À REMPLIR ═══════════════════════════════════════
   La convention de la vitrine de la page communication, réduite à
   l'échelle du mot : pointillés orange, fond très légèrement teinté,
   police mono. Repérable d'un coup d'œil quand le client relira, et
   impossible à confondre avec une donnée réelle. `overflow-wrap`
   parce que certains libellés sont longs et ne doivent pas déborder. */
.lg-trou {
  display: inline;
  padding: .12em .45em;
  border: 1px dashed var(--lg-trou-bord);
  border-radius: 5px;
  background: var(--lg-trou-fond);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--scr-mono);
  font-size: .84em;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.5;
  color: var(--lg-lien);
  overflow-wrap: anywhere;
}

/* ═══ 6. Fiche d'identité (éditeur, hébergeur) ═════════════════════════ */
.lg-fiche {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 0;
  margin: 0 0 1.4em;
  border: 1px solid var(--scr-bord);
  border-radius: 14px;
  background: var(--scr-verre-1);
  overflow: hidden;
}
.lg-fiche dt,
.lg-fiche dd {
  margin: 0;
  padding: 13px 18px;
  border-top: 1px solid rgba(242,239,234,.09);
}
.lg-fiche > dt:first-of-type,
.lg-fiche > dt:first-of-type + dd { border-top: 0; }
.lg-fiche dt {
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--scr-on-night-mute);
}
.lg-fiche dd { color: var(--scr-on-night-soft); }
.lg-fiche a { color: var(--lg-lien); }
@media (max-width: 620px) {
  .lg-fiche { grid-template-columns: minmax(0, 1fr); }
  .lg-fiche dd { padding-top: 0; border-top: 0; }
  .lg-fiche dt { padding-bottom: 4px; }
}

/* ═══ 7. Encarts ═══════════════════════════════════════════════════════ */
/* Consigne de remplissage : ce que le client doit aller chercher, et où. */
.lg-note {
  margin: 1.4em 0;
  padding: 18px 22px;
  border: 1px dashed rgba(233,78,26,.45);
  border-radius: 14px;
  background: rgba(233,78,26,.05);
  font-size: .92em;
  line-height: 1.7;
  color: var(--scr-on-night-soft);
}
.lg-note > *:last-child { margin-bottom: 0; }
.lg-note b { font-weight: 400; color: var(--scr-paper); }
.lg-note a { color: var(--lg-lien); }
.lg-note__quoi {
  display: block;
  margin-bottom: 8px;
  font-family: var(--scr-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scr-orange);
}

/* Affirmation vérifiable : ce que le site fait vraiment, constatable
   dans le code. Verre plus dense, filet orange à gauche.            */
.lg-fait {
  margin: 1.4em 0;
  padding: 18px 22px;
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 14px 14px 4px;
  background: var(--scr-verre-2);
  font-size: .95em;
  line-height: 1.7;
}
.lg-fait > *:last-child { margin-bottom: 0; }
.lg-fait code, .lg-txt code {
  font-family: var(--scr-mono);
  font-size: .86em;
  padding: .1em .4em;
  border-radius: 4px;
  background: rgba(242,239,234,.09);
  color: var(--scr-paper);
}

/* ═══ 8. Tableau des traitements ═══════════════════════════════════════
   `.lg-tab-boite` est une zone défilante. Une zone qui défile et ne
   contient aucun élément focalisable est inatteignable au clavier seul :
   le HTML lui donne donc `tabindex="0"` et `role="region"`, et la règle
   ci-dessous lui rend un anneau de focus visible. La barre de défilement
   est forcée fine mais VISIBLE — c'est la seule affordance possible sans
   fond opaque, le décor de la salle passant derrière le tableau.
   Sous 620 px, le tableau renonce à sa largeur minimale et se replie :
   à cette taille il n'y a plus rien à faire défiler, donc plus rien à
   atteindre.                                                          */
.lg-tab-boite {
  margin: 1.4em 0;
  overflow-x: auto;
  border-radius: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(233,78,26,.7) rgba(242,239,234,.10);
}
.lg-tab-boite:focus-visible {
  outline: 2px solid var(--scr-orange);
  outline-offset: 3px;
}
.lg-tab-boite::-webkit-scrollbar { height: 8px; }
.lg-tab-boite::-webkit-scrollbar-track { background: rgba(242,239,234,.10); border-radius: 999px; }
.lg-tab-boite::-webkit-scrollbar-thumb { background: rgba(233,78,26,.7); border-radius: 999px; }
.lg-tab {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: .92em;
  text-align: left;
}
.lg-tab th, .lg-tab td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(242,239,234,.12);
  vertical-align: top;
}
.lg-tab thead th {
  border-bottom: 1px solid var(--scr-bord);
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.lg-tab tbody th { font-weight: 400; color: var(--scr-paper); }
.lg-tab tbody tr:last-child th,
.lg-tab tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 620px) {
  .lg-tab { min-width: 0; }
  .lg-tab th, .lg-tab td { padding: 11px 10px; }
}

/* ═══ 9. Préférences système ═══════════════════════════════════════════ */
@media (forced-colors: active) {
  .lg-trou { border: 1px dashed CanvasText; background: Canvas; color: CanvasText; }
  .lg-somm, .lg-fiche, .lg-note, .lg-fait { border: 1px solid CanvasText; background: Canvas; }
}

/* ═══ 10. Impression ═══════════════════════════════════════════════════
   Ces deux pages seront imprimées, signées et archivées. On déplie la
   grille, on rend le sommaire statique — il devient la table des
   matières du document papier — et les emplacements restent visibles
   en pointillés noirs : sur le tirage aussi, on doit voir ce qui
   manque.                                                           */
@media print {
  /* Les graisses fines de l'écran (200 et 300) sortent grises et frangées
     de couleur sur le papier : tout ce qui est titre ou petit texte est
     remonté d'un cran.                                               */
  .lg-tete { padding-block: 0 12pt; }
  .lg-tete .scr-eyebrow { color: #000; }
  .lg-tete h1 { font-size: 22pt; font-weight: 400; color: #000; }
  .lg-tete .scr-lede { font-size: 11pt; color: #000; max-width: none; }
  .lg-meta { border-top: 1px solid #999; color: #000; font-size: 8pt; }

  .lg-corps { display: block; padding-bottom: 0; }
  .lg-txt { max-width: none; font-size: 10.5pt; line-height: 1.5; color: #000; }
  .lg-txt a { color: #000; }

  .lg-somm {
    position: static;
    margin-bottom: 18pt;
    padding: 10pt 12pt;
    border: 1px solid #999;
    background: none;
    break-inside: avoid;
  }
  .lg-somm > summary { display: none; }
  .lg-somm__titre { display: block; color: #000; }
  /* display:block et non grid — `columns` n'a aucun effet sur une grille. */
  .lg-somm ol { display: block; margin-top: 0; columns: 2; column-gap: 18pt; font-size: 9pt; }
  .lg-somm a { padding: 1pt 0; font-weight: 400; color: #000; }
  .lg-somm a > span:first-child { color: #000; }

  .lg-sect { border-top: 1px solid #ccc; padding-top: 12pt; margin-top: 12pt; }
  .lg-sect > h2 { font-size: 13pt; font-weight: 400; color: #000; break-after: avoid; }
  .lg-sect h3 { font-size: 11pt; font-weight: 500; color: #000; break-after: avoid; }
  .lg-num { color: #000; }

  .lg-trou {
    border: 1px dashed #000;
    background: none;
    color: #000;
    font-size: 9.5pt;
  }
  .lg-fiche, .lg-note, .lg-fait {
    border: 1px solid #999;
    background: none;
    color: #000;
    break-inside: avoid;
  }
  .lg-fiche dt, .lg-fiche dd { border-top: 1px solid #ccc; color: #000; }
  .lg-fiche > dt:first-of-type,
  .lg-fiche > dt:first-of-type + dd { border-top: 0; }
  .lg-fiche dt { font-weight: 500; }
  .lg-fait { border-left: 2pt solid #000; }
  .lg-note__quoi { color: #000; }
  .lg-txt code, .lg-fait code { background: none; color: #000; }
  .lg-tab, .lg-tab th, .lg-tab td { color: #000; }
  .lg-tab-boite { overflow: visible; }
  .lg-tab { min-width: 0; break-inside: avoid; }
  .lg-tab th, .lg-tab td { border-bottom: 1px solid #ccc; }
  .lg-haut { display: none; }

  /* ⚠ Le pied de page est un bloc de NAVIGATION : il n'a rien à faire
     sur un document imprimé, signé et archivé. page.css lui repeint
     bien son fond en blanc, mais ses enfants gardent leurs couleurs
     claires — titres, liens et ligne de bas de page sortaient en blanc
     cassé sur blanc, soit un rapport de contraste de 1,05:1. On le
     masque, comme .scr-head et .lg-haut le sont déjà.               */
  .scr-foot { display: none; }

  /* ⚠ Tout ce que l'écran met en valeur par une couleur CLAIRE devient
     invisible sur du papier blanc. Le gras du corps de texte, les
     intitulés de tableau et les libellés de la ligne de service sont
     donc explicitement rendus au noir — et la mise en valeur repasse
     par la graisse, qui est le seul contraste dont dispose un tirage
     en noir et blanc.                                               */
  .lg-txt strong, .lg-txt b,
  .lg-note b, .lg-meta b,
  .lg-tab thead th, .lg-tab tbody th { color: #000; }
  .lg-txt strong, .lg-txt b, .lg-note b { font-weight: 600; }
  .lg-tab tbody th { font-weight: 500; }
  .lg-txt li::marker { color: #000; }
}