/* Hygiène Pro (HACCP) — style Metro, thèmes sombre (défaut) et clair. Fichier additionnel : styles.css reste intact. */
:root{
  --mx-font:'Segoe UI','Inter',system-ui,sans-serif;--gap:8px;
  --or:#c9a84c;--or2:#e8c97a;--or-bg:rgba(201,168,76,.12);--or-b:rgba(201,168,76,.3);
  --bg:#111;--surface:#1c1c1c;--surface2:#262626;--border:rgba(255,255,255,.1);
  --text:#faf9f6;--text2:#cfc8ba;--text3:#8f897c;
  --red:#ff7676;--red-bg:rgba(255,118,118,.1);--red-border:rgba(255,118,118,.3);
  --orange:#f59e0b;--orange-bg:rgba(245,158,11,.1);--orange-border:rgba(245,158,11,.3);
  --green:#56c288;--green-bg:rgba(86,194,136,.1);--green-border:rgba(86,194,136,.3);
  --blue:#38bdf8;--blue-bg:rgba(56,189,248,.1);--blue-border:rgba(56,189,248,.3);
  --yellow:#f5c451;--yellow-bg:rgba(245,196,81,.1);--yellow-border:rgba(245,196,81,.3);
  --purple:#a78bfa;--purple-bg:rgba(167,139,250,.1);--purple-border:rgba(167,139,250,.3);
  --brand:#0b0a09;--accent:#c9a84c;--radius:0;--radius-lg:0;--shadow:none;--shadow-md:0 12px 30px rgba(0,0,0,.4);
  --mx-head:#000;--mx-btn:#2d2d2d;--mx-btn-t:#fff;--mx-grp:#a39a89;--mx-line:#fff;
  --k-gold:#b8923a;--k-gold-t:#14110b;--k-deep:#2f5558;--k-sand:#3b342a;--k-sand-t:#fff;--k-ink:#24211d;--k-ink-t:#d8d2c6;--k-amber:#c47a1c;--k-brick:#a6402f;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#f3efe7;--surface:#ffffff;--surface2:#efe9dc;--border:rgba(0,0,0,.12);
  --text:#211e19;--text2:#5b5549;--text3:#8a8375;
  --red:#c0392b;--red-bg:#fbeceb;--red-border:#e8b4b0;
  --orange:#b36a00;--orange-bg:#fdf2e3;--orange-border:#f0c8a0;
  --green:#1f8a52;--green-bg:#e8f6ee;--green-border:#a8ddc0;
  --blue:#1b73b8;--blue-bg:#e6f1fb;--blue-border:#a0cce8;
  --yellow:#a87a00;--yellow-bg:#fbf4dc;--yellow-border:#f0dca0;
  --purple:#6b4bc0;--purple-bg:#f1ecfb;--purple-border:#d7bde2;
  --or:#9c7a1c;--or2:#7d6010;--or-bg:rgba(156,122,28,.12);--or-b:rgba(156,122,28,.35);
  --brand:#24211d;--shadow-md:0 12px 30px rgba(0,0,0,.14);
  --mx-head:#ffffff;--mx-btn:#e8e1d2;--mx-btn-t:#2b2620;--mx-grp:#7a7366;--mx-line:#211e19;
  --k-gold:#c9a84c;--k-gold-t:#1d1707;--k-sand:#e4dac6;--k-sand-t:#3b342a;--k-ink:#d3cbbb;--k-ink-t:#2b2620;--k-amber:#d98a1f;--k-brick:#b34a38;
  color-scheme:light;
}
body{font-family:var(--mx-font);background:var(--bg);color:var(--text)}
*{border-radius:0!important}
.nav-badge,.m-badge{border-radius:99px!important}
.panel,.card{box-shadow:none;border:0;border-left:4px solid var(--or);background:var(--surface)}
.card.tone-red{border-left-color:var(--red)}.card.tone-yellow{border-left-color:var(--yellow)}.card.tone-blue{border-left-color:var(--blue)}.card.tone-green{border-left-color:var(--green)}
.btn{border:0;background:var(--mx-btn);color:var(--mx-btn-t)}.btn:hover{filter:brightness(1.12)}
.btn-primary{background:var(--or)!important;color:#fff!important}
:root:not([data-theme=light]) .btn-primary{color:#111!important}
.btn-danger{background:var(--red)!important;color:#fff!important}.btn-success{background:var(--green)!important;color:#fff!important}
.btn-ghost{background:none;color:var(--text2)}
.input,select.input,textarea,input[type=text],input[type=number],input[type=password],input[type=email],input[type=date],select{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.section-title h2{font-weight:300;font-size:18px}
.empty-state{background:var(--surface2);color:var(--text3)}

/* tiroir : le menu d'origine devient un tiroir à toutes les tailles */
.app{grid-template-columns:minmax(0,1fr)}
.sidebar{display:flex!important;position:fixed;top:0;left:0;bottom:0;height:auto;width:min(300px,86vw);z-index:1200;transform:translateX(-105%);transition:transform .22s ease;box-shadow:4px 0 24px rgba(0,0,0,.4)}
body.m-menu-open .sidebar{transform:none}
body.m-menu-open{overflow:hidden}
.m-backdrop{display:block!important;position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s}
body.m-menu-open .m-backdrop{opacity:1;pointer-events:auto}
.main{overflow:visible;min-width:0}

/* en-tête */
.topbar{position:sticky;top:0;z-index:900;background:var(--mx-head);border-bottom:1px solid var(--border);align-items:center;flex-wrap:nowrap;padding:12px clamp(14px,3vw,40px)}
.topbar>div:first-of-type{min-width:0;flex:1}
.topbar h1{font-weight:300;font-size:22px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.eyebrow{color:var(--or)}
.mx-back{width:40px;height:40px;border:2px solid var(--mx-line)!important;border-radius:50%!important;background:none!important;color:var(--mx-line)!important;font-size:18px;display:none;align-items:center;justify-content:center;padding:0;flex-shrink:0;margin-right:12px;cursor:pointer}
body:not(.on-home) .mx-back{display:inline-flex}
.mx-back:hover{background:var(--mx-line)!important;color:var(--mx-head)!important}
.toolbar .btn{min-width:40px}
#global-status{padding:3px clamp(14px,3vw,40px)!important}
.view{padding:18px clamp(14px,3vw,40px)}

/* accueil en tuiles */
#home-view{padding-bottom:40px}
.mx-title{font-size:clamp(34px,5vw,56px);font-weight:200;line-height:1.05;color:var(--text)}
.mx-sub{color:var(--text3);font-size:14px;margin:4px 0 24px}
.mx-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:28px 48px;align-items:start}
.mx-group{container-type:inline-size;min-width:0}
.mx-gtitle{font-size:15px;font-weight:400;color:var(--mx-grp);letter-spacing:.04em;margin:0 0 10px}
.mx-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:calc((100cqw - 3 * var(--gap)) / 4);gap:var(--gap);grid-auto-flow:dense}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding:12px 14px;color:#fff;overflow:hidden;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .12s,filter .12s}
.tile:hover{filter:brightness(1.08);border-color:rgba(128,128,128,.6)}
.tile:active{transform:scale(.97)}
.tile.w2{grid-column:span 2}.tile.h2{grid-row:span 2}
.t-svg{position:absolute;top:12px;left:13px;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.t-num{font-size:44px;font-weight:200;line-height:1;position:absolute;top:8px;right:14px}
.tile.h2 .t-num{font-size:clamp(90px,9vw,130px);top:16px;right:18px}
.t-lab{font-size:14px;font-weight:600;line-height:1.15}
.t-live{font-size:12px;opacity:.82;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-gold{background:var(--k-gold);color:var(--k-gold-t)}.k-deep{background:var(--k-deep);color:#fff}
.k-sand{background:var(--k-sand);color:var(--k-sand-t)}.k-ink{background:var(--k-ink);color:var(--k-ink-t)}
.k-amber{background:var(--k-amber);color:#fff}.k-brick{background:var(--k-brick);color:#fff}

/* écran de connexion */
.login-shell{background:var(--bg)}
.login-card{background:var(--surface);border:0;border-top:4px solid var(--or);box-shadow:var(--shadow-md)}
.login-card h1{font-weight:300}
.mx-theme-row{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:12px;color:rgba(255,255,255,.55)}
.sidebar .brand{font-weight:300;font-size:22px;letter-spacing:0}.sidebar .brand span{color:var(--or);font-weight:700}

@media(max-width:900px){
  .mx-groups{grid-template-columns:1fr;gap:22px}
  .mx-grid{grid-template-columns:1fr 1fr;grid-auto-rows:108px}
  .t-num{font-size:34px}.tile.h2 .t-num{font-size:84px}.t-svg{width:24px;height:24px}
  .tile{padding:10px 12px}.t-lab{font-size:13px}
  .topbar{padding:10px 12px}
  .m-bottom-nav{background:var(--mx-head)!important;border-top:1px solid var(--border)!important}
  .m-bottom-nav button.active{color:var(--or)!important;background:var(--or-bg)!important}
  .m-bottom-nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
}

/* chiffres clés en tuiles pleines */
.cards .card{border:0!important;min-height:104px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.cards .card.tone-red{background:var(--k-brick)}.cards .card.tone-yellow{background:var(--k-amber)}
.cards .card.tone-blue{background:var(--k-deep)}.cards .card.tone-green{background:#3a7a55}.cards .card.tone-purple{background:#6b5a8c}
.cards .card .card-label{color:rgba(255,255,255,.85)}
.cards .card .metric{color:#fff!important;font-weight:200;font-size:44px}