:root{
  --encre:#10243E;
  --encre-clair:#1D3A5F;
  --papier:#F4F5F7;
  --surface:#FFFFFF;
  --trait:#D5DAE1;
  --trait-fort:#A8B2BF;
  --texte:#1A2332;
  --texte-doux:#5B6675;
  --ambre:#E08600;
  --ambre-sombre:#B36B00;
  --vert:#1B7F4B;
  --rouge:#B3291E;
  --rayon:3px;
}

*{box-sizing:border-box}

html{font-size:16px}

body{
  margin:0;
  background:var(--papier);
  color:var(--texte);
  font-family:"Inter","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  font-size:.9375rem;
  line-height:1.5;
}

/* Les quantites doivent s'aligner verticalement dans les tableaux */
table,.nombre,input[type=number]{font-variant-numeric:tabular-nums}

a{color:var(--encre-clair)}

/* ----------------------------------------------------------- Structure */
.shell{display:flex;min-height:100vh}

.rail{
  width:14rem;flex:0 0 14rem;
  background:var(--encre);color:#fff;
  display:flex;flex-direction:column;
}
.rail-marque{padding:1.25rem 1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.14)}
.rail-marque-nom{display:block;font-weight:650;letter-spacing:-.01em}
.rail-marque-sous{display:block;font-size:.75rem;color:#93A6BF;margin-top:.1rem}
a.rail-marque{text-decoration:none;color:inherit;display:block}
a.rail-marque:hover .rail-logo{background:#fff}
/* Le logo porte du texte sombre : il lui faut un fond clair sur le rail navy */
.rail-logo{display:block;background:#FBFBFC;border-radius:8px;padding:.55rem .7rem;margin-bottom:.5rem}
.rail-logo img{display:block;width:100%;height:auto;max-height:44px;object-fit:contain}
.login-logo{display:block;margin:0 auto 1.25rem}
.login-logo img{display:block;margin:0 auto;max-width:14rem;max-height:3.5rem;object-fit:contain}
.apercu-logo{display:flex;flex-wrap:wrap;gap:1rem}
.apercu-logo>div{flex:1 1 15rem;border-radius:var(--rayon);padding:1rem;text-align:center}
.apercu-logo img{max-width:100%;max-height:4.5rem;object-fit:contain}
.apercu-logo span{display:block;margin-top:.6rem;font-size:.75rem}
.apercu-logo-clair{background:#fff;border:1px solid var(--trait)}
.apercu-logo-clair span{color:var(--texte-doux)}
.apercu-logo-sombre{background:var(--encre)}
.apercu-logo-sombre img{background:#FBFBFC;border-radius:8px;padding:.55rem .7rem}
.apercu-logo-sombre span{color:#93A6BF}

.rail-liens{list-style:none;margin:0;padding:.75rem 0;flex:1}
.rail-liens a{
  display:block;padding:.55rem 1.25rem;
  color:#C6D2E1;text-decoration:none;
  border-left:3px solid transparent;
}
.rail-liens a:hover{background:rgba(255,255,255,.06);color:#fff}
.rail-liens a[aria-current=page]{
  background:rgba(255,255,255,.09);color:#fff;
  border-left-color:var(--ambre);font-weight:600;
}

.rail-pied{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.14);font-size:.8125rem}
.rail-user{font-weight:600}
.rail-role{color:#93A6BF}
.rail-depot{
  margin-top:.5rem;padding:.3rem .5rem;
  background:rgba(224,134,0,.18);border-left:3px solid var(--ambre);
  color:#FFD9A0;font-size:.75rem;
}
.rail-sortie{display:inline-block;margin-top:.85rem;color:#93A6BF;font-size:.8125rem}

.zone{flex:1;padding:1.75rem 2rem;max-width:78rem}

/* -------------------------------------------------------------- Titres */
.titre-ligne{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;
}
h1{font-size:1.375rem;margin:0;letter-spacing:-.015em;font-weight:650}
h2{font-size:1.0625rem;margin:1.75rem 0 .75rem;font-weight:650}
.sous-titre{color:var(--texte-doux);margin:.25rem 0 0;font-size:.875rem}

/* ------------------------------------------------------------- Tableaux */
.cadre{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon)}

table{width:100%;border-collapse:collapse;background:var(--surface)}
thead th{
  text-align:left;padding:.6rem .75rem;
  background:#EAEDF1;border-bottom:1px solid var(--trait-fort);
  font-size:.8125rem;font-weight:650;color:#33405270;
  color:#334052;
}
tbody td{padding:.6rem .75rem;border-bottom:1px solid var(--trait)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#F7F9FB}
td.actions{text-align:right;white-space:nowrap}
.num{text-align:right;white-space:nowrap}

.vide{padding:2.5rem 1.5rem;text-align:center;color:var(--texte-doux)}
.vide p{margin:0 0 1rem}

/* -------------------------------------------------------------- Etats */
.etat{display:inline-block;padding:.1rem .45rem;border-radius:var(--rayon);font-size:.75rem;font-weight:600}
.etat-actif{background:#E3F2E9;color:var(--vert);border:1px solid #B6DCC6}
.etat-inactif{background:#EFF1F4;color:var(--texte-doux);border:1px solid var(--trait)}
.etat-principal{background:#FFF1DB;color:var(--ambre-sombre);border:1px solid #F0CE96}

.role-tag{font-size:.8125rem;color:var(--texte-doux)}

.etat-alerte{background:#FBEBE9;color:var(--rouge);border:1px solid #E2B5B0}
/* En route : ni sorti ni arrive — l'ambre signale l'attente */
.etat-transit{background:#FFF1DB;color:var(--ambre-sombre);border:1px solid #F0CE96}

.ligne-inactive td{opacity:.55}

/* Signe du mouvement : le lecteur doit voir entree/sortie sans lire le chiffre */
.mvt-plus{color:var(--vert);font-weight:600}
.mvt-moins{color:var(--rouge);font-weight:600}

tfoot td{border-top:2px solid var(--trait-fort);font-weight:650;background:#EAEDF1}

/* ------------------------------------------------------- Barre de filtres */
.barre-filtres{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:.75rem .9rem;margin-bottom:1.25rem;
}
.barre-filtres input[type=search],.barre-filtres select{
  padding:.45rem .6rem;border:1px solid var(--trait-fort);border-radius:var(--rayon);
  font:inherit;background:var(--surface);color:var(--texte);
}
.barre-filtres input[type=search]{min-width:18rem;flex:1}
.barre-filtres .case{font-size:.875rem;white-space:nowrap}

/* ------------------------------------------------- Etapes d'un transfert */
.etapes{display:flex;gap:0}
.etape{
  flex:1;padding:.5rem .9rem;border-left:3px solid var(--trait);
  font-size:.8125rem;
}
.etape:first-child{border-left-width:3px}
.etape.faite{border-left-color:var(--ambre)}
.etape strong{display:block;color:var(--texte-doux);font-weight:600}
.etape.faite strong{color:var(--texte)}
.etape span{color:var(--texte-doux)}

.avis-transit{background:#FFF1DB;border:1px solid #F0CE96;color:#7A4A00}

/* Totaux d'un document de vente : la ligne du net a payer domine */
.totaux-doc{
  margin-top:1rem;margin-left:auto;max-width:26rem;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
}
.totaux-doc>div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem .9rem;border-bottom:1px solid var(--trait);
  font-variant-numeric:tabular-nums;
}
.totaux-doc>div:last-child{border-bottom:none}
.totaux-doc span{color:var(--texte-doux);font-size:.875rem}
.totaux-doc .total-fort{background:#FFF6E8;border-top:2px solid var(--encre);font-size:1.0625rem}
.totaux-doc .total-fort span{color:var(--texte);font-weight:600;font-size:1rem}
.totaux-doc .marge-ok strong{color:var(--vert)}
.totaux-doc .marge-ko strong{color:var(--rouge)}

/* Onglets des etats : la page courante porte le trait ambre */
.onglets{
  display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1.25rem;
  border-bottom:1px solid var(--trait);
}
.onglets a{
  padding:.5rem .85rem;text-decoration:none;color:var(--texte-doux);
  border-bottom:3px solid transparent;font-size:.9375rem;
}
.onglets a:hover{color:var(--texte);background:#EDEFF3}
.onglets a[aria-current=page]{
  color:var(--texte);font-weight:600;border-bottom-color:var(--ambre);
}

/* Zone de scan : toujours visible, meme en faisant defiler l'inventaire */
.scan-zone{
  padding:1rem 1.25rem;margin-bottom:1.25rem;
  border-left:3px solid var(--ambre);
  position:sticky;top:0;z-index:5;
}
.scan-zone input{font-size:1.0625rem}

/* Paires libelle / valeur d'un en-tete de document en lecture seule */
.paires{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem 1.25rem}
.paires>div{display:flex;flex-direction:column}
.paires span{font-size:.75rem;color:var(--texte-doux)}
.paires strong{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- Boutons */
.btn{
  display:inline-block;padding:.45rem .9rem;border-radius:var(--rayon);
  border:1px solid var(--trait-fort);background:var(--surface);color:var(--texte);
  font:inherit;font-size:.875rem;font-weight:550;cursor:pointer;text-decoration:none;
}
.btn:hover{background:#F0F2F5}
.btn-principal{background:var(--ambre);border-color:var(--ambre-sombre);color:#fff}
.btn-principal:hover{background:var(--ambre-sombre)}
.btn-danger{color:var(--rouge);border-color:#E2B5B0}
.btn-danger:hover{background:#FBEFEE}
.btn-mini{padding:.25rem .55rem;font-size:.8125rem}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--encre-clair);outline-offset:2px;
}

/* --------------------------------------------------------- Formulaires */
.form{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.5rem;max-width:44rem}
.champs{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.25rem}
.champ{display:flex;flex-direction:column;gap:.3rem}
.champ-large{grid-column:1/-1}
.champ label{font-size:.8125rem;font-weight:600;color:#334052}
.champ input,.champ select{
  padding:.5rem .6rem;border:1px solid var(--trait-fort);border-radius:var(--rayon);
  font:inherit;background:var(--surface);color:var(--texte);
}
.champ input:disabled,.champ select:disabled{background:#EFF1F4;color:var(--texte-doux)}
.aide{font-size:.75rem;color:var(--texte-doux)}
.form-actions{display:flex;gap:.6rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--trait)}
.case{display:flex;align-items:center;gap:.5rem}
.case input{width:auto}

/* --------------------------------------------------------------- Avis */
.avis{padding:.7rem .9rem;border-radius:var(--rayon);margin:0 0 1.25rem;font-size:.875rem}
.avis-ok{background:#E3F2E9;border:1px solid #B6DCC6;color:#14603A}
.avis-ko{background:#FBEBE9;border:1px solid #E2B5B0;color:#8F211A}

/* -------------------------------------------------------------- Chiffres */
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;margin-bottom:.5rem}
.compteur{background:var(--surface);border:1px solid var(--trait);border-left:3px solid var(--encre);border-radius:var(--rayon);padding:1rem 1.1rem}
.compteur-val{font-size:1.75rem;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.compteur-lib{font-size:.8125rem;color:var(--texte-doux);margin-top:.15rem}

/* ------------------------------------------------------------ Connexion */
.ecran-login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--encre);padding:1.5rem}
.carte-login{background:var(--surface);border-radius:var(--rayon);padding:2rem;width:100%;max-width:23rem}
.carte-login h1{font-size:1.25rem;margin-bottom:.25rem}
.carte-login .sous-titre{margin-bottom:1.5rem}
.carte-login .champ{margin-bottom:1rem}
.carte-login .btn{width:100%;text-align:center;padding:.6rem}

/* ------------------------------------------------------------ Responsive */
@media (max-width:820px){
  .shell{flex-direction:column}
  .rail{width:100%;flex:none}
  .rail-liens{display:flex;flex-wrap:wrap;padding:.25rem}
  .rail-liens a{border-left:none;border-bottom:3px solid transparent;padding:.5rem .9rem}
  .rail-liens a[aria-current=page]{border-left-color:transparent;border-bottom-color:var(--ambre)}
  .rail-pied{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
  .rail-depot{margin-top:0}
  .zone{padding:1.25rem 1rem}
  .champs{grid-template-columns:1fr}
  table{font-size:.875rem}
  .barre-filtres input[type=search]{min-width:0;width:100%}
  .etapes{flex-direction:column}
  .etape{border-left:none;border-top:3px solid var(--trait)}
  .etape.faite{border-top-color:var(--ambre)}
  /* Les tableaux larges defilent au doigt plutot que de deborder */
  .cadre{overflow-x:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ------------------------------------------------- Jauges d'objectif */
.jauge{position:relative;height:.65rem;background:#EDEFF3;border-radius:2px;
       display:inline-block;width:calc(100% - 4.25rem);vertical-align:middle}
.jauge-barre{height:100%;border-radius:2px;max-width:100%}
.jauge-ok.jauge-barre{background:var(--vert)}
.jauge-retard.jauge-barre{background:var(--ambre)}
/* Le repere marque le rythme attendu a ce jour : a gauche = en retard */
/* Le repere deborde volontairement la barre : a 100 % il resterait
   invisible s'il etait rogne par le cadre. */
.jauge-repere{position:absolute;top:-3px;bottom:-3px;width:2px;
              background:var(--encre);transform:translateX(-1px)}
.jauge-val{display:inline-block;width:3rem;margin-left:.5rem;text-align:right;
           font-size:.8125rem;font-weight:600;white-space:nowrap}
.jauge-val.jauge-ok{color:var(--vert)}
.jauge-val.jauge-retard{color:var(--ambre-sombre)}

/* ------------------------------------------------------- Graphiques */
.graphes{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem;margin-bottom:1.75rem}
.graphe{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.25rem}
.graphe h3{margin:0 0 .15rem;font-size:1rem}
.graphe .aide{display:block;margin-bottom:1rem}
.graphe svg{display:block;width:100%;height:auto;overflow:visible}
.g-grille{stroke:#E6EAEF;stroke-width:1}
.g-axe{fill:var(--texte-doux);font-size:10px}
.g-ligne{fill:none;stroke:var(--encre);stroke-width:2}
.g-aire{fill:rgba(16,36,62,.07)}
.g-point{fill:var(--encre)}
.g-barre{fill:var(--encre)}
.g-barre-2{fill:var(--ambre)}
.g-valeur{fill:var(--texte);font-size:10px;font-weight:600}