:root{
  --encre:#1c2b3a; --encre-2:#3d5266;
  --papier:#f1f3f2; --carte:#ffffff; --trait:#d9dfdd;
  --securite:#f2b705; --securite-fond:#fdf3d0;
  --fait:#2e7d4f; --fait-fond:#e2f0e7;
  --alerte:#c04a24; --alerte-fond:#f7e3da;
  --encours:#2a6f97; --encours-fond:#dfecf4;
  --neutre-fond:#e7ebe9;
  --presta:#6a4c93; --presta-fond:#ece5f4;
  --itineraire:#1f5fd0; --arret:#1faa5c; --remarque:#f0a500;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Barlow',sans-serif;background:var(--papier);color:var(--encre);font-size:15px;line-height:1.45}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;letter-spacing:.01em}

header{background:var(--encre);color:#fff;padding:14px 24px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
header .sur-titre{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#aebfcc;margin-bottom:2px}
header h1{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
header .compte{display:flex;align-items:center;gap:10px;font-size:13px;color:#dbe4ea;white-space:nowrap;padding-top:4px}
header .compte a,header .compte button{color:#dbe4ea;text-decoration:none;background:none;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:4px 10px;cursor:pointer;font-family:'Barlow',sans-serif;font-size:13px}
header .compte a:hover,header .compte button:hover{background:rgba(255,255,255,.15);color:#fff}
.marquage{height:10px;background:repeating-linear-gradient(-45deg,var(--securite) 0 14px,var(--encre) 14px 28px)}

/* ---------- Bandeau jour ---------- */
.bandeau-jour{background:var(--encre-2);color:#fff;padding:9px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:900}
.bandeau-jour .semaine{display:flex;gap:5px;overflow-x:auto;flex:1;min-width:230px}
.jour-chip{
  background:rgba(255,255,255,.09);border:1px solid transparent;border-radius:5px;color:#dbe4ea;
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;padding:4px 9px 3px;cursor:pointer;
  min-width:56px;text-align:center;line-height:1.15;white-space:nowrap;
}
.jour-chip .n{font-size:19px;display:block;font-variant-numeric:tabular-nums}
.jour-chip:hover{background:rgba(255,255,255,.18);color:#fff}
.jour-chip.selection{background:var(--securite);color:var(--encre);border-color:#fff}
.jour-chip.aujourdhui:not(.selection){border-color:var(--securite);color:#fff}
.jour-chip .pastilles{display:block;height:6px;margin-top:2px}
.jour-chip .pastilles i{display:inline-block;width:5px;height:5px;border-radius:50%;margin:0 1px}
.p-tournee{background:#9fd4ff}
.p-devi{background:var(--securite)}
.p-remp{background:#ffb1a0}
.jour-chip.selection .p-tournee{background:var(--encre)}
.jour-chip.selection .p-devi{background:#7a5c00}
.jour-chip.selection .p-remp{background:var(--alerte)}
.bandeau-jour button.nav{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:4px;padding:3px 9px;cursor:pointer;font-size:15px}
.bandeau-jour button.nav:hover{background:rgba(255,255,255,.15)}
.bandeau-jour .libelle{font-family:'Barlow Condensed',sans-serif;font-size:18px;text-transform:capitalize;white-space:nowrap}
.bandeau-jour input[type=date]{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:4px;padding:3px 6px;font-family:'Barlow',sans-serif;font-size:13px}

nav{background:var(--carte);border-bottom:1px solid var(--trait);padding:0 24px;display:flex;gap:2px;overflow-x:auto}
nav button{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:none;border:none;border-bottom:4px solid transparent;padding:12px 12px 9px;cursor:pointer;color:var(--encre-2);white-space:nowrap}
nav button:hover{color:var(--encre)}
nav button.actif{color:var(--encre);border-bottom-color:var(--securite)}
nav button:focus-visible{outline:2px solid var(--encours);outline-offset:-2px}

main{max-width:1200px;margin:0 auto;padding:22px 24px 60px}
.vue{display:none}
.vue.active{display:block}
.intro{color:var(--encre-2);margin-bottom:18px;max-width:78ch}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--carte);border:1px solid var(--trait);border-radius:6px;padding:14px 16px}
.kpi .valeur{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kpi .libelle{font-size:13px;color:var(--encre-2);margin-top:4px}
.kpi.attention .valeur{color:var(--alerte)}
.kpi.ok .valeur{color:var(--fait)}

.bloc{background:var(--carte);border:1px solid var(--trait);border-radius:6px;padding:16px 18px;margin-bottom:18px}
.bloc h2{font-size:20px;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--trait)}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.deux-col{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:left;color:var(--encre-2);padding:7px 10px;border-bottom:2px solid var(--encre)}
td{padding:8px 10px;border-bottom:1px solid var(--trait);vertical-align:middle}
tr:last-child td{border-bottom:none}
.num{font-variant-numeric:tabular-nums}

.badge{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap}
.b-afaire{background:var(--securite-fond);color:#8a6a00}
.b-encours{background:var(--encours-fond);color:var(--encours)}
.b-fait{background:var(--fait-fond);color:var(--fait)}
.b-nouveau{background:var(--alerte-fond);color:var(--alerte)}
.b-planifie{background:var(--encours-fond);color:var(--encours)}
.b-traite{background:var(--fait-fond);color:var(--fait)}
.b-bon{background:var(--fait-fond);color:var(--fait)}
.b-areparer{background:var(--securite-fond);color:#8a6a00}
.b-aremplacer{background:var(--alerte-fond);color:var(--alerte)}
.b-remise{background:var(--neutre-fond);color:var(--encre-2)}
.b-sorti{background:var(--encours-fond);color:var(--encours)}
.b-maintenance{background:var(--alerte-fond);color:var(--alerte)}
.b-presta{background:var(--presta-fond);color:var(--presta)}
.b-regie{background:var(--neutre-fond);color:var(--encre-2)}
.b-modif{background:var(--securite-fond);color:#8a6a00}
.b-remplacant{background:var(--encours-fond);color:var(--encours)}
.b-vacant{background:var(--alerte-fond);color:var(--alerte)}
.b-renfort{background:var(--fait-fond);color:var(--fait)}

.btn{font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;border:1px solid var(--encre);background:var(--carte);color:var(--encre);border-radius:4px;padding:4px 10px;cursor:pointer}
.btn:hover{background:var(--encre);color:#fff}
.btn.plein{background:var(--encre);color:#fff}
.btn.plein:hover{background:var(--encre-2)}
.btn.discret{border-color:var(--trait);color:var(--encre-2)}
.btn.mini{padding:1px 7px;font-size:12.5px}
.btn:focus-visible{outline:2px solid var(--encours);outline-offset:1px}
.btn:disabled{opacity:.55;cursor:default}

.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;align-items:center}
.filtres label,.form-ligne label,.champ label{font-size:13px;font-weight:600;color:var(--encre-2)}
select,input[type=text],input[type=date],input[type=password]{font-family:'Barlow',sans-serif;font-size:13.5px;padding:5px 7px;border:1px solid var(--trait);border-radius:4px;background:#fff;color:var(--encre);max-width:100%}
select:focus,input:focus{outline:2px solid var(--encours);outline-offset:1px}

.barre-ligne{display:grid;grid-template-columns:150px 1fr 46px;gap:10px;align-items:center;margin-bottom:8px;font-size:14px}
.barre-fond{background:var(--papier);border-radius:3px;height:16px;overflow:hidden}
.barre-rempli{background:var(--encre);height:100%;border-radius:3px;transition:width .4s ease}

.form-ligne{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:end}
.champ{display:flex;flex-direction:column;gap:3px;min-width:130px;flex:1}
.note-pied{font-size:12.5px;color:var(--encre-2);margin-top:26px;border-top:1px solid var(--trait);padding-top:10px}
.avertissement{color:var(--alerte);font-size:13px;font-weight:600}
.aide{font-size:12.5px;color:var(--encre-2)}
.erreur{color:var(--alerte);font-size:13.5px;font-weight:600;margin-top:10px}
.ligne-agent{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.remplace{text-decoration:line-through;color:var(--encre-2)}
.fleche{color:var(--encre-2)}

/* ---------- Carte façon UNICO ---------- */
.zone-carte{display:grid;grid-template-columns:290px 1fr;gap:14px}
@media (max-width:900px){.zone-carte{grid-template-columns:1fr}}
#carte-circuits{height:470px;border:1px solid var(--trait);border-radius:8px}
@media (max-width:640px){#carte-circuits{height:340px}}
.panneau-arrets{background:var(--carte);border:1px solid var(--trait);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;max-height:470px}
.panneau-arrets .entete{padding:10px 12px;border-bottom:1px solid var(--trait)}
.panneau-arrets .entete .titre{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;line-height:1.1}
.panneau-arrets .entete .meta{font-size:12.5px;color:var(--encre-2);margin-top:2px}
.panneau-arrets ol{list-style:none;overflow-y:auto;flex:1}
.panneau-arrets li{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--trait);font-size:13.5px}
.panneau-arrets li:nth-child(even){background:#fafbfb}
.rang{background:var(--arret);color:#fff;font-weight:700;font-size:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.panneau-arrets li .nom{flex:1;min-width:0;overflow-wrap:anywhere}
.panneau-arrets .vide{padding:14px 12px;color:var(--encre-2);font-size:13px}
.pin-arret{background:var(--arret);color:#fff;font-weight:700;font-size:12px;width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.35);border:2px solid #fff}
.pin-arret span{transform:rotate(45deg)}
.pin-remarque{background:var(--remarque);color:#fff;font-weight:700;font-size:14px;width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.35);border:2px solid #fff}
.pin-remarque span{transform:rotate(45deg)}
.outils-carte{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;align-items:end}
.km-affiche{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;padding-bottom:2px}
.legende{font-size:12.5px;color:var(--encre-2);margin-top:8px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.legende i{display:inline-block;width:22px;height:0;border-top-width:3px;vertical-align:middle;margin-right:5px}
.l-itin{border-top-style:dashed;border-top-color:var(--itineraire)}
.l-modif{border-top-style:dashed;border-top-color:var(--alerte)}
.l-ghost{border-top-style:solid;border-top-color:#b9c2c8}

/* ---------- Connexion ---------- */
.page-connexion{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--papier);padding:24px}
.carte-connexion{background:var(--carte);border:1px solid var(--trait);border-radius:8px;padding:28px 30px;width:100%;max-width:360px}
.carte-connexion h1{font-size:22px;text-transform:uppercase;margin-bottom:4px}
.carte-connexion .sur-titre{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--encre-2);margin-bottom:18px}
.carte-connexion .champ{margin-bottom:14px;min-width:0}
.carte-connexion button{width:100%;margin-top:6px;padding:8px 10px}

/* ---------- Comptes ---------- */
.table-comptes td,.table-comptes th{white-space:nowrap}

@media (max-width:640px){
  header h1{font-size:21px}
  main{padding:16px 12px 50px}
  .barre-ligne{grid-template-columns:105px 1fr 42px}
  th,td{padding:6px 5px}
  .bandeau-jour{padding:8px 12px}
  nav{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){.barre-rempli{transition:none}}