/*
 * jl.css — feuille unique de JusticeLibre (le « normaliseur »).
 *
 * Cahier des charges : scratchpad/audit/inventaire_composants_13sept.md
 * Rapport d'exécution : scratchpad/audit/normaliseur_13sept.md
 *
 * Ce fichier remplace, à terme, tokens.css + base.css + components.css +
 * annuaire.css + les <style> locaux du hub et des maquettes. Il se charge SEUL
 * (il embarque ses propres jetons) ; le seul autre fichier partagé est
 * /topbar.js, qui reste la source unique du header (§1 du rapport).
 *
 * ── COMPOSANTS EXPOSÉS ──────────────────────────────────────────────────────
 *  0. Jetons + reset + utilitaires ......... :root, .jl-mono .jl-serif .jl-muted
 *  1. header ............................... topbar.js + variante .jl-dense
 *  2. rail « Chercher dans » ............... .jl-rail .jl-ri
 *  3. pastille (+ variante loader) ......... .jl-pastille .jl-point .jl-spin
 *  4. ligne-texte .......................... .jl-lt
 *  5. chaîne ............................... .jl-chaine .jl-membre
 *  6. point-frise .......................... .jl-frise .jl-frise__ev
 *  7. bande-identité (+ --encadree) ........ .jl-bande
 *  8. bouton (plein / ghost / icône) ....... .jl-bouton
 *  9. note de provenance ................... .jl-provenance (+ .jl-src .jl-warnp)
 * 10. bloc honnêteté ....................... .jl-honnetete
 * 11. alerte (échec technique) ............. .jl-alerte
 * 12. onglets (commutent des panneaux) ..... .jl-onglets .jl-pane
 * 13. bascule de vue (2 tailles) ........... .jl-vue .jl-vue--sm
 * 14. popover de date ...................... .jl-datepop .jl-calbtn
 * 15. titre de section / sur-titre / mot ... .jl-titre .jl-surtitre .jl-hl
 * 16. tuile ................................ .jl-tuile
 * 17. tableau (th collants + tri) .......... .jl-tableau
 * 18. menu déroulant ....................... .jl-menu
 * 19. modale ............................... .jl-modale
 * 20. pied ................................. .jl-pied
 * 21. barre de recherche réseau ............ .jl-barre-reseau
 * 22. barre de filtrage local .............. .jl-barre-filtre
 * 23. trois axes de couleur ................ .jl-src-badge / .jl-tag / .jl-badge
 * 24. carte, fil, kicker, chip, sommaire ... .jl-carte .jl-fil .jl-kicker .jl-chip .jl-toc
 * 25. texte de décision .................... .jl-txt .jl-entete .jl-dl .jl-partie
 *                                            .jl-vise .jl-chrono .jl-copyrow .jl-fold
 * 26. impression ........................... @media print
 *
 * Conventions : préfixe jl-, vocabulaire de la propriétaire, jetons obligatoires
 * (pas de px nus hors dessin fin), commentaires en français.
 */

/* ═══════════════════ 0. JETONS ════════════════════════════════════════════ */
/* Palette unifiée = tokens.css + les 12 variables du hub. Arbitrages du
   rapport §3.3 : --bad remplace --red, --ok remplace --green, --warn remplace
   --gold ; les anciens noms survivent en ALIAS pour ne pas casser les pages
   prod qui les citent encore. */
:root{
  /* Marque */
  --teal:#1a4e4e; --teal-l:#2a6b6b; --teal-xl:#e8f0f0;

  /* Neutres */
  --ink:#1a1a1a; --body:#3a3a3a; --muted:#6b6b6b;
  --light:#f5f5f3;      /* FOND DE PAGE (décision de la propriétaire) */
  --white:#ffffff;      /* surfaces : cartes, rail, header */
  --cream:#fdfcf8;      /* surfaces secondaires : survol du rail, champs */
  --line:#e0ddd6;

  /* États (le hub gagne : chaque couleur a sa paire de fond) */
  --warn:#8a5a12; --warn-bg:#fbf1dc;
  --bad:#8a2a1f;  --bad-bg:#fbe3e0;
  --ok:#1f6f4a;   --ok-bg:#dff0e3;

  /* AXE 2 — famille juridictionnelle (⛔ ne jamais fusionner avec --src-*) */
  --jud:#2f5d8a; --adm:#7a5c1e; --ce:#1f6f4a;
  --eu:#6d3e8c;  --txt:#8a4a1f; --doc:#4e5a8c;

  /* AXE 1 — backend interrogé (⛔ ne jamais fusionner avec la famille) */
  --src-ce:#1a4e4e; --src-admin:#2a6b6b; --src-jud:#5c3317;
  --src-cedh:#6b3d8a; --src-cjue:#8a5c2b;

  /* Exception assumée : bordeaux du bouton « Inédits » (rapport §7.6.4).
     Ce n'est PAS une couleur d'accent générale. */
  --accent-inedits:#7a1e2f; --accent-inedits-l:#5c1523;

  /* Alias historiques — à ne plus employer dans du CSS neuf */
  --red:var(--bad); --green:var(--ok); --gold:var(--warn);

  /* Familles typographiques */
  --font-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:var(--font-serif); --sans:var(--font-sans); --mono:var(--font-mono);

  /* Échelle de tailles = celle de tokens.css + DEUX crans ajoutés, documentés :
       --text-3xs (10 px) : sur-titres et gélules mono, qui existaient en 9,5/10/10,5 px
       --text-hero (30 px) : le h1 des maquettes, entre --text-2xl (27) et --text-3xl (35)
     Les 21 tailles du prototype sont ramenées sur ces 10 crans (table dans le rapport). */
  --text-3xs:.625rem;  /* 10px  */
  --text-xs:.72rem;    /* 11.5px */
  --text-sm:.78rem;    /* 12.5px */
  --text-base:.88rem;  /* 14px  */
  --text-md:.95rem;    /* 15px  */
  --text-lg:1.05rem;   /* 17px  */
  --text-xl:1.25rem;   /* 20px  */
  --text-2xl:1.7rem;   /* 27px  */
  --text-hero:1.9rem;  /* 30px  */
  --text-3xl:2.2rem;   /* 35px  */

  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.5; --lh-relaxed:1.7;
  --ls-wide:.08em; --ls-wider:.12em; --ls-widest:.15em;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;

  --radius-sm:2px; --radius:3px; --radius-md:4px; --radius-lg:6px;
  --radius-xl:8px; --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 2px 12px rgba(26,78,78,.08);
  --shadow-md:0 6px 20px rgba(0,0,0,.12);
  --shadow-pop:0 8px 24px rgba(0,0,0,.12);
  --shadow-lg:0 8px 32px rgba(0,0,0,.3);

  --t-fast:.12s; --t:.2s; --t-slow:.25s;

  --topbar-h:56px;   /* valeur d'attente ; jl.js publie la mesure réelle */
}

/* Sombre — choix explicite. Une seule clé localStorage : jl-theme. */
html[data-theme="dark"]{
  --teal:#4ea0a0; --teal-l:#66baba; --teal-xl:#1e3a3a;
  --ink:#e8e6df; --body:#c8c5bc; --muted:#8a867d;
  --light:#141413; --white:#1e1e1c; --cream:#1a1a1a; --line:#2a2a27;
  --warn:#e0b060; --warn-bg:#3a2e14;
  --bad:#f0a090;  --bad-bg:#3d1c18;
  --ok:#6fc29a;   --ok-bg:#1d3a28;
  --jud:#7fa6d6; --adm:#c9a55c; --ce:#6fc29a;
  --eu:#b98ad6;  --txt:#d6905c; --doc:#93a0d6;
  --src-ce:#4ea0a0; --src-admin:#5cb4b4; --src-jud:#a07854;
  --src-cedh:#a77bc4; --src-cjue:#c49964;
  --accent-inedits:#d08a96; --accent-inedits-l:#e0a4ae;
}
/* Sombre — automatique, sauf choix « clair » explicite. */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --teal:#4ea0a0; --teal-l:#66baba; --teal-xl:#1e3a3a;
    --ink:#e8e6df; --body:#c8c5bc; --muted:#8a867d;
    --light:#141413; --white:#1e1e1c; --cream:#1a1a1a; --line:#2a2a27;
    --warn:#e0b060; --warn-bg:#3a2e14;
    --bad:#f0a090;  --bad-bg:#3d1c18;
    --ok:#6fc29a;   --ok-bg:#1d3a28;
    --jud:#7fa6d6; --adm:#c9a55c; --ce:#6fc29a;
    --eu:#b98ad6;  --txt:#d6905c; --doc:#93a0d6;
    --src-ce:#4ea0a0; --src-admin:#5cb4b4; --src-jud:#a07854;
    --src-cedh:#a77bc4; --src-cjue:#c49964;
    --accent-inedits:#d08a96; --accent-inedits-l:#e0a4ae;
  }
}

/* ═══════════════════ 0 bis. RESET ET BASE ════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light;
  scrollbar-color:var(--line) var(--light);scrollbar-width:thin}
html[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){color-scheme:dark}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--lh-normal);
  color:var(--ink);
  background:var(--light);           /* décision : --light, pas --cream */
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-l);text-decoration:underline}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--teal);color:#fff}
html[data-theme="dark"] ::selection{color:var(--white)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) ::selection{color:var(--white)}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--light)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid var(--light)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* Utilitaires (les seuls sans préfixe fonctionnel long) */
.jl-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.jl-serif{font-family:var(--font-serif);font-weight:400}
.jl-muted{color:var(--muted)}
.jl-nowrap{white-space:nowrap}
.jl-spacer{flex:1}
.jl-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══════════════════ 1. HEADER ═══════════════════════════════════════════ */
/* topbar.js gagne (rapport §1, verdict). jl.css n'en redéclare RIEN : il ne
   fait qu'ajouter la VARIANTE DE DENSITÉ du hub — 56 px, logo textuel — sous
   la classe .jl-dense posée sur <html>. Spécificité html.x .y (0,2,1) : elle
   passe devant le CSS que topbar.js injecte à l'exécution. */
html.jl-dense{--topbar-h:56px}

/* Ossature rail + corps, commune au hub et aux maquettes */
.jl-app{display:flex;min-height:calc(100vh - var(--topbar-h))}
.jl-body{flex:1;min-width:0;padding:var(--space-7) var(--space-9) var(--space-10)}
@media (max-width:900px){.jl-body{padding:var(--space-5) var(--space-4) var(--space-10)}}

/* ═══════════════════ 2. RAIL « Chercher dans » ═══════════════════════════ */
.jl-rail{
  width:248px;flex:none;
  border-right:1px solid var(--line);background:var(--white);
  padding:var(--space-3) var(--space-2);
  display:flex;flex-direction:column;gap:1px;
  position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));overflow:auto;
  transition:width var(--t-fast);
}
.jl-rail--mini{width:60px}
.jl-rail--mini .jl-ri__lbl,
.jl-rail--mini .jl-ri__n,
.jl-rail--mini .jl-rail__sec{display:none}
.jl-rail__hd{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3) var(--space-3);color:var(--muted)}
.jl-rail__sec{font-size:var(--text-3xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:var(--space-3) var(--space-3) var(--space-1)}
.jl-ri{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);
  font-size:var(--text-base);color:var(--ink);width:100%;text-align:left;
  transition:background var(--t-fast),color var(--t-fast);
}
.jl-ri:hover{background:var(--cream);text-decoration:none;color:var(--ink)}
.jl-ri.is-on{background:var(--teal-xl);color:var(--teal);font-weight:600}
.jl-ri svg{flex:none}
.jl-ri__n{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--muted);font-weight:400}
/* « bientôt » : gris inactif, jamais rouge (règle de couleur) */
.jl-ri.is-soon{opacity:.45;cursor:not-allowed;color:var(--muted)}
.jl-ri.is-soon:hover{background:transparent}
.jl-ri.is-soon .jl-ri__n{font-style:italic}
@media (max-width:900px){
  /* Sous 900 px le rail sort du flux : il devient une colonne d'icônes de
     52 px, et le corps réserve la place (sans quoi le titre passait DESSOUS
     le rail — constaté au navigateur le 13/09/2026 à 390 px). */
  .jl-rail{position:fixed;left:0;z-index:6;box-shadow:2px 0 12px rgba(0,0,0,.08);
    width:52px;padding:var(--space-3) 4px}
  .jl-rail .jl-ri__lbl,.jl-rail .jl-ri__n,.jl-rail .jl-rail__sec{display:none}
  .jl-rail .jl-ri{justify-content:center;padding:var(--space-2) 0}
  .jl-rail--mini{width:52px}
  .jl-rail--cache{display:none}   /* les pages décision masquent le rail (pas de mode mini) */
  .jl-rail+.jl-body{padding-left:64px}
  .jl-rail--cache+.jl-body{padding-left:var(--space-4)}   /* rail masqué : rien à réserver */
}

/* ═══════════════════ 3. PASTILLE (+ variante loader) ═════════════════════ */
/* Forme retenue : la gélule mono à point intégré de carte-748.html:71-73. */
.jl-pastille{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:var(--text-xs);
  padding:1px var(--space-2) 1px 6px;
  border-radius:10px;border:1px solid currentColor;
  white-space:nowrap;vertical-align:1px;
}
.jl-pastille::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none}
.jl-pastille--ok{color:var(--ok)}
.jl-pastille--morte{color:var(--bad)}
.jl-pastille--future{color:var(--doc)}
/* non résolu : anneau vide, gris — « je ne sais pas », pas « erreur » */
.jl-pastille--q{color:var(--muted)}
.jl-pastille--q::before{background:transparent;border:1px solid currentColor;width:5px;height:5px}
/* variante loader : le point devient le rotor */
.jl-pastille--loader{color:var(--warn)}
.jl-pastille--loader::before{
  background:transparent;border:1.5px solid var(--line);border-top-color:currentColor;
  width:8px;height:8px;animation:jl-sp .8s linear infinite;
}

/* Point nu (légendes, sous-entrées du rail) : couleur donnée par --c */
.jl-point{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;
  background:var(--c,var(--ok));vertical-align:-1px}
.jl-point--soon{background:transparent;border:1px solid var(--muted)}
.jl-point--morte{background:var(--muted)}
.jl-point--sm{width:7px;height:7px}

/* Loader plein format */
.jl-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
  border-top-color:var(--teal);border-radius:50%;animation:jl-sp .8s linear infinite;
  vertical-align:middle}
@keyframes jl-sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .jl-spin,.jl-pastille--loader::before{animation-duration:2.4s}
}
/* Squelette de chargement (hub.html:72-76) */
.jl-sk{border-bottom:1px solid var(--line);padding:var(--space-4) 0;opacity:.5}
.jl-sk div{height:10px;border-radius:var(--radius);background:var(--line);
  margin-bottom:var(--space-2);animation:jl-pulse 1.2s ease-in-out infinite}
@keyframes jl-pulse{0%,100%{opacity:.45}50%{opacity:.85}}

/* ═══════════════════ 4. LIGNE-TEXTE ══════════════════════════════════════ */
/* Cinq registres (carte-748.html:206-210) : relation, titre, titre long,
   métadonnées, renvoi. Les formes plus pauvres s'y ramènent par suppression. */
.jl-lt{padding:var(--space-2) 0 7px;font-size:var(--text-base)}
.jl-lt__rel{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal);display:flex;gap:var(--space-2);
  align-items:center;margin-bottom:3px}
.jl-lt__t{line-height:1.35}
.jl-lt__t a{font-weight:600;color:var(--ink)}
.jl-lt__t a:hover{color:var(--teal)}
.jl-lt__long{font-size:var(--text-xs);color:var(--muted);margin-top:3px;line-height:1.42}
.jl-lt__meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  font-size:var(--text-xs);color:var(--muted);margin-top:3px}
.jl-lt__more{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1)}
.jl-lt__more a{color:var(--muted);text-decoration:underline;text-decoration-style:dotted}
.jl-lt__more a:hover{color:var(--teal)}
.jl-lt--morte{opacity:.55}
.jl-lt--morte .jl-lt__rel{color:var(--muted)}
.jl-lt--morte .jl-lt__t a{font-weight:500}
.jl-lt--separee{border-top:1px solid var(--line);padding-top:var(--space-3)}
.jl-lt--separee:first-of-type{border-top:0;padding-top:0}

/* ═══════════════════ 5. CHAÎNE ═══════════════════════════════════════════ */
.jl-chaine{border:1px solid var(--line);border-radius:var(--radius-xl);
  background:var(--cream);margin-bottom:var(--space-3);overflow:hidden}
.jl-chaine__tete{display:flex;align-items:center;gap:var(--space-3);
  padding:9px var(--space-3);cursor:pointer;user-select:none}
.jl-chaine__tete:hover{background:var(--teal-xl)}
.jl-chaine__chev{color:var(--teal);transition:transform var(--t-fast);flex:none}
.jl-chaine.is-open .jl-chaine__chev{transform:rotate(90deg)}
.jl-chaine__obj{font-weight:600;font-size:var(--text-base);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jl-chaine__cnt{margin-left:auto;font-family:var(--font-mono);
  font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
.jl-chaine__membres{display:none;border-top:1px solid var(--line);
  background:var(--white);padding:var(--space-1) var(--space-3) var(--space-2)}
.jl-chaine.is-open .jl-chaine__membres{display:block}
.jl-membre{display:grid;grid-template-columns:20px 1fr;gap:var(--space-2);
  padding:7px 0;border-top:1px solid var(--line);font-size:var(--text-sm)}
.jl-membre:first-child{border-top:0}
.jl-membre .jl-point{margin-top:5px}
.jl-membre--morte{opacity:.55}
.jl-membre--morte .jl-point{background:var(--muted)}
.jl-membre--future .jl-point{background:var(--doc)}
/* Arbre compact (forme par défaut de la CARTE) */
.jl-arbre{font-size:var(--text-base)}
.jl-noeud{position:relative;padding-left:var(--space-5)}
.jl-noeud::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line)}
.jl-noeud--last::before{bottom:auto;height:14px}
.jl-noeud::after{content:"";position:absolute;left:5px;top:14px;width:11px;height:1px;background:var(--line)}
.jl-legende{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-xs);
  color:var(--muted);margin:0 0 var(--space-3)}
.jl-legende .jl-point{margin-right:5px}

/* ═══════════════════ 6. POINT-FRISE ══════════════════════════════════════ */
/* hub.html:293-295 gagne : ses trois états sont déjà sur la règle de couleur. */
.jl-frise{position:relative;margin:var(--space-5) 0 0 var(--space-3);
  padding-left:22px;border-left:2px solid var(--line);list-style:none}
.jl-frise__ev{position:relative;padding:0 0 var(--space-5)}
/* Le point doit être centré sur le trait : trait de 2 px à -24..-22 px du
   contenu (padding 22 + bordure 2), donc centre à -23 px ; le point fait 12 px
   bordure comprise (box-sizing explicite, sinon il dérive de 2 à 4 px à droite). */
.jl-frise__ev::before{content:"";position:absolute;left:-29px;top:4px;
  box-sizing:border-box;width:12px;height:12px;border-radius:50%;background:var(--white);
  border:2px solid var(--teal)}
.jl-frise__ev--morte::before{background:var(--bad);border-color:var(--bad)}
.jl-frise__ev--bientot::before{border-style:dashed;border-color:var(--muted)}
.jl-frise__when{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}
.jl-frise__what{font-weight:600;font-size:var(--text-base)}

/* Chronologie courte, à points de 9 px (variante des pages décision) */
.jl-chrono{list-style:none;margin:0;padding:0}
.jl-chrono li{position:relative;padding:0 0 var(--space-3) var(--space-5);font-size:var(--text-base)}
.jl-chrono li::before{content:"";position:absolute;left:5px;top:6px;bottom:-6px;width:1px;background:var(--line)}
.jl-chrono li:last-child::before{display:none}
/* 3/10/2026 : point de 11 px bordure comprise, centré sur le trait (centre 5,5 px). */
.jl-chrono li::after{content:"";position:absolute;left:0;top:5px;box-sizing:border-box;width:11px;height:11px;
  border-radius:50%;background:var(--line);border:1px solid var(--muted)}
.jl-chrono li.is-cur::after{background:var(--teal);border-color:var(--teal)}
.jl-chrono .jl-chrono__d{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--teal)}
.jl-chrono__j{font-weight:600}
.jl-chrono__w{color:var(--muted);font-size:var(--text-sm)}

/* ═══════════════════ 7. BANDE-IDENTITÉ ═══════════════════════════════════ */
/* SANS boîte par défaut (carte-748.html:90-94). --encadree est un modificateur,
   pas un second composant. --enligne est la forme compacte de decision-03b. */
.jl-bande{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;margin:var(--space-1) 0 var(--space-6);width:100%}
.jl-bande>div{padding:var(--space-1) var(--space-5);border-left:1px solid var(--line);min-width:0}
.jl-bande>div:first-child{border-left:0;padding-left:0}
.jl-bande__k{font-size:var(--text-3xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:var(--space-1)}
.jl-bande__v{font-size:var(--text-base)}
.jl-bande--encadree{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:var(--space-3) 0}
.jl-bande--encadree>div:first-child{padding-left:var(--space-5)}
.jl-bande--enligne{display:flex;flex-wrap:wrap;gap:6px 22px;
  margin:var(--space-2) 0 var(--space-4);font-size:var(--text-base)}
.jl-bande--enligne>div{padding:0;border-left:0}
.jl-bande--enligne .jl-bande__k{display:inline;margin:0 6px 0 0}

/* ═══════════════════ 8. BOUTON ═══════════════════════════════════════════ */
/* PIÈGE N° 1 du rapport : `.btn` vaut plein teal dans hub.html:250 et ghost
   dans decision-03b.html:66. On ne reprend donc JAMAIS le nom `.btn` :
   .jl-bouton est plein par défaut, .jl-bouton--ghost est explicite. */
.jl-bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  background:var(--teal);color:#fff;
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-wide);
  border:1px solid var(--teal);border-radius:var(--radius-md);
  cursor:pointer;text-align:center;text-decoration:none;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.jl-bouton:hover{background:var(--teal-l);border-color:var(--teal-l);color:#fff;text-decoration:none}
.jl-bouton svg{width:15px;height:15px;flex:none}
/* Appel à l'action : plus grand, plus espacé (l'ancien .cta) */
.jl-bouton--cta{padding:.7rem 1.3rem;font-weight:700;letter-spacing:var(--ls-wider)}
.jl-bouton--ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
.jl-bouton--ghost:hover{background:var(--teal-xl);color:var(--teal);border-color:var(--teal)}
.jl-bouton--sm{padding:var(--space-1) var(--space-3);font-size:var(--text-3xs)}
/* Bouton icône : carré, fantôme, sans libellé */
.jl-bouton--icone{width:34px;height:34px;padding:0;background:var(--white);
  color:var(--muted);border-color:var(--line);border-radius:var(--radius-lg)}
.jl-bouton--icone:hover{background:var(--white);color:var(--teal);border-color:var(--teal)}
.jl-bouton--icone svg{width:18px;height:18px}
/* Exception assumée « Inédits » : jeton dédié, pas d'accent général */
.jl-bouton--inedits{background:var(--accent-inedits);border-color:var(--accent-inedits)}
.jl-bouton--inedits:hover{background:var(--accent-inedits-l);border-color:var(--accent-inedits-l)}
.jl-bouton[disabled],.jl-bouton--desactive{
  background:var(--muted);border-color:var(--muted);color:#fff;
  cursor:not-allowed;opacity:.6}
.jl-bouton--ghost[disabled]{background:transparent;color:var(--muted);border-color:var(--line)}

/* ═══════════════════ 9. NOTE DE PROVENANCE ═══════════════════════════════ */
/* PIÈGE N° 4 : le POINTILLÉ dit « d'où je le sais » ; la bordure PLEINE
   colorée --warn dit « attention à cette donnée ». Ne pas fusionner. */
.jl-provenance{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.03em;
  color:var(--muted);border:1px dashed var(--line);padding:0 5px;
  border-radius:var(--radius);white-space:nowrap;cursor:help}
/* Marqueur de source : bordure PLEINE, majuscules (« LEGI », « Judilibre · DILA ») */
.jl-src{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  padding:0 5px;border-radius:var(--radius);white-space:nowrap}
/* Avertissement SUR LA DONNÉE (« maquette », « numéro recyclé ») : --warn plein */
.jl-warnp{font-size:var(--text-3xs);letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--warn);color:var(--warn);padding:1px 6px;background:transparent;
  border-radius:var(--radius);white-space:nowrap;opacity:.85}
/* Mention « sommaire officiel » : teal, sans bordure */
.jl-off{font-size:var(--text-3xs);letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal);padding:1px 6px;border-radius:var(--radius)}

/* ═══════════════════ 10. BLOC HONNÊTETÉ ══════════════════════════════════ */
/* Contenu ÉDITORIAL permanent (« ce que la page ne sait pas »). Jamais rouge. */
/* 13 sept. 2026, décision de la propriétaire : le fond ambre était laid.
   Le bloc d'honnêteté prend le style des encadrés déjà en prod (.infobox de
   l'annuaire et des ressources) : fond --teal-xl, filet teal à gauche. Il reste
   distinct de l'alerte (rouge) et de l'avertissement sur la donnée (.jl-warnp). */
.jl-honnetete{font-size:var(--text-sm);color:var(--body);
  padding:var(--space-2) var(--space-3);
  border-left:3px solid var(--teal);background:var(--teal-xl);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;line-height:var(--lh-normal)}
.jl-honnetete b{color:var(--ink)}
.jl-honnetete--nue{border-left:2px solid var(--line);background:transparent}

/* ═══════════════════ 11. ALERTE ══════════════════════════════════════════ */
/* ÉCHEC TECHNIQUE, distinct du bloc honnêteté : bordure 2 px --bad. */
.jl-alerte{background:var(--bad-bg);border:2px solid var(--bad);color:var(--ink);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);
  font-size:var(--text-base);line-height:var(--lh-normal)}
.jl-alerte b{color:var(--bad)}
/* Variante avec pictogramme à gauche : seule celle-là est en flex, sinon un
   texte nu placé directement dans le bloc se briserait en colonnes. */
.jl-alerte--icone{display:flex;gap:var(--space-3);align-items:flex-start}
/* Encadré neutre d'information (l'ancien .note / .infobox) */
.jl-note{background:var(--warn-bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:9px var(--space-3);font-size:var(--text-sm)}
.jl-callout{background:var(--teal-xl);border-left:4px solid var(--teal);
  padding:var(--space-5) var(--space-6);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  margin:var(--space-5) 0}

/* ═══════════════════ 12. ONGLETS ═════════════════════════════════════════ */
/* COMMUTENT DES PANNEAUX ENTIERS (Texte / Dossier). Composant à part des
   bascules de vue (§13). Mécanique CSS pure : <input type=radio class=jl-tab>. */
.jl-onglets{position:sticky;top:var(--topbar-h);z-index:10;background:var(--cream);
  display:flex;gap:2px;border-bottom:1px solid var(--line);
  margin-bottom:var(--space-5);overflow-x:auto}
.jl-onglets label{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);
  letter-spacing:var(--ls-wide);text-transform:uppercase;font-weight:600;
  color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;
  transition:color var(--t-fast),border-color var(--t-fast)}
.jl-onglets label:hover{color:var(--teal)}
.jl-onglets label .jl-onglets__c{font-family:var(--font-mono);font-size:var(--text-xs);
  margin-left:5px;font-weight:400}
input.jl-tab{position:absolute;opacity:0;width:0;height:0}
.jl-pane{display:none}
.jl-pane.is-on{display:block}
/* Câblage CSS pur des deux onglets de la page décision */
#t-texte:checked~.jl-onglets label[for=t-texte],
#t-fiche:checked~.jl-onglets label[for=t-fiche]{color:var(--teal);border-bottom-color:var(--teal)}
#t-texte:checked~.jl-panes .jl-pane--texte,
#t-fiche:checked~.jl-panes .jl-pane--fiche{display:block}
input.jl-tab:focus-visible+.jl-onglets label,
.jl-onglets label:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

/* ═══════════════════ 13. BASCULE DE VUE ══════════════════════════════════ */
/* Un SEUL composant à deux tailles : .jl-vue (Couloirs / Poupées russes) et
   .jl-vue--sm (Sommaire / Extrait, Pertinence / Récent / Ancien). */
.jl-vue{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;font-size:var(--text-xs);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600}
.jl-vue>a,.jl-vue>button{padding:6px var(--space-3);color:var(--muted);background:var(--white)}
.jl-vue>a.is-on,.jl-vue>button.is-on{background:var(--teal);color:#fff}
.jl-vue>a:hover,.jl-vue>button:hover{text-decoration:none;color:var(--teal)}
.jl-vue>a.is-on:hover,.jl-vue>button.is-on:hover{color:#fff}
.jl-vue--sm{border-radius:var(--radius-md);font-size:var(--text-sm);text-transform:none;
  letter-spacing:0;font-weight:400}
.jl-vue--sm>a,.jl-vue--sm>button{padding:var(--space-1) var(--space-3)}

/* Filtre à bascule — PAS un bouton : « ce filtre est actif », pas « clique ici » */
.jl-filtre{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);
  padding:5px 11px;border-radius:14px;border:1px solid var(--line);
  background:var(--white);color:var(--muted);cursor:pointer;white-space:nowrap}
.jl-filtre:hover{border-color:var(--teal);color:var(--teal)}
.jl-filtre.is-on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}

/* ═══════════════════ 14. POPOVER DE DATE ═════════════════════════════════ */
.jl-datew{position:relative;display:inline-flex;align-items:center;gap:var(--space-2)}
.jl-calbtn{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--white);color:var(--teal)}
.jl-calbtn:hover{border-color:var(--teal)}
.jl-calbtn svg{width:15px;height:15px}
.jl-datepop{position:absolute;top:34px;left:0;z-index:20;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-pop);
  min-width:280px;display:none}
.jl-datepop.is-open{display:block}
.jl-datepop__k{font-size:var(--text-3xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:var(--space-2) 0 var(--space-1)}
.jl-datepop__k:first-child{margin-top:0}
.jl-datepop__row{display:flex;gap:var(--space-2);align-items:center}
.jl-datepop input[type=text],.jl-datepop input[type=date]{
  padding:5px var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--cream);font-family:var(--font-mono);font-size:var(--text-sm)}
.jl-datepop__err{color:var(--bad);font-size:var(--text-xs);margin-top:var(--space-1);min-height:1em}

/* ═══════════════════ 15. TITRES ET MOT ACCENTUÉ ══════════════════════════ */
/* Règle de couleur : NOIR = titre de section ; TEAL = action ou navigation ;
   GRIS = sur-titre / inactif. */
.jl-titre{font-family:var(--font-serif);font-weight:400;font-size:var(--text-2xl);
  color:var(--ink);line-height:var(--lh-tight);margin:0 0 var(--space-2);
  padding-bottom:var(--space-2);border-bottom:2px solid var(--teal-xl)}
.jl-titre--nu{border-bottom:0;padding-bottom:0;font-size:var(--text-xl);
  margin:var(--space-6) 0 var(--space-2)}
.jl-titre--h1{font-size:var(--text-hero);border-bottom:0;padding-bottom:0;margin:0 0 6px}
.jl-titre--h3{font-size:var(--text-lg);color:var(--teal);border-bottom:0;
  padding-bottom:0;margin:var(--space-5) 0 6px}
/* ⛔ PIÈGE N° 5 : PAS de règle `em{}` globale. Le mot accentué n'existe QUE
   dans la portée d'un titre. Bas de casse → italique ; capitales → droit. */
.jl-titre em,.jl-titre--h1 em,.jl-titre--nu em,.jl-titre--h3 em{
  font-style:italic;color:var(--teal);font-weight:inherit}
.jl-titre--capitales{text-transform:uppercase}
.jl-titre--capitales em{font-style:normal}
/* Surlignage du terme cherché : AUTRE composant, droit, sur fond. */
.jl-hl{font-style:normal;background:var(--teal-xl);padding:0 2px;border-radius:2px}
/* Sur-titre (10 px majuscules gris) */
.jl-surtitre{font-size:var(--text-3xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.jl-surtitre--flex{margin:0 0 var(--space-2);letter-spacing:var(--ls-wider);
  display:flex;align-items:center;gap:var(--space-2)}
/* Kicker : la ligne teal au-dessus du h1 (navigation, donc teal) */
.jl-kicker{font-size:var(--text-xs);color:var(--teal);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-widest);margin-bottom:6px}
/* Fil d'ariane */
.jl-fil{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:var(--space-3)}
.jl-fil a{color:var(--muted)}
.jl-fil a:hover{color:var(--teal)}

/* ═══════════════════ 16. TUILE ═══════════════════════════════════════════ */
.jl-tuile{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);display:block;color:inherit;text-align:left;width:100%;
  transition:border-color var(--t-fast),box-shadow var(--t)}
.jl-tuile__t{font-weight:600;font-size:var(--text-base);display:flex;align-items:center;gap:var(--space-2)}
.jl-tuile__s{font-size:var(--text-sm);color:var(--muted);margin-top:3px}
.jl-tuile__n{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);margin-top:6px}
.jl-tuile--survol:hover{border-color:var(--teal);box-shadow:var(--shadow);text-decoration:none}
.jl-tuile--evidence{background:var(--teal-xl);border-color:var(--teal)}
.jl-tuile--bientot{opacity:.55;background:var(--cream);position:relative;cursor:not-allowed}
.jl-tuile--bientot::after{content:"bientôt";position:absolute;top:var(--space-3);right:var(--space-3);
  font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--ls-wide);
  color:var(--muted);font-weight:600}
/* Carte de contenu simple (pas cliquable) */
.jl-carte{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:var(--space-4)}

/* ═══════════════════ 17. TABLEAU ═════════════════════════════════════════ */
.jl-tableau{border-collapse:collapse;font-size:var(--text-base);width:100%}
.jl-tableau th,.jl-tableau td{border-top:1px solid var(--line);
  padding:6px var(--space-2);text-align:left;vertical-align:top}
.jl-tableau th{position:sticky;top:0;z-index:2;background:var(--white);
  font-size:var(--text-3xs);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--muted);font-weight:600}
.jl-tableau th[data-sort]{cursor:pointer;user-select:none}
.jl-tableau th[data-sort]:hover{color:var(--teal)}
.jl-tableau th .jl-arr{opacity:.3;margin-left:var(--space-1)}
.jl-tableau th.is-sorted .jl-arr{opacity:1;color:var(--teal)}
.jl-tableau tbody tr:hover{background:var(--cream)}

/* ═══════════════════ 18. MENU DÉROULANT ══════════════════════════════════ */
.jl-menu{position:relative;display:inline-block;min-width:260px}
.jl-menu__display{width:100%;text-align:left;cursor:pointer;font-size:var(--text-base);
  color:var(--ink);padding:.55rem .75rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;justify-content:space-between;align-items:center}
.jl-menu__display:hover{border-color:var(--teal)}
.jl-menu__chev{color:var(--muted);transition:transform var(--t);margin-left:var(--space-2)}
.jl-menu.is-open .jl-menu__display{border-color:var(--teal)}
.jl-menu.is-open .jl-menu__chev{transform:rotate(180deg)}
.jl-menu__panel{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;
  width:max-content;max-width:460px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-md);max-height:360px;
  overflow-y:auto;z-index:200;display:none}
.jl-menu.is-open .jl-menu__panel{display:block}
.jl-menu__item{padding:.5rem .85rem;font-size:var(--text-base);cursor:pointer;
  color:var(--ink);transition:background var(--t-fast)}
.jl-menu__item:hover{background:var(--teal-xl)}
.jl-menu__item.is-selected{background:var(--teal-xl);color:var(--teal);font-weight:600}
.jl-menu__group{padding:.45rem .85rem;font-size:var(--text-sm);text-transform:uppercase;
  letter-spacing:var(--ls-wide);color:var(--muted);cursor:pointer;
  border-top:1px solid var(--line)}
.jl-menu__group:first-child{border-top:0}
.jl-menu__group:hover{color:var(--teal)}
.jl-menu__item--sub{padding-left:1.6rem}

/* ═══════════════════ 19. MODALE ══════════════════════════════════════════ */
.jl-modale-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;z-index:300;padding:var(--space-4)}
.jl-modale{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:var(--space-6);max-width:560px;width:100%;
  max-height:85vh;overflow:auto;box-shadow:var(--shadow-lg)}
.jl-modale h3{font-family:var(--font-serif);font-weight:400;font-size:var(--text-xl);
  margin-bottom:var(--space-3)}

/* ═══════════════════ 20. PIED ════════════════════════════════════════════ */
.jl-pied{margin:var(--space-7) 0 var(--space-6);padding-top:var(--space-3);
  border-top:1px solid var(--line);font-size:var(--text-xs);color:var(--muted)}
.jl-pied a{color:var(--muted);text-decoration:underline;text-decoration-style:dotted}
.jl-pied a:hover{color:var(--teal)}
/* Étiquette flottante de prototype */
.jl-proto{position:fixed;right:var(--space-3);bottom:var(--space-3);
  font-size:var(--text-xs);color:var(--muted);background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-1) var(--space-2);z-index:9}

/* ═══════════════════ 21. BARRE DE RECHERCHE RÉSEAU ═══════════════════════ */
/* Cherche SUR LE RÉSEAU, en plusieurs sources : d'où bouton, loaders, états
   par source. DISTINCTE de la barre de filtrage local (§22). */
.jl-barre-reseau{display:flex;flex:1;border:1.5px solid var(--teal);
  border-radius:var(--radius-md);background:var(--white);overflow:hidden;max-width:880px}
.jl-barre-reseau input{flex:1;padding:var(--space-3) var(--space-4);font-size:1rem;
  border:0;outline:0;background:transparent;min-width:0}
.jl-barre-reseau input::placeholder{color:var(--muted);opacity:.55}
.jl-barre-reseau__go{background:var(--teal);color:#fff;font-weight:600;
  font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;padding:0 22px}
.jl-barre-reseau__go:disabled{opacity:.5;cursor:default}
/* État par source, pendant la recherche */
.jl-sources{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-xs);
  color:var(--muted);margin:6px 0 var(--space-1)}
.jl-sources>span{display:inline-flex;align-items:center;gap:5px}

/* ═══════════════════ 22. BARRE DE FILTRAGE LOCAL ═════════════════════════ */
/* Filtre un jeu DÉJÀ CHARGÉ : pas de bouton, pas de loader, compteur toujours
   juste. Ne jamais la fusionner avec la barre réseau (rapport §7.3). */
.jl-barre-filtre{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:.8rem 1rem}
.jl-barre-filtre input[type=text]{flex:1;min-width:220px;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);font-size:var(--text-md)}
.jl-barre-filtre input[type=text]:focus{outline:none;border-color:var(--teal)}
.jl-barre-filtre__count{font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--muted);margin-left:auto}

/* ═══════════════════ 23. LES TROIS AXES DE COULEUR ═══════════════════════ */
/* PIÈGE N° 3 : trois axes, jamais fusionnés. */
/* AXE 1 — backend interrogé : rectangle plein, couleurs --src-* */
.jl-src-badge{display:inline-block;padding:1px 6px;border-radius:var(--radius-sm);
  font-size:var(--text-3xs);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--muted)}
.jl-src-badge--ce{background:var(--src-ce)}
.jl-src-badge--admin{background:var(--src-admin)}
.jl-src-badge--jud{background:var(--src-jud)}
.jl-src-badge--cedh{background:var(--src-cedh)}
.jl-src-badge--cjue{background:var(--src-cjue)}
/* AXE 2 — famille juridictionnelle : bordure et texte, fond transparent */
.jl-tag{display:inline-block;font-size:var(--text-3xs);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;padding:2px 6px;
  border-radius:var(--radius);border:1px solid currentColor;color:var(--c,var(--muted))}
.jl-tag--jud{--c:var(--jud)} .jl-tag--adm{--c:var(--adm)} .jl-tag--ce{--c:var(--ce)}
.jl-tag--eu{--c:var(--eu)}   .jl-tag--txt{--c:var(--txt)} .jl-tag--doc{--c:var(--doc)}
/* AXE 3 — catégorie d'entité de l'annuaire : pastille teal-xl pleine */
.jl-badge{display:inline-block;padding:.1rem .4rem;border-radius:var(--radius);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:var(--teal-xl);color:var(--teal)}
.jl-badge--prada{background:var(--warn-bg);color:var(--warn)}

/* Chip (valeur cliquable, matière, rédaction) */
.jl-chip{display:inline-block;font-size:var(--text-xs);padding:2px var(--space-2);
  border-radius:10px;background:var(--teal-xl);color:var(--teal);white-space:nowrap}
.jl-chip:hover{text-decoration:none;background:var(--teal);color:#fff}

/* ═══════════════════ 24. SOMMAIRE LATÉRAL ════════════════════════════════ */
.jl-toc{font-size:var(--text-base)}
.jl-toc a{display:block;padding:var(--space-1) var(--space-2);
  border-left:2px solid var(--line);color:var(--muted)}
.jl-toc a.l3{padding-left:var(--space-5);font-size:var(--text-sm)}
.jl-toc a.is-on{border-left-color:var(--teal);color:var(--teal);font-weight:600}
.jl-toc a:hover{color:var(--teal);text-decoration:none}

/* ═══════════════════ 25. TEXTE DE DÉCISION ═══════════════════════════════ */
.jl-txt p{margin:0 0 .85em;font-size:var(--text-md);line-height:1.65}
.jl-txt p.jl-pn{padding-left:2.4em;text-indent:-2.4em}
.jl-txt .jl-no{display:inline-block;width:2.1em;text-indent:0;font-family:var(--font-mono);
  font-size:var(--text-xs);color:var(--muted);margin-right:.3em}
.jl-txt .jl-no a{color:inherit}
.jl-txt .jl-no a:hover{color:var(--teal)}
.jl-txt p:target{background:var(--teal-xl);border-radius:var(--radius-md);
  box-shadow:0 0 0 6px var(--teal-xl)}
/* Lien vers un article de loi : souligné pointillé (c'est une navigation) */
.jl-artlink{color:var(--teal);text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px;font-weight:600}
.jl-artlink:hover{text-decoration-style:solid}
/* En-tête officiel replié */
.jl-entete{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.55;
  color:var(--muted);white-space:pre-wrap;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4)}
.jl-entete b{color:var(--ink);font-weight:600}
/* Sommaire officiel, encadré teal-xl */
.jl-somm{background:var(--teal-xl);border-radius:var(--radius-xl);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.jl-somm__t{font-family:var(--font-serif);font-weight:400;font-size:var(--text-lg);
  line-height:var(--lh-normal);margin:0 0 var(--space-2)}
.jl-somm__m{margin:0;font-size:var(--text-sm);display:flex;gap:var(--space-2);
  align-items:center;flex-wrap:wrap}
/* Liste de définitions clé / valeur */
.jl-dl{display:grid;grid-template-columns:auto 1fr;gap:5px var(--space-4);
  font-size:var(--text-base);margin:0}
.jl-dl dt{color:var(--muted);font-size:var(--text-xs);letter-spacing:var(--ls-wide);
  text-transform:uppercase;font-weight:600;padding-top:2px}
.jl-dl dd{margin:0}
/* Partie à l'instance */
.jl-partie{padding:var(--space-2) 0;border-top:1px solid var(--line);font-size:var(--text-base)}
.jl-partie:first-of-type{border-top:0;padding-top:0}
.jl-partie__role{font-size:var(--text-xs);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--teal);font-weight:600}
.jl-partie__nom{font-weight:600}
.jl-partie__cons{color:var(--muted);font-size:var(--text-sm)}
/* Article visé */
.jl-vise{padding:var(--space-2) 0;border-top:1px solid var(--line);font-size:var(--text-base)}
.jl-vise:first-of-type{border-top:0;padding-top:0}
.jl-vise__t{font-weight:600}
.jl-vise__d{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:var(--text-xs);color:var(--muted);margin-top:3px}
.jl-vise--encadre{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-2);border-top:1px solid var(--line)}
/* Barre de référence copiable */
.jl-refbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4)}
.jl-copyrow{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.jl-copyrow code,.jl-refbar code{font-family:var(--font-mono);font-size:var(--text-xs);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-1) var(--space-2);user-select:all}
.jl-copyok{font-size:var(--text-xs);color:var(--ok)}
/* Repli (<details>) */
.jl-fold summary{cursor:pointer;font-size:var(--text-sm);color:var(--teal);list-style:none}
.jl-fold summary::-webkit-details-marker{display:none}
.jl-fold summary::before{content:"▸ "}
.jl-fold[open] summary::before{content:"▾ "}
/* Grilles de la page décision */
.jl-grille-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start}
.jl-grille-2>section{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);margin:0}
.jl-lecture{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:22px;align-items:start}
.jl-lecture .jl-toc{position:sticky;top:calc(var(--topbar-h) + 54px)}
.jl-titrerow{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap}
.jl-titrerow .jl-titre--h1{flex:1 1 420px}
.jl-actions{display:flex;align-items:center;gap:var(--space-2);padding-top:6px}
@media (max-width:900px){
  .jl-grille-2{grid-template-columns:1fr}
  .jl-lecture{grid-template-columns:1fr}
  .jl-lecture .jl-toc{position:static}
}

/* ── Petits helpers de mise en page (remplacent les style="" en ligne) ──── */
[data-align="fin"]{margin-left:auto}
[data-espace="haut"]{margin-top:var(--space-2)}
.jl-fold__sum{font-family:var(--font-serif);font-weight:400;font-size:var(--text-xl);
  color:var(--teal);cursor:pointer}
.jl-fold__sum .jl-muted{font-family:var(--font-sans);font-size:var(--text-xs)}
.jl-faits{font-size:var(--text-sm);padding-left:var(--space-5);margin:6px 0 0}
.jl-faits .jl-mono{font-size:var(--text-xs);color:var(--muted)}
.jl-note-fin{font-size:var(--text-xs);color:var(--muted);margin:var(--space-2) 0 0}
.jl-grille-2 .jl-vise--encadre{background:var(--cream)}
/* Réserve la place du popover de date laissé ouvert dans le catalogue. */
.jl-datepop-espace{height:230px}

/* ═══════════════════ 27. PAGE DE RECHERCHE ═══════════════════════════════ */
/* Ajouté le 13/09/2026 pour web/v2/recherche.html. Rien n'est renommé ici :
   ce sont des composants NEUFS, tous préfixés jl-, qui s'appuient sur ceux
   des §1 à §25. */

/* ── 27.1 Panneau avancé, en continuité visuelle sous la barre réseau ──── */
.jl-barre-reseau__opt{border-left:1px solid var(--line);padding:0 var(--space-3);
  display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--muted);
  white-space:nowrap;background:transparent}
.jl-barre-reseau__opt.is-on{color:var(--teal);background:var(--teal-xl)}
.jl-barre-reseau__opt b{display:inline-block;transition:transform var(--t-fast);font-weight:400}
.jl-barre-reseau__opt.is-on b{transform:rotate(180deg)}
.jl-advcount{background:var(--teal);color:#fff;border-radius:10px;font-size:var(--text-3xs);
  padding:0 6px;font-family:var(--font-mono)}
.jl-sbox{max-width:880px}
.jl-adv{background:var(--white);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  padding:var(--space-4) var(--space-4) var(--space-3);max-width:880px}
.jl-adv[hidden]{display:none}
.jl-adv__fams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media (max-width:1100px){.jl-adv__fams{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.jl-adv__fams{grid-template-columns:1fr}}
.jl-fam__h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--ink);background:var(--teal-xl);padding:7px var(--space-3);
  border-radius:5px;margin-bottom:6px}
.jl-fam__all{width:16px;height:16px;border:1.5px solid var(--teal);border-radius:3px;
  flex:none;position:relative;background:transparent}
.jl-fam__all.is-on{background:var(--teal)}
.jl-fam__all.is-on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.jl-fam__all.is-half::after{content:"";position:absolute;left:3px;right:3px;top:6px;
  height:2px;background:var(--teal)}
.jl-fch{display:flex;align-items:center;gap:var(--space-2);width:100%;text-align:left;
  font-size:var(--text-sm);padding:5px var(--space-2);border-radius:var(--radius-md);color:var(--ink)}
.jl-fch:hover{background:var(--teal-xl)}
.jl-fch i{width:13px;height:13px;border:1.5px solid var(--muted);border-radius:3px;
  flex:none;position:relative;box-sizing:border-box}
.jl-fch.is-on i{background:var(--teal);border-color:var(--teal)}
.jl-fch.is-on i::after{content:"";position:absolute;left:3px;top:0;width:4px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.jl-fch.is-on{color:var(--teal);font-weight:600}
.jl-fch__n{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-3xs);color:var(--muted)}
/* « bientôt » : gris inactif, jamais rouge */
.jl-fch.is-soon{color:var(--muted);cursor:not-allowed;font-style:italic}
.jl-fch.is-soon i{border-style:dashed;opacity:.6}
.jl-adv__row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-3);
  padding-top:var(--space-3);border-top:1px solid var(--line);align-items:flex-end}
.jl-adv__lb{font-size:var(--text-3xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:6px}
.jl-adv__champ{flex:1 1 190px;min-width:0}
.jl-adv__champ input[type=date]{width:100%;font:inherit;font-family:var(--font-mono);
  font-size:var(--text-sm);padding:6px var(--space-2);border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--cream);color:var(--ink)}
.jl-adv__champ .jl-menu{min-width:0;width:100%;display:block}
.jl-thes{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--ink)}
.jl-thes i{width:28px;height:16px;border-radius:9px;background:var(--line);position:relative;
  flex:none;transition:background var(--t-fast)}
.jl-thes i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:#fff;transition:left var(--t-fast)}
.jl-thes.is-on{color:var(--teal);font-weight:600}
.jl-thes.is-on i{background:var(--teal)}
.jl-thes.is-on i::after{left:14px}
.jl-adv__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  font-size:var(--text-sm);color:var(--muted);border-top:1px solid var(--line);
  padding-top:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap}
.jl-adv__aide{margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px dashed var(--line);font-size:var(--text-sm);color:var(--muted);line-height:1.7}
.jl-adv__aide b{color:var(--ink);font-weight:600}
.jl-adv__aide code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--teal);
  background:var(--teal-xl);padding:0 5px;border-radius:var(--radius)}
.jl-advsum{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:var(--space-2) 0 2px;
  font-size:var(--text-sm)}

/* ── 27.2 Pastilles de thésaurus, retirables une à une ─────────────────── */
.jl-exp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:var(--space-3) 0 0;
  font-size:var(--text-sm);color:var(--muted);max-width:880px}
.jl-exp__pill{display:inline-flex;align-items:center;gap:5px;padding:2px 5px 2px 9px;
  border-radius:11px;background:var(--teal-xl);color:var(--teal);
  font-family:var(--font-mono);font-size:var(--text-xs)}
.jl-exp__pill button{color:var(--muted);font-size:var(--text-md);line-height:1;padding:0 2px}
.jl-exp__pill button:hover{color:var(--bad)}
.jl-exp__pill.is-removed{opacity:.4;text-decoration:line-through}
.jl-exp__off{color:var(--muted);text-decoration:underline;cursor:pointer;margin-left:var(--space-2)}
.jl-exp__off:hover{color:var(--teal)}

/* ── 27.3 Résultats ────────────────────────────────────────────────────── */
.jl-topline{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  margin:var(--space-5) 0 var(--space-2);flex-wrap:wrap}
.jl-resultats{max-width:1100px}
.jl-resultat{padding:var(--space-4) 0;border-top:1px solid var(--line)}
.jl-resultat__meta{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-sm);
  color:var(--muted);margin-bottom:var(--space-1);flex-wrap:wrap}
.jl-resultat__t{font-family:var(--font-serif);font-weight:400;font-size:var(--text-lg);
  margin:0 0 var(--space-1);line-height:1.3}
.jl-resultat__t a{color:var(--ink)}
.jl-resultat__t a:hover{color:var(--teal)}
.jl-resultat__x{font-size:var(--text-base);margin:0 0 6px;max-width:100ch;line-height:1.5}
.jl-resultat__ref{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);
  display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* Champ vide : marqué, jamais omis en silence (search.html:294) */
.jl-vide{color:var(--muted);opacity:.45}
/* Article cité, repéré par JL.lierArticles : la classe reste `lawref` */
.jl-txt .lawref,.jl-resultat__x .lawref{color:var(--ok);font-weight:600;cursor:pointer;
  border-bottom:1px dashed currentColor}
.jl-txt .lawref:hover,.jl-resultat__x .lawref:hover{background:var(--ok-bg);border-bottom-style:solid}
/* Pagination par source */
.jl-plus{text-align:center;margin:var(--space-5) 0 var(--space-2)}
.jl-plus__detail{font-size:var(--text-sm);color:var(--muted);margin-top:6px;
  font-family:var(--font-mono)}

/* ── 27.4 Facettes ─────────────────────────────────────────────────────── */
.jl-facettes{border-top:1px solid var(--line);padding-top:var(--space-3);margin-top:var(--space-3)}
.jl-frow{display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--text-sm);
  padding:2px 0;width:100%;text-align:left;border-radius:var(--radius-md);color:var(--ink)}
.jl-frow:hover{color:var(--teal)}
.jl-frow.is-on{color:var(--teal);font-weight:600}
.jl-frow__n{font-family:var(--font-mono);color:var(--muted);font-size:var(--text-xs);font-weight:400}
.jl-hist{display:flex;align-items:flex-end;gap:2px;height:34px;margin:var(--space-1) 0}
.jl-hist i{flex:1;display:block;background:var(--teal);opacity:.3;min-height:1px}
.jl-hist i.is-on{opacity:.9}

/* ── 27.5 Flux « Nouveautés » ──────────────────────────────────────────── */
.jl-flux{max-width:1100px;margin:var(--space-10) 0 0}
.jl-flux__carte{display:block;padding:var(--space-4) 0;border-bottom:1px solid var(--line);color:inherit}
a.jl-flux__carte:hover{text-decoration:none}
.jl-flux__haut{display:flex;align-items:center;gap:9px;font-size:var(--text-xs);
  color:var(--muted);margin-bottom:5px;flex-wrap:wrap}
.jl-flux__jour{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);white-space:nowrap}
.jl-flux__t{font-family:var(--font-serif);font-weight:400;font-size:var(--text-lg);
  line-height:1.2;color:var(--ink);margin-bottom:5px}
a.jl-flux__carte:hover .jl-flux__t{color:var(--teal)}
.jl-flux__x{font-size:var(--text-base);line-height:1.5;color:var(--muted);max-width:105ch}
.jl-flux__fin{color:var(--muted);font-size:var(--text-xs);padding:var(--space-4) 0}

/* ── 27.6 Panneau latéral « article de loi » (+ voile) ─────────────────── */
.jl-loi{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:90vw;
  background:var(--white);color:var(--ink);border-left:1px solid var(--line);
  box-shadow:-4px 0 24px rgba(0,0,0,.12);transform:translateX(100%);
  transition:transform var(--t-slow) ease-out;z-index:110;overflow-y:auto;
  display:flex;flex-direction:column}
body.jl-loi-ouverte .jl-loi{transform:translateX(0)}
.jl-loi__hd{padding:var(--space-5) var(--space-5) var(--space-4);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white);z-index:1}
.jl-loi__x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.jl-loi__x:hover{background:var(--cream);color:var(--teal)}
.jl-loi__t{font-family:var(--font-serif);font-weight:400;font-size:var(--text-xl);
  line-height:1.2;margin:0 36px var(--space-1) 0;color:var(--ink)}
.jl-loi__meta{font-size:var(--text-sm);color:var(--muted)}
.jl-loi__corps{padding:var(--space-5);flex:1;font-size:var(--text-md);line-height:1.7;color:var(--body)}
.jl-loi__corps p{margin:0 0 .9em}
.jl-loi__pied{padding:var(--space-3) var(--space-5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--space-2);background:var(--white);position:sticky;bottom:0}
.jl-loi__v{padding:var(--space-3) 0;border-bottom:1px dashed var(--line)}
.jl-voile{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:109;opacity:0;
  pointer-events:none;transition:opacity var(--t-slow)}
body.jl-loi-ouverte .jl-voile{opacity:1;pointer-events:auto}

/* ── 27.7 Bottom sheet mobile : le même panneau, par le bas ────────────── */
.jl-loi__poignee{display:none}
@media (max-width:860px){
  .jl-loi{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;height:88vh;
    border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    transform:translateY(100%);box-shadow:0 -6px 24px rgba(0,0,0,.22)}
  body.jl-loi-ouverte .jl-loi{transform:translateY(0)}
  .jl-loi__poignee{display:block;width:44px;height:4px;background:var(--line);
    border-radius:2px;margin:var(--space-2) auto 0}
}

/* ── 27.8 Modale de signalement (pas de mailto: en clair) ──────────────── */
.jl-modale-overlay[hidden]{display:none}
.jl-mail-r{white-space:nowrap}

/* ── 27.9 Mise en page de la page ──────────────────────────────────────── */
.jl-hero{max-width:880px}
.jl-lead{color:var(--muted);font-size:var(--text-base);margin:0 0 var(--space-5);max-width:90ch}
.jl-hint{color:var(--muted);font-size:var(--text-sm);margin-top:var(--space-3);max-width:880px}
.jl-kb{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted);
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.jl-kb:hover{background:var(--teal);color:#fff;text-decoration:none}
/* Trois utilitaires, pour qu'AUCUN style ne soit écrit en ligne par le JS. */
.jl-compte{font-size:var(--text-xl)}
.jl-petit{font-size:var(--text-sm)}
.jl-teal{color:var(--teal)}

/* ═══════════════════ 26. IMPRESSION ══════════════════════════════════════ */
/* ⚠ Une page A4 fait ~794 px : le point de rupture 900 px s'active À
   L'IMPRESSION. Sans règles explicites, c'est la mise en page MOBILE qui part
   sur le papier (constat de search.html:585-588). D'où le forçage ci-dessous. */
@media print{
  @page{margin:18mm 16mm}
  html,body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  .topbar,.topbar-drawer,.topbar-overlay,.jl-rail,.jl-proto,.jl-toc,
  .jl-actions,.jl-onglets,.jl-bouton,.jl-copyrow button,.jl-refbar button,
  .jl-fil,.jl-vue{display:none !important}
  .jl-app{display:block}
  .jl-body{padding:0}
  .jl-pane{display:block !important}
  .jl-lecture{display:block}
  .jl-grille-2{display:block}
  .jl-grille-2>section{break-inside:avoid;margin-bottom:var(--space-3);border:0;padding:0}
  .jl-fold{display:block}
  .jl-fold[open] summary{display:none}
  .jl-txt p{orphans:3;widows:3}
  .jl-titre,.jl-titre--nu,.jl-titre--h1{break-after:avoid}
  .jl-honnetete,.jl-somm{border:1px solid #999;background:none;color:#000}
  a[href]::after{content:""}
  .jl-carte,.jl-entete{border:1px solid #ccc}

  /* ── Page de recherche (ajouté le 13/09/2026) ────────────────────────
     ⚠ LE PIÈGE : A4 ≈ 794 px, donc les points de rupture 860 px ET 900 px
     s'activent à l'impression. Sans les règles ci-dessous, c'est la mise en
     page MOBILE qui part sur le papier — le panneau d'article en « bottom
     sheet » de 88 vh, la grille des fonds en une colonne, le rail en
     position:fixed par-dessus le texte. (Constat de search.html:585-588,
     transposé aux points de rupture de jl.css.) */
  .jl-barre-reseau,.jl-adv,.jl-exp,.jl-flux,.jl-plus,.jl-facettes,
  .jl-sources,.jl-topline,.jl-hint,.jl-modale-overlay,.jl-voile,
  .jl-barre-reseau__opt,.jl-advsum button{display:none !important}
  /* Ce qu'on imprime : la requête, les filtres, l'état des sources, la liste. */
  .jl-recap-impression{display:block !important;margin:0 0 1em;
    font-size:10pt;border-bottom:1px solid #000;padding-bottom:.5em}
  .jl-resultats{max-width:none !important}
  .jl-resultat{break-inside:avoid;page-break-inside:avoid;
    border-top:1px solid #999;padding:.5em 0}
  .jl-resultat__t{font-size:11pt;color:#000}
  .jl-resultat__x em,.jl-hl{background:none !important;color:#000 !important;
    font-style:normal;font-weight:600}
  .lawref{color:#000 !important;border:0 !important;font-weight:600}
  /* Le panneau d'article, s'il est ouvert, s'imprime EN BLOC après la liste. */
  .jl-loi{position:static !important;transform:none !important;width:auto !important;
    max-width:none !important;height:auto !important;overflow:visible !important;
    border:0 !important;box-shadow:none !important;display:block !important;
    break-before:page;page-break-before:always}
  body:not(.jl-loi-ouverte) .jl-loi{display:none !important}
  .jl-loi__hd{position:static !important;border-bottom:1px solid #000}
  .jl-loi__pied,.jl-loi__x,.jl-loi__poignee{display:none !important}
  .jl-resultat__ref [data-signal]{display:none}
  .jl-resultat__ref a[href]::after{content:" (" attr(href) ")";font-size:8pt;font-style:italic}
  .jl-body::after{content:"Imprimé depuis justicelibre.org — base de jurisprudence en accès libre, Licence Ouverte 2.0";
    display:block;margin-top:1.5em;padding-top:.5em;border-top:1px solid #000;
    font-size:8pt;font-style:italic}
}
/* Hors impression, le récapitulatif papier n'existe pas à l'écran. */
.jl-recap-impression{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
 * 28. v2 article, 13 sept. — CARTE D'UN ARTICLE et HISTORIQUE
 *
 * Ajout en fin de fichier, section datée et nommée : aucune règle qui précède
 * n'est renommée ni redéfinie (decision-jl.html et composants.html intacts).
 * Sources : web/maquettes/carte-748.html, histo-02.html, histo-05.html.
 * Rapport : scratchpad/audit/v2_article_13sept.md
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 28.1 Chrome de page : titre, date lue, aide ───────────────────────── */
/* Titre de page : « Article 748-6 · Code de procédure civile », le NUMÉRO en
   serif italique teal (règle du mot accentué, jl.css §15 — pas de règle em{}
   globale, le sélecteur reste porté par .jl-titre--h1). */
.jl-titrepage{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;
  margin:0 0 var(--space-1)}
.jl-leadrow{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;margin:0 0 var(--space-4)}
.jl-lead{color:var(--muted);font-size:var(--text-base);margin:0;max-width:90ch}
/* Badge de date lue : teal quand c'est aujourd'hui, ambre quand c'est le passé */
.jl-when{font-family:var(--font-mono);font-size:var(--text-xs);padding:1px var(--space-2);
  border-radius:10px;background:var(--teal-xl);color:var(--teal);white-space:nowrap}
.jl-when--passe{background:var(--warn-bg);color:var(--warn);font-weight:600;
  border:1px solid var(--warn)}
/* Gélule « historique » à côté du titre */
.jl-kicker--pilule{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:2px var(--space-2);border-radius:10px;
  margin-bottom:0;font-weight:400}
/* Bouton d'aide « ? » : une infobulle NATIVE (title), pas un second mécanisme */
.jl-aide{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);
  color:var(--muted);font-size:var(--text-3xs);font-weight:700;margin-left:5px;
  cursor:help;vertical-align:1px;text-transform:none;letter-spacing:0}
.jl-aide:hover,.jl-aide:focus-visible{border-color:var(--teal);color:var(--teal)}
.jl-datepop__chips{display:flex;flex-wrap:wrap;gap:6px}
.jl-datepop__chips .jl-chip{border:1px solid var(--line);background:var(--cream);
  font-family:var(--font-mono);cursor:pointer}
.jl-datepop input[type=text]{flex:1;min-width:0}
/* Métadonnée mono discrète : le NOR d'un texte */
.jl-nor{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}

/* ── 28.2 Les trois colonnes de la carte ───────────────────────────────── */
.jl-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.25fr);
  gap:0;border:1px solid var(--line);border-radius:var(--radius-xl);
  background:var(--white);overflow:hidden}
.jl-col{padding:var(--space-4) var(--space-5);min-width:0}
.jl-col+.jl-col{border-left:1px solid var(--line)}
.jl-col--mid{background:var(--cream)}
.jl-coltete{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  margin:0 0 var(--space-1)}
.jl-coltete h2{margin:0;font-size:var(--text-3xs);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--muted);font-weight:600}
.jl-col--mid .jl-coltete h2{color:var(--teal)}
.jl-sub{font-size:var(--text-sm);color:var(--muted);margin:0 0 var(--space-4);line-height:1.45}
.jl-empty{font-size:var(--text-sm);color:var(--muted);font-style:italic;padding:var(--space-1) 0}
.jl-colfoot{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line)}
@media (max-width:1100px){
  .jl-cols{grid-template-columns:1fr}
  .jl-col+.jl-col{border-left:0;border-top:1px solid var(--line)}
}

/* ── 28.3 Bandeau d'étage teal, avec sa bulle de compte (chiffre seul) ──── */
.jl-etage{margin:0 0 6px}
.jl-etage__t{font-size:var(--text-3xs);letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal);font-weight:700;background:var(--teal-xl);
  padding:6px var(--space-2);margin:var(--space-2) 0 6px;border-radius:var(--radius);
  display:flex;align-items:baseline;gap:var(--space-2);line-height:1.4}
.jl-etage__c{font-family:var(--font-mono);font-size:var(--text-3xs);color:#fff;
  background:var(--teal);letter-spacing:0;text-transform:none;margin-left:auto;
  min-width:18px;height:18px;padding:0 6px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700}
/* La racine de l'arbre : « art. 748-6 CPC » */
.jl-racine{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink);
  padding:2px 0;font-weight:600}
.jl-arbre .jl-lt{padding:5px 0 7px}
.jl-kids{margin-top:2px}
.jl-kids .jl-lt{padding:var(--space-1) 0 5px}
.jl-kids .jl-lt__t a{font-weight:500;font-size:var(--text-sm)}

/* ── 28.4 Texte de l'article (colonne du milieu) ───────────────────────── */
.jl-alin{margin:0 0 .7em;font-size:var(--text-base);line-height:1.55}
.jl-alin:last-child{margin-bottom:0}
.jl-alin .jl-al{font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--muted);margin-right:var(--space-2)}
.jl-nota{margin-top:var(--space-3);padding:9px var(--space-3);background:var(--warn-bg);
  border-radius:var(--radius-lg);font-size:var(--text-sm)}
.jl-nota b{color:var(--warn)}

/* ── 28.5 Jurisprudence qui le cite ────────────────────────────────────── */
.jl-juris{margin-top:var(--space-6)}
.jl-juris .jl-titre--nu{margin-top:0;display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.jl-juris .jl-titre--nu .jl-n{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--muted)}
.jl-jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);
  margin-top:var(--space-3)}
.jl-jc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--space-3) var(--space-4);font-size:var(--text-base);
  border-top:3px solid var(--c,var(--line))}
.jl-jc__m{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;
  font-size:var(--text-xs);color:var(--muted);margin-bottom:5px}
.jl-jc__t{font-family:var(--font-serif);font-size:var(--text-md);margin-bottom:6px}
.jl-jc__t a{color:var(--ink)}
.jl-jc__x{font-size:var(--text-sm);color:var(--muted);line-height:1.5}
.jl-jc__ap{margin-top:var(--space-2);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* Décision rendue sous une autre rédaction : plus de fond ambre (laid), un filet ambre à gauche suffit. */
.jl-jc--ancienne{border-left:3px solid var(--warn)}
/* Étiquette de rédaction (« rédaction 2019 ») */
.jl-rd{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);
  padding:1px 7px;border-radius:var(--radius);background:var(--teal-xl);
  color:var(--teal);white-space:nowrap}
.jl-rd--ancienne{background:transparent;color:var(--warn);font-weight:600}
@media (max-width:1100px){.jl-jgrid{grid-template-columns:1fr}}

/* ── 28.6 Chrome commun de la page HISTORIQUE ──────────────────────────── */
.jl-hbar{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin:0 0 var(--space-4)}
.jl-hcount{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);margin-left:auto}
/* Titre de bloc : NOIR, parce que c'est un titre de section (règle de couleur ;
   arbitrage §6.5 du rapport normaliseur, .jl-h2 d'histo-02 était en --ink). */
.jl-h2{font-size:var(--text-3xs);letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--ink);font-weight:600;margin:0 0 var(--space-3);
  display:flex;align-items:center;gap:var(--space-2)}
.jl-hsel{font-family:var(--font-mono);font-size:var(--text-sm);padding:var(--space-1) 7px;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--white);color:var(--ink)}
/* Ce qui est postérieur à la date lue : atténué, jamais supprimé */
.jl-hfutur{opacity:.45}
.jl-htext{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:13px var(--space-4);font-size:var(--text-base);line-height:1.65;margin-top:var(--space-2)}
.jl-hdiff{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4);font-size:var(--text-base);line-height:var(--lh-relaxed)}
.jl-hdiff ins{background:var(--ok-bg);color:var(--ok);text-decoration:none;border-radius:2px}
.jl-hdiff del{background:var(--bad-bg);color:var(--bad);border-radius:2px}
.jl-hhonest{margin-top:var(--space-6);line-height:1.55}

/* ── 28.7 Vue COULOIRS (une ligne par texte, le temps en abscisse) ──────── */
.jl-cl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-xl);
  background:var(--white)}
.jl-cl__in{min-width:1040px;position:relative}
.jl-cl__head{display:grid;grid-template-columns:250px 1fr;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--white);z-index:2}
.jl-cl__lbl{padding:var(--space-2) var(--space-3);font-size:var(--text-3xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.jl-cl__axis{position:relative;height:30px}
.jl-cl__yr{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);padding-left:var(--space-1);
  font-family:var(--font-mono);font-size:var(--text-3xs);color:var(--muted);line-height:30px}
.jl-cl__row{display:grid;grid-template-columns:250px 1fr;border-bottom:1px solid var(--line);min-height:34px}
.jl-cl__row:last-child{border-bottom:0}
.jl-cl__row:hover{background:var(--cream)}
.jl-cl__row--n0{background:var(--teal-xl)}
.jl-cl__row--n2 .jl-cl__name{padding-left:34px}
.jl-cl__row--n3 .jl-cl__name{padding-left:54px}
.jl-cl__row--n4 .jl-cl__name{padding-left:74px}
.jl-cl__row--ret .jl-cl__name{font-size:var(--text-xs)}
.jl-cl__row--ret .jl-cl__name a{font-weight:500}
.jl-cl__name{padding:var(--space-2) var(--space-3) var(--space-2) 14px;font-size:var(--text-sm);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-right:1px solid var(--line)}
.jl-cl__name a{color:var(--ink)}
.jl-cl__name a:hover{color:var(--teal)}
.jl-cl__role{font-family:var(--font-mono);font-size:var(--text-3xs);color:var(--muted);
  display:block;letter-spacing:.05em;text-transform:uppercase}
.jl-cl__lane{position:relative;height:34px}
.jl-cl__grid{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);opacity:.6}
.jl-cl__bar{position:absolute;top:9px;height:16px;border-radius:var(--radius);
  background:var(--ok);opacity:.85}
.jl-cl__bar--n2{top:12px;height:10px}
/* Mort = gris (jamais rouge : le rouge est réservé au bouchon d'abrogation) */
.jl-cl__row.is-dead .jl-cl__name{opacity:.55}
.jl-cl__bar.is-dead{background:var(--muted);opacity:.45}
/* Pas encore en vigueur = bleu --doc, distinct du mort */
.jl-cl__row.is-fut .jl-cl__name{color:var(--doc)}
.jl-cl__bar.is-fut{background:var(--doc);opacity:.7}
/* Réécrit (même NOR, nouvel identifiant) = hachuré, jamais assimilé à un mort */
.jl-cl__row.is-mod .jl-cl__name{font-style:italic}
.jl-cl__bar.is-mod{background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 10px);opacity:.7}
/* « sans limite » : pointe à droite, pour ne pas confondre avec une fin en 2027 */
.jl-cl__bar.is-inf{border-top-right-radius:0;border-bottom-right-radius:0}
.jl-cl__bar.is-inf::after{content:"";position:absolute;right:-8px;top:2px;
  border-left:8px solid var(--ok);border-top:6px solid transparent;
  border-bottom:6px solid transparent;opacity:.85}
.jl-cl__bar.is-inf.is-fut::after{border-left-color:var(--doc)}
.jl-cl__bar.is-inf.is-dead::after{border-left-color:var(--muted)}
.jl-cl__seg{position:absolute;top:6px;height:22px;border-radius:var(--radius);
  border:1px solid var(--white);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-mono);font-size:var(--text-3xs);
  overflow:hidden;white-space:nowrap;background:var(--ok-bg);color:var(--ok)}
.jl-cl__seg.is-sel{background:var(--ok);color:#fff;outline:2px solid var(--ink);
  outline-offset:1px;z-index:3}
.jl-cl__seg.is-cur{overflow:visible}
.jl-cl__seg.is-cur::after{content:"";position:absolute;left:6px;right:6px;bottom:-5px;
  height:3px;border-radius:2px;background:var(--ink)}
/* Retouche = losange ambre · abrogation = bouchon rouge · encoche = retouche datée */
.jl-cl__mark{position:absolute;top:9px;width:12px;height:12px;margin-left:-6px;
  background:var(--warn);transform:rotate(45deg);border-radius:2px;cursor:help;z-index:2}
.jl-cl__cap{position:absolute;top:8px;width:3px;height:16px;margin-left:-1px;
  background:var(--bad);border-radius:1px;cursor:help;z-index:2}
.jl-cl__notch{position:absolute;top:4px;width:3px;height:26px;background:var(--warn);
  border-radius:1px;cursor:help;z-index:2}
.jl-cl__mark:focus-visible,.jl-cl__cap:focus-visible,.jl-cl__notch:focus-visible,
.jl-cl__seg:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.jl-cl__today{position:absolute;top:0;bottom:0;width:2px;background:var(--warn);z-index:4}
.jl-cl__todayl{position:absolute;top:2px;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--warn);background:var(--white);padding:0 var(--space-1);white-space:nowrap;z-index:5}
.jl-cl__after{position:absolute;top:0;bottom:0;background:var(--light);opacity:.72;
  z-index:3;pointer-events:none}
.jl-cl__tip{margin-top:14px;font-size:var(--text-sm);min-height:4.2em}

/* ── 28.8 Vue POUPÉES RUSSES (accordéons emboîtés) ─────────────────────── */
.jl-pr{display:flex;flex-direction:column;gap:var(--space-3)}
.jl-pr__acc{border:1px solid var(--line);border-radius:var(--radius-xl);
  background:var(--white);overflow:hidden}
.jl-pr__acc--lvl0{border-color:var(--teal)}
.jl-pr__h{display:flex;align-items:center;gap:var(--space-3);padding:11px 14px;
  cursor:pointer;user-select:none;width:100%;text-align:left}
.jl-pr__h:hover{background:var(--teal-xl)}
.jl-pr__acc.is-dead>.jl-pr__h{opacity:.6}
.jl-pr__acc.is-fut>.jl-pr__h .jl-pr__ttl{color:var(--doc)}
.jl-pr__acc.is-mod>.jl-pr__h .jl-pr__ttl{font-style:italic}
.jl-pr__chev{color:var(--teal);transition:transform var(--t-fast);flex:none}
.jl-pr__acc.is-open>.jl-pr__h .jl-pr__chev{transform:rotate(90deg)}
.jl-pr__ttl{font-size:var(--text-base);font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.jl-pr__acc--lvl2 .jl-pr__ttl{font-size:var(--text-sm);font-weight:500}
.jl-pr__ttl a{color:var(--ink)}
.jl-pr__ttl a:hover{color:var(--teal);text-decoration:underline}
.jl-pr__cnt{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
.jl-pr__ab{color:var(--bad);opacity:.75}
.jl-pr__body{display:none;padding:2px 14px 14px;border-top:1px solid var(--line)}
.jl-pr__acc.is-open>.jl-pr__body{display:block}
.jl-pr__in{padding-left:14px;border-left:2px solid var(--line);margin-top:var(--space-3)}
.jl-pr__frise{display:flex;align-items:center;gap:0;margin:var(--space-3) 0 var(--space-2);
  padding:6px 0;overflow-x:auto}
.jl-pr__seg{flex:none;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:var(--text-xs);color:var(--muted);white-space:nowrap;padding:1px var(--space-1);
  margin:-1px -4px;border-radius:var(--radius-md)}
.jl-pr__seg.is-cur{color:var(--teal);font-weight:700}
.jl-pr__seg.is-hl{background:var(--ok-bg)}
.jl-pr__lnk{flex:none;width:26px;height:1px;background:var(--line);margin:0 6px}
.jl-pr__red{border:1px solid var(--line);border-radius:var(--radius-lg);
  margin-bottom:var(--space-2);background:var(--cream)}
.jl-pr__red.is-cur{border-color:var(--teal)}
.jl-pr__ret{padding:6px var(--space-2);margin:0 -8px;border-top:1px solid var(--line);
  border-radius:var(--radius-md)}
.jl-pr__ret:hover,.jl-pr__ret.is-hl{background:var(--cream)}
.jl-pr__foot{font-size:var(--text-xs);color:var(--muted);margin-top:6px}

/* ── 28.9 Impression des deux pages ────────────────────────────────────── */
@media print{
  .jl-cols{display:block;border:0}
  .jl-col+.jl-col{border-left:0;border-top:1px solid #ccc}
  .jl-col--mid{background:none}
  .jl-jgrid{display:block}
  .jl-jc{break-inside:avoid;margin-bottom:var(--space-2)}
  .jl-datew,.jl-aide,.jl-hsel,.jl-cl__tip{display:none !important}
  /* La frise Gantt ne se coupe pas en travers d'une page, et sort en entier */
  .jl-cl{overflow:visible;break-inside:avoid}
  .jl-cl__in{min-width:0}
  .jl-cl__after,.jl-cl__today{display:none}
  /* Tout accordéon est ouvert sur le papier : rien ne doit rester caché */
  .jl-pr__body{display:block !important}
  .jl-pr__acc{break-inside:avoid}
  .jl-hfutur{opacity:1}
}

/* 28.10 — correctif mobile (v2 article, 13 sept.) : un identifiant LEGI est
   plus long qu'une colonne de 375 px ; il doit se couper, pas être tronqué. */
.jl-bande__v .jl-mono{overflow-wrap:anywhere}

/* 28.11 — classes qui remplacent des style="" en ligne (v2 article, 13 sept.).
   La règle « aucun style en ligne » ne tolère que la géométrie calculée
   (left/width en %, qui sont des DONNÉES de la frise, pas de la mise en forme). */
.jl-sub--enligne{margin:0}
.jl-poids-normal{font-weight:400}
.jl-fil--barre{display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-3);flex-wrap:wrap}
.jl-point--art{--c:var(--teal);width:12px;height:12px}
.jl-pr__dt{margin-right:var(--space-2)}
.jl-pr__h--inerte{cursor:default}
.jl-pr__h--inerte:hover{background:none}
/* Famille juridictionnelle d'une carte de jurisprudence (axe 2, §23) */
.jl-jc--jud{--c:var(--jud)} .jl-jc--adm{--c:var(--adm)} .jl-jc--ce{--c:var(--ce)}
.jl-jc--eu{--c:var(--eu)}   .jl-jc--txt{--c:var(--txt)} .jl-jc--doc{--c:var(--doc)}

/* ═══════════════════════════════════════════════════════════════════════════
 * 29. v2 ssr, 13 sept. — PAGES SERVEUR /decision/ et /loi/ (ssr_v2.py)
 *
 * Ajout en FIN de fichier, section datée : aucune règle qui précède n'est
 * renommée ni redéfinie. Les pages de ssr_v2 réemploient les §1 à §28 ;
 * il ne restait que trois besoins non couverts.
 * Rapport : scratchpad/audit/v2_ssr_13sept.md
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 29.1 — Statut d'un article de loi, sous le titre.
   Remplace les style="color:#a33" et style="color:var(--muted)" que
   ssr._subline_statut posait en ligne (ssr.py:1025 et 1035). Règle de
   couleur : rouge atténué = abrogé, gris = note. */
.jl-statut{margin:0 0 var(--space-2)}
.jl-statut--abroge{color:var(--bad);font-weight:600}
.jl-statut__note{color:var(--muted);font-size:var(--text-sm)}

/* 29.2 — Enveloppe des deux panneaux de la page décision.
   decision-jl.html porte déjà `.jl-dossier` comme simple conteneur ; on lui
   donne ici sa seule propriété utile (isoler la marge des onglets collants). */
.jl-dossier{margin-top:var(--space-2)}

/* 29.3 — Avertissements de la page décision (langue du texte, texte réduit au
   sommaire, décision hors Légifrance). Ce sont des avertissements sur la
   DONNÉE : ils prennent `.jl-warnp` (§ piège n° 4), jamais `.jl-alerte`, qui
   signale un échec technique. Seul l'espacement en pile est ajouté. */
.jl-warnp + .jl-warnp{margin-top:var(--space-2)}

/* v2 carte, 13 sept. : ligne de pied des cartes de jurisprudence (variante 1 retenue) */
.jl-jc__foot{border-top:1px solid var(--line);margin-top:6px;padding-top:7px;font-size:var(--text-sm);color:var(--muted);display:flex;gap:8px;align-items:center}
.jl-jc__foot svg{flex:none}
.jl-jc__foot a{color:var(--teal)}
.jl-jc--ancienne{border-left:1px solid var(--line)}
.jl-jc__foot--ancienne, .jl-jc__foot--ancienne svg{color:var(--bad);opacity:.8}
.jl-jc__foot--ancienne a{color:var(--teal);opacity:1}

/* ═══════════════════════════════════════════════════════════════════════════
 * v2 accueil / doctrine / annuaire — 13 sept. 2026
 * AJOUT EN FIN DE FICHIER, aucune règle antérieure n'est réécrite.
 * Pages : web/v2/index.html, apropos.html, doctrine.html, annuaire.html.
 * Rapport : scratchpad/audit/v2_accueil_doctrine_annuaire_13sept.md
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. ACCUEIL ALLÉGÉ ──────────────────────────────────────────────────── */
/* Un hero, un bouton, une ligne de chiffres. Rien d'autre : décision de la
   propriétaire (tout le reste est parti dans apropos.html). */
.jl-acc{max-width:900px;margin:0 auto;padding:clamp(2rem,7vw,5.5rem) 0 var(--space-6)}
.jl-acc__h1{font-family:var(--font-serif);font-weight:400;color:var(--ink);
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.12;margin:0 0 var(--space-4)}
/* Signature typographique : bas de casse → italique teal (§6.2 du rapport). */
.jl-acc__h1 em{font-style:italic;color:var(--teal);font-weight:inherit}
.jl-acc__lead{color:var(--body);font-size:var(--text-lg);line-height:1.6;
  max-width:62ch;margin:0 0 var(--space-6)}
.jl-acc__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
/* Ligne de chiffres réels : le chiffre en serif, la légende en gris. */
.jl-chiffres{display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin:clamp(2.5rem,6vw,4.5rem) 0 0;border-top:1px solid var(--line);padding-top:var(--space-5)}
.jl-chiffre{flex:1 1 150px;min-width:0}
.jl-chiffre__n{font-family:var(--font-serif);font-weight:400;color:var(--ink);
  font-size:var(--text-2xl);line-height:1.1;display:block}
.jl-chiffre__l{display:block;margin-top:3px;font-size:var(--text-sm);color:var(--muted);line-height:1.4}
/* La note de provenance est `white-space:nowrap` (§9) : dans une colonne
   étroite elle déborderait sur la voisine. Ici, et ici seulement, on la laisse
   revenir à la ligne, sans toucher au composant. */
.jl-chiffre .jl-provenance{display:inline-block;margin-top:6px;white-space:normal}

/* ── B. À PROPOS ────────────────────────────────────────────────────────── */
.jl-prose{max-width:78ch}
.jl-prose p{margin:0 0 var(--space-3);font-size:var(--text-md);line-height:1.7;color:var(--body)}
.jl-prose p:last-child{margin-bottom:0}
.jl-sect{margin:var(--space-7) 0 0;max-width:1100px}
/* URL d'endpoint, copiable à l'œil */
.jl-url{display:block;font-family:var(--font-mono);font-size:var(--text-lg);color:var(--teal);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;word-break:break-all}
/* Installation en trois étapes */
.jl-etapes{margin:var(--space-3) 0 0;padding-left:1.4em;counter-reset:none}
.jl-etapes li{margin-bottom:var(--space-3);font-size:var(--text-md);line-height:1.65;color:var(--body)}
.jl-etapes li strong{color:var(--ink)}
/* Grille d'outils MCP (un nom de fonction + une phrase) */
.jl-grille-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-3)}
.jl-outil{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-3)}
.jl-outil code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--teal);
  display:block;margin-bottom:5px;word-break:break-all}
.jl-outil p{margin:0;font-size:var(--text-sm);color:var(--muted);line-height:1.55}
.jl-outil--second code{color:var(--muted)}
.jl-outil--second{border-color:var(--line);opacity:.85}
/* Lignes source › licence des tableaux de ressources */
.jl-liens{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  font-size:var(--text-base);margin:var(--space-3) 0 0}

/* ── C. AVIS & DOCTRINE ─────────────────────────────────────────────────── */
.jl-doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-3);margin:var(--space-5) 0 0}
.jl-doc-grid .jl-tuile.is-on{border-color:var(--teal);background:var(--teal-xl)}
/* Lecture d'un document : texte à gauche, fiche à droite (comme .jl-lecture,
   mais la colonne de droite est une FICHE de champs, pas un sommaire). */
.jl-doclec{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start;
  margin-top:var(--space-4)}
.jl-fiche{position:sticky;top:calc(var(--topbar-h) + 18px);background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-4)}
.jl-fiche h3{font-family:var(--font-serif);font-weight:400;font-size:var(--text-lg);
  margin:0 0 var(--space-3);color:var(--ink)}
.jl-fiche .jl-dl{grid-template-columns:1fr;gap:2px}
.jl-fiche .jl-dl dd{margin:0 0 var(--space-3);font-size:var(--text-base);color:var(--body)}
.jl-fiche .jl-dl dd:last-child{margin-bottom:0}
/* « Sens : Favorable » — lu en fin de texte, jamais servi en champ. */
.jl-sens{display:inline-block;font-weight:600;color:var(--teal)}
@media (max-width:900px){ .jl-doclec{grid-template-columns:1fr} .jl-fiche{position:static} }

/* ── D. ANNUAIRE (cadre v2) ─────────────────────────────────────────────── */
/* La barre de filtrage est la barre LOCALE (§22), jamais la barre réseau
   (§21) : le jeu est déjà chargé, donc pas de bouton et pas de loader. */
.jl-dlrow{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-3);margin:var(--space-4) 0;font-size:var(--text-base)}
.jl-dlrow a{color:var(--teal);text-decoration:underline;text-decoration-style:dotted}
.jl-dlrow .jl-kbd{margin-left:auto;font-size:var(--text-xs);color:var(--muted)}
.jl-chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-base);
  color:var(--body);cursor:pointer;white-space:nowrap}
.jl-chk input{accent-color:var(--teal)}
/* Tuiles de comptage */
.jl-stats{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-4) 0}
.jl-stat{flex:1 1 170px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--space-3)}
.jl-stat__n{font-family:var(--font-serif);font-size:var(--text-xl);color:var(--ink);display:block}
.jl-stat__l{font-size:var(--text-sm);color:var(--muted)}
/* Tableau de complétude : taux + barre */
.jl-taux{font-family:var(--font-mono);font-size:var(--text-sm)}
.jl-taux--ok{color:var(--ok)} .jl-taux--warn{color:var(--warn)} .jl-taux--bad{color:var(--bad)}
.jl-barre{display:block;height:6px;border-radius:3px;background:var(--line);
  margin-top:4px;overflow:hidden}
.jl-barre::before{content:"";display:block;height:100%;width:var(--w,0%);background:currentColor}
/* Table de l'annuaire : hauteur bornée, en-têtes collants (hérités de §17) */
.jl-tbl-scroll{max-height:70vh;overflow:auto;border:1px solid var(--line);
  border-radius:var(--radius-lg);margin-top:var(--space-3)}
.jl-tableau td.jl-td-mail{font-family:var(--font-mono);font-size:var(--text-sm);word-break:break-all}
.jl-tableau td.jl-td-contact{max-width:280px;font-size:var(--text-sm);color:var(--muted)}
.jl-nomail{color:var(--bad);font-style:italic}
.jl-tableau tr.jl-more td{text-align:center;padding:var(--space-4)}
.jl-tableau tr.jl-vide-tr td{text-align:center;padding:var(--space-5);color:var(--muted)}
.jl-sub{display:block;font-size:var(--text-sm);color:var(--muted)}

/* ── E. IMPRESSION des trois pages nouvelles ────────────────────────────── */
@media print{
  .jl-acc__actions,.jl-barre-filtre,.jl-dlrow,.jl-doc-grid,
  .jl-tbl-scroll .jl-more,.jl-tableau tr.jl-more{display:none !important}
  .jl-acc{padding:0}
  .jl-chiffres{border-top:1px solid #000}
  .jl-tbl-scroll{max-height:none;overflow:visible;border:0}
  .jl-tableau th{position:static}
  .jl-tableau tbody tr{break-inside:avoid;page-break-inside:avoid}
  .jl-doclec{display:block}
  .jl-fiche{position:static;border:1px solid #999;break-inside:avoid;margin-top:1em}
  .jl-grille-3{display:block}
  .jl-outil{border:0;padding:0 0 .4em}
}
.jl-jc__lire{margin-left:auto;color:var(--teal);white-space:nowrap}

/* 13 sept. : la recherche est centrée (demande de la propriétaire) */
.jl-centre{margin-left:auto;margin-right:auto}
h1.jl-centre,p.jl-centre,div.jl-hint.jl-centre{text-align:center;max-width:880px}
.jl-sbox.jl-centre{max-width:880px}

/* ── v2 accueil light, 13 sept. ───────────────────────────────────────────
   Hero à deux colonnes avec l'illustration circuit de la page d'accueil
   prod (web/index.html:445-448). Une seule des deux images est affichée,
   selon le thème ; l'autre est retirée du flux. */
.jl-acc--hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-5);align-items:center}
.jl-acc--hero .jl-acc__texte{min-width:0}
.jl-acc__visuel{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.jl-circuit{width:100%;max-width:380px;height:auto;margin-left:auto}
.jl-circuit--sombre{display:none}
html[data-theme="dark"] .jl-circuit--clair{display:none}
html[data-theme="dark"] .jl-circuit--sombre{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .jl-circuit--clair{display:none}
  html:not([data-theme="light"]) .jl-circuit--sombre{display:block}
}
.jl-acc--chiffres{padding-top:0}
@media(max-width:860px){
  .jl-acc--hero{grid-template-columns:1fr}
  .jl-acc__visuel{display:none}
}
@media print{.jl-acc__visuel{display:none}}

/* 13 sept. : colonne de contenu centrée sur les pages à recherche (recherche,
   doctrine, annuaire) : la barre ET la liste des résultats partagent le même axe. */
.jl-body--centre>*{max-width:1100px;margin-left:auto;margin-right:auto}
.jl-body--centre .jl-sbox,.jl-body--centre .jl-barre-filtre{max-width:880px}
.jl-body--centre>h1,.jl-body--centre>.jl-lead,.jl-body--centre>.jl-hint{text-align:center;max-width:880px}

/* ═══════════════════════════════════════════════════════════════════════════
 * v2 textes, 13 sept. — ajout EN FIN DE FICHIER, aucune règle antérieure
 * modifiée. Page : web/v2/textes.html + web/v2/textes.js
 * Rapport : scratchpad/audit/v2_textes_13sept.md
 * Composants : grille des codes, fiche d'article, filtres hors code,
 *              troisième couleur d'axe 2 (.jl-tag--txt), pastille « bientôt ».
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Axe 2 : la famille « Texte » (.jl-tag--txt, --c:var(--txt)) existe DÉJÀ
   ligne 702 : rien n'est redéfini ici, sous peine de casser sa couleur en
   thème sombre. Elle est seulement utilisée par la page. ── */

/* ── Bouton désactivé portant « bientôt » (carte de l'article, historique) ── */
.jl-soonpill{font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--ls-wide);
  font-weight:600;color:var(--muted);margin-left:6px}

/* ── Grille des codes : trois colonnes à partir de 900 px, une seule au
   téléphone. Un code = son libellé (filtre) + son abréviation (référence). ── */
.jl-codes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 18px;
  margin:var(--space-3) 0 var(--space-5)}
.jl-code{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;
  padding:3px 0;border-bottom:1px solid transparent}
.jl-code__n{background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  font:inherit;font-size:var(--text-sm);color:inherit;min-width:0;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jl-code__n:hover{color:var(--teal);text-decoration:underline}
.jl-code__s{background:none;border:0;padding:0 2px;margin:0;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
.jl-code__s:hover{color:var(--teal)}
.jl-code.is-on{border-bottom-color:var(--teal)}
.jl-code.is-on .jl-code__n{color:var(--teal);font-weight:600}
@media(max-width:900px){.jl-codes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.jl-codes{grid-template-columns:1fr}}

/* ── Fiche d'un article, en tête de page quand une référence est reconnue ── */
.jl-fart{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5)}
.jl-fart__meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  font-size:var(--text-xs);color:var(--muted);margin-bottom:var(--space-2)}
.jl-fart__t{font-family:var(--font-serif);font-size:var(--text-xl);margin:0;line-height:1.25}
.jl-fart__code{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--muted);
  font-weight:400;white-space:nowrap}
.jl-fart__sect{font-size:var(--text-sm);color:var(--muted);margin:4px 0 var(--space-3)}
.jl-fart__pied{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
  margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line)}
.jl-fart__prov{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-2)}
@media(max-width:620px){
  .jl-fart{padding:var(--space-3)}
  .jl-fart__code{white-space:normal;display:block}
}

/* ── Textes hors code : trois colonnes de filtres (ministère, nature, année),
   la première et la dernière défilant sur place, comme .hc-scroll du
   prototype (web/hub.html). ── */
.jl-hc{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-4);
  border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--white);
  padding:var(--space-4);margin:var(--space-3) 0 0}
.jl-hcfam{min-width:0}
.jl-hcscroll{max-height:230px;overflow:auto;padding-right:4px}
@media(max-width:860px){
  .jl-hc{grid-template-columns:1fr}
  .jl-hcscroll{max-height:180px}
}

/* ── Impression : les filtres et la grille des codes ne sortent pas sur le
   papier (ce sont des commandes) ; la fiche d'article, si, en entier. ── */
@media print{
  .jl-hc,.jl-codes,.jl-barre-filtre{display:none !important}
  .jl-fart{border:1px solid #999;break-inside:avoid;padding:0 0 0 .6em}
  .jl-fart__pied{display:none}
}

/* 14 sept. : liste de textes hors code, rendu du hub (.hc-list) : une ligne par
   texte, filets, survol teal pâle, référence en mono, intitulé en serif. */
.jl-lt--ligne{display:block;padding:11px 6px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;line-height:1.4}
.jl-lt--ligne:first-child{border-top:1px solid var(--line)}
.jl-lt--ligne:hover{background:var(--teal-xl);text-decoration:none}
.jl-lt--ligne .jl-lt__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);margin-bottom:3px}
.jl-lt--ligne .jl-lt__t{font-family:var(--font-serif);font-size:var(--text-lg);font-weight:400;line-height:1.3}

/* Titre de section façon prototype (hub.html .feed-h) : titre serif et
   sous-titre discret sur la même ligne. Le surtitre en capitales l'avait
   remplacé dans la v2 Textes et elle le trouvait moins bien (3/10/2026). */
.jl-titre-section{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;margin:0 0 16px;font-family:var(--font-serif);font-size:22px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.jl-titre-section .s{font-family:var(--font-sans);font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0}
.jl-sep-section{border:0;border-top:2px solid var(--muted);opacity:.55;margin:56px 0 44px}
/* Filtre centré, aéré (v2 Textes, 3/10/2026 : « ça respire pas »). */
.jl-barre-filtre--centre{max-width:560px;margin:8px auto 32px}
/* Fil « ministère › nature › année » du hors-code : plus d'air au-dessus (3/10/2026). */
.jl-fil--aere{margin-top:32px!important}
/* Un seul filet : après le séparateur, le titre perd le sien (3/10/2026). */
.jl-sep-section + .jl-titre-section{border-top:0;padding-top:0}
/* Tête de la colonne du texte (« Texte en vigueur · rédaction du… ») :
   plus imposante et aérée que les têtes de colonnes voisines (3/10/2026). */
.jl-coltete--texte{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:22px;padding-bottom:12px}
.jl-coltete--texte h2{font-family:var(--font-serif);font-size:24px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.jl-coltete--texte .jl-sub{font-size:14px}
/* « Jurisprudence qui le cite » : la section étouffait (3/10/2026). */
.jl-juris{margin-top:56px}
.jl-juris > .jl-titre{margin-bottom:18px}
.jl-juris > .jl-honnetete{margin:0 0 28px;padding:16px 20px;line-height:1.65}
.jl-juris .jl-jgrid{gap:22px}
.jl-juris .jl-jc{padding:20px 22px}
.jl-coltete--texte h2 em{font-style:italic;color:var(--teal,#1a4e4e)}
.jl-col--mid .jl-coltete--texte h2{color:var(--ink)}
.jl-col--mid .jl-coltete--texte h2 em{color:var(--teal)}
/* Historique : le détail survolé restait sous la frise quand elle était haute,
   donc invisible. Il colle au bas de l'écran tant que la frise est visible (3/10/2026). */
.jl-cl__tip{position:sticky;bottom:16px;z-index:5;box-shadow:0 6px 24px rgba(0,0,0,.12)}
/* Historique : « actuel · date » + calendrier à droite, comme la maquette histo-02 (3/10/2026). */
.jl-leadrow__date{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0;margin-left:auto}
/* Historique (couloirs) : légende + arbre lisible (3/10/2026). */
.jl-cl__legende{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:var(--text-xs);color:var(--muted);margin:0 0 14px}
.jl-cl__legende span{display:inline-flex;align-items:center;gap:7px}
.jl-cl__legende .lg{display:inline-block;width:26px;height:9px;border-radius:3px}
.jl-cl__legende .lg--ok{background:var(--ok);opacity:.85}
.jl-cl__legende .lg--dead{background:var(--muted);opacity:.45}
.jl-cl__legende .lg--mod{background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 10px);opacity:.7}
.jl-cl__legende .lg--cap{width:3px;height:14px;background:var(--bad);border-radius:1px}
.jl-cl__legende .lg--notch{width:3px;height:16px;background:var(--warn);border-radius:1px}
.jl-cl__legende-arbre{flex-basis:100%}
.jl-cl__row--n2 .jl-cl__name{padding-left:30px}
.jl-cl__row--n3 .jl-cl__name{padding-left:46px}
.jl-cl__row--n4 .jl-cl__name{padding-left:62px}
.jl-cl__row--n5 .jl-cl__name{padding-left:78px}
.jl-cl__row--n6 .jl-cl__name{padding-left:94px}
.jl-cl__row--n7 .jl-cl__name{padding-left:110px}
.jl-cl__row .jl-cl__name{background-image:linear-gradient(90deg,transparent 0,transparent 100%)}
.jl-hhonest__det{margin-top:.6em}
.jl-hhonest__det summary{cursor:pointer;color:var(--teal)}
.jl-hhonest__det ul{margin:.5em 0 0;padding-left:1.2em;line-height:1.7}
/* Le titre du texte d'abord, sa relation en dessous (3/10/2026). */
.jl-cl__name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.jl-cl__name > a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.jl-cl__name > .jl-cl__role{order:2;flex-basis:100%;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jl-cl__name > .jl-nor{white-space:nowrap}
/* Légende dans son encadré, aérée (3/10/2026). */
.jl-cl__legende{margin:14px 0 22px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white,#fff);gap:10px 26px}
.jl-cl__legende-arbre{margin-top:6px;padding-top:10px;border-top:1px dashed var(--line);line-height:1.6}
.jl-cl__legende .lg--inf{width:0;height:0;border-radius:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--ok)}
/* 3/10/2026 : la sélection pour la comparaison (A/B) prenait le même vert
   plein que « en vigueur » → deux rédactions semblaient en vigueur. La
   rédaction en vigueur est verte pleine ; les deux comparées sont seulement
   entourées (bleu), avec leur lettre. */
.jl-cl__seg.is-cur{background:var(--ok);color:#fff}
.jl-cl__seg.is-sel{background:var(--ok-bg);color:var(--ok);outline:2px solid var(--doc);outline-offset:1px}
.jl-cl__seg.is-cur.is-sel{background:var(--ok);color:#fff}
.jl-cl__seg[data-ab]::before{content:attr(data-ab);font-weight:700;color:var(--doc);margin-right:5px}
.jl-cl__seg.is-cur[data-ab]::before{color:#fff}
.jl-cl__legende .lg--ab{width:auto;height:auto;padding:0 6px;font-style:normal;font-weight:700;font-size:10px;color:var(--doc);outline:2px solid var(--doc);background:transparent}
/* Poupées : la retouche, discrète ; le texte parent, lisible même abrogé (3/10/2026). */
.jl-pr__ret{font-size:var(--text-sm);color:var(--muted);padding:7px var(--space-2);background:transparent}
.jl-pr__ret a{color:var(--body);font-weight:500}
.jl-pr__ret-l{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:.04em}
.jl-pr__acc.is-dead>.jl-pr__h{opacity:1}
.jl-pr__acc.is-dead>.jl-pr__h .jl-pr__ttl{color:var(--body)}
.jl-pr__acc.is-dead>.jl-pr__h .jl-pr__ttl a{color:var(--body)}
.jl-pr__acc[open]>.jl-pr__h .jl-pr__ttl,.jl-pr__acc.is-open>.jl-pr__h .jl-pr__ttl{font-weight:600;color:var(--ink)}
/* « voir plus haut ↑ » : lien-bouton, et la cible clignote (3/10/2026). */
.jl-goto{background:none;border:0;padding:0;cursor:pointer;color:var(--teal);text-decoration:underline dotted;font:inherit}
.jl-cl__name > .jl-goto{order:3;flex-basis:100%;text-align:left;font-family:var(--font-mono);font-size:var(--text-3xs)}
@keyframes jl-flash{0%,100%{box-shadow:0 0 0 0 transparent}20%,60%{box-shadow:0 0 0 3px var(--warn)}}
.jl-flash{animation:jl-flash 1.8s ease-in-out 1;position:relative;z-index:2}
.jl-cl__row.jl-flash{background:var(--warn-bg,#fdf3e1)}
/* Doctrine : respirer comme la recherche (3/10/2026). */
/* #fondsBloc : écart porté par .jl-ouverture (haut de page commun, 3/10/2026). */
#topline:not(:empty){margin-top:28px}
#fondsBloc .jl-doc-grid{gap:18px}
#derniers > .jl-titre{margin:56px 0 14px}
#derniers > .jl-advsum{margin:0 0 30px;display:flex;flex-wrap:wrap;gap:8px}
#derniers > .jl-surtitre{margin:0 0 14px}
/* CNIL « bientôt » : l'étiquette chevauchait le compteur → en bas à droite. */
.jl-tuile--bientot::after{top:auto;bottom:var(--space-3)}
#derniers > .jl-lead{margin:0 0 16px}
/* Doctrine : en lecture d'un document, la recherche s'efface (3/10/2026). */
body.jl-en-lecture .jl-hero,body.jl-en-lecture .jl-hero + .jl-lead,body.jl-en-lecture .jl-sbox,
body.jl-en-lecture #hint,body.jl-en-lecture #advSum,body.jl-en-lecture #srcState,body.jl-en-lecture #topline{display:none}
/* En-tête du greffe : composé comme un document, lien discret pour l'ouvrir (3/10/2026). */
.jl-entete__sum{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--teal);margin:6px 0 18px}
.jl-entete__sum::-webkit-details-marker{display:none}
.jl-entete__sum::before{content:"›";display:inline-block;transition:transform .15s}
.jl-entete-fold[open] > .jl-entete__sum::before{transform:rotate(90deg)}
.jl-entete--doc{font-family:var(--font-serif);font-size:var(--text-sm);line-height:1.7;text-align:center;letter-spacing:.04em;
  text-transform:uppercase;color:var(--body);background:var(--white,#fff);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:0 0 24px;white-space:normal}
.jl-entete__l{display:block}
/* En-tête du greffe : style d'origine (chasse fixe, encadré), affiché sans dépliage (3/10/2026). */
.jl-entete--brut{white-space:normal;margin:0 0 24px}
.jl-entete--brut .jl-entete__l{display:block}
mark.jl-mark{background:var(--warn-bg,#fdf3e1);color:inherit;box-shadow:0 0 0 2px var(--warn);border-radius:2px}
/* « D E C I D E : » du Conseil d'État : repère discret, comme dans la décision (3/10/2026). */
.jl-decide{font-weight:600;letter-spacing:.08em;margin:1.6em 0 .6em}
/* Article : « Historique » à la taille des autres boutons, avec de l'air (3/10/2026). */
.jl-bouton--histo{margin-top:6px}
.jl-leadrow{margin-top:14px}
/* Exactement la taille de « Copier pour un LLM » (.jl-bouton), en vert plein. */
.jl-bouton--histo{background:var(--teal);border-color:var(--teal);color:#fff}
.jl-bouton--histo:hover{background:var(--teal-l);border-color:var(--teal-l);color:#fff}
.jl-bouton--histo svg{width:15px;height:15px}
/* Page /loi/ : bloc « Aller plus loin » aéré (3/10/2026). */
.jl-allerloin{margin-top:56px}
.jl-allerloin__carte{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;
  background:var(--white,#fff);border:1px solid var(--line);border-radius:var(--radius-lg,8px);padding:22px 26px}
.jl-allerloin__t{margin:0;max-width:640px;line-height:1.6}
.jl-allerloin__note{margin:14px 0 0;font-size:var(--text-sm)}
/* Textes : réglage « Une référence ouvre : fiche / carte » (3/10/2026). */
.jl-ouvrir{display:flex;justify-content:center;align-items:center;gap:6px;margin:12px 0 0;font-size:var(--text-sm)}
.jl-ouvrir button{border:1px solid var(--line);background:var(--white,#fff);color:var(--body);padding:4px 12px;border-radius:999px;cursor:pointer;font:inherit}
.jl-ouvrir button.is-on{background:var(--teal);border-color:var(--teal);color:#fff}
.jl-voisins{margin:10px 0 0}
.jl-voisins a{font-family:var(--font-mono)}
.jl-num-codes ul{list-style:none;margin:0;padding:0}
.jl-num-codes li{padding:10px 0;border-top:1px solid var(--line);line-height:1.5}
.jl-num-codes li:first-child{border-top:0}
/* Recherche v2 : réglette « Rendues entre » reprise de hub.html (.quand-bloc 137,
   .range 148-155, .presets 156-161, .rlab 218), en classes jl- (3/10/2026). */
.jl-quand{flex:1 1 100%;border-top:1px solid var(--line);padding-top:var(--space-3)}
.jl-quand__lab{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:var(--teal);font-weight:500;margin:0 6px 4px}
.jl-range{position:relative;height:50px;margin:6px 6px 0}
.jl-range input[type=range]{position:absolute;left:0;right:0;top:8px;width:100%;margin:0;pointer-events:none;
  -webkit-appearance:none;appearance:none;background:transparent;height:20px}
.jl-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;
  background:var(--white);border:2.5px solid var(--teal);cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.jl-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;
  background:var(--white);border:2.5px solid var(--teal);cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.jl-range input[type=range]::-moz-range-track{background:transparent}
.jl-range input[type=range]:focus{outline:none}
.jl-range input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--teal-xl),0 0 0 5px var(--teal)}
.jl-range input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--teal-xl),0 0 0 5px var(--teal)}
.jl-range__track{position:absolute;left:9px;right:9px;top:16px;height:4px;border-radius:2px;background:var(--line)}
.jl-range__fill{position:absolute;top:0;bottom:0;background:var(--teal);border-radius:2px}
.jl-range__ticks{position:absolute;left:9px;right:9px;top:34px;display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted)}
.jl-quand__presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:var(--space-2)}
.jl-quand__preset{font:inherit;font-size:12px;color:var(--ink);background:var(--teal-xl);border:0;padding:5px 12px;border-radius:5px;cursor:pointer}
.jl-quand__preset:hover{color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.jl-quand__preset.is-on{background:var(--teal);color:#fff;font-weight:600}
.jl-quand__preset:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.jl-quand__precis{margin-top:var(--space-2);font-size:var(--text-sm)}
.jl-quand__precis summary{cursor:pointer;color:var(--muted);font-size:12px;width:max-content}
.jl-quand__precis summary:hover{color:var(--teal)}
.jl-quand__dates{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2)}
.jl-quand__dates .jl-adv__lb{display:block}
/* Doctrine : la fiche, plus belle et toujours visible au défilement (3/10/2026). */
.jl-doclec .jl-fiche{position:sticky;top:24px;align-self:start;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg,8px);box-shadow:0 4px 18px rgba(0,0,0,.04)}
.jl-fiche h3{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.jl-fiche .jl-dl dt{font-size:var(--text-3xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px;cursor:help}
.jl-fiche .jl-dl dt:first-child{margin-top:0}
.jl-fiche .jl-dl dd{margin:3px 0 0;color:var(--ink)}
.jl-txt a[href^="http"]{word-break:break-all}

/* 3/10/2026 : doctrine en lecture = pleine largeur, comme /loi/ et /decision/
   (la mise en colonne centrée ne vaut que pour l'accueil et les résultats). */
body.jl-en-lecture .jl-body--centre>*{max-width:none;margin-left:0;margin-right:0}
body.jl-en-lecture .jl-body--centre .jl-honnetete{max-width:none}
body.jl-en-lecture #lecture .jl-kicker{margin-top:0}

/* ═══════════════════ 3/10/2026 (téléphone) ═══════════════════════════════
   Passe téléphone de la v2 (rapport scratchpad/audit/telephone_v2_3oct.md).
   Tout est sous @media : rien ne change au-dessus de 900 px. */
@media (max-width:900px){
  /* B2 : la piste unique doit pouvoir rétrécir sous la largeur de son contenu
     (1fr = minmax(auto,1fr) laissait un sommaire officiel l'élargir à 10 000 px). */
  .jl-lecture,.jl-grille-2,.jl-doclec{grid-template-columns:minmax(0,1fr)}
  .jl-lecture .jl-chip,.jl-grille-2 .jl-chip{white-space:normal;max-width:100%}
  /* G3 : le badge de provenance est parfois une phrase entière. */
  .jl-warnp{white-space:normal;display:inline-block;max-width:100%}
  /* Mots sans coupure (URL, identifiants, chaînes OCR) dans le texte lu. */
  .jl-txt,.jl-txt p,.jl-txt li{overflow-wrap:anywhere}
  /* Étiquettes et boutons en nowrap qui dépassaient à 320-375 px (à propos,
     textes, travaux) : ils passent à la ligne sur téléphone. */
  .jl-provenance,.jl-chip,.jl-bouton{white-space:normal}
  .jl-chip{max-width:100%}
  /* Avis & doctrine : tuiles de 300 px minimum, trop larges à 320 px. */
  .jl-doc-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
  /* C4 : la barre d'outils de la carte passe à la ligne au lieu de déborder. */
  .jl-actions{flex-wrap:wrap}
  /* Volet : sur téléphone, le bouton « menu » du volet le déplie EN SURIMPRESSION
     (classe posée par jl.js) au lieu de ne rien faire. */
  .jl-rail.jl-rail--ouvert{width:248px;padding:var(--space-3) var(--space-2)}
  .jl-rail.jl-rail--ouvert .jl-ri__lbl,.jl-rail.jl-rail--ouvert .jl-ri__n,
  .jl-rail.jl-rail--ouvert .jl-rail__sec{display:revert}
  .jl-rail.jl-rail--ouvert .jl-ri{justify-content:flex-start;padding:var(--space-2) var(--space-3)}
  .jl-rail.jl-rail--ouvert .jl-ri__n{white-space:nowrap}
  /* Cibles tactiles principales : 40 px de haut au moins. */
  .jl-bouton,.jl-bouton--sm,.jl-vue>a,.jl-vue>button,.jl-hsel,.jl-calbtn,.jl-filtre,
  .jl-quand__preset,.jl-fch,.jl-frow,.jl-ri,.jl-rail__hd{min-height:40px}
  .jl-bouton--icone,.jl-calbtn{min-width:40px;width:40px;height:40px}
  .jl-frow{align-items:center}
  .jl-code{min-height:36px;align-items:center}
  #themeToggle{width:40px;height:40px}
  .topbar-drawer-close{min-width:40px;min-height:40px}
  .jl-exp__pill>button{min-width:28px;min-height:28px}
}
@media (max-width:620px){
  /* Tableaux en prose (à propos) : resserrés, et les mots longs se coupent. */
  .jl-tableau{font-size:var(--text-sm)}
  .jl-tableau th,.jl-tableau td{padding-left:6px;padding-right:6px;overflow-wrap:anywhere}
  /* Couloirs de l'historique : la colonne des noms cède de la place aux barres. */
  .jl-cl__head,.jl-cl__row{grid-template-columns:150px 1fr}
  .jl-cl__in{min-width:900px}
}
@media (max-width:420px){
  /* Barre de recherche : on rend de la place au champ de saisie. */
  .jl-barre-reseau__go{padding:0 12px;letter-spacing:.05em}
  .jl-barre-reseau__opt{padding:0 var(--space-2)}
  .jl-barre-reseau input{padding-left:var(--space-3);padding-right:var(--space-2)}
}
@media (max-width:900px){
  /* 3/10/2026 (téléphone), suite : grilles à minimum fixe, ECLI, croix du panneau loi. */
  .jl-grille-3{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
  .jl-bande--enligne>div,.jl-grille-3 code{overflow-wrap:anywhere;min-width:0}
  #loiX,.jl-loi__x{min-width:40px;min-height:40px}
}
@media (max-width:360px){
  /* Bandeau du haut à 320 px : logo, nom et « bêta » chevauchaient le bouton de thème. */
}
@media (max-width:620px){
  /* 3/10/2026 (téléphone) : le popover de date, ancré au bouton calendrier,
     sortait de l'écran à droite (page élargie à 491 px). Il se cale sur la
     largeur de l'écran, sous le bouton. */
  .jl-datepop{position:fixed;left:12px;right:12px;top:auto;width:auto;max-width:none;
    margin-top:6px;max-height:70vh;overflow:auto}
  .jl-datepop input[type=text],.jl-datepop input[type=date]{max-width:100%;min-height:40px}
}

/* ═══════════════════ 3/10/2026 (téléphone, demandes de Maroussia) ════════
   1. Le volet de gauche devient un BOUTON FLOTTANT : il ne mange plus 52 px
      de largeur ; le bouton ☰ du volet, seul visible, le déplie par-dessus.
   2. Barre de recherche : la saisie prend toute la ligne, « Avancé » et
      « Chercher » passent dessous. */
@media (max-width:600px){
  /* En haut à gauche, rond vert : on le voit tout de suite (sa demande). */
  .jl-rail:not(.jl-rail--ouvert){top:calc(var(--topbar-h,57px) + 10px);bottom:auto;left:10px;
    width:44px;height:44px;padding:0;border-radius:50%;overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.18);background:var(--teal);border:0}
  .jl-rail:not(.jl-rail--ouvert) .jl-rail__hd,
  .jl-rail:not(.jl-rail--ouvert) .jl-rail__hd svg{color:#fff;stroke:#fff}
  .jl-rail:not(.jl-rail--ouvert) > *:not(.jl-rail__hd){display:none !important}
  .jl-rail:not(.jl-rail--ouvert) .jl-rail__hd{width:44px;height:44px;margin:0;padding:0;
    display:flex;align-items:center;justify-content:center}
  .jl-rail.jl-rail--ouvert{top:var(--topbar-h,57px);bottom:0;left:0;z-index:60;overflow-y:auto}
  .jl-rail+.jl-body{padding-top:calc(var(--space-7) + 8px)}   /* le rond ne couvre pas le titre */
  .jl-rail+.jl-body{padding-left:var(--space-4)}
  /* Harmonie du 3/10/2026 : la règle vaut pour TOUTE barre qui porte une
     option (.jl-barre-reseau--options) ; une barre sans option garde saisie
     et bouton sur une ligne (ça tient jusqu'à 320 px). */
  .jl-barre-reseau--options{flex-wrap:wrap}
  .jl-barre-reseau--options input{flex:1 1 100%;border-bottom:1px solid var(--line)}
  .jl-barre-reseau--options .jl-barre-reseau__opt{flex:1 1 auto;justify-content:center;padding:var(--space-2) var(--space-3)}
  .jl-barre-reseau--options .jl-barre-reseau__go{flex:1 1 auto;padding:var(--space-3) 18px}
}

/* ═══════════════════ 3/10/2026 : HAUT DE PAGE COMMUN ═════════════════════
   Plainte : « aucune logique dans les espacements, même les tailles ».
   UNE échelle pour le haut de toutes les pages v2 (recherche, textes,
   doctrine, travaux, à propos) ; serveur-mcp, ressources et l'annuaire
   (pages v1, sans jl.css) reprennent les MÊMES valeurs en clair.
   Séquence : h1 (.jl-hero) → intro (.jl-lead) → barre (.jl-sbox) →
   options → exemples (.jl-hint) → premier bloc (.jl-ouverture).
   Rapport : scratchpad/audit/harmonie_v2_3oct.md */
:root{
  --haut-h1:var(--text-hero);          /* 30 px ; 27 px sous 600 px */
  --haut-lead:var(--text-base);        /* 14 px */
  --haut-saisie:1rem;                  /* 16 px : sous 16 px, iOS zoome */
  --haut-bouton:var(--text-xs);        /* 11,5 px capitales */
  --haut-exemples:var(--text-sm);      /* 12,5 px */
  --haut-section:var(--text-2xl);      /* 27 px : TOUT titre de section */
  --haut-ecart-titre:var(--space-3);   /* h1 → intro : 12 px */
  --haut-ecart-barre:var(--space-6);   /* intro → barre : 24 px */
  --haut-ecart-options:var(--space-3); /* barre → options → exemples : 12 px */
  --haut-ecart-section:var(--space-9); /* exemples → premier bloc : 48 px */
}
@media (max-width:600px){:root{--haut-h1:var(--text-2xl)}}
.jl-titre--h1.jl-hero{font-size:var(--haut-h1);margin-top:0;margin-bottom:var(--haut-ecart-titre)}
.jl-hero + .jl-lead{font-size:var(--haut-lead);margin-top:0;margin-bottom:var(--haut-ecart-barre)}
.jl-sbox{margin-top:0}
.jl-sbox .jl-barre-reseau{border-radius:var(--radius-md)}
.jl-sbox .jl-barre-reseau input{font-size:var(--haut-saisie)}
.jl-sbox .jl-barre-reseau__go{font-size:var(--haut-bouton);min-height:48px}
.jl-sbox .jl-ouvrir{margin-top:var(--haut-ecart-options)}
.jl-hint{font-size:var(--haut-exemples);margin-top:var(--haut-ecart-options)}
.jl-hint:empty{margin-top:0}
.jl-hint--suite{margin-top:var(--space-2)}
/* Le premier bloc après le haut, quel qu'il soit (Nouveautés, Codes, tuiles,
   Dernières lois, première section d'À propos). Les blocs vides qui le
   précèdent (états, avertissements) ne doivent rien ajouter. */
.jl-ouverture{margin-top:var(--haut-ecart-section)}
.jl-sources:empty,.jl-advsum:empty{margin:0}
.jl-exp[hidden]{display:none}
.jl-ouverture > .jl-titre:first-child,
.jl-ouverture > .jl-titre-section:first-child{margin-top:0;border-top:0;padding-top:0}
/* Une seule taille de titre de section (Nouveautés, Codes, Dernières lois…). */
.jl-titre-section{font-size:var(--haut-section)}
.jl-titre-section .s{font-size:var(--text-sm)}
.jl-titre-section--suite{margin-top:var(--haut-ecart-section)}

/* 3/10/2026 : UN SEUL séparateur par titre de section (elle : « parfois 2
   divideurs, parfois 0, parfois 1 ») — un trait fin SOUS le titre, aucun
   au-dessus, et le premier élément qui suit n'en ajoute pas. */
h2.jl-titre-section,#flux > h2.jl-titre,#etat > h2.jl-titre{
  border-top:0;border-bottom:1px solid var(--line);padding:0 0 var(--space-3);margin:0 0 var(--space-4);
  font-size:var(--haut-section,var(--text-2xl))}
.jl-ouverture,#flux{border-top:0}
#flux > h2.jl-titre + .jl-lead{border:0}
#liste > .jl-resultat:first-child,#fluxCartes > :first-child,
#fluxCartes > :first-child .jl-resultat,#etat + .jl-resultats > .jl-resultat:first-child{border-top:0}

/* 3/10/2026 : un compteur du volet ne se coupe jamais (« 8,6 / k »). */
.jl-ri__n{white-space:nowrap;flex-shrink:0}