/* =========================================================
   PAGES DE LECTURE LONGUE — mentions legales, confidentialite

   Enfilee par inc/assets.php sur le seul gabarit page-legal.php, apres
   bnd-site.css et bnd-a11y.css.

   ---------------------------------------------------------
   Ce qu'elle fait, et ce qu'elle ne refait pas
   ---------------------------------------------------------

   assets/bnd-a11y.css tient deja la LISIBILITE de ces pages : la mesure de
   74ch, le rythme vertical de .prose, les puces, le soulignement des liens,
   les tableaux. Rien de tout cela n'est repris ici — cette feuille n'ajoute
   que ce qui rapproche la page de la landing :

     · l'en-tete, batie comme une .sec-head de l'accueil (pastille, titre,
       chapo) ;
     · le sommaire, en carte creme a coins arrondis, avec ses numeros en
       JetBrains Mono plasma — la meme facture que les etapes de #engine ;
     · la carte qui porte le texte, --card et --r-lg comme les .pillar de
       l'accueil ;
     · le marqueur d'information manquante, qui n'existe que sur les
       brouillons relus en interne.

   ---------------------------------------------------------
   La carte est plus large que le texte
   ---------------------------------------------------------

   C'est le seul point qui demande une explication. .wrap-narrow borne la
   COLONNE DE TEXTE a 74ch, parce qu'au-dela une ligne devient penible. Mais
   une carte de 74ch de large, seule au milieu d'un ecran de 1400 px, aurait
   l'air d'un post-it perdu : la landing, elle, remplit sa largeur.

   La carte deborde donc symetriquement de sa colonne, par une marge negative
   compensee par une marge interieure egale. Le texte garde sa mesure, la
   carte prend l'espace. Sous 900 px, ou il n'y a plus d'espace a prendre, le
   debordement est annule.

   Aucune regle de bnd-site.css n'est modifiee.
   ========================================================= */

/* ---------- en-tete ---------- */
.legal-head{display:flex;flex-direction:column;align-items:flex-start;}
/* .tag de la landing : la pastille bordee du surtitre des sections. */
.legal-head .tag{margin-bottom:clamp(20px,2.4vw,28px);}
/* Le titre reprend les reglages de h2.sect-title deux crans plus bas — voir
   .legal-title dans bnd-a11y.css, qui les pose. Seule la respiration en
   dessous appartient a cette mise en page. */
.legal-head .legal-lead{margin-top:clamp(18px,2vw,26px);max-width:60ch;}

/* ---------- sommaire ----------
   Carte creme, comme les .pillar de l'accueil. Le compteur remplace la
   numerotation native de <ol> : celle-ci ne se met pas en forme, et ce sont
   precisement ces numeros en monospace plasma qui font le lien visuel avec
   les etapes de la section « engine » de la landing. */
.legal-toc{margin-top:clamp(36px,4.5vw,56px);background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px) clamp(22px,3vw,36px);}
.legal-toc-title{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.legal-toc ol{list-style:none;counter-reset:legal-toc;margin-top:18px;padding-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px clamp(18px,2.4vw,34px);}
@media(max-width:720px){.legal-toc ol{grid-template-columns:1fr;}}
.legal-toc li{counter-increment:legal-toc;}
.legal-toc a{display:flex;gap:12px;align-items:baseline;padding:7px 0;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.4;}
.legal-toc a::before{content:counter(legal-toc,decimal-leading-zero);flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;color:var(--plasma);}
/* Le survol souligne : la couleur seule ne signale pas un lien (RGAA 10.6),
   et ces entrees vivent hors d'un paragraphe, donc sans soulignement permanent
   — c'est la convention d'un sommaire, pas d'un lien de corps de texte. */
.legal-toc a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- le texte, sur sa carte ----------
   Le debordement symetrique est decrit en tete de fichier. La valeur est la
   meme des deux cotes et se retire integralement sous 900 px. */
.legal-prose{--legal-bleed:clamp(0px,3.5vw,64px);
  margin-top:clamp(32px,4vw,52px);
  margin-left:calc(var(--legal-bleed) * -1);
  margin-right:calc(var(--legal-bleed) * -1);
  padding:clamp(28px,3.6vw,52px) var(--legal-bleed);
  background:var(--card);
  border-radius:var(--r-lg);}
@media(max-width:900px){.legal-prose{--legal-bleed:0px;padding:clamp(24px,4vw,32px);}}

/* .prose pose margin-top sur son premier enfant via « > * + * » ; le premier
   n'en recoit pas, mais le rappeler evite qu'un futur ajout ouvre un blanc en
   haut de la carte. */
.legal-prose > *:first-child{margin-top:0;}

/* Un tableau de politique de confidentialite compte trois colonnes de texte :
   sur la carte, il respire mieux avec ses lignes separees plutot que
   quadrillees. Les bordures verticales de bnd-a11y.css sont retirees, les
   horizontales conservees. */
.legal-prose table{background:transparent;}
.legal-prose th,
.legal-prose td{border-left:none;border-right:none;}

/* ---------- marqueur d'information manquante ----------
   Il n'apparait que sur un brouillon : scripts/seed-legal.php refuse de
   publier une page qui en porte encore un. Sa mise en forme n'est donc pas
   celle du site, c'est un signal de relecture — et il doit se voir. */
.legal-todo{display:inline-block;background:var(--yellow);color:var(--cobalt);font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.45;font-weight:500;padding:2px 8px;border-radius:var(--r-sm,6px);}

/* ---------- date de mise a jour ----------
   .legal-updated est deja habillee par bnd-a11y.css. Elle est seulement
   ramenee hors de la carte, ou elle serait prise pour du texte qui fait foi. */
.legal-updated{margin-top:clamp(28px,3.4vw,40px);}