/* =====================================================================
   Passerelle CNRC — feuille de style
   Palette tirée des deux logos : vert et or de la CACI (façade de la
   Chambre), rouge du CNRC. Motif signature : l'arcade de la façade.
   ===================================================================== */

@font-face{
  font-family:"Lora";
  src:url("../fonts/lora-variable.woff") format("woff");
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  /* marque */
  --forest:#0F2E24; --forest-2:#17402F; --emerald:#0E6B3A; --emerald-2:#0B5A31;
  --mint:#7FD3A6; --gold:#D9A21B; --gold-2:#F2C14E; --crimson:#B3202E; --crimson-2:#8F1A25;
  /* surfaces */
  --paper:#F3F5F1; --card:#FFFFFF; --wash:#EEF3EF; --wash-2:#F7F9F6;
  --ink:#17231E; --muted:#5A6A62; --faint:#8A9A91; --line:#DCE3DD; --line-2:#E9EEEA;
  /* sémantique (noms repris par render.js et l'ancienne console) */
  --pass:#0E6B3A; --fail:#B3202E; --warn:#8A5A00; --skip:#8A9A91;
  --accent:var(--emerald); --rule:var(--line);
  --shade:rgba(8,24,18,.55); --skel:#E3EAE5;
  /* typographie */
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --arab:"Segoe UI",Tahoma,"Arial Unicode MS",sans-serif;
  /* formes et mouvement */
  --r-lg:20px; --r:14px; --r-sm:10px; --r-xs:6px;
  --pop:0 18px 50px rgba(8,24,18,.22),0 2px 8px rgba(8,24,18,.10);
  --ease:cubic-bezier(.2,.8,.2,1);
  --side-w:280px; --top-h:64px; --bnav-h:64px;
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--emerald);text-underline-offset:2px}
a:hover{color:var(--emerald-2)}
h1,h2,h3{color:var(--ink);line-height:1.25}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
label{display:block}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
::selection{background:rgba(217,162,27,.3)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--card);color:var(--ink);
  padding:8px 14px;border-radius:var(--r-sm);box-shadow:var(--pop)}
.skip:focus{left:12px}
[hidden]{display:none !important}

.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.muted{color:var(--muted)} .small{font-size:12.5px} .r{text-align:right}
.mono,code,.code{font-family:var(--mono)} .nowrap{white-space:nowrap}
.c2{color:var(--pass)} .c4{color:var(--warn)} .c5,.cE{color:var(--fail)}
code{font-size:.86em;background:var(--wash);border:1px solid var(--line-2);padding:1px 6px;border-radius:var(--r-xs)}

/* =====================================================================
   BARRE DE CHARGEMENT (navigation + appels au CNRC)
   ===================================================================== */
#bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;overflow:visible;
  opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,var(--emerald) 0%,#2FA36B 45%,var(--gold) 85%,var(--gold-2) 100%);
  transition:transform .32s var(--ease),opacity .25s ease}
#bar.on{opacity:1}
#bar.done{opacity:0;transition:transform .22s ease,opacity .45s ease .2s}
#bar::after{content:"";position:absolute;right:0;top:-3px;width:110px;height:9px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,193,78,.95),rgba(242,193,78,0));filter:blur(1px)}
#bar::before{content:"";position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent) 0 0/40% 100% no-repeat;
  animation:sheen 1.1s linear infinite}
@keyframes sheen{from{background-position:-40% 0}to{background-position:140% 0}}

/* =====================================================================
   COQUILLE : barre latérale, en-tête, contenu
   ===================================================================== */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;min-height:100dvh;
  background:linear-gradient(90deg,var(--forest) var(--side-w),transparent var(--side-w))}

/* ---- barre latérale */
.side{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;
  background:var(--forest);color:rgba(255,255,255,.8);padding:18px 14px 16px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.side-top{display:flex;align-items:flex-start;gap:8px}
.brand{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:#fff;flex:1;min-width:0;padding:2px 4px}
.brand:hover{color:#fff}
.brand-plaque{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff;
  border-radius:var(--r);padding:10px 14px;box-shadow:inset 0 -3px 0 var(--gold)}
.brand-plaque img{display:block;height:52px;width:auto}
.brand-sep{width:1px;align-self:stretch;background:var(--line)}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text b{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.005em}
.brand-text small{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:2px}
.side-top .side-close{display:none}

.side-nav{margin-top:22px;display:flex;flex-direction:column;gap:2px;flex:1}
.side-group{margin:16px 12px 6px;font-size:12px;font-weight:600;color:rgba(255,255,255,.5)}
.side-group:first-child{margin-top:0}
.nav-i{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 12px;
  border-radius:var(--r-sm);color:rgba(255,255,255,.8);text-decoration:none;font-weight:550;font-size:14px;
  transition:background .16s ease,color .16s ease}
.nav-i .ico{color:rgba(255,255,255,.55);transition:color .16s ease}
.nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-i:hover .ico{color:rgba(255,255,255,.85)}
.nav-i.on{background:rgba(255,255,255,.1);color:#fff}
.nav-i.on .ico{color:var(--gold-2)}
.nav-i.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--gold)}
.side :focus-visible{outline-color:var(--gold-2)}

.side-foot{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.env{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.05)}
.env b{display:block;font-size:13px;color:#fff;font-weight:600}
.env small{display:block;font-size:12px;color:rgba(255,255,255,.58);font-family:var(--mono);word-break:break-all}
.env-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--mint);box-shadow:0 0 0 4px rgba(127,211,166,.16)}
.env.tunnel .env-dot{background:var(--gold-2);box-shadow:0 0 0 4px rgba(242,193,78,.18)}

.scrim{display:none}

/* ---- colonne principale */
.main-col{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:var(--top-h);display:flex;align-items:center;gap:12px;
  padding:0 28px;background:rgba(243,245,241,.86);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--ink)}
.icon-btn:hover{background:var(--wash)}
.menu-btn{display:none;margin-left:-8px}
.topbar-brand{display:none;align-items:center;gap:8px;text-decoration:none;color:var(--ink);flex:none}
.topbar-brand img{width:32px;height:32px}
.crumb{margin:0;display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;color:var(--muted)}
.crumb .ico{width:16px;height:16px;color:var(--faint)}
.crumb b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.topbar .today{font-size:13.5px;color:var(--muted);white-space:nowrap}

.usermenu{position:relative}
.user-btn{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;min-height:44px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);transition:border-color .16s ease,box-shadow .16s ease}
.user-btn:hover{border-color:#C6D2C9}
.user-btn[aria-expanded="true"]{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(14,107,58,.12)}
.user-btn .ico{width:16px;height:16px;color:var(--muted);transition:transform .2s var(--ease)}
.user-btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--forest);color:var(--gold-2);font-weight:700;font-size:13px;letter-spacing:.02em}
.user-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.user-meta b{font-size:13.5px;font-weight:600;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta small{font-size:12px;color:var(--muted)}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--pop);
  transform-origin:top right;animation:menuIn .16s var(--ease) both}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 10px;
  border:0;border-radius:var(--r-sm);background:none;color:var(--ink);text-decoration:none;font-size:14px;text-align:left}
.menu a:hover,.menu button:hover{background:var(--wash)}
.menu .ico{width:18px;height:18px;color:var(--muted)}
.menu form{margin:0;border-top:1px solid var(--line-2);margin-top:4px;padding-top:4px}
.menu form button{color:var(--crimson)}
.menu form .ico{color:var(--crimson)}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}

.main{width:100%;max-width:1280px;margin:0 auto;padding:28px 32px 56px}
.main:focus{outline:none}
.bnav{display:none}

/* =====================================================================
   EN-TÊTE DE PAGE, BOUTONS, ÉTIQUETTES
   ===================================================================== */
.head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px}
.head h2{margin:0;font-family:var(--serif);font-weight:600;font-size:28px;letter-spacing:-.01em}
.head .actions,.head > .btn,.head > .pill,.head > .muted{margin-left:auto}
.lead{margin:-8px 0 20px;color:var(--muted);max-width:72ch}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actions form{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;
  border:1px solid var(--emerald);border-radius:var(--r-sm);background:var(--emerald);color:#fff;
  font-weight:600;font-size:14.5px;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease;touch-action:manipulation}
.btn:hover{background:var(--emerald-2);border-color:var(--emerald-2);color:#fff}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default}
.btn .ico{width:18px;height:18px}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--wash);border-color:#C6D2C9;color:var(--ink)}
.btn.sm{min-height:34px;padding:6px 13px;font-size:13.5px}
.btn.danger{background:var(--crimson);border-color:var(--crimson)}
.btn.danger:hover{background:var(--crimson-2)}
.btn.ghost.danger{background:var(--card);color:var(--crimson);border-color:#ECCFD2}
.btn.ghost.danger:hover{background:#FBEFF0;border-color:var(--crimson)}
.is-off{opacity:.45;pointer-events:none}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1.5;
  padding:2px 9px;border-radius:999px;background:var(--wash);color:var(--muted);border:1px solid var(--line-2);white-space:nowrap}
.tag.ok{background:#E6F2EA;color:var(--pass);border-color:#C9E3D2}
.tag.warn{background:#FBF3DD;color:var(--warn);border-color:#EEDDB0}
.tag.bad{background:#FBEFF0;color:var(--fail);border-color:#EFCDD1}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 11px;
  border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);white-space:nowrap}
.pill.on{border-color:#C9E3D2;background:#E6F2EA;color:var(--pass)}
.pill.off{border-color:#EFCDD1;background:#FBEFF0;color:var(--fail)}
.pill.warn{border-color:#EEDDB0;background:#FBF3DD;color:var(--warn)}
.code{display:inline-block;font-size:12.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--wash)}
.code.c2{background:#E6F2EA} .code.c4{background:#FBF3DD} .code.c5{background:#FBEFF0}

/* ---- bandeaux d'état (messages flash et résultats CNRC) */
.status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;padding:12px 16px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid;border-radius:var(--r-sm);font-weight:600}
.status .ico{width:18px;height:18px}
.status.pass{border-left-color:var(--pass);color:var(--pass)}
.status.fail{border-left-color:var(--fail);color:var(--fail)}
.status.warn{border-left-color:var(--gold);color:var(--warn)}
.status.load{border-left-color:var(--emerald);color:var(--emerald)}
.status .ms{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400}
.flash{display:grid;gap:8px;margin:0 0 20px}
.flash .status{margin:0;animation:fadeIn .25s ease both}
.flash .status span{color:var(--ink);font-weight:500}

/* =====================================================================
   PANNEAUX, GRILLES, TABLEAUX
   ===================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:20px}
.card-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px}
.card-h h3{margin:0;font-size:15.5px;font-weight:650}
.card-h > a,.card-h .legend,.card-h > .muted{margin-left:auto;font-size:13px}
.card-h > a{text-decoration:none;font-weight:600}
.card-h > a:hover{text-decoration:underline}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:0 20px}

.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px 24px;margin:0}
.dl > div{min-width:0}
.dl dt{font-size:12.5px;color:var(--muted)}
.dl dd{margin:3px 0 0;font-size:14.5px;overflow-wrap:anywhere}

.tw{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.table{border-collapse:collapse;width:100%;font-size:14px}
.table th{text-align:left;font-weight:600;font-size:12.5px;color:var(--muted);background:var(--wash-2);
  padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .12s ease}
.table tbody tr:hover{background:var(--wash-2)}
.table td.r,.table th.r{text-align:right;font-variant-numeric:tabular-nums}
.table td.mono{white-space:nowrap}
.table a{font-weight:600;text-decoration:none}
.table a:hover{text-decoration:underline}
.card > .table{margin:0 -20px -18px;width:calc(100% + 40px)}
.card > .table th:first-child,.card > .table td:first-child{padding-left:20px}
.card > .table th:last-child,.card > .table td:last-child{padding-right:20px}

.empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--muted);padding:34px 20px;
  background:var(--card);border:1px dashed #C9D4CC;border-radius:var(--r);margin-top:8px}
.empty .ico{width:28px;height:28px;color:var(--faint)}
.hlp{font-size:13px;color:var(--muted);margin:10px 0 0;max-width:80ch}

/* chiffres en ligne (journal, fiche d'application) */
.stat{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;font-size:13px;color:var(--muted)}
.stat > span{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--line)}
.stat b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.stat .c2 b{color:var(--pass)} .stat .c4 b{color:var(--warn)} .stat .c5 b{color:var(--fail)}

/* clé API affichée une seule fois */
.key{border:1px solid #C9E3D2;border-left:4px solid var(--emerald);background:#F1F8F3;border-radius:var(--r);
  padding:16px 18px;margin-bottom:20px;animation:fadeIn .3s ease both}
.key code{display:block;font-size:14px;background:#fff;border:1px solid #C9E3D2;border-radius:var(--r-sm);
  padding:12px 14px;margin:10px 0 12px;word-break:break-all;user-select:all}

.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}

/* =====================================================================
   FORMULAIRES
   ===================================================================== */
.form{display:grid;gap:18px;max-width:820px}
.card .form{max-width:none}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.field{display:block;min-width:0}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
input,select,textarea{width:100%;min-height:42px;padding:9px 12px;border:1px solid #CFD9D2;border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font-size:14.5px;transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:84px;resize:vertical;font-family:var(--mono);font-size:13.5px;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:#B8C6BC}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(14,107,58,.14)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--emerald)}
#f-rc,#f-raw{font-family:var(--mono);letter-spacing:.02em}
.hint{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.err{color:var(--fail);font-size:13px;font-weight:500;margin:6px 0 0}
.bad input,.bad select,.bad textarea{border-color:var(--fail)}
.bad input:focus,.bad select:focus,.bad textarea:focus{box-shadow:0 0 0 3px rgba(179,32,46,.14)}
.check{display:flex;align-items:center;gap:10px;min-height:32px;font-size:14.5px;cursor:pointer}
.check code{margin-left:auto}
.checks{display:grid;gap:6px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 14px;margin:0;min-width:0}
fieldset.bad{border-color:var(--fail)}
legend{font-size:13px;font-weight:600;padding:0 6px}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.form > .bar{margin-top:0}

/* filtres du journal */
.filters-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px}
.filters-box > summary{display:flex;align-items:center;gap:10px;padding:12px 18px;list-style:none;cursor:pointer;
  font-weight:600;font-size:14px;color:var(--ink)}
.filters-box > summary::-webkit-details-marker{display:none}
.filters-box > summary .ico{color:var(--muted);transition:transform .2s var(--ease)}
.filters-box > summary .ico:last-child{margin-left:auto}
.filters-box[open] > summary .ico:last-child{transform:rotate(180deg)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px;align-items:end;
  padding:4px 18px 18px;border-top:1px solid var(--line-2)}
.filters .field{padding-top:12px}
.filters .actions{grid-column:1/-1}

/* =====================================================================
   TABLEAU DE BORD
   ===================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:24px 36px;align-items:center;margin-bottom:20px;padding:30px 34px 124px;border-radius:var(--r-lg);color:#fff;
  background:radial-gradient(90% 120% at 0% 0%,#1D4E3C 0%,rgba(29,78,60,0) 60%),var(--forest)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1.5px;z-index:-1;
  background:linear-gradient(90deg,rgba(217,162,27,0),rgba(217,162,27,.55) 45%,var(--gold))}
.hero-hello{margin:0 0 8px;font-size:15px;color:rgba(255,255,255,.74)}
.hero-figure{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.hero-num{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6vw,60px);line-height:1;letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums;color:#fff}
.hero-unit{font-size:18px;color:rgba(255,255,255,.84)}
.hero-delta{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:14px;color:rgba(255,255,255,.74)}
.hero-delta .ico{width:18px;height:18px;color:var(--gold-2)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.hero-chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;font-size:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.84)}
.hero-chips b{color:#fff;font-variant-numeric:tabular-nums}
.hero-chips .ico{width:17px;height:17px;color:rgba(255,255,255,.7)}
.hero-chips .ok .ico{color:var(--mint)} .hero-chips .warn .ico{color:var(--gold-2)} .hero-chips .bad .ico{color:#FF9EA5}

.ring{position:relative;margin:0;width:148px;height:148px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11}
.ring .track{stroke:rgba(255,255,255,.12)}
.ring .val{stroke:var(--mint);stroke-linecap:round;animation:ring 1.3s var(--ease) .35s both}
.ring figcaption{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.ring figcaption b{font-family:var(--serif);font-size:30px;font-weight:600;color:#fff}
.ring figcaption span{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:4px}
@keyframes ring{from{stroke-dashoffset:var(--c)}}

.arcade{position:absolute;right:0;bottom:10px;width:100%;height:118px;z-index:-1;pointer-events:none;overflow:visible}
.arcade path{fill:none;stroke:var(--gold);vector-effect:non-scaling-stroke}
.arcade-arch{stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 1.1s var(--ease) forwards;animation-delay:calc(.2s + var(--i) * 85ms)}
.arcade-ring{stroke-width:1.5;stroke-dasharray:1.5 5.5;stroke-linecap:round;opacity:0;
  animation:fadeIn .6s ease forwards;animation-delay:calc(.9s + var(--i) * 85ms)}
@keyframes draw{to{stroke-dashoffset:0}}

.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.dash > .card{margin:0}
.span-8{grid-column:span 8} .span-6{grid-column:span 6} .span-4{grid-column:span 4} .span-12{grid-column:1/-1}

/* histogramme */
.chart{display:block;width:100%;height:auto;max-height:260px;overflow:visible}
.chart .grid{stroke:var(--line-2);stroke-width:1}
.chart .hit{fill:transparent}
.chart .cbar{transform-box:fill-box;transform-origin:50% 100%;animation:grow .75s var(--ease) both;
  animation-delay:calc(.15s + var(--i) * 32ms)}
.chart .b-ok{fill:#B9D4C4}
.chart .b-ok.is-today{fill:var(--emerald)}
.chart .b-ko{fill:var(--crimson)}
.chart g:hover .b-ok{fill:#8DBBA2}
.chart g:hover .b-ok.is-today{fill:var(--emerald-2)}
.chart text{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart text.v{fill:var(--ink);font-weight:600}
@keyframes grow{from{transform:scaleY(0)}}
.legend{display:inline-flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:12.5px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.sw.ok{background:#B9D4C4} .sw.is-today{background:var(--emerald)} .sw.ko{background:var(--crimson)}

/* applications les plus actives */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rank li{display:grid;gap:7px}
.rank-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.rank-row a,.rank-row strong{font-weight:600;color:var(--ink);text-decoration:none;min-width:0;overflow-wrap:anywhere}
.rank-row a:hover{color:var(--emerald);text-decoration:underline}
.rank-row span{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rank-row span b{color:var(--ink)}
.meter{height:7px;border-radius:99px;background:var(--wash);overflow:hidden}
.meter i{display:block;height:100%;width:calc(var(--w) * 100%);border-radius:inherit;
  background:linear-gradient(90deg,var(--emerald),#2FA36B);transform-origin:0 50%;animation:growX .8s var(--ease) .3s both}
.meter.gold i{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.meter.low i{background:linear-gradient(90deg,var(--crimson),#D64A56)}
@keyframes growX{from{transform:scaleX(0)}}

/* dernières erreurs */
.feed{list-style:none;margin:0;padding:0;display:grid}
.feed li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.feed li:first-child{padding-top:0}
.feed li:last-child{border-bottom:0;padding-bottom:0}
.feed-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:#FBEFF0;color:var(--fail)}
.feed-ico.warn{background:#FBF3DD;color:var(--warn)}
.feed-ico .ico{width:18px;height:18px}
.feed-body{min-width:0;flex:1}
.feed-body p{margin:0;overflow-wrap:anywhere}
.feed-body .feed-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;color:var(--muted);margin-top:4px}
.feed-body .mono{display:inline-block;max-width:100%}
.feed-body a{text-decoration:none;color:inherit}
.feed-body a:hover{color:var(--emerald)}

/* liaison CNRC */
.link-state{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.link-state .ico{width:22px;height:22px}
.link-badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:#E6F2EA;color:var(--pass)}
.link-badge.off{background:var(--wash);color:var(--muted)}
.link-state b{display:block;font-size:15px}
.link-state small{display:block;color:var(--muted);font-size:13px}
.link-card .meter{margin:0 0 16px}
.link-card .dl{grid-template-columns:repeat(2,minmax(0,1fr))}
.link-card .dl .wide{grid-column:1/-1}

/* =====================================================================
   CONSOLE DE RECHERCHE (ids et classes attendus par console.js / render.js)
   ===================================================================== */
.tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;max-width:100%;overflow-x:auto;
  background:var(--wash);border:1px solid var(--line);border-radius:12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:38px;padding:8px 16px;border:0;border-radius:9px;background:transparent;color:var(--muted);
  font-size:14px;font-weight:600;white-space:nowrap;transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--card);color:var(--emerald);box-shadow:0 1px 3px rgba(8,24,18,.12)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.pane{display:none}
.pane.on{display:block;animation:fadeIn .2s ease both}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px}
#result:empty{display:none}
#result{margin-top:4px}

.urlbox{margin-top:8px;padding:8px 14px;font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-all;
  background:var(--wash-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.out{margin-top:8px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
pre{margin:9px 0 0;padding:12px 14px;max-height:380px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;background:var(--wash-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.out pre{margin:0}
summary{cursor:pointer;font-size:13px;color:var(--muted)}

/* pagination des résultats */
.pag{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:8px;padding:10px 14px;font-size:13.5px;
  color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.pag b{color:var(--ink)}
.pag-i{font-size:12.5px}
.pag-b{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pag-b .btn{min-height:34px;padding:6px 12px;font-size:13px}
.pag.bas{margin-top:16px}
.pg{font-variant-numeric:tabular-nums;font-size:13px}
.btn.ghost.pg:hover:not(:disabled){background:#E6F2EA;border-color:var(--emerald);color:var(--emerald)}
.btn.ghost.pg.num{min-width:36px;padding:6px 8px}
.pg.cur{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:34px;padding:6px 9px;
  background:var(--forest);color:#fff;border-radius:var(--r-sm);font-weight:700}
.pg.gap{padding:6px 2px;color:var(--faint)}
.pag-f{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pag-lb{display:flex;align-items:center;gap:6px;width:auto;font-size:12.5px;color:var(--muted)}
.pag-in{width:auto;min-height:34px;padding:5px 8px;font-size:13px}
input.pag-in.num{width:72px}

/* fiches */
.recs{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.rec{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--emerald);border-radius:var(--r);
  overflow:hidden;animation:rise .34s var(--ease) both}
.rec-h{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;padding:16px 18px;
  background:linear-gradient(180deg,var(--wash-2),#fff);border-bottom:1px solid var(--line)}
.rec-t{flex:1;min-width:220px}
.rec-a{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.rec-t h2{margin:4px 0 0;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.3;color:var(--ink)}
.kind{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid}
.kind.pp{color:var(--pass);border-color:#C9E3D2;background:#E6F2EA}
.kind.pm{color:var(--warn);border-color:#EEDDB0;background:#FBF3DD}
.rec-rc{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.04em;background:var(--forest);color:#fff;
  padding:5px 12px;border-radius:var(--r-sm);white-space:nowrap}
.sect{padding:14px 18px;border-bottom:1px solid var(--line-2)}
.sect:last-of-type{border-bottom:0}
.sect h3{margin:0 0 10px;font-size:13px;font-weight:650;color:var(--muted)}
.cnt{background:var(--wash);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:11.5px;margin-left:6px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px 22px}
.fields.tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:6px 16px}
.f{min-width:0}
.fl{font-size:12px;color:var(--muted)}
.fv{font-size:14.5px;word-break:break-word;line-height:1.45}
.date{font-variant-numeric:tabular-nums}
.nul{color:#AAB6AF}
.ar{font-family:var(--arab);direction:rtl;unicode-bidi:isolate;font-size:15.5px}
.etab{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;background:var(--wash-2)}
.etab:last-child{margin-bottom:0}
.etab.radie{background:#FDF5F5;border-color:#EFCDD1}
.etab-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14.5px}
.etab-ar{padding:0 14px;margin-top:8px}
.etab .fields{padding:12px 14px}
.etab .sect{padding:0 14px 12px;border:0}
.idx{width:22px;height:22px;border-radius:50%;background:var(--forest);color:#fff;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none}
.acts{display:flex;flex-direction:column;gap:7px}
.act{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.act-code{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none;padding-top:1px}
.act-lib{flex:1;font-size:14px;line-height:1.4}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.mini{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:#fff}
.mini-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
.mini-ar{margin-bottom:7px}
.raw{padding:12px 18px;background:var(--wash-2);border-top:1px solid var(--line)}

/* bouton « Détails » d'une ligne */
.btn.det{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 13px;font-size:13px;white-space:nowrap;
  background:var(--card);color:var(--emerald);border:1px solid #C9E3D2}
.btn.det:hover{background:#E6F2EA;border-color:var(--emerald);color:var(--emerald)}
.btn.det[disabled]{opacity:.5}
.det-i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn.det .spin{border-color:rgba(14,107,58,.25);border-top-color:var(--emerald);margin-right:0}

/* squelettes et indicateurs */
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:sp .7s linear infinite;vertical-align:-2px;margin-right:8px}
.btn.ghost .spin,.status.load .spin,.modal-note .spin{border-color:rgba(14,107,58,.2);border-top-color:var(--emerald)}
@keyframes sp{to{transform:rotate(360deg)}}
.sk{display:inline-block;position:relative;overflow:hidden;background:var(--skel);border-radius:var(--r-xs);height:11px;vertical-align:middle}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:shim 1.3s infinite}
.sk-l{height:9px;margin-bottom:6px;display:block}
.sk-v{height:14px;display:block}
.sk-k{width:104px;height:15px}
.sk-t{width:min(62%,290px);height:19px;margin-top:8px;display:block}
.sk-rc{width:104px;height:28px;border-radius:var(--r-sm)}
.sk-rec{border-left-color:var(--line);animation:rise .3s ease both}
.sk-row{height:15px;margin:0}
.fade{animation:fadeIn .25s ease both}

/* fenêtre « fiche complète » */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:28px 18px}
.modal-bg{position:absolute;inset:0;background:var(--shade);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:fadeIn .22s ease both}
.modal-box{position:relative;display:flex;flex-direction:column;width:min(1020px,100%);max-height:90vh;overflow:hidden;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--pop);animation:pop .28s cubic-bezier(.2,.85,.3,1.05) both}
.modal.out .modal-bg{animation:fadeOut .17s ease both}
.modal.out .modal-box{animation:popOut .17s ease both}
.modal-h{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--wash-2),#fff)}
.modal-h .eyebrow{font-size:12.5px;color:var(--muted)}
.modal-h h2{margin:2px 0 0;font-family:var(--serif);font-size:20px;font-weight:600}
.modal-hd{flex:1;min-width:0}
.modal-meta{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.x{width:40px;height:40px;flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);
  color:var(--muted);font-size:16px;line-height:1;transition:background .15s ease,color .15s ease}
.x:hover{background:var(--wash);color:var(--ink)}
.modal-b{flex:1;overflow:auto;padding:18px 20px;background:var(--paper)}
.modal-b .recs{margin-top:0}
.modal-b .status{margin-top:0}
.modal-f{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line);background:var(--card)}
.modal-url{flex:1;min-width:160px;font-family:var(--mono);font-size:11.5px;color:var(--muted);word-break:break-all}
.modal-note{display:flex;align-items:center;gap:9px;padding:9px 0 14px;font-size:13.5px;color:var(--muted);animation:pulse 1.4s ease-in-out infinite}
body.locked{overflow:hidden}

/* =====================================================================
   DIAGNOSTIC (chaîne d'étapes)
   ===================================================================== */
.chain{margin:16px 0 0;padding:0;list-style:none}
.step{position:relative;padding:0 0 16px 40px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:10px;top:20px;bottom:-4px;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.step.fail::before,.step.skip::before{background:repeating-linear-gradient(to bottom,var(--skip) 0 4px,transparent 4px 8px)}
.dot{position:absolute;left:3px;top:6px;width:16px;height:16px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 2px currentColor}
.pass .dot{color:var(--pass);background:var(--pass)}
.fail .dot{color:var(--fail);background:var(--fail)}
.warn .dot{color:var(--gold);background:var(--gold)}
.skip .dot{color:var(--skip);background:var(--card)}
.scard{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;background:var(--card)}
.step.fail .scard{border-color:#EFCDD1;background:#FDF7F7}
.srow{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.shint{font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-all}

/* =====================================================================
   DOCUMENTATION
   ===================================================================== */
.doc{max-width:920px}
.doc h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:34px 0 10px}
.doc h3:first-of-type{margin-top:8px}
.doc p,.doc li{max-width:76ch}
.doc .tw{margin:10px 0 14px}
.snip{position:relative;margin:10px 0 16px}
.snip pre{max-height:none;white-space:pre;overflow:auto;padding:16px 96px 16px 18px;margin:0;
  background:#10231C;border-color:#10231C;color:#E4EEE8;border-radius:var(--r)}
.snip .btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.snip .btn:hover{background:rgba(255,255,255,.16);color:#fff}

/* =====================================================================
   CONNEXION ET PAGES D'ERREUR
   ===================================================================== */
.auth{min-height:100vh;min-height:100dvh;background:var(--paper)}
.auth-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.auth-brand{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  gap:22px;padding:56px 56px 190px;color:#fff;
  background:radial-gradient(80% 70% at 10% 0%,#1D4E3C 0%,rgba(29,78,60,0) 60%),var(--forest)}
.auth-brand::after{content:"";position:absolute;left:0;right:0;bottom:24px;height:1.5px;z-index:-1;
  background:linear-gradient(90deg,rgba(217,162,27,0),rgba(217,162,27,.6) 40%,var(--gold))}
.auth-logos{display:flex;align-items:center;gap:18px;animation:rise .6s var(--ease) both}
.auth-seal{width:124px;height:124px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.auth-seal img{width:112px;height:112px}
.auth-plaque{height:124px;padding:10px 16px;border-radius:var(--r);background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.auth-plaque img{height:104px;width:auto}
.auth-brand h1{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,44px);color:#fff;
  letter-spacing:-.01em;animation:rise .6s var(--ease) .08s both}
.auth-brand p{margin:0;max-width:44ch;font-size:16px;line-height:1.6;color:rgba(255,255,255,.78);animation:rise .6s var(--ease) .14s both}
.auth-arcade{height:150px;bottom:24px}
.auth-form{display:grid;place-items:center;padding:40px 24px}
.auth-card{width:min(420px,100%);animation:rise .5s var(--ease) .1s both}
.auth-card h2{margin:0;font-family:var(--serif);font-size:28px;font-weight:600}
.auth-card .sub{margin:6px 0 0;color:var(--muted)}
.auth-card .form{margin-top:24px}
.auth-card .btn{width:100%;min-height:46px;font-size:15px}
.auth-card .status{margin-top:18px}
.auth-card .hlp{margin-top:18px}
.err-code{margin:0 0 6px;font-family:var(--serif);font-size:64px;font-weight:600;line-height:1;color:var(--emerald)}

/* =====================================================================
   ANIMATIONS COMMUNES
   ===================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes popOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

/* =====================================================================
   TABLETTE : la barre latérale devient un tiroir
   ===================================================================== */
@media (max-width:1100px){
  .span-8,.span-6,.span-4{grid-column:1/-1}
}
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr);background:none}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:80;width:min(300px,86vw);height:auto;
    transform:translateX(-104%);visibility:hidden;box-shadow:none;
    transition:transform .26s var(--ease),visibility 0s linear .26s,box-shadow .26s ease}
  .drawer-open .side{transform:none;visibility:visible;box-shadow:var(--pop);
    transition:transform .26s var(--ease),box-shadow .26s ease}
  .side-top .side-close{display:inline-flex;color:rgba(255,255,255,.8);margin:-4px -6px 0 0}
  .side-top .side-close:hover{background:rgba(255,255,255,.08);color:#fff}
  .scrim{display:block;position:fixed;inset:0;z-index:70;background:var(--shade);opacity:0;pointer-events:none;
    transition:opacity .26s ease}
  .drawer-open .scrim{opacity:1;pointer-events:auto}
  .drawer-open body{overflow:hidden}
  .menu-btn{display:inline-flex}
  .topbar{padding:0 20px}
  .main{padding:24px 20px 48px}
  .topbar .today{display:none}
}

/* =====================================================================
   TÉLÉPHONE : barre d'onglets en bas, tableaux en cartes
   ===================================================================== */
@media (max-width:719px){
  body{font-size:15.5px}
  input,select,textarea{font-size:16px}          /* évite le zoom automatique d'iOS */
  .topbar{padding:0 12px;gap:8px}
  .topbar-brand{display:inline-flex}
  .crumb .crumb-root,.crumb > .ico{display:none}
  .crumb b{font-size:15px}
  .user-meta,.user-btn > .ico{display:none}
  .user-btn{padding:4px;border-color:transparent;background:transparent}
  .main{padding:18px 14px calc(var(--bnav-h) + 28px + env(safe-area-inset-bottom))}
  .head h2{font-size:24px}
  .head .actions,.head > .btn{margin-left:0;width:100%}
  .card{padding:16px}
  .card > .table{margin:0 -16px -16px;width:calc(100% + 32px)}

  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:0 6px env(safe-area-inset-bottom);background:rgba(255,255,255,.94);border-top:1px solid var(--line);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
  .bnav-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--bnav-h);
    color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:600;touch-action:manipulation}
  .bnav-i .ico{width:22px;height:22px}
  .bnav-i .pip{display:grid;place-items:center;width:52px;height:30px;border-radius:999px;transition:background .2s ease}
  .bnav-i.on{color:var(--emerald)}
  .bnav-i.on .pip{background:#E1F0E6}

  .hero{grid-template-columns:minmax(0,1fr);padding:22px 18px 100px;gap:18px}
  .ring{width:104px;height:104px;position:absolute;right:14px;top:18px}
  .ring circle{stroke-width:12}
  .ring figcaption b{font-size:21px}
  .ring figcaption span{font-size:11px}
  .hero-hello,.hero-figure,.hero-delta{padding-right:112px}
  .hero-num{font-size:44px}
  .hero-unit{font-size:16px}
  .hero-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
  .hero-chips li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;
    padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.3}
  .hero-chips li .ico{grid-row:span 2}
  .hero-chips b{font-size:15px}
  .arcade{height:84px}
  .chart-scroll{overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .chart-scroll::-webkit-scrollbar{display:none}
  .chart-scroll .chart{min-width:620px;max-height:none}

  /* tableaux empilés en cartes */
  .table.stack thead{display:none}
  .table.stack,.table.stack tbody,.table.stack tr,.table.stack td{display:block;width:100%}
  .table.stack tr{padding:12px 16px;border-bottom:1px solid var(--line-2)}
  .table.stack tbody tr:last-child{border-bottom:0}
  .table.stack td{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 10px;padding:3px 0;border:0;
    text-align:right;white-space:normal;overflow-wrap:anywhere}
  .table.stack td::before{content:attr(data-label);flex:none;margin-right:auto;text-align:left;font-family:var(--sans);
    font-size:12.5px;color:var(--muted);font-weight:500}
  .table.stack td.cell-title{display:block;text-align:left;padding-bottom:6px;font-size:15px}
  .table.stack td.cell-title::before,.table.stack td[colspan]::before{content:none}
  .table.stack td[colspan]{display:block;text-align:left}
  .card > .table.stack{margin:0 -16px -16px;width:calc(100% + 32px)}

  .tabs{display:flex}
  .panel{padding:16px}
  .rec-a{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .pag{gap:10px}
  .pag-b,.pag-f{margin-left:0;width:100%}
  .pag-i{display:none}
  .modal{padding:0;align-items:flex-end}
  .modal-box{width:100%;max-height:94vh;border-radius:var(--r-lg) var(--r-lg) 0 0;animation:sheetUp .3s var(--ease) both}
  .modal.out .modal-box{animation:fadeOut .17s ease both}
  .modal-f{padding-bottom:calc(12px + env(safe-area-inset-bottom))}

  .auth-shell{grid-template-columns:1fr}
  .auth-brand{padding:28px 22px 112px;gap:14px}
  .auth-seal{width:84px;height:84px}
  .auth-seal img{width:76px;height:76px}
  .auth-plaque{height:84px;padding:8px 12px}
  .auth-plaque img{height:68px}
  .auth-brand p{font-size:15px}
  .auth-arcade{height:88px;bottom:18px}
  .auth-brand::after{bottom:18px}
  .auth-form{padding:28px 18px 40px;place-items:start center}
}

@media (pointer:coarse){
  .btn.sm{min-height:40px}
  .check{min-height:40px}
}

/* =====================================================================
   MOUVEMENT RÉDUIT ET IMPRESSION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    animation-delay:0s !important;transition-duration:.01ms !important}
  .arcade-arch{stroke-dashoffset:0}
  .arcade-ring{opacity:1}
  #bar::before,.sk::after{animation:none}
}

@media print{
  .side,.topbar,.bnav,.scrim,#bar,.tabs,.panel,.bar,.pag-b,.raw,.btn.det,.modal-f,.actions{display:none !important}
  .app{display:block}
  body{background:#fff}
  .main{padding:0;max-width:none}
  .hero{color:var(--ink);background:none;border:1px solid var(--line);padding-bottom:30px}
  .hero-num,.hero-unit,.hero-hello,.hero-delta,.hero-chips li,.hero-chips b{color:var(--ink)}
  .arcade,.ring{display:none}
  .card,.rec{break-inside:avoid;animation:none}
  .modal{position:static;padding:0}
  .modal-bg{display:none}
  .modal-box{box-shadow:none;max-height:none;animation:none}
}

/* ---------- Registre : recherche et statistiques ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:4px;min-width:0}
.kpi .k-l{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .k-v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.15}
.kpi .k-s{font-size:12.5px;color:var(--muted)}
.kpi .up{color:var(--pass)} .kpi .down{color:var(--fail)}
.lchart{width:100%;height:auto;display:block;overflow:visible}
.lchart .grid line{stroke:var(--line-2);stroke-width:1}
.lchart text{fill:var(--muted);font-size:11px;font-family:inherit}
.lchart .s0{stroke:var(--emerald);fill:none;stroke-width:2.2}
.lchart .s1{stroke:var(--crimson);fill:none;stroke-width:2.2}
.lchart .s2{stroke:var(--gold);fill:none;stroke-width:2.2}
.lchart .dash{stroke-dasharray:5 4}
.lchart .area{fill:var(--emerald);opacity:.08;stroke:none}
.lchart circle{fill:transparent;stroke:none}
.lchart circle:hover{fill:var(--ink)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot.s0{background:var(--emerald)} .dot.s1{background:var(--crimson)} .dot.s2{background:var(--gold)}
.dot.s3{background:#3E7CB1} .dot.s4{background:#8A63D2} .dot.s5{background:#9AA5A0}
.donut{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.donut svg{flex:none}
.donut-bg{fill:none;stroke:var(--wash);stroke-width:6}
.donut-seg{fill:none;stroke-width:6}
.donut-seg.s0{stroke:var(--emerald)} .donut-seg.s1{stroke:var(--crimson)} .donut-seg.s2{stroke:var(--gold)}
.donut-seg.s3{stroke:#3E7CB1} .donut-seg.s4{stroke:#8A63D2} .donut-seg.s5{stroke:#9AA5A0}
.donut ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.donut li{display:flex;align-items:center;gap:8px}
.donut li b{font-variant-numeric:tabular-nums}
.heat{border-collapse:collapse;font-size:12px;width:100%}
.heat th{font-weight:600;color:var(--muted);padding:4px 6px;text-align:center;white-space:nowrap}
.heat th:first-child{text-align:left}
.heat td{padding:4px 6px;text-align:center;font-variant-numeric:tabular-nums;
  background:rgba(14,107,82,calc(var(--a,0) * .85));color:var(--ink)}
.heat td.hi{color:#fff}
.heat td:first-child{background:none;text-align:left;white-space:nowrap}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sig{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sig li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sig .tag{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--wash);color:var(--muted)}
.sig .tag.up{background:rgba(14,107,82,.12);color:var(--pass)}
.sig .tag.down{background:rgba(185,28,42,.1);color:var(--fail)}
.sig .tag.fc{background:rgba(201,151,0,.14);color:#8A6A00}
.etab-card.off{background:rgba(185,28,42,.035);border-color:rgba(185,28,42,.3)}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.group{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:6px}
.group h4{margin:0;font-size:14px}
.group p{margin:0;font-size:13px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a,.tags span{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--wash);color:var(--ink);text-decoration:none}
.tags a:hover{background:var(--wash-2);text-decoration:underline}
@media (max-width:900px){.dash .span-4,.dash .span-6,.dash .span-8{grid-column:1/-1}}