/* =====================================================================
   PORTAIL CLIENT — feuille de style unique (phase 2a)
   Reprend refonte/DESIGN.md et la maquette : fond bleu nuit, lignes fines
   cyan, coins coupés, polices du système (aucune police téléchargée).
   Échelle d'espacement : 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
   Phase 2a : les cartes EXISTANTES gardent leurs classes (.card, .badge, .b-*,
   .mut, .row, .grid...) ; elles sont habillées ici avec la nouvelle palette.
   Leur vrai restylage (jauge, barres, « En clair »...) viendra en phase 2b.
   ===================================================================== */
:root{
  --bg0:#060B16; --bg1:#0B1424; --bg2:#12203A;
  --text:#E8F1FB; --muted:#A9BAD1; --cyan:#22D3EE; --ink:#04121F;
  --ok:#4ADE9A; --warn:#FBBF24; --danger:#FF8A94;
  --edge:#6C8FB8;   /* contour des éléments cliquables : >= 4,8:1 */
  --line:#1F5C78;   /* décoratif uniquement */
  --bar:#4D7BA8;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --font:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","DejaVu Sans Mono",Consolas,monospace;
  /* alias pour les fragments partagés avec le portail admin */
  --mut:var(--muted); --txt:var(--text); --ac:var(--cyan); --arc:var(--bar);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--bg0);color:var(--text);font:400 1.0625rem/1.55 var(--font)}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(800px 480px at 85% -5%,rgba(34,211,238,.09),transparent 70%),
    radial-gradient(640px 420px at 0% 100%,rgba(77,123,168,.10),transparent 70%),
    linear-gradient(rgba(34,211,238,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.045) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
h1,h2,h3,h4,p,ul,dl,dd,figure{margin:0}
a{color:var(--cyan)}
a:hover{color:#67E3F4}
ul{padding-left:var(--s5)}
.skip{position:absolute;left:var(--s4);top:-80px;z-index:100;background:var(--cyan);color:var(--ink);padding:var(--s3) var(--s4);font-weight:700;min-height:48px;display:flex;align-items:center}
.skip:focus{top:var(--s2)}

/* ---------- structure ---------- */
.shell{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 var(--s4) var(--s8)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5) 0 var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s5);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s3);min-width:0}
/* logo posé sur une plaque claire discrète : lisible sur fond sombre quelle que soit sa couleur */
.brand-logo{flex:none;display:flex;align-items:center;background:#E8F1FB;padding:var(--s1) var(--s3);border-radius:6px;border:1px solid var(--edge)}
.brand-logo img{display:block;height:32px;width:auto;max-width:140px}
.brand-mark{flex:none;width:36px;height:36px;border:2px solid var(--cyan);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));position:relative}
.brand-mark::after{content:"";position:absolute;inset:8px;border:2px solid var(--cyan);border-radius:50%}
.brand-name{font:700 1.0625rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.brand-sub{color:var(--muted);font-size:1rem}
.layout{display:block}
@media(min-width:900px){
  .shell{padding:0 var(--s6) var(--s8)}
  .layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:var(--s6);align-items:start}
}
main:focus{outline:none}

/* ---------- navigation (menu déplié sur ordinateur, bouton « Menu » sur téléphone) ---------- */
.nav .menu-btn{display:none;width:100%}
.js .nav .menu-btn{display:flex}
.nav{margin-bottom:var(--s5)}
.js .nav-body{display:none}
.js .nav.open .nav-body{display:block}
@media(min-width:900px){
  .js .nav .menu-btn{display:none}
  .nav{position:sticky;top:var(--s4);margin-bottom:0;max-height:calc(100vh - 32px);overflow:auto}
  .js .nav-body{display:block}
}
.nav-body{border:1px solid var(--line);background:var(--bg1);padding:var(--s2) 0 var(--s3)}
.menu-btn+.nav-body{margin-top:var(--s2)}
.nav-group{font:700 .875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:var(--s4) var(--s4) var(--s2)}
.nav ul{list-style:none;padding:0}
.nav a{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:var(--s2) var(--s4);color:var(--text);text-decoration:none;border-left:3px solid transparent;line-height:1.3}
.nav a:hover{background:rgba(34,211,238,.08)}
.nav a[aria-current="page"]{border-left-color:var(--cyan);background:rgba(34,211,238,.12);font-weight:700}

/* ---------- boutons : MÊME look que le portail admin (dégradé, lueur, faisceau au survol, coins 9px) ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);
  background:linear-gradient(180deg,rgba(91,107,133,.30),rgba(91,107,133,.14));color:var(--text);border:1px solid rgba(91,107,133,.35);border-radius:9px;
  font:600 1rem/1.2 var(--font);cursor:pointer;text-decoration:none;box-shadow:0 0 8px rgba(91,107,133,.16);transition:box-shadow .2s,color .15s,transform .08s}
.btn::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}
.btn:hover::before{left:140%}
.btn:hover{box-shadow:0 0 16px rgba(34,211,238,.35);color:var(--text)}
.btn:active{transform:scale(.97)}
/* bouton principal : même look que l'admin MAIS texte clair (l'admin a un texte sombre sur dégradé sombre) */
.btn-primary{background:linear-gradient(180deg,rgba(34,211,238,.34),rgba(34,211,238,.12));color:#EAFBFF;border:1px solid rgba(34,211,238,.45);box-shadow:0 0 10px rgba(34,211,238,.22);text-shadow:0 0 8px rgba(34,211,238,.45)}
.btn-primary:hover{box-shadow:0 0 22px rgba(34,211,238,.55);color:#FFFFFF}
/* mêmes noms que l'admin (.btn.sec = look de base ci-dessus ; .btn.arc = bouton rouge) */
.btn.arc{background:linear-gradient(180deg,rgba(255,77,94,.22),rgba(120,12,24,.28));color:#FFD7DA;border-color:rgba(255,77,94,.4);box-shadow:0 0 8px rgba(255,77,94,.18)}
.btn.arc:hover{box-shadow:0 0 16px rgba(255,77,94,.35);color:#FFD7DA}
.btn-block{width:100%}
.btn:disabled{cursor:not-allowed;opacity:.65}
@media(prefers-reduced-motion:reduce){.btn,.btn::before{transition:none}}

/* ---------- titres de rubrique ---------- */
.view-title{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);line-height:1.2;margin-bottom:var(--s2);font-weight:700;overflow-wrap:anywhere}
.view-title::after{content:"";display:block;width:64px;height:3px;background:var(--cyan);margin-top:var(--s3)}
.view-title:focus{outline:none}
.view-title:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}
.lead{max-width:65ch;margin:var(--s4) 0 var(--s5)}
/* sans JavaScript : toutes les rubriques restent visibles, l'une sous l'autre */
.js .dash-panel{display:none}
.js .dash-panel.active{display:block}
.dash-panel{margin-bottom:var(--s7)}
.dash-panel:focus{outline:none}
.js .dash-panel{animation:rise .28s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- carte à coins coupés (cartes existantes habillées) ---------- */
.card{position:relative;padding:var(--s5);margin-bottom:var(--s4);background:var(--line);scroll-margin-top:var(--s4);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.card::before{content:"";position:absolute;inset:1px;z-index:0;background:linear-gradient(180deg,#0D1829,var(--bg1));
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px))}
.card::after{content:"";position:absolute;left:var(--s4);top:0;width:28px;height:3px;background:var(--cyan);z-index:2}
.card>*{position:relative;z-index:1}
.card>*+*{margin-top:var(--s3)}
.card h3{font-size:1.25rem;line-height:1.25;font-weight:700;overflow-wrap:anywhere}
.card h4{font-size:1.0625rem;font-weight:700;margin:var(--s3) 0 var(--s1)}
.grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
.grid .card{margin-bottom:0}
@media(min-width:700px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.view h2,.dash-panel h2{font-size:1.25rem;line-height:1.25;font-weight:700;color:var(--text);margin:var(--s6) 0 var(--s3);overflow-wrap:anywhere}
.dash-panel h2.view-title{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);margin:0 0 var(--s2)}
.muted,.mut{color:var(--muted);font-size:1rem}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
code{font-family:var(--mono);background:var(--bg2);padding:1px var(--s2);border:1px solid var(--line)}

/* ---------- badges (couleur + mot : le mot est toujours écrit) ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1px solid currentColor;border-radius:3px;font:700 .875rem/1.6 var(--mono);letter-spacing:.02em;color:var(--muted);background:rgba(169,186,209,.12)}
.b-nouveau{color:var(--cyan);background:rgba(34,211,238,.12)}
.b-a_faire,.b-en_test{color:var(--warn);background:rgba(251,191,36,.12)}
.b-fait{color:var(--ok);background:rgba(74,222,154,.12)}
.b-rouge{color:var(--danger);background:rgba(255,138,148,.12)}
.b-archive,.b-connue{color:var(--muted);background:rgba(169,186,209,.12)}
.chip{display:inline-block;padding:2px 10px;border-radius:3px;font:700 .875rem/1.6 var(--mono);color:var(--ink)}
.chip-ok{background:var(--ok)}.chip-warn{background:var(--warn)}.chip-bad{background:var(--danger)}.chip-viol{background:#C4B5FD}.chip-neu{background:var(--muted)}
.chip-est{background:var(--warn);padding:1px 6px;color:var(--ink)}

/* ---------- alertes et messages ---------- */
.alert{border:2px solid var(--danger);background:rgba(255,138,148,.10);color:var(--text);padding:var(--s3) var(--s4);font-weight:700;margin-bottom:var(--s4)}
.alert:focus{outline:none}
.ok{border:2px solid var(--ok);background:rgba(74,222,154,.10);color:var(--text);padding:var(--s3) var(--s4);font-weight:700;margin-bottom:var(--s4)}

/* ---------- formulaires ---------- */
.field{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.field label{font-weight:700;color:var(--text);font-size:1rem}
input[type=text],input[type=password],input[type=email],textarea,select{width:100%;min-height:48px;padding:var(--s3);background:var(--bg0);color:var(--text);border:2px solid var(--edge);border-radius:4px;font:400 1rem/1.5 var(--font)}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ---------- écran de connexion ---------- */
.login-wrap{max-width:440px;margin:var(--s6) auto 0}
.login-wrap .card{padding:var(--s6)}
.login-title{font:700 clamp(1.5rem,1.2rem + 1.2vw,1.875rem)/1.2 var(--font);overflow-wrap:anywhere}
.login-sub{color:var(--muted)}
.login-help{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);color:var(--muted);font-size:1rem}
.login-help a{font-weight:700}
@media(max-width:480px){.card{padding:var(--s4)}.login-wrap .card{padding:var(--s5) var(--s4)}}

/* ---------- tableaux (défilement horizontal DANS la carte, jamais dans la page) ---------- */
.table-wrap,.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--s2) var(--s3);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .875rem/1.3 var(--mono);letter-spacing:.04em;color:var(--muted);background:rgba(34,211,238,.05)}

/* ---------- utilitaires (remplacent les anciens style="" écrits en Python) ---------- */
.jb{justify-content:space-between}.ac{align-items:center}
.nowrap{white-space:nowrap}.center{text-align:center}.b{font-weight:700}
.sm,.xs{font-size:1rem}
.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mb8{margin-bottom:8px}.mb20{margin-bottom:20px}.ml8{margin-left:8px}
.h2s,.h2s-lg,.h2s-md{margin:var(--s6) 0 var(--s3)}
.pad12,.pad14,.pad-card{padding:var(--s5)}
.line-item{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.big-num,.mid-num,.sub-num{font:700 1.5rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:var(--s2);vertical-align:middle;border:1px solid var(--text)}
.dot.sm{width:12px;height:12px;margin-right:var(--s1)}
.dot-ok{background:var(--ok)}.dot-warn{background:var(--warn)}.dot-bad{background:var(--danger)}.dot-neu{background:var(--bar)}
.camp-list{margin-top:var(--s3);padding:0;list-style:none}
.camp-list li{padding:var(--s1) 0}
.camp-legend{margin-top:var(--s2);font-size:1rem;color:var(--muted)}
.camp-name{vertical-align:middle}
.t-ok,.t-27{color:var(--ok)}.t-warn{color:var(--warn)}.t-bad{color:var(--danger)}
.mt-b{display:inline-block;padding:1px 8px;border-radius:3px;font:700 .875rem/1.6 var(--mono);color:var(--ink);margin-left:var(--s2);background:var(--muted)}
.mt-EXACT{background:#9CC4FF}.mt-PHRASE{background:#C4B5FD}.mt-BROAD{background:var(--warn)}
.t-EXACT{color:#9CC4FF}.t-PHRASE{color:#C4B5FD}.t-BROAD{color:var(--warn)}
.neg-grid{display:grid;grid-template-columns:1fr;gap:0 var(--s5)}
@media(min-width:700px){.neg-grid{grid-template-columns:1fr 1fr}}
.neg-item{padding:var(--s1) 0;border-bottom:1px solid var(--line)}
.neg-set{font-size:1rem;color:var(--muted)}
.cols{display:flex;gap:var(--s4);flex-wrap:wrap}
.cols>div{flex:1;min-width:260px}
.tbl-sm{font-size:1rem}
.tc{text-align:center;font-weight:700}
.sticky-hint{cursor:help}
.soon-card{display:flex;align-items:center;gap:var(--s4);border:2px dashed var(--edge);padding:var(--s5)}
.soon-ico{font-size:1.6rem}
.soon-card p+p{margin-top:var(--s1)}
.pager{margin-top:var(--s3);display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.pager a{display:inline-flex;align-items:center;min-height:44px}
.liv-list{list-style:none;padding:0;display:grid;gap:var(--s3)}
.liv-list li{padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.scroll-anchor{scroll-margin-top:var(--s5)}

/* =====================================================================
   PHASE 2b-1 (RYL-133) — Accueil, Vos agents, Coût IA, État de l'espace.
   Repris de refonte/maquette/index.html (mêmes noms de classes, mêmes valeurs).
   ===================================================================== */
.p2b .card{margin-bottom:0}
.p2b>*+*{margin-top:var(--s5)}
.p2b>.lead{margin:var(--s4) 0 0}
.p2b>.lex-box{margin-top:var(--s6)}
.grid3{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid2{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.grid3 .card,.grid2 .card{margin-bottom:0}
.demo-note{background:var(--bg2);border:1px solid var(--line);color:var(--warn);font:600 .875rem/1.4 var(--mono);text-align:center;padding:var(--s2) var(--s4)}

/* chiffres */
.label{font:700 .875rem/1.3 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card h3.label{margin:0}
.big{font:700 clamp(2rem,1.4rem + 1.2vw,2.25rem)/1.1 var(--mono);font-variant-numeric:tabular-nums;margin-top:var(--s2)}
.trend{font-size:1rem;color:var(--muted)}
.tr-up{color:var(--ok);font:700 1rem var(--mono)}
.tr-down{color:var(--danger);font:700 1rem var(--mono)}
.tr-flat{color:var(--muted);font:700 1rem var(--mono)}
.empty{font-weight:700}
.err-msg{border-left:4px solid var(--danger);padding-left:var(--s3)}
.meta{color:var(--muted);font-size:1rem}
.meta-label{color:var(--muted)}
.action-top{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.action-top h3{margin:0;min-width:0}

/* mini-courbe */
.spark{margin:var(--s3) 0 0}
.spark svg{display:block;width:100%;height:36px;overflow:visible}
.spark polyline{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark-cap{font-size:.875rem;color:var(--muted);margin-top:var(--s1)}

/* ligne « En clair » */
.clair{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) var(--s4);background:rgba(34,211,238,.08);border-left:3px solid var(--cyan);font-size:1rem;margin-top:var(--s4)!important}
.clair-label{flex:none;font:700 .875rem/1.4 var(--mono);letter-spacing:.08em;color:var(--cyan)}
.clair{flex-wrap:wrap}.clair>span:last-child{flex:1 1 14rem;min-width:0}
@media(max-width:480px){.clair{flex-direction:column;gap:var(--s1)}}
.info-line{color:var(--muted);font-size:1rem;max-width:65ch}

/* jauge en arc */
.gauge{position:relative;max-width:340px;margin:var(--s4) auto 0}
.gauge-svg{display:block;width:100%;height:auto;overflow:visible}
.gauge-svg path{fill:none;stroke-linecap:butt}
.g-track{stroke:var(--bg2);stroke-width:14}
.g-inner{stroke:var(--line);stroke-width:1}
.g-used{stroke:var(--bar);stroke-width:14;animation:g-used 1s ease-out both}
.g-left{stroke:var(--cyan);stroke-width:14;animation:g-left 1.1s ease-out both}
.g-ticks line{stroke:var(--edge);stroke-width:2}
@keyframes g-used{from{stroke-dasharray:0 100}}
@keyframes g-left{from{stroke-dasharray:0 100}}
.gauge-text{position:absolute;left:0;right:0;bottom:4%;text-align:center}
.g-big{font:700 clamp(1.75rem,1.2rem + 1.4vw,2rem)/1.1 var(--mono);font-variant-numeric:tabular-nums}
.g-sub{font-size:1rem;color:var(--muted)}
.level,.level-line{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.level{justify-content:center;margin-top:var(--s4)!important}
.level .badge{white-space:normal;text-align:center;align-items:flex-start}
.stats{display:grid;gap:var(--s2);grid-template-columns:1fr;margin-top:var(--s5)!important}
.stat{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);background:rgba(18,32,58,.55);min-height:48px}
.stat dt{display:flex;align-items:center;gap:var(--s2);color:var(--text)}
.stat dd{font:700 1.25rem var(--mono);font-variant-numeric:tabular-nums}
.sw{width:14px;height:14px;flex:none;border:1px solid var(--text)}
.sw-used{background:var(--bar)}
.sw-left{background:var(--cyan)}
.sw-cap{background:transparent;border-style:dashed}

/* barres */
.bars{list-style:none;padding:0;display:grid;gap:var(--s4)}
.bar-row{display:grid;gap:var(--s1)}
.bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.bar-name{font-weight:700;overflow-wrap:anywhere}
.bar-val{font:700 1.0625rem var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-sub{font-size:1rem;color:var(--muted)}
.bar-track{height:14px;background:var(--bg2);border:1px solid var(--line)}
.bar-fill{height:100%;background:var(--bar);transform-origin:left;animation:grow .7s ease-out both}
.bar-fill.hi{background:var(--cyan)}
@keyframes grow{from{transform:scaleX(0)}}
.bar-total{display:flex;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-weight:700}

/* jauge de remplissage (disque, mémoire) : vert / orange / rouge + icône + mot */
.meter{position:relative;height:14px;background:var(--bg2);border:1px solid var(--line)}
.meter-fill{height:100%;transform-origin:left;animation:grow .7s ease-out both}
.meter-ok{background:var(--ok)}
.meter-warn{background:var(--warn)}
.meter-bad{background:var(--danger)}
.meter-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--edge)}
.meter-pct{font-size:1.25rem;font-weight:700}

/* infobulle : un mot expliqué, fiche qui marche au toucher, à la souris et au clavier */
.term{padding:0;margin:0}
.js .term{position:relative;display:inline-block;cursor:pointer;text-decoration:underline dotted var(--cyan) 2px;text-underline-offset:4px}
.js .term::before{content:"";position:absolute;inset:-10px -6px}
.js .term::after{content:"?";content:"?" / "";display:inline-flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;margin-left:.3em;border:1px solid var(--cyan);border-radius:50%;font:700 .72em/1 var(--mono);color:var(--cyan);vertical-align:.08em;text-decoration:none}
.pop{position:fixed;z-index:60;left:var(--s4);right:var(--s4);bottom:var(--s4);max-width:560px;margin:0 auto;background:var(--bg2);border:2px solid var(--cyan);padding:var(--s5);display:grid;gap:var(--s3);box-shadow:0 16px 48px rgba(0,0,0,.65);max-height:calc(100vh - 32px);overflow:auto}
.pop h2{font-size:1.25rem;line-height:1.25;margin:0}
.pop p{margin:0}
.pop .btn{justify-self:start}

/* petit lexique de la rubrique */
.lex-box{border:1px solid var(--line);background:var(--bg1)}
.lex-box summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:var(--s2) var(--s4);font-weight:700}
.lex-box[open] summary{border-bottom:1px solid var(--line)}
.lex{display:grid;gap:var(--s4);padding:var(--s4)}
.lex-item{padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.lex-item:last-child{border-bottom:0;padding-bottom:0}
.lex-item dt{font-weight:700;font-size:1.125rem}
.lex-item dd+dd{margin-top:var(--s1)}

/* ---------- mouvement : coupé si l'appareil le demande ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Mes actions (reprend la maquette) ---------- */
.nav-top{border-bottom:1px solid var(--line);padding-bottom:var(--s2);margin-bottom:var(--s1)}
.pill-count{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--warn);color:var(--ink);font:700 .875rem/1 var(--mono)}
.enclair,.advice{border-left:4px solid var(--cyan);background:rgba(34,211,238,.07);padding:var(--s3) var(--s4);margin:var(--s4) 0;display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline}
.advice{grid-template-columns:1fr;background:rgba(34,211,238,.12);gap:var(--s2)}
.enclair p,.advice p{margin:0}
.enclair-tag{font:700 .875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.pills{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0}
.pill{min-height:44px;padding:0 var(--s4);background:transparent;color:var(--text);border:2px solid var(--edge);border-radius:999px;font:700 1rem/1.2 var(--font);cursor:pointer}
.pill:hover{background:rgba(108,143,184,.18)}
.pill.on{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.act-head{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;flex-wrap:wrap}
.act-kind{font:700 .875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.act h3{margin:var(--s3) 0 0}
.act-details{white-space:pre-line}
.q{margin-top:var(--s4)}
.q-num{font:700 .875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin:0 0 var(--s1)}
.q-label,.fs legend{display:block;font-weight:700;padding:0;margin:0 0 var(--s1)}
.q-hint{color:var(--muted);margin:0 0 var(--s2)}
.fs{border:0;padding:0;margin:0;min-width:0}
.opts{display:grid;gap:var(--s2)}
.opts-2{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:var(--s2) var(--s3);border:2px solid var(--edge);border-radius:4px;background:var(--bg0);font-weight:400;cursor:pointer}
.opt input{width:22px;height:22px;min-height:0;accent-color:var(--cyan);flex:none}
.opt:has(input:checked){border-color:var(--cyan);background:rgba(34,211,238,.12)}
.opt:focus-within{outline:3px solid var(--cyan);outline-offset:2px}
.act-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}
@media(max-width:640px){.act-btns{grid-template-columns:1fr}.opts-2{grid-template-columns:1fr 1fr}}
.b-done{background:linear-gradient(180deg,rgba(46,225,122,.30),rgba(46,225,122,.10));color:#E9FFF3;border:1px solid rgba(46,225,122,.45);box-shadow:0 0 10px rgba(46,225,122,.20)}
.b-done:hover{box-shadow:0 0 22px rgba(46,225,122,.50);color:#FFFFFF}
.b-no{background:linear-gradient(180deg,rgba(255,77,94,.22),rgba(120,12,24,.28));color:#FFD7DA;border:1px solid rgba(255,77,94,.4);box-shadow:0 0 8px rgba(255,77,94,.18)}
.b-no:hover{box-shadow:0 0 16px rgba(255,77,94,.35);color:#FFD7DA}
.b-later{color:var(--text)}
.refuse-panel{margin-top:var(--s3)}
.js .refuse-panel{display:none}
.js .refuse-panel.open{display:block}
.refuse-panel label{display:block;font-weight:700;margin-bottom:var(--s2)}
.refuse-panel .btn{margin-top:var(--s3)}
.act-note{color:var(--muted);margin:var(--s3) 0 0}
.err{color:var(--danger);font-weight:700;margin:var(--s2) 0 0}
.act-banner{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;border:2px solid var(--warn);background:rgba(251,191,36,.10);padding:var(--s4);margin-bottom:var(--s5)}
.act-banner p{margin:0;font-weight:700}
.b-plus_tard{color:var(--cyan);background:rgba(34,211,238,.12)}
.b-termine{color:var(--ok);background:rgba(74,222,154,.12)}
.b-refuse{color:var(--danger);background:rgba(255,138,148,.12)}
abbr.term{text-decoration:underline dotted var(--cyan);text-underline-offset:3px;cursor:help;position:relative}
.term-i{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:3px;border:1px solid var(--cyan);border-radius:50%;font:700 .7em/1 var(--mono);color:var(--cyan)}
abbr.term:hover::after,abbr.term:focus::after{content:attr(title);position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:min(280px,80vw);padding:var(--s2) var(--s3);background:var(--bg2);border:1px solid var(--cyan);color:var(--text);font:400 1rem/1.4 var(--font);white-space:normal}

/* ---------- Phase 2b-2 : rubriques légères (Publicité, SEO, Marketing, Conseils) ---------- */
.maj{margin-top:var(--s3);font-size:.95rem;color:var(--muted,#9fb3c8)}
.maj-perime{color:var(--amber,#fbbf24)}
.verdict{margin-bottom:var(--s4)}
.verdict-txt{font-size:1.2rem;margin:var(--s2) 0 0}
.tr-up.mot-evo,.mot-evo{font-size:.95rem;white-space:nowrap}
.mots{list-style:none;padding:0;margin:var(--s3) 0;display:grid;gap:var(--s3)}
.mots li{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.mot-nom{font-weight:700;flex:1 1 8rem}
.mot-pos{font-size:1.35rem}
.points{margin:0;padding-left:1.25rem;display:grid;gap:var(--s3);font-size:1.1rem}
.more-box{margin-top:var(--s5)}
.more-body{display:grid;gap:var(--s4);padding-top:var(--s3)}

/* services en pause (bandeau, avertissement en direct, carte) : style final dans la section « FINITION » en fin de fichier */

/* =====================================================================
   LOOK ADMIN (demande de Rudy, 29/10) : mêmes effets que le portail admin — lueurs néon, scan-line, cartes à lueur,
   badges pulsants, titres lumineux, champs lumineux. Reprend admin.css ; les règles d'accessibilité restent
   (contraste, focus visible, cibles de 48 px, prefers-reduced-motion).
   ===================================================================== */
body{background:linear-gradient(180deg,#0a1320 0%,#070b12 42%),repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,rgba(7,11,18,0) 1px 4px),#070b12;overflow-x:hidden}
body::before{background:radial-gradient(900px 560px at 82% 6%,rgba(34,211,238,.08),transparent 65%),
  radial-gradient(720px 540px at 6% 90%,rgba(124,58,237,.07),transparent 65%),
  radial-gradient(620px 480px at 58% 108%,rgba(46,225,122,.05),transparent 70%);background-size:auto}
body::after{content:"";position:fixed;left:0;right:0;top:0;height:38vh;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(34,211,238,.05) 50%,transparent 100%);animation:scanmove 9s linear infinite;opacity:.6}
@keyframes scanmove{0%{transform:translateY(-40vh)}100%{transform:translateY(120vh)}}
a:hover{text-shadow:0 0 8px var(--cyan)}
a.btn:hover{text-shadow:none}
.topbar{border-bottom:1px solid rgba(34,211,238,.35);position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),transparent)}
.brand-name{text-shadow:0 0 12px rgba(34,211,238,.35)}
.view-title,.dash-panel h2,.view h2,h1,h2{text-shadow:0 0 10px rgba(34,211,238,.22)}
.view-title::after{box-shadow:0 0 10px rgba(34,211,238,.6)}
/* cartes : lueur, soulèvement au survol, coin lumineux */
.card{clip-path:none;background:#0c1622;border:1px solid rgba(34,211,238,.18);border-radius:14px;box-shadow:0 0 18px rgba(34,211,238,.07);overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:cardin .4s ease both}
.card::before{display:none}
.card::after{left:9px;top:9px;right:9px;bottom:9px;width:auto;height:auto;background:none;border-top:1px solid rgba(34,211,238,.25);border-right:1px solid rgba(34,211,238,.25);
  border-top-right-radius:10px;opacity:0;transition:opacity .2s;pointer-events:none}
.card:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.42);box-shadow:0 0 30px rgba(34,211,238,.2)}
.card:hover::after{opacity:1}
@keyframes cardin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.nav-body{border:1px solid rgba(34,211,238,.18);border-radius:14px;background:#0c1622;box-shadow:0 0 18px rgba(34,211,238,.07)}
.nav a[aria-current="page"]{box-shadow:inset 0 0 14px rgba(34,211,238,.18)}
.lex-box{border:1px solid rgba(34,211,238,.18);border-radius:14px;background:#0c1622}
/* badges : pastilles lumineuses qui pulsent doucement */
.badge{border-radius:999px;padding:3px 11px;font-weight:600;font-size:.8125rem;border:1px solid rgba(91,107,133,.3);color:#aebdd6;background:rgba(91,107,133,.18)}
.b-nouveau,.b-plus_tard{color:#a5f3ff;background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.35);box-shadow:0 0 10px rgba(34,211,238,.15);animation:pulseCyan 2.8s ease-in-out infinite}
.b-a_faire,.b-en_test{color:#ffd77a;background:rgba(253,181,21,.13);border-color:rgba(253,181,21,.35);box-shadow:0 0 10px rgba(253,181,21,.15);animation:pulseAmber 2.8s ease-in-out infinite}
.b-fait,.b-termine{color:#b8fbd6;background:rgba(46,225,122,.12);border-color:rgba(46,225,122,.35);box-shadow:0 0 10px rgba(46,225,122,.12);animation:pulseGreen 3.2s ease-in-out infinite}
.b-rouge,.b-refuse{color:#ff8b92;background:rgba(235,59,70,.14);border-color:rgba(235,59,70,.4);box-shadow:0 0 10px rgba(235,59,70,.15);animation:pulseRed 2.2s ease-in-out infinite}
.b-archive,.b-connue{color:#aebdd6;background:rgba(91,107,133,.18);border-color:rgba(91,107,133,.3);animation:none;box-shadow:none}
@keyframes pulseCyan{0%,100%{box-shadow:0 0 8px rgba(34,211,238,.12)}50%{box-shadow:0 0 16px rgba(34,211,238,.42)}}
@keyframes pulseAmber{0%,100%{box-shadow:0 0 8px rgba(253,181,21,.12)}50%{box-shadow:0 0 15px rgba(253,181,21,.42)}}
@keyframes pulseGreen{0%,100%{box-shadow:0 0 8px rgba(46,225,122,.1)}50%{box-shadow:0 0 15px rgba(46,225,122,.38)}}
@keyframes pulseRed{0%,100%{box-shadow:0 0 8px rgba(235,59,70,.12)}50%{box-shadow:0 0 15px rgba(235,59,70,.42)}}
@keyframes pulseDanger{0%,100%{box-shadow:0 0 10px rgba(255,77,94,.12)}50%{box-shadow:0 0 18px rgba(255,77,94,.34)}}
/* alertes et messages */
.alert{border:1px solid rgba(255,77,94,.4);border-radius:8px;background:linear-gradient(180deg,#3a0a14,#2a0710);color:#ffd7da;box-shadow:0 0 12px rgba(255,77,94,.16);animation:pulseDanger 3s ease-in-out infinite}
.ok{border:1px solid rgba(46,225,122,.4);border-radius:8px;background:linear-gradient(180deg,#12331d,#0e2a18);color:#b8fbd6;box-shadow:0 0 12px rgba(46,225,122,.16);animation:pulseGreen 3.6s ease-in-out infinite}
.act-banner{border:1px solid rgba(253,181,21,.4);border-radius:12px;box-shadow:0 0 14px rgba(253,181,21,.14)}
.enclair,.advice,.clair{border-radius:0 10px 10px 0;box-shadow:0 0 14px rgba(34,211,238,.08)}
.pill-count{box-shadow:0 0 10px rgba(253,181,21,.45)}
/* champs : fond sombre, lueur cyan au focus */
input[type=text],input[type=password],input[type=email],input[type=date],textarea,select{background:#0a111c;border:1px solid rgba(34,211,238,.25);border-radius:8px;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:#22d3ee;box-shadow:0 0 0 1px #22d3ee,0 0 12px rgba(34,211,238,.3)}
.opt{border:1px solid rgba(34,211,238,.25);border-radius:8px;background:#0a111c;transition:border-color .15s,box-shadow .15s}
.opt:has(input:checked){border-color:#22d3ee;box-shadow:0 0 12px rgba(34,211,238,.25)}
th{background:rgba(34,211,238,.05);border-bottom:1px solid rgba(34,211,238,.3)}
code{border:1px solid rgba(34,211,238,.2);color:#a5f3ff;background:#0a111c}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card{animation:none}
}

/* =====================================================================
   FINITION (RYL-179) — alignements bureau + mobile 360 px, éléments « services en pause », accessibilité.
   Apparence seulement : aucune classe existante n'est renommée.
   Échelle d'espacement : 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
   ===================================================================== */

/* --- 1. Mise en page : le menu reste en haut à gauche, le contenu à droite, rien ne déborde --- */
.layout>main{min-width:0}
.card,.svc-banner,.act-banner{overflow-wrap:anywhere}
@media(min-width:900px){
  .layout{grid-template-columns:272px minmax(0,1fr);grid-template-areas:"nav main";align-items:start}
  .layout>.nav{grid-area:nav;grid-row:1;align-self:start;z-index:2}
  .layout>main{grid-area:main;grid-row:1}
}
.nav-body{overflow:hidden}
.nav a:focus-visible{outline-offset:-3px}
.nav a{transition:background .15s,box-shadow .15s}
@media(max-width:480px){
  .topbar .btn{width:100%}
  .brand-logo img{max-width:112px}
}

/* titres de section posés directement dans la page (Mes questions, Mes actions) */
main>h2{font-size:1.25rem;line-height:1.25;font-weight:700;color:var(--text);overflow-wrap:anywhere}

/* --- 2. Boutons : texte qui passe à la ligne sans casser la hauteur de 48 px --- */
.btn{text-align:center;white-space:normal;padding-top:var(--s2);padding-bottom:var(--s2)}
.btn:focus-visible,.pill:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
/* « Plus tard » : un choix à part entière, lisible à côté de « Terminée » (vert) et « Je ne ferai pas » (rouge) */
.b-later{background:linear-gradient(180deg,rgba(34,211,238,.20),rgba(34,211,238,.07));border-color:rgba(34,211,238,.45);box-shadow:0 0 10px rgba(34,211,238,.16);color:#EAFBFF}
.b-later:hover{box-shadow:0 0 22px rgba(34,211,238,.45);color:#FFFFFF}
.pill{min-height:48px;transition:background .15s,box-shadow .15s,transform .08s}
.pill:active{transform:scale(.97)}
.pill.on{box-shadow:0 0 14px rgba(34,211,238,.45)}

/* --- 3. « Mes actions » : cartes, formulaires, bandeaux --- */
.act>form[id^="later-"]{margin-top:0}
.act-head{gap:var(--s2) var(--s3)}
.act-details{overflow-wrap:anywhere}
.act-btns .btn{width:100%}
.act-banner{gap:var(--s3) var(--s4)}
.act-banner .btn{flex:none}
@media(max-width:480px){.act-banner .btn{width:100%}}
.pills{margin:var(--s4) 0 var(--s5)}
.opt{overflow-wrap:anywhere}
textarea{display:block;resize:vertical}

/* --- 4. « Mes questions » : un seul bloc vertical régulier --- */
.q-form{display:grid;gap:var(--s3)}
.q-form>*{margin:0}
.q-form .act-btns{margin-top:var(--s2)}
.q-form .q-hint{margin-top:calc(var(--s1) * -1)}

/* --- 5. Services en pause : bandeau (.svc-banner) --- */
.svc-banner{position:relative;display:grid;gap:var(--s2);margin:0 0 var(--s5);padding:var(--s4) var(--s5);
  background:linear-gradient(180deg,rgba(253,181,21,.13),rgba(253,181,21,.05));
  border:1px solid rgba(253,181,21,.4);border-left:6px solid var(--warn);border-radius:12px;
  box-shadow:0 0 14px rgba(253,181,21,.14);animation:pulseAmber 3.6s ease-in-out infinite}
.svc-banner>*{margin:0}
.svc-banner-t{display:flex;align-items:center;gap:var(--s2);font:700 .875rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#FFD77A;text-shadow:0 0 8px rgba(253,181,21,.45)}
.svc-banner ul{list-style:none;padding:0;display:grid;gap:var(--s1)}
.svc-banner li{display:flex;align-items:baseline;gap:var(--s2);font-weight:700;color:var(--text)}
.svc-banner li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn);transform:translateY(-1px)}
.svc-banner-s{color:var(--muted);max-width:65ch}
@media(max-width:480px){.svc-banner{padding:var(--s3) var(--s4)}}

/* --- 6. Avertissement en direct sous le champ de « Mes questions » (.svc-warn-live) --- */
.svc-warn-live{display:flex;align-items:flex-start;gap:var(--s3);margin:0;padding:var(--s3) var(--s4);
  background:linear-gradient(180deg,rgba(253,181,21,.16),rgba(253,181,21,.07));
  border:1px solid rgba(253,181,21,.5);border-left:6px solid var(--warn);border-radius:8px;
  color:var(--text);font-weight:700;line-height:1.45;box-shadow:0 0 12px rgba(253,181,21,.18);animation:pulseAmber 3.6s ease-in-out infinite}
.svc-warn-live::before{content:"⚠";content:"⚠" / "";flex:none;color:var(--warn);font-size:1.25rem;line-height:1.3}

/* --- 7. Carte « Service en pause » (.svc-pause) et agent en pause --- */
.card.svc-pause,.card.is-paused{border:1px dashed rgba(253,181,21,.45);background:linear-gradient(180deg,rgba(253,181,21,.06),#0c1622 60%);box-shadow:0 0 14px rgba(253,181,21,.10)}
.card.svc-pause:hover,.card.is-paused:hover{border-color:rgba(253,181,21,.7);box-shadow:0 0 30px rgba(253,181,21,.22)}
.card.svc-pause::after,.card.is-paused::after{border-top-color:rgba(253,181,21,.35);border-right-color:rgba(253,181,21,.35)}
.svc-pause .badge,.is-paused .badge{color:#FFD77A;background:rgba(253,181,21,.13);border:1px solid rgba(253,181,21,.4);box-shadow:0 0 10px rgba(253,181,21,.15);animation:pulseAmber 3.6s ease-in-out infinite}
.meta-pause{display:flex;align-items:baseline;gap:var(--s2);color:#FFD77A}
.action-top{gap:var(--s2) var(--s3)}

/* --- 8. Grilles : jamais plus larges que l'écran (360 px compris) --- */
.grid2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
input[type=date],input[type=number]{width:100%;min-height:48px;padding:var(--s3);color:var(--text);font:400 1rem/1.5 var(--font);color-scheme:dark}
input[type=date]{background:#0a111c;border:1px solid rgba(34,211,238,.25);border-radius:8px}

/* --- 9. Mouvement coupé si l'appareil le demande (y compris la scan-line) --- */
@media(prefers-reduced-motion:reduce){
  body::after{display:none}
  .svc-banner,.svc-warn-live,.svc-pause .badge,.is-paused .badge{animation:none}
}