/* =============================================================================
   juridique.css — la feuille des trois pages du cadre légal
   =============================================================================

   ELLE NE CHARGE PAS `style.css`, ET C'EST LA SEULE DÉCISION DE CE FICHIER.

   La tentation est de réutiliser la feuille de l'application : les jetons y sont
   déjà, et trois pages de plus ne coûteraient qu'un `<link>`. Mais `style.css`
   habille une APPLICATION, pas un document — il pose `body{display:flex;
   overflow:hidden}` et `html,body{height:100%}` pour que la baie occupe l'écran
   sans jamais le faire défiler. Une page de texte long sous ces règles est une
   page qu'on ne peut pas lire jusqu'au bout : le contenu déborde et rien ne
   défile. Il aurait donc fallu défaire au-dessus ce que la feuille pose en bas,
   c'est-à-dire écrire une exception dans la feuille de l'appli pour trois pages
   qui ne sont pas l'appli.

   Ce qui est repris à l'identique, en revanche, ce sont les JETONS — les mêmes
   couleurs, les mêmes rayons, la même famille de caractères, à la valeur près.
   C'est ce qui fait que ces pages se lisent comme le même produit, alors même
   qu'elles n'en partagent aucune règle de mise en page. Si un jeton bouge dans
   `style.css`, il est à reporter ici : c'est le prix, assumé, de ne pas avoir
   fait dépendre un document d'une feuille d'application.

   ⚠ `--fs` (l'échelle d'interface, écrite par `appliquerEchelle()` depuis les
   préférences) n'existe pas ici : ces pages n'ont AUCUN script, par CSP autant
   que par nature. L'échelle typographique est donc figée, en pixels nus.

   L'ÉCHELON DE LECTURE. L'application lit `--t-xl` (14 px) comme base, parce que
   son texte le plus long fait une phrase. Ici le texte le plus long fait une
   page : le corps est à 15 px et l'interligne à 1,65. Ce n'est pas un jeton de
   plus dans l'échelle de l'appli — c'est la cote propre d'un document, et elle
   ne sort pas de ce fichier.
   ========================================================================== */

:root{
  /* Repris de `public/style.css`, à la valeur près. */
  --bg:#0e1116; --bg2:#151a22; --bg3:#1c232d; --line:#2a3441;
  --txt:#e6edf3; --txt2:#a7b4c2; --txt3:#7e8c9c;
  --acc:#ff9f1c; --acc2:#4cc9f0;
  --ok:#06d6a0; --warn:#ffd166;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r-pastille:3px; --r-controle:6px; --r-carte:8px; --r-gelule:12px; --r-cercle:50%;

  /* Les cotes du document. */
  --t-micro:11px;   /* la méta : date de mise à jour, pied de page */
  --t-petit:13px;   /* les libellés de navigation, les notes */
  --t-corps:15px;   /* le texte courant — l'échelon qui porte toute la page */
  --t-h3:16px;
  --t-h2:19px;
  --t-h1:25px;
}

*{box-sizing:border-box}

/* Le fond est peint sur `html` ET sur `body` : sans la première, le dépassement
   élastique d'iOS découvre une bande blanche sous un document sombre. */
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:var(--t-corps)/1.65 var(--sans);
  -webkit-text-size-adjust:100%;
}

/* Le lien d'évitement — visible seulement quand il a le focus. Ces pages n'ont
   que deux liens avant le contenu, mais le même bandeau se répète sur les trois :
   sauter dedans coûte une règle.

   ⚠ MASQUÉ PAR ÉCRÊTAGE, ET NON PAR `left:-9999px`. Le déport hors écran est la
   recette la plus répandue, et c'est celle qui, sur une page en écriture de
   droite à gauche ou dans certains moteurs, rallonge la boîte de défilement
   horizontale de dix mille pixels. Un document dont on peut faire défiler la
   page latéralement au doigt, sans rien à y voir, est un défaut qu'on met
   longtemps à imputer à un lien invisible. `clip-path` ne déplace rien. */
.evitement{
  position:absolute; top:0; left:0;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  background:var(--bg3); color:var(--txt); border:1px solid var(--acc);
  border-radius:var(--r-controle); font-size:var(--t-petit);
}
.evitement:focus{
  width:auto; height:auto; overflow:visible; clip-path:none;
  top:12px; left:12px; padding:8px 12px; z-index:10;
}

/* ---------- l'ossature ---------- */
/* 68 caractères de large au plus : au-delà, l'œil perd la ligne suivante en
   revenant à la marge. C'est la seule contrainte de mise en page du document. */
.page{max-width:68ch; margin:0 auto; padding:28px 20px 64px}

/* ---------- l'en-tête, la même marque que l'appli ---------- */
.entete{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:26px;
}
.dot{
  width:9px; height:9px; border-radius:var(--r-cercle);
  background:var(--acc); box-shadow:0 0 10px var(--acc); flex:none;
}
.marque{font-size:var(--t-h3); font-weight:600; letter-spacing:.2px; color:var(--txt); text-decoration:none}
.marque em{font-style:normal; color:var(--txt2); font-weight:400}
.marque:hover{color:var(--acc)}
.marque:hover em{color:var(--acc)}
.entete .grandir{flex:1}
.retour{font-size:var(--t-petit); color:var(--txt2); text-decoration:none; white-space:nowrap}
.retour:hover{color:var(--acc)}

/* ---------- les titres ---------- */
h1{
  font-size:var(--t-h1); line-height:1.25; font-weight:600; margin:0 0 6px; letter-spacing:.2px;
}
h2{
  font-size:var(--t-h2); line-height:1.3; font-weight:600; margin:38px 0 10px;
  padding-top:18px; border-top:1px solid var(--line);
}
h3{font-size:var(--t-h3); font-weight:600; margin:24px 0 6px; color:var(--txt)}

/* La date de dernière mise à jour, sous le titre : c'est la première chose
   qu'on cherche sur une page de ce genre, et la seule qui dise si elle vaut
   encore quelque chose. */
.maj{margin:0 0 8px; font:var(--t-micro) var(--mono); color:var(--txt3); text-transform:uppercase; letter-spacing:.4px}
.chapo{margin:0 0 8px; color:var(--txt2); font-size:var(--t-corps)}

/* ---------- le corps ---------- */
p{margin:0 0 14px; color:var(--txt2)}
p strong, li strong{color:var(--txt); font-weight:600}
ul,ol{margin:0 0 14px; padding-left:22px; color:var(--txt2)}
li{margin:0 0 7px}
li::marker{color:var(--txt3)}

a{color:var(--acc); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--acc2)}
:focus-visible{outline:2px solid var(--acc2); outline-offset:2px}

code, .cookie{
  font:13px var(--mono); background:var(--bg3); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r-pastille); padding:1px 5px;
}

/* ---------- le marqueur « à compléter » ---------- */
/* IL DOIT SE VOIR, ET DE LOIN. Un blanc laissé dans des mentions légales est un
   défaut qui ne se signale pas tout seul : la page a l'air finie. Le jeton est
   donc peint en jaune d'avertissement — la couleur que l'appli emploie déjà
   pour « ça attend quelque chose » — et il est écrit en mono, comme du code,
   parce que c'en est : une valeur à substituer. */
/* Il SE COUPE plutôt que de déborder : `white-space:nowrap` était le réflexe —
   un jeton se lit d'un bloc — et il faisait sortir
   « numero-siret-ou-mention-particulier » de l'écran à 375 px, donc faisait
   défiler la PAGE latéralement. Un marqueur qui casse la mise en page de la
   version mobile serait un défaut de plus à corriger le jour où on le remplace,
   c'est-à-dire le jour où il disparaît. */
.acompleter{
  font:12px var(--mono); color:var(--warn);
  background:rgba(255,209,102,.10); border:1px dashed rgba(255,209,102,.45);
  border-radius:var(--r-pastille); padding:1px 6px;
  overflow-wrap:anywhere;
}

/* ---------- les blocs mis en avant ---------- */
/* `.encadre` reprend `.porte-msg` de l'appli : même fond, même filet à gauche,
   même rayon. Il sert aux passages qu'on doit pouvoir citer ou retrouver — la
   phrase sur la gratuité, la suppression définitive. */
.encadre{
  margin:0 0 16px; padding:13px 15px; background:var(--bg2);
  border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--r-controle); color:var(--txt2);
}
.encadre :last-child{margin-bottom:0}
.encadre.attention{border-left-color:var(--warn)}
.encadre.bon{border-left-color:var(--ok)}
.encadre h3{margin-top:0}

/* La table des données collectées : deux colonnes, et elle défile seule si
   l'écran est trop étroit — jamais la page. */
.tableau{overflow-x:auto; margin:0 0 16px; border:1px solid var(--line); border-radius:var(--r-carte)}
table{border-collapse:collapse; width:100%; font-size:var(--t-petit)}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--txt); font-weight:600; background:var(--bg2); white-space:nowrap}
td{color:var(--txt2)}
tr:last-child th, tr:last-child td{border-bottom:0}

/* ---------- le pied : les trois pages se tiennent par la main ---------- */
.pied{
  margin-top:44px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-size:var(--t-petit);
}
.pied a{color:var(--txt2); text-decoration:none}
.pied a:hover{color:var(--acc); text-decoration:underline}
/* La page courante ne se lie pas à elle-même : un lien qui ne mène nulle part
   est un lien de trop, et `aria-current` seul ne le retire pas du parcours. */
.pied span[aria-current]{color:var(--txt3)}

/* ---------- au doigt ---------- */
@media (max-width:600px){
  .page{padding:20px 16px 52px}
  :root{--t-h1:22px; --t-h2:18px}
  .entete{gap:8px}
}

/* ---------- sur papier ---------- */
/* Ces pages seront imprimées ou enregistrées en PDF — c'est ce qu'on fait d'un
   texte qu'on veut pouvoir opposer plus tard. Fond blanc, texte noir, et les
   liens du pied retirés : sur papier ils ne mènent nulle part. */
@media print{
  html,body{background:#fff; color:#000}
  .page{max-width:none; padding:0}
  p,ul,ol,td,.encadre,.chapo{color:#000}
  h2{border-top:1px solid #999}
  .encadre{background:#f4f4f4; border-color:#999; border-left:3px solid #000}
  .acompleter{color:#000; background:#ffe; border-color:#000}
  a{color:#000}
  .pied,.retour,.evitement{display:none}
}