@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0A1E3D;
  --ink-2:#10294F;
  --paper:#F5F7FA;
  --paper-2:#FFFFFF;
  --text-on-paper:#151A22;
  --muted:#5C6472;
  --muted-on-ink:#9AA6B8;
  --line-on-paper:#E1E6EE;
  --line-on-ink:#26314A;
  --emerald:#0B6FC9;
  --emerald-deep:#0E3775;
  --amber:#2FE1A6;
  --amber-deep:#14B88A;
  --danger:#D64545;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:'Manrope',sans-serif;background:var(--paper);color:var(--text-on-paper);}

/* CORRECTIF : .ecran-login et .app fixent chacun leur propre `display`
   (flex), ce qui — en CSS — l'emporte sur la règle du navigateur
   `[hidden]{display:none}` (une règle d'auteur bat toujours une règle de
   feuille de style par défaut du navigateur, à spécificité égale). Sans
   cette règle explicite, poser `element.hidden = true` en JS n'a AUCUN
   effet visuel sur ces deux éléments — l'écran de connexion restait donc
   affiché même après une connexion réussie. */
[hidden]{display:none !important;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;margin:0 0 4px;}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}

/* ---------- Login ---------- */
.ecran-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%);
  padding:20px;
}
.login-card{
  background:var(--paper-2);border-radius:16px;padding:36px 32px;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(10,30,61,0.35);
}
.login-logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:var(--ink);}
.logo-img{width:32px;height:32px;object-fit:contain;flex-shrink:0;}
.login-sous-titre{color:var(--muted);margin:2px 0 24px;font-size:14px;}
#form-login label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px;}
#form-login input{
  display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line-on-paper);
  border-radius:9px;font-size:15px;color:var(--text-on-paper);
}
#form-login input:focus{outline:2px solid var(--emerald);outline-offset:1px;}
.champ-mdp{position:relative;margin-top:6px;}
.champ-mdp input{margin-top:0;padding-right:40px;}
.btn-oeil{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  background:none;border:none;font-size:16px;line-height:1;padding:7px 8px;
  color:var(--muted);opacity:0.6;border-radius:6px;
}
.btn-oeil:hover{opacity:1;background:var(--paper);}
.btn-oeil.actif{opacity:1;color:var(--emerald);}
.login-erreur{background:#FDEAEA;color:var(--danger);border:1px solid #F3C6C6;border-radius:8px;padding:9px 11px;font-size:13px;margin-bottom:14px;}

.btn{border:none;border-radius:9px;padding:11px 18px;font-weight:700;font-size:14px;}
.btn-primary{background:var(--emerald);color:#fff;}
.btn-primary:hover{background:var(--emerald-deep);}
.btn-secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line-on-paper);}
.btn-block{width:100%;}
.btn:disabled{opacity:0.6;cursor:not-allowed;}

/* ---------- App shell ---------- */
/* Corrigé : la barre latérale doit rester fixe pendant que seul le
   contenu principal défile. `.app` en hauteur d'écran fixe + `overflow:hidden`
   empêche le body de défiler dans son ensemble ; `.sidebar` gère son propre
   défilement interne (menu long) et `.contenu` le sien (vue principale). */
.app{display:flex;height:100vh;overflow:hidden;}
.sidebar{
  width:250px;flex-shrink:0;height:100vh;overflow-y:auto;
  background:var(--ink);color:var(--muted-on-ink);
  display:flex;flex-direction:column;padding:20px 0;
}
.sidebar-brand{
  display:flex;align-items:center;gap:9px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:#fff;
  padding:0 20px 18px;border-bottom:1px solid var(--line-on-ink);margin-bottom:8px;
}
.sidebar-brand .logo-img{width:26px;height:26px;}
.nav-menu{flex:1;overflow-y:auto;padding:0 10px;}
.nav-section-titre{
  font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:#6B7690;padding:16px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--muted-on-ink);
  cursor:pointer;margin-bottom:2px;
}
.nav-item:hover{background:var(--line-on-ink);color:#fff;}
.nav-item.actif{background:var(--emerald);color:#fff;}
.nav-badge{
  font-size:10px;font-weight:700;background:rgba(255,255,255,0.12);color:var(--muted-on-ink);
  padding:2px 7px;border-radius:999px;
}
.sidebar-footer{padding:14px 20px 0;border-top:1px solid var(--line-on-ink);margin-top:8px;}
.compagnie-nom{font-size:13px;font-weight:700;color:#fff;margin-bottom:10px;}
.btn-logout{
  background:none;border:1px solid var(--line-on-ink);color:var(--muted-on-ink);
  border-radius:8px;padding:8px 12px;font-size:13px;width:100%;
}
.btn-logout:hover{background:var(--line-on-ink);color:#fff;}

.contenu{flex:1;min-width:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto;}
.topbar{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;background:var(--paper-2);border-bottom:1px solid var(--line-on-paper);
}
.titre-page{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;}
.utilisateur-info{font-size:13px;color:var(--muted);font-weight:600;}
.vue{padding:26px 28px;flex:1;}

/* ---------- Composants de vue ---------- */
.carte{background:var(--paper-2);border:1px solid var(--line-on-paper);border-radius:12px;padding:20px;margin-bottom:18px;}
.grille-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.stat{background:var(--paper-2);border:1px solid var(--line-on-paper);border-radius:12px;padding:16px 18px;}
.stat-label{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.stat-valeur{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--ink);}
.stat-valeur.negatif{color:#c0392b;}
.stat-detail{font-size:12px;color:var(--muted);margin-top:4px;}

.selecteur-periode{display:flex;gap:8px;margin-bottom:18px;}
.btn-periode{padding:8px 16px;border-radius:999px;border:1px solid var(--line-on-paper);background:var(--paper-2);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;}
.btn-periode.actif{background:var(--emerald);border-color:var(--emerald);color:#fff;}

.ligne-barre{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:12px;margin-bottom:10px;font-size:13px;}
.barre-label{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.barre-fond{background:var(--line-on-paper);border-radius:6px;height:10px;overflow:hidden;}
.barre-remplie{background:var(--emerald);height:100%;border-radius:6px;}
.barre-valeur{font-weight:700;white-space:nowrap;}

.liste-alertes{margin:0;padding-left:18px;font-size:13px;color:var(--amber);}
.liste-alertes li{margin-bottom:6px;}

.tableau-entete{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}

/* ---------- Cartes KPI à liseré coloré (tableau de bord) ---------- */
.kpi-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px;}
.kpi{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line-on-paper);border-left:4px solid var(--muted);border-radius:12px;padding:16px 18px;}
.kpi-icone{font-size:22px;line-height:1;}
.kpi-label{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px;}
.kpi-valeur{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;color:var(--ink);}
.kpi-valeur.negatif{color:#c0392b;}
.kpi-detail{font-size:12px;color:var(--muted);margin-top:3px;}
.kpi-emerald{border-left-color:var(--emerald);}
.kpi-amber{border-left-color:var(--amber);}
.kpi-bleu{border-left-color:#2f6fed;}
.kpi-violet{border-left-color:#7b5ce0;}
.kpi-rouge{border-left-color:#c0392b;}

.grille-deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:900px){.grille-deux-colonnes{grid-template-columns:1fr;}}

/* ---------- Pouls de la compagnie (jauge circulaire CSS) ---------- */
.pouls-corps{display:flex;align-items:center;gap:22px;}
.pouls-jauge{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pouls-jauge-centre{width:82px;height:82px;border-radius:50%;background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pouls-score{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--ink);line-height:1;}
.pouls-sur{font-size:11px;color:var(--muted);}
.pouls-libelle{font-weight:700;font-size:14px;margin-bottom:8px;}
.pouls-liste{margin:0;padding-left:18px;font-size:13px;color:var(--muted);}
.pouls-liste li{margin-bottom:4px;}

/* ---------- Hub des modules (accès rapide) ---------- */
.hub-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;}
.hub-carte{display:flex;flex-direction:column;gap:6px;background:var(--paper-2);border:1px solid var(--line-on-paper);border-radius:12px;padding:16px;text-decoration:none;color:var(--ink);transition:transform .1s ease,box-shadow .1s ease;}
.hub-carte:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,0.08);}
.hub-icone{font-size:22px;}
.hub-label{font-size:13px;font-weight:600;}
.hub-valeur{font-size:12px;color:var(--muted);}
.hub-emerald{border-top:3px solid var(--emerald);}
.hub-amber{border-top:3px solid var(--amber);}
.hub-bleu{border-top:3px solid #2f6fed;}
.hub-violet{border-top:3px solid #7b5ce0;}

table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line-on-paper);}
td{padding:11px 12px;border-bottom:1px solid var(--line-on-paper);}
tr:last-child td{border-bottom:none;}

.construction{
  text-align:center;padding:60px 20px;color:var(--muted);
}
.construction .badge-soon{
  display:inline-block;background:#E4ECF7;color:var(--emerald-deep);font-weight:700;
  font-size:12px;padding:6px 14px;border-radius:999px;margin-bottom:14px;
}

.form-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.form-row label{flex:1;min-width:160px;font-size:13px;font-weight:600;color:var(--muted);}
.form-row input,.form-row select{display:block;width:100%;margin-top:6px;padding:9px 10px;border:1px solid var(--line-on-paper);border-radius:8px;font-size:14px;background:var(--paper-2);color:var(--ink);}

/* ---------- Guichet : plan de sièges et vente de billet ---------- */
.legende-sieges{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:12px;}
.legende-sieges .pastille{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle;}
.pastille-libre{background:var(--emerald);}
.pastille-reserve{background:var(--amber);}
.pastille-vendu{background:var(--muted);}
.plan-sieges{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-bottom:18px;max-width:520px;}
.siege{aspect-ratio:1;border-radius:8px;border:1px solid var(--line-on-paper);font-weight:700;font-size:13px;cursor:pointer;background:var(--paper);color:var(--ink);}
.siege-libre{background:rgba(16,150,90,0.12);border-color:var(--emerald);color:var(--emerald-deep);}
.siege-libre:hover{background:var(--emerald);color:#fff;}
.siege-reserve{background:rgba(200,140,20,0.14);border-color:var(--amber);color:var(--amber);cursor:not-allowed;}
.siege-vendu{background:var(--line-on-paper);color:var(--muted);cursor:not-allowed;}
.form-vente-billet{max-width:560px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line-on-paper);}

/* ---------- RH : cases à cocher des modules ---------- */
.modules-checkboxes{display:flex;flex-wrap:wrap;gap:8px 14px;max-width:420px;}
.module-checkbox{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:600;cursor:pointer;}
.module-checkbox input{margin:0;}

.badge-quota{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#E4ECF7;color:var(--emerald-deep);}
.badge-quota.depasse{background:#FDEAEA;color:var(--danger);}

.chargement{color:var(--muted);font-size:14px;padding:20px 0;}
.erreur-vue{background:#FDEAEA;color:var(--danger);border:1px solid #F3C6C6;border-radius:9px;padding:12px 14px;font-size:14px;}