/* ═══════════════════════════════════════════════════════════
   WESPYRADIO — PAGES PUBLIQUES / légal (mentions, confidentialité, CGV)
   Portée : .lg-public — hors application, ni barre latérale ni topbar.

   Repris de la maquette mesurée
   .claude/claudedocs/design/maquettes/ux-legal-2026-10-04/.working/,
   qui fait autorité (DESIGN.md). Le jeu de tokens est AUTONOME, et c'est voulu :
   ces pages se lisent sans compte, donc sans `zone-auth` ni `zone-monitoring`.
   Le même gabarit `lg-` sert aux workspaces « arrivée » et « erreurs ».

   Deux écarts avec la maquette, et deux seulement :
     - les chemins de fontes partent de /resources/ au lieu de remonter cinq
       niveaux depuis le dossier de maquette ;
     - la barre de maquette (.mockbar, .grp) est retirée.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:block;src:url('/resources/fonts/BricolageGrotesque/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:"Inter";font-weight:400;font-display:block;src:url('/resources/fonts/Inter/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:"Inter";font-weight:500;font-display:block;src:url('/resources/fonts/Inter/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:"Inter";font-weight:600;font-display:block;src:url('/resources/fonts/Inter/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:block;src:url('/resources/fonts/JetBrainsMono/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:block;src:url('/resources/fonts/JetBrainsMono/jetbrains-mono-latin-700-normal.woff2') format('woff2')}

/* ================= TOKENS ================= */
:root{
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-num:"JetBrains Mono",ui-monospace,monospace;
  --status-ok:#22C55E; --status-warning:#EA580C; --status-critical:#DC2626;
  --chip-bg:rgba(11,20,23,.86); --chip-text:#FFFFFF;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;
  --pill:999px;
}
/* MEGA DARK « régie de nuit » */
:root[data-theme="dark"]{
  color-scheme:dark;
  --primary:#5296af; --on-primary:#070e10; --accent-soft:#172930;
  --s0:#070e10; --s1:#0d161a; --s2:#142024; --s3:#19272c;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.17);
  --text-hi:#E6EDEF; --text-dim:#93A7AE; --text-faint:#7d9096;
  --ok-ink:#22c55e; --warn-ink:#f3661c; --crit-ink:#e66161;
  --warn-tint:#1b1510;
  --glass:rgba(28,36,40,.72); --glass-border:rgba(255,255,255,.12);
  --curve-glow:drop-shadow(0 0 6px rgba(82,150,175,.55));
  --r-sm:9px; --r-md:14px;
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  --halo:0 0 14px rgba(82,150,175,.45);
  --page-glow:radial-gradient(1200px 380px at 50% -140px, rgba(82,150,175,.10), transparent 70%);
}
/* MEGA LIGHT « rapport exécutif » GIVRE (choix de Brian 2026-09-27) : gris-bleu froid, cartes quasi blanches, jamais #FFFFFF.
   Fond au plancher (status-warning 3,02:1 sur s0) ; séparation cartes/fond 1,148:1 via s1 + filets + ombre. Source : wcag-classement.py */
:root[data-theme="light"]{
  color-scheme:light;
  --primary:#203B45; --on-primary:#FFFFFF; --accent-soft:#e5e9ea;
  --s0:#e8edef; --s1:#fbfcfc; --s2:#f2f4f5; --s3:#fdfdfd;
  --line:rgba(16,26,31,.14); --line-strong:rgba(16,26,31,.28);
  --text-hi:#0E1A1F; --text-dim:#51646B; --text-faint:#5d6d73;
  --ok-ink:#157b3b; --warn-ink:#ad4109; --crit-ink:#cf2121;
  --warn-tint:#e8e0db;
  --glass:rgba(251,252,252,.86); --glass-border:rgba(16,26,31,.14);
  --curve-glow:none;
  --r-sm:6px; --r-md:10px;
  --card-shadow:0 1px 2px rgba(16,26,31,.08),0 4px 14px rgba(16,26,31,.07);
  --halo:none;
  --page-glow:none;
}

/* NUANCES (choix de Brian 2026-09-27) — préférence du PROFIL utilisateur, une par thème, posée côté serveur
   sur <html data-light data-dark>. Surfaces seules + dérivés (accent-soft, warn-tint, voile) : source
   wcag-classement.py, 0 échec. Défauts : givre (bloc light ci-dessus) / régie (bloc dark ci-dessus). */
:root[data-theme="light"][data-light="creme"]{
  --accent-soft:#e2e3e1; --s0:#f3f0ea; --s1:#f8f6f2; --s2:#f0ede5; --s3:#f9f8f5;
  --line:rgba(16,26,31,.12); --line-strong:rgba(16,26,31,.24); --warn-tint:#f2e2d6;
  --glass:rgba(246,245,241,.80);
  --card-shadow:0 1px 3px rgba(16,26,31,.08),0 1px 2px rgba(16,26,31,.05);
}
:root[data-theme="light"][data-light="creme-contraste"]{
  --accent-soft:#e6e9e9; --s0:#f0ece4; --s1:#fcfcfb; --s2:#f6f5f1; --s3:#fdfdfc; --warn-tint:#efdfd1;
  --glass:rgba(252,252,251,.86);
  --card-shadow:0 1px 2px rgba(40,30,10,.08),0 4px 14px rgba(40,30,10,.07);
}
:root[data-theme="dark"][data-dark="graphite"]{
  --accent-soft:#1d282e; --s0:#08090a; --s1:#141517; --s2:#1c1e21; --s3:#232427; --warn-tint:#1c100a;
  --glass:rgba(34,35,37,.72);
}
:root[data-theme="dark"][data-dark="moka"]{
  --accent-soft:#22282a; --s0:#0e0b09; --s1:#191512; --s2:#231e1a; --s3:#28231f; --warn-tint:#221209;
  --glass:rgba(39,35,32,.72);
}

/* ================= BASE ================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--s0);background-image:var(--page-glow);background-repeat:no-repeat;color:var(--text-hi);
  font:400 15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;min-height:100dvh}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:700}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ================= BARRE DE REVUE (hors produit) ================= */






@media(min-width:1100px){}



/* ================= PAGES PUBLIQUES (lg-) ================= */
.lg-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);flex-wrap:wrap;
  max-width:1180px;margin:0 auto;padding:var(--sp4) var(--sp4)}
@media(min-width:768px){.lg-top{padding:var(--sp5) var(--sp5)}}
.lg-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-hi);text-decoration:none;font:600 17px/1.2 var(--font-body);letter-spacing:-.01em}
.lg-brand .mk{width:30px;height:30px;border-radius:8px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center}
.lg-brand .mk svg.i{width:18px;height:18px}
.lg-nav a{color:var(--text-hi);text-decoration:none;font:600 14px/1.2 var(--font-body);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:8px 12px;display:inline-flex;align-items:center;gap:6px;min-height:36px}
.lg-nav a:hover{border-color:var(--primary)}

.lg-page{max-width:1180px;margin:0 auto;padding:0 var(--sp4) var(--sp7)}
@media(min-width:768px){.lg-page{padding:0 var(--sp5) var(--sp7)}}
.lg-grid{display:block}
@media(min-width:1100px){.lg-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--sp7);align-items:start}}

/* bandeau brouillon : avertissement, contenu (pas de verre) */
.lg-draft{display:flex;gap:var(--sp3);align-items:flex-start;background:var(--warn-tint);border:1px solid var(--warn-ink);
  border-radius:var(--r-md);padding:var(--sp3) var(--sp4);margin:0 0 var(--sp5);color:var(--text-hi)}
.lg-draft svg.i{color:var(--warn-ink);width:20px;height:20px;margin-top:2px}
.lg-draft p{margin:0}
.lg-draft strong{color:var(--warn-ink)}

.lg-toc{display:none}
@media(min-width:1100px){.lg-toc{display:block;position:sticky;top:calc(var(--top) + var(--sp5))}}
.lg-toc p{font:500 12px/1.3 var(--font-num);text-transform:uppercase;letter-spacing:.09em;color:var(--text-dim);margin:0 0 var(--sp2)}
.lg-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.lg-toc a{display:block;padding:5px 0 5px 12px;margin-left:-1px;border-left:2px solid transparent;color:var(--text-dim);
  text-decoration:none;font:500 13.5px/1.35 var(--font-body)}
.lg-toc a:hover{color:var(--text-hi)}
.lg-toc a[aria-current="true"]{color:var(--text-hi);border-left-color:var(--primary)}

.lg-doc{max-width:72ch;min-width:0}
.lg-doc h1{margin-bottom:var(--sp2)}
.lg-meta{margin:0 0 var(--sp5);color:var(--text-dim);font-size:14px}
.lg-meta .num{font-weight:500}
.lg-doc section{margin:0 0 var(--sp6);scroll-margin-top:calc(var(--top) + var(--sp4))}
.lg-doc h2{font:600 20px/1.3 var(--font-body);letter-spacing:-.005em;margin:0 0 var(--sp3);color:var(--text-hi)}
.lg-doc h3{font:600 16px/1.35 var(--font-body);margin:var(--sp4) 0 var(--sp2)}
.lg-doc p,.lg-doc li{font-size:16px;line-height:1.65}
.lg-doc p{margin:0 0 var(--sp3)}
.lg-doc ul{margin:0 0 var(--sp3);padding-left:1.2em}
.lg-doc li{margin:0 0 4px}
.lg-doc a{color:var(--primary);font-weight:600;text-underline-offset:3px}
:root[data-theme="dark"] .lg-doc a{color:#7fb6cb}

/* fiche d'identité : libellé | valeur */
.lg-id{margin:0 0 var(--sp3);display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--s1);box-shadow:var(--card-shadow)}
.lg-id > div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:10px var(--sp4);border-top:1px solid var(--line)}
.lg-id > div:first-child{border-top:0}
@media(min-width:640px){.lg-id > div{grid-template-columns:200px minmax(0,1fr);gap:var(--sp3)}}
.lg-id dt{font:500 13.5px/1.5 var(--font-body);color:var(--text-dim)}
.lg-id dd{margin:0;font-size:15px;line-height:1.55;overflow-wrap:anywhere}

/* emplacements à remplir : texte entre crochets TOUJOURS écrit (jamais la couleur seule) */
.tbd,.chk{font:600 13.5px/1.5 var(--font-body);border-radius:5px;padding:1px 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tbd{background:var(--warn-tint);color:var(--warn-ink);border:1px dashed var(--warn-ink)}
.chk{background:var(--accent-soft);color:var(--text-hi);border:1px dashed var(--line-strong)}

.lg-foot{border-top:1px solid var(--line);margin-top:var(--sp6);padding-top:var(--sp4);display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp5);
  justify-content:space-between;color:var(--text-dim);font-size:13.5px}
.lg-foot nav{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4)}
.lg-foot a{color:var(--text-dim);text-decoration:none}
.lg-foot a:hover{color:var(--text-hi);text-decoration:underline}
.lg-foot a[aria-current="page"]{color:var(--text-hi);font-weight:600}

/* tableaux de référence : lignes empilées en cartes sous 760 px (libellé de colonne répété) */
.lg-tab{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 var(--sp4);background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--card-shadow);font-size:14.5px;line-height:1.5}
.lg-tab th,.lg-tab td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line);overflow-wrap:break-word}
/* min-content « anywhere » écrasait les colonnes courtes (mots coupés lettre à lettre à 1280 px) */
.lg-tab .tbd,.lg-tab .chk{white-space:normal}
.lg-tab thead th{border-top:0;font:500 12.5px/1.3 var(--font-body);color:var(--text-dim)}
.lg-tab tbody th{font-weight:600}
@media(max-width:759px){
  .lg-tab,.lg-tab tbody,.lg-tab tr,.lg-tab th,.lg-tab td{display:block}
  .lg-tab thead{display:none}
  .lg-tab tr{padding:10px 12px;border-top:1px solid var(--line)}
  .lg-tab tbody tr:first-child{border-top:0}
  .lg-tab th,.lg-tab td{padding:2px 0;border:0}
  .lg-tab td::before{content:attr(data-label);display:block;font:500 12.5px/1.3 var(--font-body);color:var(--text-dim);margin-top:6px}
}
.lg-doc .lead{font-size:17px;color:var(--text-hi)}

.mnote{margin-top:var(--sp5);padding:var(--sp3) var(--sp4);border:1px dashed var(--line-strong);border-radius:var(--r-md);
  font-size:13px;line-height:1.5;color:var(--text-dim);max-width:72ch}
.mnote b{color:var(--text-hi)}