:root{
  --p:#1d6f6a; --p-d:#155450; --p-l:#e6f2f1; --a:#f59e0b;
  --bg:#f6f8f9; --card:#fff; --tx:#0f172a; --tx2:#64748b; --bd:#e2e8f0;
  --ok:#16a34a; --warn:#ea580c; --err:#dc2626; --info:#2563eb;
  --r:12px; --sh:0 1px 3px rgba(15,23,42,.08); --sh2:0 8px 24px rgba(15,23,42,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--tx);font-size:15px;line-height:1.5}
a{color:var(--p);text-decoration:none}
h1,h2,h3{margin:0 0 12px;line-height:1.25}
h1{font-size:22px}h2{font-size:18px}h3{font-size:15px}
.hide{display:none!important}

/* ---------- Barre haute ---------- */
header{position:sticky;top:0;z-index:30;background:var(--p);color:#fff;
  padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh)}
header .marque{font-weight:650;font-size:16px;white-space:nowrap}
header .sp{flex:1}
header button{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:9px;
  padding:8px 11px;font-size:14px;cursor:pointer}
header button:hover{background:rgba(255,255,255,.26)}

/* ---------- Navigation ---------- */
nav{display:flex;gap:4px;background:#fff;border-bottom:1px solid var(--bd);
  padding:0 10px;overflow-x:auto;position:sticky;top:48px;z-index:25}
nav a{padding:12px 14px;color:var(--tx2);font-weight:550;font-size:14px;
  border-bottom:2px solid transparent;white-space:nowrap}
nav a.on{color:var(--p);border-bottom-color:var(--p)}

main{max-width:1080px;margin:0 auto;padding:16px 14px 90px}

/* ---------- Cartes ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.card.clic{cursor:pointer;transition:.12s}
.card.clic:active{transform:scale(.995)}
.card.clic:hover{border-color:var(--p);box-shadow:var(--sh2)}
.card h2{display:flex;align-items:center;gap:8px}
.muted{color:var(--tx2);font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

/* ---------- Boutons ---------- */
button,.btn{font-family:inherit;font-size:14.5px;font-weight:550;cursor:pointer;
  border-radius:10px;padding:11px 16px;border:1px solid var(--bd);background:#fff;color:var(--tx)}
.btn-p{background:var(--p);color:#fff;border-color:var(--p)}
.btn-p:hover{background:var(--p-d)}
.btn-a{background:var(--a);color:#fff;border-color:var(--a)}
.btn-d{background:#fff;color:var(--err);border-color:#fecaca}
.btn-s{padding:7px 11px;font-size:13px;border-radius:8px}
.btn-full{width:100%}
button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Formulaires ---------- */
label{display:block;font-size:13px;font-weight:600;color:var(--tx2);margin:12px 0 5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--bd);
  border-radius:10px;font-family:inherit;font-size:15px;background:#fff;color:var(--tx)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--p-l);border-color:var(--p)}
textarea{min-height:90px;resize:vertical}
.check{display:flex;align-items:center;gap:9px;margin:10px 0;font-size:14.5px;font-weight:500;color:var(--tx)}
.check input{width:19px;height:19px;flex:0 0 auto}
fieldset{border:0;padding:0;margin:0}

/* ---------- Recherche ---------- */
.recherche{position:relative;margin-bottom:14px}
.recherche input{padding:14px 14px 14px 42px;font-size:16px;border-radius:12px;box-shadow:var(--sh)}
.recherche .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--tx2);font-size:17px}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;
  font-weight:650;background:var(--p-l);color:var(--p-d);white-space:nowrap}
.b-ok{background:#dcfce7;color:#15803d}.b-warn{background:#ffedd5;color:#c2410c}
.b-err{background:#fee2e2;color:#b91c1c}.b-info{background:#dbeafe;color:#1d4ed8}
.b-gris{background:#f1f5f9;color:#475569}

/* ---------- Timeline parcours ---------- */
.tl{display:flex;gap:0;overflow-x:auto;padding:6px 2px 12px}
.tl .et{flex:0 0 auto;text-align:center;position:relative;padding:0 6px;min-width:88px}
.tl .pt{width:26px;height:26px;border-radius:50%;margin:0 auto 6px;display:grid;
  place-items:center;font-size:13px;font-weight:700;background:#e2e8f0;color:#94a3b8}
.tl .et.faite .pt{background:var(--ok);color:#fff}
.tl .et.en_cours .pt{background:var(--p);color:#fff;box-shadow:0 0 0 4px var(--p-l)}
.tl .et .lb{font-size:11.5px;color:var(--tx2);line-height:1.25}
.tl .et.en_cours .lb{color:var(--p);font-weight:700}
.tl .et:not(:last-child):after{content:"";position:absolute;top:13px;left:calc(50% + 16px);
  width:calc(100% - 32px);height:2px;background:#e2e8f0}
.tl .et.faite:not(:last-child):after{background:var(--ok)}

/* ---------- Encart action ---------- */
.action{background:linear-gradient(135deg,var(--p),var(--p-d));color:#fff;
  border-radius:var(--r);padding:16px;margin-bottom:14px}
.action .t{font-size:12px;text-transform:uppercase;letter-spacing:.6px;opacity:.85}
.action .v{font-size:19px;font-weight:650;margin:4px 0 12px}
.action button{background:#fff;color:var(--p-d);border:0;font-weight:650}
.action .alerte{background:rgba(0,0,0,.2);border-radius:8px;padding:9px 11px;
  font-size:13.5px;margin-bottom:11px}

/* ---------- KPI ---------- */
.kpi{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:14px;text-align:center}
.kpi .v{font-size:25px;font-weight:700;color:var(--p);line-height:1.1}
.kpi .l{font-size:12px;color:var(--tx2);margin-top:4px}

/* ---------- Listes / tableaux ---------- */
.item{padding:12px 0;border-bottom:1px solid var(--bd)}
.item:last-child{border-bottom:0}
.item .t{font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:9px 8px;color:var(--tx2);font-size:12px;font-weight:650;
  border-bottom:2px solid var(--bd);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--bd)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Barres de graphique ---------- */
.bar{margin:9px 0}
.bar .lg{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.bar .tr{height:9px;background:#eef2f5;border-radius:999px;overflow:hidden}
.bar .fl{height:100%;background:var(--p);border-radius:999px}

/* ---------- Onglets ---------- */
.tabs{display:flex;gap:5px;overflow-x:auto;margin-bottom:14px;padding-bottom:3px}
.tabs button{flex:0 0 auto;padding:8px 14px;border-radius:999px;font-size:13.5px;
  background:#fff;border:1px solid var(--bd);color:var(--tx2)}
.tabs button.on{background:var(--p);color:#fff;border-color:var(--p)}

/* ---------- Creneaux ---------- */
.jours{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0}
.jours .jt{text-align:center;font-size:11px;color:var(--tx2);font-weight:650;padding:4px 0}
.jours .j{aspect-ratio:1;border:1px solid var(--bd);border-radius:9px;background:#fff;
  display:grid;place-items:center;font-size:14px;cursor:pointer;padding:0}
.jours .j.off{opacity:.3;cursor:not-allowed;background:#f8fafc}
.jours .j.dispo{border-color:var(--p);color:var(--p-d);font-weight:650;background:var(--p-l)}
.jours .j.on{background:var(--p);color:#fff;border-color:var(--p)}
.creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.creneaux button{padding:12px 4px;font-weight:650}
.creneaux button.on{background:var(--p);color:#fff;border-color:var(--p)}

/* ---------- Modale ---------- */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:60;display:grid;
  place-items:end center;padding:0}
.modal .box{background:#fff;border-radius:16px 16px 0 0;padding:20px;width:100%;
  max-width:620px;max-height:92vh;overflow:auto}
@media(min-width:640px){.modal{place-items:center}.modal .box{border-radius:16px}}

/* ---------- Divers ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  background:var(--tx);color:#fff;padding:12px 18px;border-radius:11px;font-size:14px;
  box-shadow:var(--sh2);max-width:90vw}
.toast.err{background:var(--err)}
.vide{text-align:center;color:var(--tx2);padding:34px 14px;font-size:14px}
.login{max-width:400px;margin:8vh auto;padding:0 16px}
.login .card{padding:26px}
.charge{text-align:center;padding:40px;color:var(--tx2)}
.fab{position:fixed;right:18px;bottom:22px;z-index:20;border-radius:999px;padding:15px 20px;
  box-shadow:var(--sh2);font-size:15px}

/* --- Zone de connexion rapide (mode demonstration) --- */
.demo-zone{margin-top:22px;padding-top:18px;border-top:1px solid var(--bd)}
.demo-titre{font-weight:650;font-size:14px;margin-bottom:6px;color:var(--tx)}
.demo-btn{text-align:left;justify-content:flex-start;border-color:var(--bd)}
.demo-btn:hover{border-color:var(--p);color:var(--p)}
.demo-btn:disabled{opacity:.6;cursor:progress}