/* ==========================================================================================
   EcomHub — interface « liquid glass », pensée d'abord pour le téléphone.

   Principes tenus d'un bout à l'autre de la feuille :
   1. La matière d'abord. Du verre translucide ne se voit que sur un fond vivant : trois nappes de
      couleur dérivent lentement derrière l'interface et donnent sa profondeur au verre.
   2. Chaque surface de verre porte une lumière au bord haut (reflet spéculaire) et une ombre large
      et douce. C'est ce qui sépare un vrai verre d'un rectangle gris translucide.
   3. Le téléphone n'est pas une version rétrécie, c'est la cible première : le flou est retiré des
      grandes surfaces (il coûte cher au processeur graphique) et gardé sur les barres et les
      panneaux flottants ; toute zone tactile fait au moins 44 px ; les tableaux deviennent des fiches.
   4. La lisibilité passe avant l'effet : contrastes tenus, et les préférences du système (thème
      sombre, transparence réduite, mouvement réduit, contraste renforcé) sont honorées.
   ========================================================================================== */

/* ------------------------------------------------------------------ polices & jetons */
@font-face{font-family:'Inter var';src:url('/static/fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk var';src:url('/static/fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap}

:root{
  /* géométrie */
  --r1:9px; --r2:13px; --r3:20px; --r-pil:999px;
  --rail-w:252px; --gap:14px;
  /* matière */
  --blur:26px; --sat:180%; --row:34px;
  --ease:cubic-bezier(.2,.75,.3,1);
  /* textes */
  --num:'Inter var',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --ui:'Inter var','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --hd:'Space Grotesk var','Space Grotesk',var(--ui);
}

/* thème clair : du verre sur un ciel clair */
:root{
  --bg:#e7ecf7; --bg2:#f8faff;
  --txt:#0b1120; --muted:#525c6b; --faint:#6f7889;
  --line:rgba(11,17,32,.12); --line2:rgba(11,17,32,.07);
  --glass:rgba(255,255,255,.62);
  --glass2:rgba(255,255,255,.44);
  --glass3:rgba(255,255,255,.30);
  --glass-solid:#f5f7fc;
  --glass-line:rgba(255,255,255,.72);
  --glass-edge:rgba(11,17,32,.09);
  --hl:rgba(255,255,255,.9);
  --sh1:0 1px 2px rgba(16,26,52,.06);
  --sh2:0 16px 36px -22px rgba(16,26,52,.42), 0 2px 8px -4px rgba(16,26,52,.16);
  --sh3:0 34px 70px -30px rgba(16,26,52,.52), 0 6px 18px -8px rgba(16,26,52,.2);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 44%);
  --acc:#2b52f0; --acc-ink:#1f43c8; --acc-soft:rgba(43,82,240,.10); --acc-line:rgba(43,82,240,.28);
  --acc-tint:rgba(43,82,240,.05);
  --ok:#0e7466; --ok-soft:rgba(14,116,102,.14); --warn:#9a5503; --warn-soft:rgba(154,85,3,.13);
  --err:#b8332a; --err-soft:rgba(184,51,42,.13);
  --teal:#12b8a0; --violet:#7a5cff; --rose:#ff6f9c;
}

/* thème sombre */
[data-theme="dark"]{
  --bg:#05070d; --bg2:#0d1220;
  --txt:#f0f4fb; --muted:#a2adc2; --faint:#7f8ba1;
  --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.07);
  --glass:rgba(26,32,46,.58);
  --glass2:rgba(22,28,42,.44);
  --glass3:rgba(20,26,38,.28);
  --glass-solid:#151a26;
  --glass-line:rgba(255,255,255,.16);
  --glass-edge:rgba(255,255,255,.09);
  --hl:rgba(255,255,255,.22);
  --sh2:0 18px 40px -24px rgba(0,0,0,.75), 0 2px 10px -6px rgba(0,0,0,.5);
  --sh3:0 38px 80px -34px rgba(0,0,0,.82), 0 6px 18px -8px rgba(0,0,0,.55);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,0) 46%);
  --acc:#6f95ff; --acc-ink:#8aa8ff; --acc-soft:rgba(111,149,255,.16); --acc-line:rgba(111,149,255,.34);
  --acc-tint:rgba(111,149,255,.09);
  --ok:#34c48f; --ok-soft:rgba(52,196,143,.16); --warn:#e2a745; --warn-soft:rgba(226,167,69,.16);
  --err:#ff6f80; --err-soft:rgba(255,111,128,.16);
}
/* le système décide, sauf choix explicite de l'utilisateur */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#05070d; --bg2:#0d1220; --txt:#f0f4fb; --muted:#a2adc2; --faint:#7f8ba1;
    --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.07);
    --glass:rgba(26,32,46,.58); --glass2:rgba(22,28,42,.44); --glass3:rgba(20,26,38,.28);
    --glass-solid:#151a26; --glass-line:rgba(255,255,255,.16); --glass-edge:rgba(255,255,255,.09);
    --hl:rgba(255,255,255,.22);
    --sh2:0 18px 40px -24px rgba(0,0,0,.75), 0 2px 10px -6px rgba(0,0,0,.5);
    --sh3:0 38px 80px -34px rgba(0,0,0,.82), 0 6px 18px -8px rgba(0,0,0,.55);
    --sheen:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,0) 46%);
    --acc:#6f95ff; --acc-ink:#8aa8ff; --acc-soft:rgba(111,149,255,.16); --acc-line:rgba(111,149,255,.34);
    --acc-tint:rgba(111,149,255,.09);
    --ok:#34c48f; --ok-soft:rgba(52,196,143,.16); --warn:#e2a745; --warn-soft:rgba(226,167,69,.16);
    --err:#ff6f80; --err-soft:rgba(255,111,128,.16);
  }
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;background:var(--bg)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font:14.6px/1.56 var(--ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"cv08" 1,"calt" 1,"liga" 1,"kern" 1;
  font-variant-numeric:tabular-nums lining-nums;font-optical-sizing:auto;letter-spacing:-.0015em;
  overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:var(--r1)}
::selection{background:var(--acc-soft);color:var(--txt)}
button,input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
code,.mono{font-family:var(--mono);font-size:12.7px;background:var(--glass3);padding:1px 5px;border-radius:4px}
kbd{font:11.5px var(--mono);border:1px solid var(--glass-edge);border-bottom-width:2px;border-radius:5px;
  padding:1px 5px;color:var(--muted);background:var(--glass2);white-space:nowrap}
img.img-ko{visibility:hidden}

/* --- le fond vivant : trois nappes de couleur, une grille, un grain --- */
.bg-wrap{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(125% 85% at 50% -12%,var(--bg2),var(--bg) 62%)}
.grad-blob{position:absolute;border-radius:50%;filter:blur(78px);opacity:.5;
  animation:derive 26s ease-in-out infinite alternate}
.grad-blob.g1{width:54vw;height:54vw;min-width:340px;min-height:340px;left:-13vw;top:-16vw;
  background:radial-gradient(circle at 42% 42%,var(--violet),transparent 68%)}
.grad-blob.g2{width:46vw;height:46vw;min-width:300px;min-height:300px;right:-13vw;top:5vh;
  background:radial-gradient(circle at 58% 42%,var(--teal),transparent 68%);animation-delay:-9s}
.grad-blob.g3{width:44vw;height:44vw;min-width:300px;min-height:300px;left:16vw;bottom:-20vw;
  background:radial-gradient(circle at 50% 50%,var(--acc),transparent 70%);opacity:.4;animation-delay:-17s}
.grid-overlay{position:absolute;inset:-2px;background-image:
  linear-gradient(to right,var(--line2) 1px,transparent 1px),
  linear-gradient(to bottom,var(--line2) 1px,transparent 1px);background-size:58px 58px;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 0%,#000 18%,transparent 76%);
  mask-image:radial-gradient(120% 92% at 50% 0%,#000 18%,transparent 76%)}
.grain{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes derive{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vw,2vh,0) scale(1.13)}}

/* recette du verre, réutilisée partout */
.rail,.topbar,.tabs,.card,.side-card,.mtop,.mnav,.panel,.palette-box,.toast,.empty-step{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  border:1px solid var(--glass-edge);
  box-shadow:var(--sh2);
  position:relative
}
.rail::after,.topbar::after,.tabs::after,.card::after,.side-card::after,.panel::after,.palette-box::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--sheen);opacity:.55;mix-blend-mode:screen}
.card>*,.side-card>*,.topbar>*,.panel>*{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rail,.topbar,.tabs,.card,.side-card,.mtop,.mnav,.panel,.palette-box,.toast,.empty-step{background:var(--glass-solid)}
}

/* ------------------------------------------------------------------ structure */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100dvh}

.rail{position:sticky;top:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;z-index:3;
  display:flex;flex-direction:column;gap:10px;padding:14px 12px 16px;border-radius:0;
  border-left:0;border-top:0;border-bottom:0;border-right:1px solid var(--glass-edge)}
.rail::-webkit-scrollbar{width:9px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.rail::-webkit-scrollbar-track{background:transparent}
.brand{display:flex;align-items:center;gap:9px;padding:2px 4px 11px;border-bottom:1px solid var(--line2)}
.brand span{display:block;min-width:0}
.brand b{font-family:var(--hd);font-size:15.4px;font-weight:650;letter-spacing:-.015em}
.brand small{display:block;color:var(--faint);font-size:11.2px;line-height:1.3;margin-top:1px}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:11px;background:var(--glass2);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--hl), 0 6px 16px -10px rgba(10,18,40,.5)}
.logo-mark svg{display:block}
.logo-mark.small{width:26px;height:26px;border-radius:9px}

.main{min-width:0;display:flex;flex-direction:column;padding:16px 20px 44px;gap:13px}

/* barre de titre */
.topbar{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:15px 18px;border-radius:var(--r3)}
.topbar>div:first-child{min-width:0;flex:1 1 260px}
.topbar .sub{color:var(--faint);font-size:12.5px;margin-top:4px}
h1,h2,h3,.brand b,.pcard h4{font-family:var(--hd);margin:0;text-wrap:balance;line-height:1.22}
h1{font-size:21px;font-weight:650;letter-spacing:-.022em}
h2{font-size:15px;font-weight:640}
h3{font-size:13.4px;font-weight:640}
h1.grad{background:linear-gradient(100deg,var(--txt) 10%,var(--acc) 82%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0 3px 2px}
.eyebrow{font-size:11.4px;font-weight:560;letter-spacing:.095em;text-transform:uppercase;color:var(--faint)}
.empty-step .eyebrow{color:var(--acc)}
.card p,.side-card p,.vide p,.empty-step p,.mcard p{max-width:74ch}
p,li,.muted,.faint{text-wrap:pretty}

/* missions + étapes (rail) */
.runs{display:flex;flex-direction:column;gap:2px}
.runs .run{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 9px;
  border-radius:var(--r1);border:1px solid transparent;background:transparent;text-align:left;
  font-size:12.9px;color:var(--muted);transition:background .14s var(--ease),color .14s var(--ease)}
.runs .run:hover{background:var(--glass2);color:var(--txt)}
.runs .run.active{background:var(--acc-soft);color:var(--txt);font-weight:600;border-color:var(--glass-line)}
.runs .run .pct{font:11px var(--num);color:var(--faint)}
.runs .r{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.railfoot{margin-top:auto;padding:10px 4px 0;border-top:1px solid var(--line2);color:var(--faint);
  font-size:11.8px;line-height:1.5}
.stepper{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line2);padding-top:8px}
.step{display:flex;gap:9px;align-items:flex-start;padding:5px 8px;border-radius:var(--r1);position:relative;
  width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--muted);
  transition:background .14s var(--ease)}
.step:hover{background:var(--glass2)}
.step .dot{width:19px;height:19px;flex:none;border:1px solid var(--glass-line);border-radius:50%;
  display:grid;place-items:center;font:600 11.4px var(--num);color:var(--faint);background:var(--glass2);
  box-shadow:inset 0 1px 0 var(--hl)}
.step .lbl{font-size:13px;line-height:1.38;min-width:0;padding-right:2px}
.step .lbl em{display:block;font-style:normal;color:var(--faint);font-size:11.8px;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:152px}
.step.ok .dot{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.step.ok .lbl{color:var(--txt)}
.step.cur{background:var(--acc-soft);border-color:var(--glass-line)}
.step.cur .dot{background:var(--acc);border-color:transparent;color:#fff;
  box-shadow:0 4px 12px -4px rgba(43,82,240,.7)}
.step.cur .lbl{font-weight:600;color:var(--txt)}
.step.err .dot{background:var(--err-soft);border-color:transparent;color:var(--err)}

/* onglets : capsule de verre collante, défilement horizontal propre */
.tabs{display:flex;gap:3px;padding:5px;border-radius:var(--r-pil);position:sticky;top:8px;z-index:15;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{height:0}
.tabs button{flex:0 0 auto;border:1px solid transparent;background:transparent;padding:8px 13px;
  font-size:12.9px;color:var(--muted);border-radius:var(--r-pil);white-space:nowrap;
  transition:background .14s var(--ease),color .14s var(--ease),box-shadow .14s var(--ease)}
.tabs button:hover{color:var(--txt);background:var(--glass2)}
.tabs button.active{color:var(--txt);font-weight:600;background:var(--glass2);border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 var(--hl), 0 8px 20px -14px rgba(10,18,40,.6)}

/* vues */
.view{display:none;padding:2px 0 24px}
.view.active{display:block;animation:vue .2s var(--ease) both}
@keyframes vue{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* bandeau des opérations longues */
.travaux{display:flex;flex-direction:column;gap:7px;padding:10px 13px;border-radius:var(--r2);
  background:var(--acc-soft);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--hl)}
.travail{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--txt)}
.travail b{font-weight:600}
.travail .duree{font-family:var(--num);color:var(--acc);font-variant-numeric:tabular-nums;min-width:34px}
.travail .faint{color:var(--faint)}
.spin{width:12px;height:12px;border:2px solid var(--acc-line);border-top-color:var(--acc);border-radius:50%;
  display:inline-block;animation:tr .9s linear infinite;flex:0 0 auto}
@keyframes tr{to{transform:rotate(360deg)}}
.lien-travail{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--txt);font-weight:600;
  text-align:left;cursor:pointer}
.lien-travail:hover{text-decoration:underline;text-underline-offset:2px;color:var(--acc)}
@media (max-width:760px),(max-height:520px){
  /* au doigt, une ligne de texte de 22 px de haut n'est pas touchable : on lui donne la hauteur d'un doigt */
  .lien-travail{display:inline-flex;align-items:center;min-height:44px;padding:0 0 1px}
}

/* ------------------------------------------------------------------ surfaces */
.card{margin-bottom:12px;border-radius:var(--r3);padding:0;overflow:hidden}
.card>h2{font-size:13.4px;font-weight:630;letter-spacing:.002em;padding:10px 14px;display:flex;
  align-items:center;gap:8px;border-bottom:1px solid var(--line2)}
.card>h2 .tag{font:11px var(--num);color:var(--faint);font-weight:400;margin-left:auto}
.card>.card-body{padding:13px 14px}
.card>p,.card>.muted,.card>.faint,.card>.row,.card>.kv{padding:0 14px}
.card>.row,.card>p:last-child,.card>.kv:last-child{margin-bottom:12px}
.card>.grid,.card>.joblist,.card>.panel,.card>.steps,.card>.grid.two,.card>.grid.form{padding:12px 14px}
.card>.grid.two>.card{margin-bottom:0;background:var(--glass2);border-color:var(--glass-line);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.card>.muted,.card>.faint{padding-top:12px}
.side-card{border-radius:var(--r3);overflow:hidden}
.side-card h3{font-size:11.8px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
  padding:9px 13px;border-bottom:1px solid var(--line2);margin:0}
.side-card .kv,.side-card p,.side-card .steps,.side-card .shortcuts,.side-card .side-prod{padding:8px 13px}
.side-card .kv:last-child,.side-card .shortcuts,.side-card .steps{margin-bottom:8px}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:12px;align-items:start}
.col-main{min-width:0;display:flex;flex-direction:column}
.col-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;min-width:0}

/* indicateurs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kpi{padding:11px 13px;border-radius:var(--r2);background:var(--glass2);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--hl);min-width:0}
.kpi span{display:block;font-size:11.2px;font-weight:560;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.kpi b{display:block;font:650 20.5px/1.2 var(--num);letter-spacing:-.025em;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:12px;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line2);font-size:12.9px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font:600 12.9px var(--num);text-align:right;min-width:0;overflow-wrap:anywhere}
.kv-mini{display:inline-flex;gap:4px;align-items:baseline}

/* jauges : une ligne (progression) et des colonnes (histogramme) */
.jauge{height:7px;border-radius:99px;background:var(--glass3);overflow:hidden;margin:12px 14px 0;
  box-shadow:inset 0 1px 2px rgba(16,26,52,.08)}
.jauge span{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--teal));border-radius:99px;
  transition:width .3s var(--ease)}
.bars{display:flex;align-items:flex-end;gap:5px;padding:11px 14px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.bar b{font:9.6px var(--num);color:var(--muted);font-weight:500;margin-bottom:3px}
.bar i{display:block;width:100%;background:linear-gradient(180deg,var(--acc),var(--teal));
  border-radius:5px 5px 0 0;box-shadow:inset 0 1px 0 var(--hl)}
.bar span{font:9.4px var(--num);color:var(--faint);margin-top:4px;white-space:nowrap}

/* --------------------------------------------------------------- tableaux */
.tablewrap{overflow:auto;max-height:66vh;border:1px solid var(--glass-line);border-radius:var(--r2);
  background:var(--glass2);min-width:0;margin-bottom:12px}
.tablewrap::-webkit-scrollbar{width:10px;height:10px}
.tablewrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.tablewrap::-webkit-scrollbar-track{background:transparent}
.card .tablewrap{border:0;border-radius:0;margin-bottom:0}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.9px}
th{position:sticky;top:0;z-index:2;text-align:left;color:var(--faint);font-size:11.3px;font-weight:640;
  text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;white-space:nowrap;
  background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 var(--hl)}
td{padding:6.5px 10px;border-bottom:1px solid var(--line2);vertical-align:middle;min-width:0}
th:first-child,td:first-child{padding-left:14px}
th:last-child,td:last-child{padding-right:14px}
.th.srt,th.srt{cursor:pointer;user-select:none;white-space:nowrap;transition:color .14s var(--ease)}
th.srt:hover{color:var(--acc)}
td,th{line-height:1.42}
td.num,th.num,.num{font-family:var(--num);text-align:right;font-variant-numeric:tabular-nums}
th.num.srt{text-align:right}
.tcell a,.t1 a{color:var(--txt);text-decoration:none}
.tcell a:hover,.t1 a:hover{color:var(--acc);text-decoration:none}
td.src{color:var(--muted);font-size:12.3px}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover td{background:var(--acc-tint)}
tbody tr:active td{background:var(--acc-soft)}
tbody tr:last-child td{border-bottom:0}
td.tcell{max-width:340px}
.tcell .t1,.t1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;line-height:1.35}
.tcell .t2,.t2{color:var(--faint);font-size:11.8px;margin-top:1px}
.tcell a,.t1 a{color:var(--txt)}

/* fiches produit, vignettes, galerie */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:10px;padding:11px 14px}
#cat-cards,#cat-gal{max-height:66vh;overflow:auto}
.pcard{background:var(--glass2);border:1px solid var(--glass-line);border-radius:var(--r2);padding:9px;
  min-width:0;font-size:12.6px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 1px 0 var(--hl)}
.pcard:hover{border-color:var(--glass-line);background:var(--glass)}
.pcard.sel{border-color:var(--acc);box-shadow:0 0 0 2.5px var(--acc-soft)}
.pcard img{width:100%;height:118px;object-fit:cover;border-radius:var(--r1);background:var(--glass3)}
.pcard .ph{width:100%;height:118px;font-size:11.4px}
.pcard h4{margin:0;font-size:12.6px;font-weight:600;line-height:1.32;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .p{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pcard .p span:first-child{font:650 14.3px var(--num)}
.pcard .grad{background:linear-gradient(100deg,var(--txt),var(--acc));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.thumb{width:34px;height:34px;object-fit:cover;border-radius:var(--r1);border:1px solid var(--glass-line);
  background:var(--glass3)}
.ph{background:var(--glass3);display:grid;place-items:center;color:var(--faint);font:600 11px var(--num);
  width:34px;height:34px;border-radius:var(--r1);border:1px solid var(--glass-line);text-transform:uppercase}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:9px;padding:11px 14px}
.gallery img{width:100%;border-radius:var(--r1);border:1px solid var(--glass-line);display:block;background:var(--glass3)}
.media{width:100%;border-radius:var(--r1);border:1px solid var(--glass-line)}
.score{font:600 11.8px var(--num);padding:1.5px 7px;border-radius:99px;background:var(--glass3);color:var(--muted)}
.score.good{background:var(--ok-soft);color:var(--ok)}
.score.mid{background:var(--warn-soft);color:var(--warn)}
.score.bad{background:var(--err-soft);color:var(--err)}
.price-in{width:78px}
.side-prod{display:flex;gap:10px;align-items:flex-start}
.side-prod img{width:46px;height:46px;object-fit:cover;border-radius:var(--r1);border:1px solid var(--glass-line)}
.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shortcuts .btn{justify-content:center}
.steps{font-size:12.5px;color:var(--muted);line-height:1.75}
.vide{display:flex;gap:10px;align-items:flex-start;padding:15px 14px 17px;color:var(--faint)}
.vide svg{color:var(--acc);opacity:.8;flex:none;margin-top:1px}
.vide p{margin:0;font-size:12.4px;line-height:1.5;max-width:36ch}
.ghost{opacity:.45;font-style:italic}
.panel{border-radius:var(--r2);padding:12px 14px;margin-bottom:12px}
.p{padding:11px 14px}
.p .panel+.panel{margin-top:10px}

/* listes de travaux */
.joblist{display:flex;flex-direction:column}
.job{padding:8px 13px;border-bottom:1px solid var(--line2);font-size:12.7px}
.job:last-child{border-bottom:0}
.job .jh{display:flex;align-items:center;gap:8px;justify-content:space-between;font-weight:600}
.job .jl{color:var(--muted);margin-top:3px;font-size:12.3px;overflow-wrap:anywhere}
.sk{height:12px;border-radius:var(--r1);background:linear-gradient(90deg,var(--glass3),var(--glass2),var(--glass3));
  background-size:200% 100%;animation:sk 1.2s linear infinite;margin:9px 14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* étiquettes */
.ntag{display:inline-block;font-size:11.8px;padding:1px 7px;border-radius:5px;border:1px solid transparent;
  white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ntag.t0{background:var(--acc-soft);color:var(--acc-ink);border-color:var(--acc-line)}
.ntag.t1{background:var(--ok-soft);color:var(--ok)}
.ntag.t2{background:var(--warn-soft);color:var(--warn)}
.ntag.t3{background:rgba(122,92,255,.14);color:var(--violet)}
.ntag.t4{background:var(--err-soft);color:var(--err)}
.ntag.t5{background:rgba(18,184,160,.14);color:var(--teal)}
.chips{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.2px;padding:2.5px 9px;border-radius:99px;
  background:var(--glass2);color:var(--muted);border:1px solid var(--glass-line);white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--hl)}
.chip.acc{background:var(--acc-soft);color:var(--acc-ink);border-color:var(--acc-line)}
.chip.ok,.chip.good{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.chip.bad{background:var(--err-soft);color:var(--err);border-color:transparent}
.chip.tight{padding:0 6px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.4px;font-weight:560;padding:2px 9px;
  border-radius:99px;background:var(--glass3);color:var(--muted);text-transform:uppercase;letter-spacing:.055em;
  border:1px solid transparent;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8;flex:none}
.pill.done,.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.running,.pill.queued{background:var(--acc-soft);color:var(--acc-ink)}
.pill.erreur,.pill.err{background:var(--err-soft);color:var(--err)}
.pill.interrompu,.pill.bad{background:var(--warn-soft);color:var(--warn)}
.tag{display:inline-flex;align-items:center;gap:5px;font:11px var(--num);color:var(--faint)}

/* ------------------------------------------------------------------ boutons & champs */
.btn{border:1px solid var(--glass-line);background:var(--glass2);color:var(--txt);border-radius:var(--r1);
  padding:7px 12.5px;font-size:12.9px;font-weight:520;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
  box-shadow:inset 0 1px 0 var(--hl), var(--sh1);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  transition:background .14s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease),
             transform .09s var(--ease)}
.btn:hover{background:var(--glass);text-decoration:none;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 var(--hl), 0 10px 22px -14px rgba(16,26,52,.5)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.primary{background:linear-gradient(165deg,var(--acc),var(--acc-ink));border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -14px rgba(43,82,240,.85)}
.btn.primary:hover{background:linear-gradient(165deg,var(--acc),var(--acc-ink))}
.btn.ghost{background:transparent;border-color:var(--glass-line);color:var(--muted);box-shadow:none}
.btn.ghost:hover{color:var(--txt);background:var(--glass2)}
.btn.danger{border-color:var(--err-soft);color:var(--err);background:var(--err-soft)}
.btn.mini{padding:4px 10px;font-size:12.3px}
.btn.small{padding:3px 8px;font-size:11.5px}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.rail .btn{width:100%;margin:0 0 6px}
.railfoot .btn{width:auto}

input,select,textarea{background:var(--glass2);border:1px solid var(--glass-line);color:var(--txt);
  border-radius:var(--r1);padding:7px 10px;font-size:13px;outline:none;min-width:0;max-width:100%;
  box-shadow:inset 0 1px 1px rgba(16,26,52,.05);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease),background .14s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{background:var(--glass)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);background:var(--glass);
  box-shadow:0 0 0 3.5px var(--acc-soft)}
select{appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 9px center;
  padding-right:27px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.7 4.6 6 7.9l3.3-3.3' fill='none' stroke='%236f7889' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--acc);padding:0;border-radius:4px;
  cursor:pointer;vertical-align:-2px;box-shadow:none}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12.3px;color:var(--muted);padding:0 14px}
.grid.form label.f{padding:0}
label.f:has(input[type=checkbox]),.ncheck{cursor:pointer}
.row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:0 14px;margin:10px 0}
.grid.form .row,.grid.two>.card>.row{padding:0}
.row.between,.between{justify-content:space-between}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--glass-line);
  border-radius:var(--r2);overflow:hidden;margin-bottom:12px;background:var(--glass2)}
.grid.form{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;padding:12px 14px}
.grid>*{min-width:0}
.muted{color:var(--muted);font-size:12.7px;line-height:1.5}
.faint{color:var(--faint);font-size:12.2px}
.muted,.faint,.empty-step p{max-width:88ch}
.tight{gap:6px}
.small{font-size:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
.hide-sm{display:initial}
.srt{cursor:pointer}

/* sélecteur segmenté, filtres, catégories */
.seg{display:inline-flex;border:1px solid var(--glass-line);border-radius:var(--r1);overflow:hidden;
  background:var(--glass2);box-shadow:inset 0 1px 0 var(--hl)}
.seg button{border:0;background:none;padding:5px 10px;font-size:12.5px;color:var(--muted);cursor:pointer;
  border-right:1px solid var(--line2)}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--glass)}
.seg button.on{background:var(--acc-soft);color:var(--acc-ink);font-weight:600}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 13px;margin:0;
  border-bottom:1px solid var(--line2);background:var(--glass3)}
.filters input,.filters select{font-size:12.9px;padding:6px 9px}
.filters input[placeholder]{flex:1 1 220px;min-width:0}
.cat-chips{display:flex;gap:5px;flex-wrap:wrap;padding:10px 14px}
.champ-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* étape non lancée, amorçage, aide */
.empty-step{border-radius:var(--r3);padding:15px 17px}
.empty-step h2{margin:0 0 7px;font-size:14.8px}
.empty-step p{line-height:1.55;margin:0 0 6px}
.empty-step .row{padding:0;margin:12px 0 4px}
.es-head{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.es-badge{font:600 11.4px var(--num);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--glass-line);border-radius:99px;padding:2px 9px;background:var(--glass2)}
.es-state{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc)}
.amorcage{border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:var(--r3);
  padding:14px 16px;margin-bottom:12px}
.amorcage h2{font-size:15.4px;margin:0 0 4px}
.amorcage ol{margin:10px 0 12px;padding-left:20px;color:var(--muted)}
.amorcage li{margin-bottom:5px}
.amorcage .row{gap:8px;padding:0}
.aide-box{width:min(540px,100%);border-radius:var(--r3);overflow:hidden;padding:0;background:var(--glass);
  border:1px solid var(--glass-line);box-shadow:var(--sh3);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
.aide-l{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 14px;
  border-bottom:1px solid var(--line2);font-size:12.9px}
.aide-l:last-child{border-bottom:0}

/* compte : bandeau, jauge, offres */
.moi-etat{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--glass-line);border-radius:var(--r2);
  background:var(--glass2);box-shadow:inset 0 1px 0 var(--hl)}
.moi-etat .kpis{margin:0}
.moi-etat .repli{margin-top:10px}
.liste-offres{list-style:none;margin:0;padding:0}
.liste-offres li{padding:10px 0;border-bottom:1px solid var(--line2)}
.liste-offres li:last-child{border-bottom:0;padding-bottom:0}
.liste-offres b{display:block;font-size:13px;font-weight:650}
.liste-offres span{display:block;color:var(--muted);font-size:12.4px;margin-top:2px}
.newrun{display:none;gap:6px;margin-top:7px;padding:0 2px}
.newrun.open{display:flex;flex-wrap:wrap}
.newrun input{flex:1 1 128px;min-width:0}
.newrun.mrun{margin:0;padding:9px 11px;border-bottom:1px solid var(--line2)}
.mtop-add{display:none;align-items:center;justify-content:center;border:1px solid var(--glass-line);
  background:var(--glass2);border-radius:var(--r1);color:var(--acc);font:600 17.5px/1 var(--num);
  width:36px;height:36px;padding:0;cursor:pointer;box-shadow:inset 0 1px 0 var(--hl)}
.mtop-add:hover{background:var(--glass)}

/* ------------------------------------------------------------------ couches flottantes */
.drawer{position:fixed;inset:0;z-index:60;display:none;background:color-mix(in srgb,var(--bg) 55%,transparent);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.drawer.open{display:block;animation:fondu .18s var(--ease)}
@keyframes fondu{from{opacity:0}to{opacity:1}}
#drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(580px,94vw);overflow:auto;
  padding:16px 17px;border-radius:var(--r3) 0 0 var(--r3);border-right:0;
  animation:glisse .22s var(--ease) both}
#drawer-panel::-webkit-scrollbar{width:10px}
#drawer-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
#drawer-panel::-webkit-scrollbar-track{background:transparent}
#drawer-panel h2{font-size:14.4px;margin:0 0 10px}
@keyframes glisse{from{transform:translateX(18px);opacity:.4}to{transform:none;opacity:1}}

.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:7px;z-index:80;
  align-items:flex-end;pointer-events:none}
.toast{color:var(--txt);font-size:12.7px;padding:10px 13px;border-radius:var(--r2);max-width:340px;
  animation:monte .2s var(--ease) both}
.toast.ok{border-color:var(--ok);color:var(--ok)}
.toast.err{border-color:var(--err);color:var(--err)}
@keyframes monte{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* recherche globale (Ctrl+K) */
.palette{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;
  padding:9vh 16px 16px;background:color-mix(in srgb,var(--bg) 58%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.palette[hidden]{display:none}
.palette-box{width:min(700px,100%);max-height:78vh;display:flex;flex-direction:column;border-radius:var(--r3);
  overflow:hidden;animation:paletteIn .2s var(--ease) both}
@keyframes paletteIn{from{transform:translateY(-6px) scale(.995);opacity:0}to{transform:none;opacity:1}}
.palette-champ{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line2)}
.palette-champ input{flex:1;border:0;background:transparent;font-size:15px;color:var(--txt);outline:none;
  min-width:0;box-shadow:none;padding:0}
.palette-tout{overflow:auto;padding:3px 0 6px}
.palette-tout::-webkit-scrollbar{width:10px}
.palette-tout::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.pal-groupe{padding:9px 14px 3px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.pal-item{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;border:0;background:transparent;
  border-left:2px solid transparent;width:100%;text-align:left;font-size:13px}
.pal-item:hover,.pal-item.on{background:var(--acc-soft);border-left-color:var(--acc)}
.pal-img{width:30px;height:30px;border-radius:var(--r1);object-fit:cover;background:var(--glass3);flex:0 0 auto}
.pal-t{flex:1;min-width:0}
.pal-t b{display:block;font-weight:560;font-size:13.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-t span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-type{font:10.6px var(--num);color:var(--faint);flex:0 0 auto}
.palette-pied{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--line2);
  font-size:12px;color:var(--muted)}
.palette-bouton{display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}

/* cartes mobiles (une ligne de tableau devient une fiche lisible au doigt) */
.mcards{display:none;flex-direction:column;gap:8px;padding:10px 11px}
.mcard{border:1px solid var(--glass-line);border-radius:var(--r2);padding:10px 11px;background:var(--glass2);
  box-shadow:inset 0 1px 0 var(--hl)}
.mcard:active{background:var(--glass)}
.mc-top{font-size:13.3px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-weight:600}
.mc-meta{font-size:12.2px;color:var(--faint);margin-top:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mc-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;margin-top:8px}
.mc-figs span{display:flex;flex-direction:column;gap:1px;font-size:11.4px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.04em}
.mc-figs b{font:600 13.8px var(--num);color:var(--txt);text-transform:none;letter-spacing:0}

/* ------------------------------------------------------------------ larges écrans serrés */
@media (max-width:1280px){
  :root{--rail-w:230px}
  .layout{grid-template-columns:minmax(0,1fr) 288px}
}
@media (max-width:1080px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .col-side{position:static}
}

/* ------------------------------------------------------------------ TÉLÉPHONE
   Cible aussi les téléphones en paysage (hauteur faible = mêmes contraintes tactiles). */
.mnav{display:none}
@media (max-width:760px),(max-height:520px){
  :root{--blur:18px}
  body{font-size:14.8px}
  .app{display:block}
  /* le rail devient un bandeau horizontal : la fonction reste, la colonne disparaît */
  .rail{position:static;height:auto;overflow:visible;display:block;padding:10px 11px 6px;
    border-right:0;border-bottom:1px solid var(--glass-edge);box-shadow:none}
  .rail .brand{padding:0 2px 8px;border-bottom:0}
  .rail .runs{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;scrollbar-width:none}
  .rail .runs::-webkit-scrollbar{height:0}
  .rail .runs .run{width:auto;flex:0 0 auto;background:var(--glass2);border-color:var(--glass-line)}
  .stepper{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;border-top:0;padding-top:0;scrollbar-width:none}
  .stepper::-webkit-scrollbar{height:0}
  .step{width:auto;flex:0 0 auto;background:var(--glass2);border-color:var(--glass-line);padding:7px 11px;align-items:center}
  .step .lbl{font-size:12.6px}
  .step .lbl em{display:none}
  .railfoot{flex-direction:row;margin-top:4px;gap:7px;border-top:0;display:flex;align-items:center;flex-wrap:wrap}
  .rail .badge0{display:none}
  /* dans le rail compact, les libellés des boutons ronds disparaissent : « thème » comme « quitter ».
     Sans cela le pied du rail dépasse de 14 px l'écran d'un téléphone (mesuré à 390 px). */
  .rail .btn-theme-mot{display:none}
  .railfoot .btn{flex:0 0 auto}
  .rail .btn{width:auto;margin:0}

  .main{padding:10px 11px calc(96px + env(safe-area-inset-bottom));gap:11px}
  /* barre du haut : collante mais fine, avec les zones sûres de l'écran */
  .mtop{display:flex;align-items:center;gap:9px;position:sticky;top:0;z-index:20;margin:-10px 0 0;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-radius:0 0 var(--r2) var(--r2);
    border-top:0}
  .mtop-brand{display:flex;align-items:center;gap:7px}
  .mtop-brand b{font-size:13.4px}
  .mtop-prog{flex:1;height:5px;border-radius:99px;background:var(--glass3);overflow:hidden;min-width:36px}
  .mtop-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--teal));width:0}
  #mstep{width:auto;max-width:46%;font-size:12.5px;padding:6px 26px 6px 8px;min-height:40px}
  /* les deux boutons ronds de la barre du haut ne doivent pas être écrasés par le sélecteur d'étape */
  .mtop-add{display:flex;flex:0 0 40px;width:40px;height:40px}
  header.topbar{display:none}
  .tabs{position:sticky;top:calc(50px + env(safe-area-inset-top));z-index:19;margin:0;
    box-shadow:0 14px 28px -24px rgba(10,18,40,.8)}
  .tabs button{padding:9px 12px;font-size:12.6px;min-height:44px}
  .view{padding:4px 0 calc(30px + env(safe-area-inset-bottom))}
  .card,.side-card{border-radius:var(--r2);margin-bottom:10px}
  /* le flou des grandes surfaces coûte cher sur un téléphone : on garde une couleur pleine */
  .card,.side-card,.tablewrap,th,.empty-step,.moi-etat,.pcard,.mcard,.aide-box,.grid.cards,.seg,.btn,
  .filters,.panel,.kpi,.jauge,.side-card h3{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .card,.side-card,.empty-step,.aide-box,.panel{background:var(--glass-solid)}
  .tablewrap,.grid.cards,.filters{background:var(--glass2)}
  .kpi,.pcard,.mcard,.seg,.moi-etat{background:var(--glass2)}
  th{background:var(--glass-solid)}
  .layout{gap:10px}
  .grid.two,.grid.cards,.grid.form{grid-template-columns:minmax(0,1fr)}
  .grid.cards{gap:8px;padding:8px}
  .row{gap:6px;flex-wrap:wrap}
  .btn{white-space:normal;min-height:40px;padding:9px 13px}
  .btn.mini{padding:7px 11px;min-height:36px}
  .tabs button,.pal-item,.runs .run,.step{min-height:44px}
  input,select,textarea{min-height:42px;font-size:13.4px}
  .hide-sm{display:none}
  .kpi{border-bottom:0;padding:10px 11px}
  .kpi b{font-size:18px}
  .tablewrap{max-height:none;max-width:100%}
  table{font-size:12.5px}
  td,th{padding:7px 9px}
  td.tcell{max-width:200px}
  td.tcell .t1,td.tcell .t2{white-space:normal}
  .pg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .shortcuts{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));padding:10px 12px}
  .bars{padding:10px 12px}
  /* le tiroir devient une feuille qui monte du bas : la zone du pouce */
  #drawer-panel{top:auto;bottom:0;height:auto;max-height:88dvh;width:100%;border-radius:var(--r3) var(--r3) 0 0;
    padding:15px 14px calc(22px + env(safe-area-inset-bottom));animation:monteFeuille .24s var(--ease) both;
    -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
  @keyframes monteFeuille{from{transform:translateY(26px);opacity:.5}to{transform:none;opacity:1}}
  .palette{padding:8vh 10px 10px}
  .palette-box{max-height:82vh}
  .toasts{left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));align-items:stretch}
  .toast{max-width:100%}
  .travaux{padding:9px 11px}
  .empty-step{padding:13px 14px}
  .empty-step h2{font-size:14px}
  h1{font-size:17.4px}
  /* barre d'onglets du bas, comme sur iOS */
  .mnav{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:5px 4px calc(4px + env(safe-area-inset-bottom));border-radius:0;border-left:0;border-right:0;border-bottom:0;
    box-shadow:0 -16px 34px -26px rgba(10,18,40,.8)}
  .mnav button{border:0;background:none;padding:7px 2px 6px;font-size:10.4px;color:var(--muted);cursor:pointer;
    border-radius:var(--r1);font-family:var(--ui);font-weight:560;min-height:46px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
  .mnav button svg{width:21px;height:21px;opacity:.85}
  .mnav button.on{color:var(--acc);background:var(--acc-soft)}
  .mnav button.on svg{opacity:1}
  .mnav button:active{background:var(--glass2)}
  /* un tableau qui reste un tableau se lit en glissant ; les fiches prennent le relais */
  .tablewrap.mtable{display:none}
  .mcards{display:flex}
  .view.active .card:first-child .row{gap:6px}
  .view.active .card:first-child .btn{padding:8px 11px;font-size:12.5px}
}
@media (max-width:430px){
  .pg{grid-template-columns:1fr 1fr}
  #mstep{max-width:40%}
  .card>h2{font-size:13px}
  h1{font-size:16.4px}
  .mnav button{font-size:9.6px}
  .mnav button svg{width:19px;height:19px}
}
@media (max-width:760px) and (orientation:landscape){
  .mnav{padding-bottom:4px}
  .view{padding-bottom:74px}
}

/* ------------------------------------------------------------------ préférences système */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .grad-blob{animation:none}
  .spin{animation:none;border-top-color:var(--acc)}
}
@media (prefers-reduced-transparency:reduce){
  .rail,.topbar,.tabs,.card,.side-card,.mtop,.mnav,.panel,.palette-box,.toast,.empty-step,.aide-box,.btn,.kpi{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--glass-solid)!important}
  .grad-blob{opacity:.28}
}
@media (prefers-contrast:more){
  :root{--line:rgba(11,17,32,.34);--glass-edge:rgba(11,17,32,.3);--muted:#3b4453;--faint:#525c6b}
  [data-theme="dark"]{--line:rgba(255,255,255,.38);--glass-edge:rgba(255,255,255,.34);--muted:#c8d1e0;--faint:#aab4c6}
  .card,.side-card,.tabs,.topbar,.btn,.kpi{border-width:1.5px}
}
@media print{
  .bg-wrap,.rail,.tabs,.mnav,.mtop,.toasts,.palette,.drawer{display:none!important}
  .card,.side-card,.tablewrap{box-shadow:none;background:#fff;color:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ------------------------------------------------------------------ thème : bouton et pastille */
.btn-theme .ico-nuit{display:none}
[data-theme="dark"] .btn-theme .ico-jour{display:none}
[data-theme="dark"] .btn-theme .ico-nuit{display:inline}
.btn-theme{gap:6px;flex:none}
.btn-theme .btn-theme-mot{font-size:11.5px;color:var(--muted)}
.railfoot .btn-theme{width:auto;margin:2px 0 0}
.badge0{font-size:11px;color:var(--faint);padding:2px 0 6px;line-height:1.4}

/* ==============================================================================================
   La page de connexion : la même matière que l'outil, mais une seule chose à faire.
   Elle doit tenir sur un téléphone (champs assez grands pour le pouce) comme sur un grand écran
   (carte centrée, largeur de lecture tenue).
   ============================================================================================== */
.porte-page{min-height:100dvh}
.porte{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  padding:calc(24px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom))}
.porte-carte{width:min(420px,100%);border-radius:var(--r-xl,26px);padding:26px 24px 22px;
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--sh3);
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  position:relative;overflow:hidden}
.porte-carte::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--sheen);opacity:.6;mix-blend-mode:screen}
.porte-carte>*{position:relative;z-index:1}
.porte-tete{display:flex;align-items:center;gap:11px;padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--line2)}
.porte-marque b{display:block;font-family:var(--hd);font-size:16.5px;font-weight:650;letter-spacing:-.015em}
.porte-marque small{display:block;color:var(--faint);font-size:11.4px;margin-top:1px}
.porte-carte h1{font-size:23px;font-weight:650;letter-spacing:-.025em}
.porte-sous{color:var(--muted);font-size:13px;margin:6px 0 20px}
.porte-erreur{display:flex;align-items:flex-start;gap:9px;margin-bottom:16px;padding:11px 13px;
  border-radius:var(--r2);background:var(--err-soft);color:var(--err);font-size:12.9px;line-height:1.45}
.porte-erreur svg{flex:none;margin-top:1px}
.porte-form{display:flex;flex-direction:column;gap:14px}
.porte-champ{display:flex;flex-direction:column;gap:6px}
.porte-champ span{font-size:11.8px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.porte-champ input{width:100%;padding:12px 13px;font-size:15px;border-radius:var(--r2);min-height:48px}
.porte-bouton{margin-top:4px;min-height:48px;font-size:14.5px;font-weight:600;border-radius:var(--r2)}
.porte-note{color:var(--faint);font-size:11.4px;line-height:1.5;margin:18px 0 0;
  padding-top:14px;border-top:1px solid var(--line2);max-width:46ch}
.porte-pied{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  color:var(--faint);font-size:11.6px}
.porte-pied a{color:var(--muted)}
.porte-pied a:hover{color:var(--acc)}
.porte-sep{opacity:.5}
@media (max-width:760px),(max-height:520px){
  .porte{padding:calc(18px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    justify-content:flex-start;gap:14px}
  .porte-carte{padding:22px 18px 18px;border-radius:var(--r-lg,24px)}
  .porte-carte h1{font-size:21px}
  .porte-champ input{font-size:16px}          /* 16 px au moins : sinon iOS zoome sur le champ */
}
@media (max-height:520px){
  .porte-note{display:none}
  .porte{justify-content:flex-start}
}