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

/* Palette "RH Pro" (demande du 12/10/2026, d'après capture de référence)
   — sidebar sombre violet/noir avec accent rose/magenta, cartes de stats
   en dégradés colorés. Noms de variables conservés (--emerald reste la
   couleur d'élément actif/action principale, --amber reste la couleur
   d'alerte) pour ne pas devoir toucher tout le reste de cette feuille :
   seules les valeurs HEX changent. */
:root{
  --ink:#15101F;        /* Barre latérale — noir violacé profond */
  --ink-2:#241A35;       /* second stop du dégradé sidebar, un ton plus clair */
  --paper:#F6F4F8;       /* Espace de travail — gris très clair à peine teinté violet */
  --paper-2:#FFFFFF;     /* Cartes / panneaux */
  --text-on-paper:#241A35; /* Texte principal */
  --muted:#6B6479;       /* Texte secondaire */
  --muted-on-ink:#A9A0BC; /* Icônes sur fond sombre */
  --line-on-paper:#E7E1EE; /* Bordures */
  --line-on-ink:#332648;
  --emerald:#D6336C;     /* Rose/magenta — élément actif, actions principales */
  --emerald-deep:#A61E4D;
  --amber:#F2A93B;       /* Alerte — or/ambre */
  --amber-deep:#C97A10;
  --turquoise:#13A89C;   /* Accent secondaire (dispo si besoin) */
  --succes:#10B981;      /* Vert émeraude — succès */
  --danger:#EF4444;      /* Erreur — rouge sobre */
}

*{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;gap:12px;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;flex:1;}
.utilisateur-info{font-size:13px;color:var(--muted);font-weight:600;}
.vue{padding:26px 28px;flex:1;}

/* Bouton hamburger : visible à toutes les tailles d'écran — sur mobile il
   ouvre/ferme le panneau glissant (.ouverte, cf. media query ci-dessous),
   sur desktop il masque/réaffiche le menu normalement fixe (.reduite,
   cf. règle juste en dessous) pour redonner de la place au contenu sur un
   écran étroit ou une fenêtre non plein écran (demande du 12/10/2026).
   #sidebar-fond (fond assombri derrière le panneau) reste invisible en
   dehors de la media query "Mobile" — inutile sur desktop. */
.btn-menu-mobile{display:inline-flex;align-items:center;background:none;border:none;font-size:22px;line-height:1;padding:4px 6px;color:var(--text-on-paper);}
.sidebar-fond{display:none;}

/* ---------- Desktop (>860px) : menu réductible ---------- */
@media (min-width:861px){
  .sidebar.reduite{display:none;}
}

/* ---------- Mobile (≤860px) ---------- */
/* Le menu latéral, en permanence visible et occupant 250px sur desktop
   (cf. .app/.sidebar plus haut), n'a pas la place de faire ça sur un
   écran de téléphone : il écraserait le contenu. En dessous de 860px, il
   devient donc un panneau qui glisse depuis le bord gauche par-dessus le
   contenu (position:fixed + transform), ouvert/fermé via la classe
   .ouverte posée par app.js (bouton ☰, clic sur le fond assombri, ou
   sélection d'un lien du menu). */
@media (max-width:860px){
  .app{overflow:visible;}
  .sidebar{
    position:fixed;top:0;left:0;z-index:30;
    transform:translateX(-100%);transition:transform 0.22s ease;
    box-shadow:0 0 40px rgba(0,0,0,0.35);
  }
  .sidebar.ouverte{transform:translateX(0);}
  .btn-menu-mobile{display:inline-flex;align-items:center;}
  .sidebar-fond{
    display:none;position:fixed;inset:0;background:rgba(15,10,24,0.45);z-index:20;
  }
  .sidebar-fond.visible{display:block;}
  .topbar{padding:14px 16px;}
  .vue{padding:18px 16px;}
}

/* ---------- 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:var(--danger);}
.stat-detail{font-size:12px;color:var(--muted);margin-top:4px;}

.selecteur-periode{display:flex;gap:8px;margin-bottom:18px;}
.btn-periode,.btn-filtre-colis{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,.btn-filtre-colis.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) ---------- */
/* Cartes de stats en dégradés colorés (demande du 12/10/2026, d'après
   capture de référence) — remplace l'ancien style "carte blanche + liseré
   coloré" par des cartes pleines, un dégradé par famille de donnée, texte
   blanc dessus. */
.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;border-radius:14px;padding:17px 19px;color:#fff;box-shadow:0 10px 24px -8px rgba(21,16,31,0.35);}
.kpi-icone{font-size:22px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));}
.kpi-label{font-size:12px;color:rgba(255,255,255,0.85);font-weight:600;margin-bottom:4px;}
.kpi-valeur{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;color:#fff;}
.kpi-valeur.negatif{color:#FFD7DC;}
.kpi-detail{font-size:12px;color:rgba(255,255,255,0.78);margin-top:3px;}
.kpi-emerald{background:linear-gradient(135deg,#E0477D 0%,#A61E4D 100%);}
.kpi-amber{background:linear-gradient(135deg,#F6BE57 0%,#C97A10 100%);}
.kpi-bleu{background:linear-gradient(135deg,#1FC2B4 0%,#0B7A79 100%);}
.kpi-violet{background:linear-gradient(135deg,#9A6CF7 0%,#5B3DB5 100%);}
.kpi-rouge{background:linear-gradient(135deg,#F2545B 0%,#C92A3A 100%);}

.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 var(--turquoise);}
.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:#FBE2EA;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(--succes);}
.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,185,129,0.12);border-color:var(--succes);color:#047857;}
.siege-libre:hover{background:var(--succes);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-par-categorie{display:flex;flex-direction:column;gap:8px;max-width:460px;}
.modules-categorie-titre{display:block;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#8A93A8;margin-top:4px;}
.modules-categorie-titre:first-child{margin-top:0;}
.modules-checkboxes{display:flex;flex-wrap:wrap;gap:8px 14px;max-width:420px;}
.ligne-nouvel-employe{background:#FFF8E8;box-shadow:inset 3px 0 0 var(--amber,#F59E0B);}
.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:#FBE2EA;color:var(--emerald-deep);}
.badge-quota.depasse{background:#FDEAEA;color:var(--danger);}

/* ---------- Communication : messagerie interne ---------- */
.liste-conversations{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow-y:auto;}
.conversation-item{padding:10px 12px;border-radius:9px;cursor:pointer;}
.conversation-item:hover{background:var(--paper);}
.conversation-titre{font-weight:700;font-size:14px;color:var(--ink);}
.conversation-dernier{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.liste-messages{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow-y:auto;padding:4px 2px;}
.message-item{max-width:75%;background:var(--paper);border-radius:10px;padding:8px 12px;align-self:flex-start;}
.message-item.message-moi{align-self:flex-end;background:#FBE2EA;}
.message-auteur{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:2px;}
.message-contenu{font-size:14px;color:var(--text-on-paper);white-space:pre-wrap;word-break:break-word;}
.message-heure{font-size:10px;color:var(--muted);margin-top:3px;}

/* ---------- Console éditeur : badges de statut & onglets ---------- */
.badge-statut{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;}
.badge-statut-essai{background:#FEF6E7;color:#8A6100;}
.badge-statut-actif{background:#E3F8EF;color:#047857;}
.badge-statut-suspendu{background:#FEF6E7;color:var(--amber-deep);}
.badge-statut-revoque,.badge-statut-supprime{background:#FDEAEA;color:var(--danger);}
.onglets-editeur{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.onglet-editeur{padding:9px 18px;border-radius:999px;border:1px solid var(--line-on-paper);background:var(--paper-2);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;}
.onglet-editeur.actif{background:var(--emerald);border-color:var(--emerald);color:#fff;}
.actions-ligne{display:flex;gap:6px;flex-wrap:wrap;}
.actions-ligne .btn{padding:7px 12px;font-size:12px;}
.qr-apercu{display:flex;gap:20px;flex-wrap:wrap;}
.qr-bloc{border:1px solid var(--line-on-paper);border-radius:12px;padding:16px;text-align:center;width:220px;}
.qr-bloc img{max-width:160px;width:100%;border-radius:6px;margin-bottom:10px;}
.qr-bloc .qr-vide{width:160px;height:160px;margin:0 auto 10px;border:1px dashed var(--line-on-paper);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;}

.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;}
.avertissement{background:#FEF6E7;color:#8A6100;border:1px solid #F5DCA0;border-radius:9px;padding:12px 14px;font-size:14px;margin-bottom:12px;}

/* ---------- Tickets imprimables (billet voyage, bagage, colis) ---------- */
/* Format "reçu" compact (80mm) — en attendant le gabarit exact fourni par
   le client, pour que le bouton Imprimer soit déjà exploitable au guichet.
   `.no-print` cache les boutons d'action à l'impression ; `@media print`
   masque tout SAUF le ticket actuellement affiché (data-impression-active). */
.ticket-imprimable{
  max-width:320px;margin:14px 0;padding:16px;border:1px dashed var(--line-on-paper);
  border-radius:10px;background:#fff;font-family:'Courier New',monospace;font-size:13px;color:#111;
}
.ticket-imprimable h4{margin:0 0 8px;font-size:15px;text-align:center;letter-spacing:0.04em;}
.ticket-imprimable .ticket-ligne{display:flex;justify-content:space-between;gap:10px;margin:3px 0;}
.ticket-imprimable .ticket-separateur{border:none;border-top:1px dashed #999;margin:8px 0;}
.ticket-imprimable .ticket-qr{display:block;margin:10px auto 4px;width:130px;height:130px;}
.ticket-imprimable .ticket-pied{text-align:center;font-size:11px;color:#555;margin-top:6px;}
@media print {
  body *{visibility:hidden;}
  .ticket-imprimable[data-impression-active], .ticket-imprimable[data-impression-active] *{visibility:visible;}
  .ticket-imprimable[data-impression-active]{position:absolute;top:0;left:0;width:100%;border:none;}
  .no-print{display:none !important;}
}