/* ALLO GLAÇONS — encre froide, papier de glace, chiffres condensés */
@font-face{font-family:Barlow;font-weight:400;src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;src:url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}

:root{
  --encre:#12303F; --encre-2:#1C4256; --glace:#EEF4F7; --papier:#FFFFFF; --givre:#D3E2EA; --givre-2:#E6EEF2;
  --eau:#1F7FA6; --eau-pale:#DDEEF6; --texte:#1A2A33; --doux:#5B707C;
  --ambre:#B9770E; --ambre-pale:#FBF0DC; --rouge:#B23A3A; --rouge-pale:#F8E3E3; --vert:#2E7D5B; --vert-pale:#E1F1EA;
  --num:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Barlow,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.45;color:var(--texte);background:var(--glace);
  display:grid;grid-template-columns:220px 1fr;min-height:100vh}
a{color:var(--eau)}
:focus-visible{outline:3px solid #7cc4e0;outline-offset:2px}

/* navigation */
.nav{align-self:start;background:var(--encre);color:#cfe1ea;padding:22px 0;position:sticky;top:0;height:100vh;overflow:auto}
.marque{padding:0 22px 22px;border-bottom:1px solid var(--encre-2);margin-bottom:12px}
.marque b{display:block;font-family:var(--num);font-weight:700;font-size:28px;line-height:1;color:#fff;letter-spacing:.5px}
.marque span{font-size:13px;color:#8fb2c3}
.nav a{display:flex;gap:10px;align-items:center;padding:9px 22px;color:#cfe1ea;text-decoration:none;font-weight:500;border-left:3px solid transparent}
.nav a:hover{background:var(--encre-2);color:#fff}
.nav a.actif{border-left-color:#7cc4e0;background:var(--encre-2);color:#fff}
.nav .sep{height:1px;background:var(--encre-2);margin:12px 22px}
.nav svg{width:18px;height:18px;flex:none;opacity:.85}

main{padding:28px 34px 80px;max-width:1320px;width:100%}
h1{font-family:var(--num);font-weight:600;font-size:34px;line-height:1.1;margin:0}
h2{font-family:var(--num);font-weight:600;font-size:22px;margin:0 0 12px}
h3{font-size:15px;font-weight:600;margin:0 0 8px;color:var(--doux)}
.entete{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.entete p{margin:4px 0 0;color:var(--doux)}
.outils{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--givre);background:var(--papier);color:var(--texte);
  font:500 14px Barlow,sans-serif;padding:7px 13px;border-radius:6px;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--eau);color:var(--eau)}
.btn.plein{background:var(--eau);border-color:var(--eau);color:#fff}
.btn.plein:hover{background:#186a8b}
.btn.danger{color:var(--rouge)}
.btn.mini{padding:3px 8px;font-size:13px}
.lien-x{background:none;border:0;color:var(--doux);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px}
.lien-x:hover{color:var(--rouge)}

/* blocs */
.bloc{background:var(--papier);border:1px solid var(--givre);border-radius:8px;padding:18px 20px;margin-bottom:18px}
.grille{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-1-2{grid-template-columns:1fr 2fr}

/* chiffres clés : une bande, pas des cartes */
.bande{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--papier);border:1px solid var(--givre);border-radius:8px;margin-bottom:18px}
.bande>div{padding:14px 18px;border-right:1px solid var(--givre-2)}
.bande>div:last-child{border-right:0}
.bande small{display:block;color:var(--doux);font-size:13px}
.bande b{font-family:var(--num);font-weight:600;font-size:28px;line-height:1.15;font-variant-numeric:tabular-nums}
.bande em{font-style:normal;font-size:13px;color:var(--doux)}

/* tableaux */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:7px 9px;border-bottom:1px solid var(--givre-2);text-align:left;vertical-align:middle}
th{font-weight:600;font-size:13px;color:var(--doux);background:var(--givre-2);position:sticky;top:0}
td.n,th.n{text-align:right;font-family:var(--num);font-size:16px}
th.n{font-family:Barlow,sans-serif;font-size:13px}
tr.total td{font-weight:600;border-top:2px solid var(--givre);background:#f7fafb}
tbody tr:hover td{background:#f6fafc}
.defile{overflow-x:auto}
.vide{color:var(--doux);padding:16px 0}
.neg{color:var(--rouge)} .pos{color:var(--vert)} .att{color:var(--ambre)}
.pastille{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;font-weight:600}
.p-maison{background:var(--eau-pale);color:var(--eau)} .p-usine{background:var(--ambre-pale);color:var(--ambre)} .p-fin{background:var(--givre-2);color:var(--doux)}

/* formulaires */
input,select,textarea{font:inherit;border:1px solid var(--givre);border-radius:5px;padding:6px 8px;background:#fff;color:var(--texte)}
input:focus,select:focus,textarea:focus{border-color:var(--eau);outline:none;box-shadow:0 0 0 3px var(--eau-pale)}
input.n{text-align:right;font-family:var(--num);font-size:17px;width:100%;min-width:64px;padding:5px 7px}
input.n::placeholder{color:#a6b8c2}
label{font-size:13px;color:var(--doux);display:block;margin-bottom:3px}
.champ{margin-bottom:10px}
.ligne-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.ligne-form .champ{margin:0}

/* messages */
.flash{padding:10px 14px;border-radius:6px;margin-bottom:16px;font-weight:500}
.flash.ok{background:var(--vert-pale);color:var(--vert)} .flash.err{background:var(--rouge-pale);color:var(--rouge)}
.note{font-size:13px;color:var(--doux)}

/* ---------- cahier journalier ---------- */
.date-nav{display:flex;align-items:center;gap:6px}
.date-nav input{font-family:var(--num);font-size:18px;padding:4px 8px}
.flux{display:grid;gap:10px;margin-bottom:6px}
.flux-ligne{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 12px;
  background:var(--papier);border:1px solid var(--givre);border-radius:8px;padding:12px 18px}
.flux-ligne .code{font-family:var(--num);font-weight:700;font-size:26px;color:var(--encre);width:56px;align-self:center}
.flux-ligne .t{display:flex;flex-direction:column;align-items:flex-end;min-width:70px}
.flux-ligne .t small{font-size:12px;color:var(--doux)}
.flux-ligne .t b{font-family:var(--num);font-weight:600;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.flux-ligne .op{font-family:var(--num);font-size:28px;color:#9db4c0}
.flux-ligne .t.final b{color:var(--eau)}
.flux-ligne .ecart{font-size:14px;margin-left:auto;align-self:center;color:var(--doux)}
.flux-ligne .ecart b{font-family:var(--num);font-size:20px}
.sec{font-family:var(--num);font-weight:600;font-size:22px;margin:26px 0 10px;display:flex;align-items:baseline;gap:10px}
.sec small{font-family:Barlow,sans-serif;font-weight:400;font-size:13px;color:var(--doux)}
.tab-cahier td{padding:5px 6px}
.tab-cahier td.calc{font-family:var(--num);font-size:17px;text-align:right;color:var(--doux);white-space:nowrap}
.tab-cahier td.fort{color:var(--texte);font-weight:600}
.tab-cahier .nom{font-weight:600;white-space:nowrap}
.tab-cahier input.n{max-width:110px}
.dep-ligne td{padding:4px 6px}
.barre-bas{position:fixed;left:220px;right:0;bottom:0;background:var(--encre);color:#fff;display:flex;gap:28px;align-items:center;
  padding:10px 34px;z-index:5}
.barre-bas div small{display:block;font-size:12px;color:#8fb2c3}
.barre-bas div b{font-family:var(--num);font-size:24px;font-weight:600}
.barre-bas .btns{margin-left:auto;display:flex;gap:8px}
.barre-bas .btn{background:transparent;color:#fff;border-color:#3c6378}
.barre-bas .btn.plein{background:#2b93bd;border-color:#2b93bd}
.bob-liste{display:flex;flex-wrap:wrap;gap:8px}
.bob{display:flex;align-items:center;gap:6px;border:1px solid var(--givre);border-radius:6px;padding:5px 10px;background:#fff;font-size:14px}
.bob input{margin:0}
.bob.fin{background:var(--givre-2);color:var(--doux);text-decoration:line-through}

/* calendrier des journées */
.semaine{display:grid;grid-template-columns:110px repeat(7,1fr);gap:6px;margin-bottom:6px}
.semaine .lib{font-family:var(--num);font-weight:600;font-size:16px;align-self:center;color:var(--doux)}
.jour{display:block;background:var(--papier);border:1px solid var(--givre);border-radius:6px;padding:8px 10px;min-height:84px;text-decoration:none;color:var(--texte)}
.jour:hover{border-color:var(--eau)}
.jour.vide-j{background:transparent;border-style:dashed;color:var(--doux)}
.jour .dt{font-size:12px;color:var(--doux)}
.jour b{display:block;font-family:var(--num);font-size:20px;font-weight:600}
.jour .mini{font-size:12px;color:var(--doux)}

.chart-box{position:relative;height:280px}
/* ---------- comptes et accès ---------- */
.nav{display:flex;flex-direction:column}
.compte{margin-top:auto;padding:16px 22px 0;border-top:1px solid var(--encre-2)}
.compte b{display:block;color:#fff;font-weight:600}
.compte span{font-size:13px;color:#8fb2c3}
.compte-liens{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;font-size:13px;white-space:nowrap}
.nav .compte-liens a{padding:0;border:0;display:inline;color:#cfe1ea;text-decoration:underline;font-weight:400}
.nav .compte-liens a:hover{background:none}
.compte-liens form{margin:0}
.compte-liens button{background:none;border:0;padding:0;color:#cfe1ea;font:inherit;text-decoration:underline;cursor:pointer}
.compte-liens button:hover{color:#fff}
fieldset.fs{border:0;padding:0;margin:0;min-width:0}
.verrou{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--vert-pale);color:var(--vert);
  border-radius:8px;padding:10px 14px;margin-bottom:16px;font-weight:500}
.verrou form{margin-left:auto}
.barre-bas .etat{font-weight:500;color:#cfe1ea}
.role{display:inline-block;padding:1px 9px;border-radius:20px;font-size:12px;font-weight:600;background:var(--givre-2);color:var(--doux)}
.role.r-admin{background:var(--encre);color:#fff} .role.r-superviseur{background:var(--eau-pale);color:var(--eau)}
.role.r-magasinier{background:var(--ambre-pale);color:var(--ambre)} .role.r-coupeur{background:var(--vert-pale);color:var(--vert)}
tr.inactif td{color:#9aaab3}
/* page de connexion : le bloc de glace */
.porte{min-height:100vh;display:grid;grid-template-columns:1fr;place-items:center;padding:24px;background:var(--encre)}
.porte .glacon{width:100%;max-width:380px;background:var(--papier);border-radius:14px;padding:30px 30px 26px;
  box-shadow:0 0 0 6px rgba(124,196,224,.18)}
.porte .titre{font-family:var(--num);font-weight:700;font-size:40px;line-height:1;color:var(--encre);margin:0}
.porte .sous{color:var(--doux);margin:6px 0 22px}
.porte .champ input{width:100%;font-size:16px;padding:9px 10px}
.porte .btn.plein{width:100%;justify-content:center;padding:10px;font-size:16px;margin-top:6px}
.porte .err{background:var(--rouge-pale);color:var(--rouge);padding:9px 12px;border-radius:6px;margin-bottom:14px;font-weight:500}
.saisie-prod{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.saisie-prod .champ{margin:0;min-width:120px}
.saisie-prod input.n{font-size:26px;padding:8px 10px}
@media (max-width:900px){
  .nav{flex-direction:row}
  .compte{margin:8px 0 0;padding:10px 10px 4px;width:100%;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
  .compte-liens{margin:0 0 0 auto;flex-direction:row;gap:14px}
}

/* ---------- v2 : niveaux, indicateurs, bobines ---------- */
.niv{display:inline-block;padding:1px 8px;border-radius:5px;font-family:var(--num);font-weight:600;font-size:16px;line-height:1.35}
.niv-ok{background:var(--vert-pale);color:var(--vert)}
.niv-att{background:var(--ambre-pale);color:var(--ambre)}
.niv-alerte{background:var(--rouge-pale);color:var(--rouge)}
.niv-neutre{background:var(--givre-2);color:var(--doux)}
.p-service{background:var(--vert-pale);color:var(--vert)} .p-alerte{background:var(--rouge-pale);color:var(--rouge)}
tr.bob-fin td{background:var(--givre-2)}
.onglets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.onglets a{padding:7px 13px;border-radius:6px;text-decoration:none;color:var(--doux);font-weight:500;border:1px solid transparent}
.onglets a:hover{color:var(--eau)}
.onglets a.actif{background:var(--papier);border-color:var(--givre);color:var(--texte)}
.outils-bob{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--givre-2)}
.outils-bob .champ{margin:0}
.groupe-service{display:inline-flex;gap:6px;align-items:center;padding:4px;border-radius:7px;background:var(--vert-pale)}
.groupe-service .btn.plein{background:var(--vert);border-color:var(--vert)}
.apercu{font-size:14px;margin:-2px 0 12px;line-height:1.9}
.apercu b{font-family:var(--num);font-size:16px;background:var(--eau-pale);color:var(--encre);padding:1px 7px;border-radius:4px;margin-right:2px}
.bloc-retour{border-left:4px solid var(--rouge)}
.lien-mini{background:none;border:0;padding:0;margin-top:4px;color:var(--doux);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.lien-mini:hover{color:var(--rouge)}

.alertes-bandeau{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 18px;border-radius:8px;margin-bottom:18px;
  text-decoration:none;color:var(--texte);background:var(--papier);border:1px solid var(--givre);border-left-width:6px}
.alertes-bandeau.a-rouge{border-left-color:var(--rouge)} .alertes-bandeau.a-ambre{border-left-color:var(--ambre)} .alertes-bandeau.a-vert{border-left-color:var(--vert)}
.alertes-bandeau:hover{border-color:var(--eau)}
.alertes-bandeau .pastilles{display:flex;gap:6px}
.alertes-bandeau .msg{flex:1;min-width:200px;font-weight:500}
.alertes-bandeau .lien{color:var(--eau);font-weight:500;white-space:nowrap}
.pt{padding:2px 9px;border-radius:20px;font-size:13px;white-space:nowrap}
.pt b{font-family:var(--num);font-size:16px}
.pt-ok{background:var(--vert-pale);color:var(--vert)} .pt-att{background:var(--ambre-pale);color:var(--ambre)} .pt-alerte{background:var(--rouge-pale);color:var(--rouge)}

.feux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:8px}
.feu{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-radius:8px;border:2px solid transparent;cursor:pointer;font:inherit;text-align:left}
.feu b{font-family:var(--num);font-size:38px;line-height:1}
.feu span{font-weight:600}
.feu-ok{background:var(--vert-pale);color:var(--vert)} .feu-att{background:var(--ambre-pale);color:var(--ambre)} .feu-alerte{background:var(--rouge-pale);color:var(--rouge)}
.feu[aria-pressed="true"]{border-color:currentColor}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:8px}
.kpi{background:var(--papier);border:1px solid var(--givre);border-top:5px solid var(--givre);border-radius:8px;padding:14px 16px;scroll-margin-top:20px}
.kpi-ok{border-top-color:var(--vert)} .kpi-att{border-top-color:var(--ambre)} .kpi-alerte{border-top-color:var(--rouge)}
.kpi header{display:flex;flex-direction:column-reverse;gap:2px}
.kpi h3{margin:0;font-size:16px;font-weight:600}
.kpi .etat{font-size:13px;font-weight:600}
.kpi-ok .etat{color:var(--vert)} .kpi-att .etat{color:var(--ambre)} .kpi-alerte .etat{color:var(--rouge)}
.kpi .val{font-family:var(--num);font-weight:600;font-size:30px;line-height:1.1;margin:6px 0 0}
.kpi .cible{margin:2px 0 0;font-size:13px;color:var(--doux)}
.kpi .com{margin:10px 0 0}
.kpi .det{margin-top:10px;font-size:14px}
.kpi .det td{padding:4px 2px}
.kpi .det .niv{font-size:14px}
.note-resp{margin:12px 0 0;padding:8px 12px;background:var(--eau-pale);border-radius:6px}
.note-resp p{margin:0}
.note-resp footer{font-size:12px;color:var(--doux);margin-top:2px}
.ajout-com{margin-top:10px;font-size:14px}
.ajout-com summary{cursor:pointer;color:var(--eau)}
.ajout-com form{margin-top:8px}
@media (max-width:900px){ .feux{grid-template-columns:1fr} .feu b{font-size:30px} }

/* ---------- v3 : emballages ---------- */
.onglets.section{margin-bottom:6px}
.onglets button{padding:7px 13px;border-radius:6px;color:var(--doux);font:inherit;font-weight:500;border:1px solid transparent;background:none;cursor:pointer}
.onglets button.actif{background:var(--papier);border-color:var(--givre);color:var(--texte)}
.stock-emb{background:var(--papier);border:1px solid var(--givre);border-radius:8px;margin-bottom:8px}
.stock-emb td.big{font-family:var(--num);font-size:26px;font-weight:600}
.circuit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.circuit .fleche{font-size:26px;color:var(--doux)}
.col-c{display:flex;flex-direction:column;gap:8px}
.etape-c{background:var(--givre-2);border-radius:8px;padding:10px 14px;min-width:150px}
.etape-c small{display:block;color:var(--doux);font-size:13px}
.etape-c b{display:block;font-family:var(--num);font-size:28px;line-height:1.1}
.etape-c em{font-style:normal;font-size:13px;color:var(--doux)}
.etape-c.bon{background:var(--vert-pale)} .etape-c.abime{background:var(--ambre-pale)}
.col-c.tri{padding:10px;border:2px dashed var(--givre);border-radius:10px}
.col-c.tri .etape-c{min-width:200px;padding:7px 12px;border-left:5px solid var(--givre)}
.col-c.tri .etape-c b{font-size:22px}
.t-reint{border-left-color:var(--vert)!important} .t-recy{border-left-color:var(--eau)!important}
.t-four{border-left-color:var(--ambre)!important} .t-jete{border-left-color:var(--rouge)!important}
.reste{font-size:14px;color:var(--doux)}
.bloc-tri{border-left:4px solid var(--ambre)}
.grille-tri{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grille-tri input{width:100%}
.dispo{background:var(--givre-2);border-radius:6px;padding:6px 10px;margin:10px 0}
.regles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.regle{border-radius:8px;padding:10px 12px;border-left:5px solid}
.regle p{margin:4px 0 0;font-size:14px}
.r-reintegre{background:var(--vert-pale);border-color:var(--vert)} .r-retour_fourn{background:var(--ambre-pale);border-color:var(--ambre)}
.r-recycle{background:var(--eau-pale);border-color:var(--eau)} .r-rebut{background:var(--rouge-pale);border-color:var(--rouge)}
.bande.petite b{font-size:24px}
.mvt{white-space:nowrap}
.mvt-abime,.mvt-retour_fourn{color:var(--ambre)} .mvt-rebut,.mvt-refus_fourn{color:var(--rouge)} .mvt-reintegre,.mvt-remplace_fourn{color:var(--vert)}
input.invalide{border-color:var(--rouge);background:var(--rouge-pale)}
input.abime{border-color:var(--ambre)}

@media print{
  body{display:block;background:#fff} .nav,.outils,.barre-bas,.no-print{display:none!important}
  main{padding:0} .bloc{border:0;padding:0}
}
@media (max-width:900px){
  body{grid-template-columns:1fr}
  .nav{position:static;height:auto;display:flex;flex-wrap:wrap;padding:10px}
  .marque{border:0;padding:6px 10px;margin:0;width:100%}
  .nav a{padding:6px 10px;border-left:0}
  .nav .sep{display:none}
  main{padding:18px 14px 110px}
  .g2,.g3,.g-1-2{grid-template-columns:1fr}
  .barre-bas{left:0;padding:8px 14px;gap:14px;flex-wrap:wrap}
  .semaine{grid-template-columns:repeat(4,1fr)} .semaine .lib{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.pastille{white-space:nowrap}
td.code-bob{white-space:nowrap}
td.code-bob a b{font-family:var(--num);font-size:17px}
.niv{white-space:nowrap}
[hidden]{display:none!important}
main{min-width:0}
.grille>*{min-width:0}
@media (max-width:600px){ .circuit .fleche{transform:rotate(90deg);width:100%;text-align:center} .circuit>.etape-c,.col-c,.col-c.tri .etape-c{width:100%;min-width:0} .grille-tri{grid-template-columns:1fr} }