/* =====================================================================
   AGTL EXPRESS — Feuille de style
   Palette issue du logo : rouge cargo, bleu profond, gris entrepôt
   ===================================================================== */
:root{
  --rouge:#D8202A; --rouge-fonce:#A9151E;
  --bleu:#1B3A8B;  --bleu-nuit:#0E1E42; --bleu-clair:#EAEFFA;
  --encre:#16192B; --gris:#6A7288; --trait:#E2E6EF; --fond:#F5F7FB; --blanc:#fff;
  --vert:#0E8A4F; --ambre:#B8730B;
  --r:10px; --ombre:0 1px 2px rgba(16,25,60,.06),0 8px 24px rgba(16,25,60,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font:15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--bleu);text-decoration:none}
h1,h2,h3{font-family:"Barlow Condensed",Inter,sans-serif;letter-spacing:.2px;margin:0}
h2{font-size:22px;text-transform:uppercase}
h3{font-size:18px;text-transform:uppercase;color:var(--bleu-nuit)}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}

/* ------------------------------------------------------------ CADRE */
.app{display:flex;min-height:100vh}
.rail{width:242px;flex:none;background:var(--bleu-nuit);color:#C8D2EA;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.rail-marque{padding:18px 16px 12px;border-bottom:1px solid rgba(255,255,255,.09);background:#fff}
.rail-marque img{max-width:100%;height:44px;object-fit:contain;display:block}
.marque-txt{font-family:"Barlow Condensed";font-size:26px;line-height:1}
.marque-txt b{color:var(--rouge)}.marque-txt span{color:var(--bleu)}
.rail nav{padding:10px 8px;overflow:auto;flex:1}
.rail nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:#C8D2EA;font-size:14px;font-weight:500;margin-bottom:2px}
.rail nav a svg{width:18px;height:18px;flex:none;opacity:.75}
.rail nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.rail nav a.actif{background:var(--rouge);color:#fff}
.rail nav a.actif svg{opacity:1}
.pastille{margin-left:auto;background:var(--rouge);color:#fff;font-style:normal;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px}
.rail nav a.actif .pastille{background:#fff;color:var(--rouge)}
.rail-pied{padding:12px 14px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:8px}
.qui{flex:1;min-width:0;font-size:13px}
.qui strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qui span{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;opacity:.65}
.quitter{color:#C8D2EA;font-size:12.5px;border:1px solid rgba(255,255,255,.25);padding:5px 9px;border-radius:7px}
.quitter:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}

.zone{flex:1;min-width:0;display:flex;flex-direction:column}
.barre{display:flex;align-items:center;gap:14px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:5}
.barre h1{font-size:24px;flex:1;text-transform:uppercase}
.burger{display:none;background:none;border:1px solid var(--trait);border-radius:8px;font-size:16px;padding:6px 10px;cursor:pointer}
.recherche{display:flex;gap:6px}
.recherche input{width:250px;padding:8px 12px;border:1px solid var(--trait);border-radius:8px;background:var(--fond);font:inherit;font-size:14px}
.recherche button{border:0;background:var(--bleu-nuit);color:#fff;border-radius:8px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer}
.contenu{padding:22px;flex:1}
.pied-page{padding:16px 22px;color:var(--gris);font-size:12.5px;border-top:1px solid var(--trait)}

/* ----------------------------------------------------------- BLOCS */
.carte{background:#fff;border:1px solid var(--trait);border-radius:var(--r);box-shadow:var(--ombre);margin-bottom:18px;overflow:hidden}
.carte>header{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--trait);background:#fff}
.carte>header h2,.carte>header h3{flex:1}
.carte .corps{padding:16px}
.grille{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}

.kpi{background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:14px 16px;box-shadow:var(--ombre);position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--bleu)}
.kpi.r:before{background:var(--rouge)}.kpi.v:before{background:var(--vert)}.kpi.a:before{background:var(--ambre)}
.kpi b{display:block;font-family:"Barlow Condensed";font-size:29px;line-height:1.1;color:var(--bleu-nuit)}
.kpi span{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);font-weight:600}
.kpi small{display:block;margin-top:3px;color:var(--gris);font-size:12px}

/* --------------------------------------------------------- TABLEAUX */
.tab-defile{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);font-weight:700;padding:10px 12px;background:#FAFBFE;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--trait);vertical-align:middle}
tbody tr:hover{background:#FBFCFF}
tfoot td{background:#FAFBFE;font-weight:700;border-top:2px solid var(--trait)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.vide{padding:34px 16px;text-align:center;color:var(--gris)}
.vide b{display:block;color:var(--encre);font-size:15px;margin-bottom:4px}

/* --------------------------------------------------------- ETIQUETTES */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;background:var(--bleu-clair);color:var(--bleu);white-space:nowrap}
.b-livre,.b-confirme,.b-cloture{background:#E3F5EC;color:var(--vert)}
.b-en_entrepot,.b-arrive{background:#FFF2DC;color:var(--ambre)}
.b-en_livraison,.b-en_distribution{background:var(--bleu-clair);color:var(--bleu)}
.b-non_reclame,.b-retourne,.b-annule{background:#FDE6E7;color:var(--rouge-fonce)}
.b-en_transit,.b-en_attente{background:#EEF0F5;color:var(--gris)}
.puce{display:inline-block;padding:2px 8px;border-radius:6px;background:#EEF0F5;color:var(--gris);font-size:11.5px;font-weight:600}
.puce.r{background:#FDE6E7;color:var(--rouge-fonce)}
.puce.v{background:#E3F5EC;color:var(--vert)}

/* ------------------------------------------------------- FORMULAIRES */
label{display:block;font-size:12px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--trait);border-radius:8px;font:inherit;font-size:14px;background:#fff;color:var(--encre)}
input:focus,select:focus,textarea:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(27,58,139,.12)}
input[readonly]{background:#F3F5FA;color:var(--gris)}
.champ{margin-bottom:13px}
.ligne{display:grid;gap:12px}
.aide{font-size:12px;color:var(--gris);margin-top:4px;text-transform:none;letter-spacing:0;font-weight:400}
.btn{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--rouge);color:#fff;padding:9px 16px;border-radius:8px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--rouge-fonce)}
.btn.bleu{background:var(--bleu-nuit)}.btn.bleu:hover{background:var(--bleu)}
.btn.clair{background:#fff;color:var(--encre);border:1px solid var(--trait)}
.btn.clair:hover{background:var(--fond)}
.btn.mini{padding:5px 10px;font-size:12.5px}
.btn.vert{background:var(--vert)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px 16px;background:#fff;border:1px solid var(--trait);border-radius:var(--r);margin-bottom:16px}
.filtres .champ{margin:0;min-width:150px}
.flash{padding:12px 16px;border-radius:var(--r);margin-bottom:16px;font-weight:500;border:1px solid}
.flash.ok{background:#E9F7F0;border-color:#B6E3CD;color:#0B6C3F}
.flash.ko{background:#FDECED;border-color:#F5C2C6;color:#9C1420}
.flash.info{background:var(--bleu-clair);border-color:#C3D2F2;color:var(--bleu)}

/* --------------------------------------------------- BANDEAU ARRIVAGE
   Signature visuelle : la route du fret, façon carte d'embarquement.  */
.route{display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(100deg,var(--bleu-nuit),#1D3268 60%,var(--rouge-fonce));color:#fff;border-radius:var(--r);margin-bottom:18px;flex-wrap:wrap}
.route .ville{font-family:"Barlow Condensed";font-size:27px;line-height:1;text-transform:uppercase}
.route .ville small{display:block;font-family:Inter;font-size:11px;letter-spacing:1px;opacity:.7;font-weight:600}
.route .fil{flex:1;min-width:80px;height:1px;background:rgba(255,255,255,.35);position:relative}
.route .fil:after{content:"";position:absolute;right:-1px;top:-3px;border:3px solid transparent;border-left-color:rgba(255,255,255,.7)}
.route .fil span{position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:var(--rouge);font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.6px}
.route .ref{margin-left:auto;text-align:right}
.route .ref b{font-family:ui-monospace,monospace;font-size:15px;letter-spacing:1px;display:block}
.route .ref span{font-size:11.5px;opacity:.75}

.onglets{display:flex;gap:4px;border-bottom:1px solid var(--trait);margin-bottom:16px;overflow-x:auto}
.onglets a{padding:9px 14px;font-size:14px;font-weight:600;color:var(--gris);border-bottom:2px solid transparent;white-space:nowrap}
.onglets a.actif{color:var(--rouge);border-bottom-color:var(--rouge)}

/* ------------------------------------------------------- IMPRESSION */
.impression{max-width:900px;margin:0 auto;background:#fff;padding:28px}
.impression .entete-doc{display:flex;align-items:flex-start;gap:16px;border-bottom:3px solid var(--rouge);padding-bottom:14px;margin-bottom:18px}
.impression .entete-doc img{height:56px}
@media print{
  .rail,.barre,.pied-page,.noprint{display:none!important}
  body{background:#fff}.contenu{padding:0}.carte{box-shadow:none;border:0}
  .impression{padding:0;max-width:none}
  table{font-size:11.5px}th,td{padding:5px 7px}
  .route{background:#0E1E42!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:1100px){.g5,.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .rail{position:fixed;left:-260px;z-index:40;transition:left .2s}
  .rail.ouvert{left:0;box-shadow:0 0 0 100vw rgba(0,0,0,.4)}
  .burger{display:block}
  .recherche input{width:130px}
  .g5,.g4,.g3,.g2{grid-template-columns:1fr}
  .contenu{padding:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}