/* ============================================================
   TEST APP 1 — back-office PDG (bureau, menu latéral)
   ============================================================ */
:root{
  --blue:#2412f0;
  --blue-dark:#1a08c9;
  --ink:#0f1830;
  --muted:#7a8398;
  --line:#e5e9f2;
  --bg:#f3f5fb;
  --card:#ffffff;
  --radius:16px;
  --side-w:248px;
  --shadow:0 6px 20px rgba(16,24,52,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------------- MENU LATÉRAL ---------------- */
.side{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--side-w);
  background:#0f1830;
  color:#dfe6f5;
  display:flex;
  flex-direction:column;
  padding:20px 14px 16px;
  z-index:40;
}
.side-brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:2px 8px 18px;
  border-bottom:1px solid rgba(255,255,255,.09);
  margin-bottom:14px;
}
.side-logo{
  width:38px;height:38px;
  border-radius:11px;
  background:linear-gradient(150deg,#4b3aff,#1b09cf);
  display:grid;place-items:center;
  color:#fff;
  flex:0 0 auto;
}
.side-logo svg{width:21px;height:21px}
.side-brand .nom{font-size:14px;font-weight:800;letter-spacing:.3px;color:#fff;line-height:1.2}
.side-brand .role{
  display:inline-block;
  margin-top:4px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:#9fb0d6;
  background:rgba(255,255,255,.09);
  border-radius:5px;
  padding:2px 6px;
}
.side-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.side-nav a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 11px;
  border-radius:10px;
  text-decoration:none;
  color:#b9c6e2;
  font-size:13.5px;
  font-weight:600;
  transition:.14s ease;
}
.side-nav a svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.side-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side-nav a[aria-current="page"]{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(36,18,240,.35)}
.side-nav a[aria-current="page"] svg{opacity:1}
.side-sep{height:1px;background:rgba(255,255,255,.09);margin:10px 8px}
.side-foot{padding-top:10px;border-top:1px solid rgba(255,255,255,.09)}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 8px 10px}
.side-user .av{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;font-size:12px;font-weight:800;
  display:grid;place-items:center;flex:0 0 auto;
}
.side-user .qui{min-width:0}
.side-user .qui b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .qui small{display:block;font-size:11px;color:#8fa0c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:10px;
  text-decoration:none;color:#b9c6e2;font-size:13px;font-weight:600;
}
.side-link:hover{background:rgba(255,255,255,.07);color:#fff}
.side-link svg{width:17px;height:17px}

/* ---------------- ZONE PRINCIPALE ---------------- */
.main{margin-left:var(--side-w);padding:24px 30px 40px;min-height:100vh}
.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.top h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-.6px}
.top .sub{margin:6px 0 0;font-size:13px;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 15px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:#33405c;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:.14s ease;
}
.btn svg{width:16px;height:16px}
.btn:hover{background:#f7f9ff;border-color:#d6ddf0}
.btn:active{transform:scale(.99)}
.btn-primary{
  background:linear-gradient(150deg,#3a27ff,#1b09cf);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 20px rgba(36,18,240,.25);
}
.btn-primary:hover{filter:brightness(1.07);background:linear-gradient(150deg,#3a27ff,#1b09cf)}
.btn[disabled],.btn.off{opacity:.5;cursor:not-allowed}

.recherche{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;min-width:240px;
}
.recherche svg{width:16px;height:16px;color:#9aa4bb;flex:0 0 auto}
.recherche input{
  border:0;outline:none;font-family:inherit;font-size:13px;color:var(--ink);
  background:transparent;width:100%;
}

/* ---------------- CARTES DE CHIFFRES ---------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin-bottom:22px;
}
.stat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.stat .ic{
  width:38px;height:38px;
  border-radius:11px;
  background:#eef1ff;
  color:var(--blue);
  display:grid;place-items:center;
  margin-bottom:14px;
}
.stat .ic svg{width:19px;height:19px}
.stat .val{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.stat .val small{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0;margin-left:4px}
.stat .lab{margin-top:7px;font-size:12.5px;color:var(--muted);font-weight:600}
.stat .tend{margin-top:10px;font-size:11.5px;font-weight:700;color:#9aa4bb}

/* ---------------- PANNEAUX / TABLEAUX ---------------- */
.grille-2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.panel-head h2{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.2px}
.panel-head .aide{font-size:12px;color:var(--muted);font-weight:600}
.panel-body{padding:16px 18px}
.panel-body:has(table){padding:0}

table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  text-align:left;
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#8b95ab;
  font-weight:800;
  padding:11px 18px;
  background:#fafbfe;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{padding:13px 18px;border-bottom:1px solid #f0f3f9;color:#2b3450}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fbfcff}
.mono{font-variant-numeric:tabular-nums}

.vide{
  padding:44px 18px;
  text-align:center;
  color:var(--muted);
}
.vide .ic{
  width:52px;height:52px;
  margin:0 auto 14px;
  border-radius:14px;
  background:#f4f6fc;
  color:#b7c0d4;
  display:grid;place-items:center;
}
.vide .ic svg{width:24px;height:24px}
.vide b{display:block;font-size:13.5px;color:#5c6780;font-weight:700;margin-bottom:5px}
.vide span{font-size:12.5px;color:#9aa4bb;line-height:1.55}

.chip{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:6px;
  background:#eef1ff;
  color:var(--blue);
}
.chip.ok{background:#e8f8ef;color:#0d8a4d}
.chip.att{background:#fff4e5;color:#b06a00}
.chip.off{background:#f1f2f6;color:#8a93a8}

.note{
  margin-top:18px;
  background:#f7f9ff;
  border:1px dashed #d3dbf2;
  border-radius:12px;
  padding:12px 14px;
  font-size:12px;
  color:#69738c;
  line-height:1.55;
}
.note b{color:#2b3450}
.note code{background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11px}

/* ---------------- FORMULAIRES (connexion admin) ---------------- */
.page-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 15%,#e9ecff 0%,transparent 45%),
    radial-gradient(circle at 85% 80%,#eef0ff 0%,transparent 40%),
    var(--bg);
}
.login-card{
  width:100%;
  max-width:404px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(16,24,52,.10);
  padding:30px 28px 26px;
}
.login-card .tete{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.login-card h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px}
.login-card .sous{margin:5px 0 20px;font-size:13px;color:var(--muted);line-height:1.5}
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.champ label{font-size:12px;font-weight:800;color:#48536f;letter-spacing:.2px}
.champ input{
  width:100%;
  padding:12px 13px;
  border-radius:10px;
  border:1px solid var(--line);
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  outline:none;
  transition:.14s ease;
  background:#fff;
}
.champ input:focus{border-color:#b9c3ff;box-shadow:0 0 0 4px #eef1ff}
.login-card .btn{width:100%;justify-content:center;padding:12px;font-size:14px}
.alerte{
  border-radius:10px;
  padding:11px 13px;
  font-size:12.5px;
  font-weight:600;
  margin-bottom:16px;
  line-height:1.4;
}
.alerte.err{background:#fdecec;color:#ad2029;border:1px solid #f8d2d4}
.alerte.ok{background:#e9f9f0;color:#0d7a45;border:1px solid #c9efdb}
.login-foot{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.6;
}
.login-foot a{color:var(--blue);text-decoration:none;font-weight:700}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  .grille-2{grid-template-columns:1fr}
}
@media (max-width:820px){
  .side{
    position:static;
    width:100%;
    flex-direction:row;
    align-items:center;
    padding:10px 12px;
    overflow-x:auto;
    gap:6px;
  }
  .side-brand{padding:0 10px 0 2px;border:0;margin:0;flex:0 0 auto}
  .side-brand .role{display:none}
  .side-brand .nom{display:none}
  .side-nav{flex-direction:row;flex:0 0 auto;gap:4px}
  .side-nav a{padding:8px 10px;font-size:12.5px;white-space:nowrap}
  .side-nav a svg{width:16px;height:16px}
  .side-sep{display:none}
  .side-foot{border:0;padding:0;margin-left:auto}
  .side-user{display:none}
  .side-link{padding:8px 10px;font-size:12.5px;white-space:nowrap}
  .main{margin-left:0;padding:18px 16px 32px}
  .top h1{font-size:20px}
}