/*
  main.css — Styles principaux GRH Togo
  Mobile-first. Utilise les variables de variables.css.
  Voir docs/charte-graphique.md pour les règles de design.
*/

/* =====================================================
   RESET ET BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--police-systeme);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond-page);
}

h1, h2, h3 { font-weight: 600; line-height: 1.3; }
h1 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

a { color: var(--couleur-primaire); text-decoration: none; }
a:hover { color: var(--couleur-primaire-hover); }

img { max-width: 100%; height: auto; display: block; }

/* =====================================================
   MISE EN PAGE PRINCIPALE (sidebar + contenu)
   — Définition complète dans la section AdminLTE plus bas
   ===================================================== */

/* =====================================================
   SIDEBAR — voir définition complète dans la section AdminLTE plus bas
   ===================================================== */

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-md);
  border-bottom: 1px solid var(--couleur-bordure);
}

.logo-lien {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--couleur-primaire);
}

.logo-lien i { font-size: 1.5rem; }

.sidebar-entreprise {
  padding: var(--espace-sm) var(--espace-md);
  background: var(--couleur-primaire-claire);
  font-size: 0.8125rem;
  color: var(--couleur-primaire);
  font-weight: 600;
}

.sidebar-menu {
  list-style: none;
  padding: var(--espace-sm) 0;
  flex: 1;
}

.nav-lien {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0.625rem var(--espace-md);
  color: var(--couleur-texte-secondaire);
  border-radius: 0;
  min-height: var(--hauteur-tactile-min);
  transition: background 0.15s, color 0.15s;
}

.nav-lien:hover,
.nav-lien.actif {
  background: var(--couleur-primaire-claire);
  color: var(--couleur-primaire);
}

.nav-lien i { font-size: 1.125rem; flex-shrink: 0; }

.sidebar-pied {
  padding: var(--espace-md);
  border-top: 1px solid var(--couleur-bordure);
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.nav-lien-pied {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  font-size: 0.875rem;
  color: var(--couleur-texte-secondaire);
  padding: var(--espace-sm);
  border-radius: var(--rayon-sm);
}

.nav-lien-pied:hover { background: var(--couleur-fond-page); }

.btn-deconnexion {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  width: 100%;
  padding: var(--espace-sm) var(--espace-md);
  background: none;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-sm);
  color: var(--couleur-texte-secondaire);
  cursor: pointer;
  font-size: 0.875rem;
  min-height: var(--hauteur-tactile-min);
  transition: background 0.15s, color 0.15s;
}

.btn-deconnexion:hover { background: var(--couleur-erreur-fond); color: var(--couleur-erreur-texte); border-color: var(--couleur-erreur-texte); }
.form-deconnexion { margin: 0; }

/* Bouton fermer sidebar (mobile) */
.btn-fermer-sidebar, .btn-burger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--couleur-texte);
  font-size: 1.5rem;
  padding: var(--espace-sm);
  min-height: var(--hauteur-tactile-min);
  min-width: var(--hauteur-tactile-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay mobile */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
}
.nav-overlay.visible { display: block; }

/* =====================================================
   BARRE MOBILE (en-tête)
   ===================================================== */
.barre-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  background: var(--couleur-fond-carte);
  border-bottom: 1px solid var(--couleur-bordure);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--espace-sm);
  box-shadow: var(--ombre-carte);
}

.logo-mobile {
  color: var(--couleur-primaire);
  font-size: 1.125rem;
}

.btn-profil-mobile {
  font-size: 1.5rem;
  color: var(--couleur-texte-secondaire);
  padding: var(--espace-sm);
  min-height: var(--hauteur-tactile-min);
  display: flex;
  align-items: center;
}

/* Pas de padding-top artificiel : barre-superieure est sticky, pas fixed */

/* =====================================================
   BOTTOM NAV (mobile)
   ===================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--couleur-fond-carte);
  border-top: 1px solid var(--couleur-bordure);
  display: flex;
  justify-content: space-around;
  padding: var(--espace-xs) 0;
}

.bottom-nav-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--couleur-texte-secondaire);
  font-size: 0.6875rem;
  min-height: var(--hauteur-tactile-min);
  min-width: 44px;
  justify-content: center;
  padding: var(--espace-xs);
}

.bottom-nav-lien i { font-size: 1.25rem; }
.bottom-nav-lien.actif { color: var(--couleur-primaire); }

/* =====================================================
   EN-TÊTE DE MODULE
   ===================================================== */
.entete-module {
  background: var(--couleur-fond-carte);
  border-bottom: 1px solid var(--couleur-bordure);
  padding: var(--espace-sm) var(--espace-md);
}

.titre-module {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  color: var(--couleur-primaire);
  margin: 4px 0;
}

.sous-menu {
  display: flex;
  gap: var(--espace-xs);
  flex-wrap: wrap;
  margin-top: 6px;
  overflow-x: auto;
}

.sous-menu-lien {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 0.375rem var(--espace-sm);
  border-radius: var(--rayon-sm);
  color: var(--couleur-texte-secondaire);
  font-size: 0.875rem;
  white-space: nowrap;
  min-height: var(--hauteur-tactile-min);
  transition: background 0.15s, color 0.15s;
}

.sous-menu-lien:hover { background: var(--couleur-fond-page); color: var(--couleur-texte); }
.sous-menu-lien.actif { background: var(--couleur-primaire-claire); color: var(--couleur-primaire); font-weight: 600; }

/* Bouton retour */
.btn-retour {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: 0.875rem;
  color: var(--couleur-texte-secondaire);
  padding: var(--espace-xs) 0;
  min-height: var(--hauteur-tactile-min);
}

.btn-retour:hover { color: var(--couleur-primaire); }

/* =====================================================
   EN-TÊTE DE PAGE (dans le contenu)
   ===================================================== */
.entete-page {
  padding: var(--espace-lg) var(--espace-md) var(--espace-md);
}

.titre-page {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  color: var(--couleur-primaire);
}

.contenu-page {
  padding: var(--espace-sm) var(--espace-md) var(--espace-md);
}

/* =====================================================
   CARTES (cards) — définition complète dans la section AdminLTE plus bas
   ===================================================== */

.titre-carte {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  color: var(--couleur-primaire);
  margin-bottom: var(--espace-md);
}

.carte-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--espace-sm);
  margin-bottom: var(--espace-sm);
}

/* Grille de modules (dashboard) */
.grille-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--espace-md);
  padding: var(--espace-md);
}

@media (min-width: 768px) {
  .grille-modules { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.carte-module {
  background: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-lg) var(--espace-md);
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espace-sm);
  color: var(--couleur-texte);
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}

.carte-module:hover {
  box-shadow: var(--ombre-carte-survol);
  transform: translateY(-2px);
  color: var(--couleur-texte);
}

.carte-module-icone {
  font-size: 2rem;
  color: var(--couleur-primaire);
}

.carte-module-titre {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--couleur-texte);
}

.carte-module-indicateur { font-size: 0.8125rem; margin: 0; }

/* Cartes dans les listes (mobile) */
.liste-cartes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.carte-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm) var(--espace-lg);
  margin-top: var(--espace-sm);
}

.detail-item { display: flex; flex-direction: column; }
.detail-item dt { font-size: 0.75rem; color: var(--couleur-texte-secondaire); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.detail-item dd { font-size: 0.9375rem; margin: 0; }

.carte-actions { display: flex; gap: var(--espace-sm); margin-top: var(--espace-sm); flex-wrap: wrap; }

/* =====================================================
   GRILLES
   ===================================================== */
.ligne-2-colonnes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-md);
}

@media (min-width: 768px) {
  .ligne-2-colonnes { grid-template-columns: 1fr 1fr; }
}

.grille-indicateurs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--espace-md);
  margin-bottom: var(--espace-lg);
}

.carte-indicateur {
  background: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-md);
  text-align: center;
}

.indicateur-valeur { font-size: 2rem; font-weight: 700; }
.indicateur-label { font-size: 0.8125rem; color: var(--couleur-texte-secondaire); margin-top: var(--espace-xs); }

/* =====================================================
   BOUTONS
   ===================================================== */
.btn-primaire,
.btn-secondaire,
.btn-succes,
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0.625rem var(--espace-md);
  border-radius: var(--rayon-sm);
  font-size: 1rem;
  font-weight: 600;
  min-height: var(--hauteur-tactile-min);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primaire { background: var(--couleur-primaire); color: #fff; }
.btn-primaire:hover { background: var(--couleur-primaire-hover); color: #fff; }

.btn-secondaire { background: transparent; color: var(--couleur-primaire); border-color: var(--couleur-primaire); }
.btn-secondaire:hover { background: var(--couleur-primaire-claire); }

.btn-succes { background: var(--couleur-succes-texte); color: #fff; }
.btn-succes:hover { filter: brightness(0.9); color: #fff; }

.btn-danger { background: var(--couleur-erreur-texte); color: #fff; }
.btn-danger:hover { filter: brightness(0.9); color: #fff; }

.btn-pleine-largeur { width: 100%; justify-content: center; }
.btn-sm { padding: 0.375rem var(--espace-sm); font-size: 0.875rem; min-height: 36px; }

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hauteur-tactile-min);
  height: var(--hauteur-tactile-min);
  border-radius: var(--rayon-sm);
  color: var(--couleur-texte-secondaire);
  font-size: 1.125rem;
  transition: background 0.15s, color 0.15s;
}

.btn-icone:hover { background: var(--couleur-fond-page); color: var(--couleur-primaire); }

/* =====================================================
   BADGES DE STATUT
   ===================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-succes { background: var(--couleur-succes-fond); color: var(--couleur-succes-texte); }
.badge-attention { background: var(--couleur-attention-fond); color: var(--couleur-attention-texte); }
.badge-erreur { background: var(--couleur-erreur-fond); color: var(--couleur-erreur-texte); }
.badge-info { background: var(--couleur-info-fond); color: var(--couleur-info-texte); }

/* =====================================================
   FORMULAIRES
   ===================================================== */
.champ-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-md);
}

.champ-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--couleur-texte);
}

.requis { color: var(--couleur-erreur-texte); margin-left: 2px; }

.champ-saisie,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
select, textarea {
  width: 100%;
  background: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-sm);
  padding: 0.625rem var(--espace-sm);
  font-family: var(--police-systeme);
  font-size: 1rem;
  color: var(--couleur-texte);
  min-height: var(--hauteur-tactile-min);
  transition: border-color 0.15s;
}

.champ-saisie:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--couleur-primaire);
  border-width: 2px;
}

.champ-aide { font-size: 0.8125rem; color: var(--couleur-texte-secondaire); }

.champ-erreur {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: 0.8125rem;
  color: var(--couleur-erreur-texte);
}

.champ-recherche { max-width: 320px; }

.formulaire-connexion { display: flex; flex-direction: column; gap: var(--espace-md); }
.conteneur-formulaire { max-width: 600px; }

.actions-formulaire {
  display: flex;
  gap: var(--espace-sm);
  margin-top: var(--espace-lg);
  flex-wrap: wrap;
}

/* =====================================================
   TABLEAU DE DONNÉES
   ===================================================== */
.tableau-donnees {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tableau-donnees thead { background: var(--couleur-fond-page); }
.tableau-donnees th { padding: var(--espace-sm) var(--espace-md); text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--couleur-texte-secondaire); text-transform: uppercase; letter-spacing: 0.03em; }
.tableau-donnees td { padding: var(--espace-sm) var(--espace-md); border-top: 1px solid var(--couleur-bordure); vertical-align: middle; }
.tableau-donnees tbody tr:hover { background: var(--couleur-fond-page); }

.lien-tableau { color: var(--couleur-texte); font-weight: 600; }
.lien-tableau:hover { color: var(--couleur-primaire); }

.actions-colonne { display: flex; gap: var(--espace-xs); justify-content: flex-end; }

/* =====================================================
   MESSAGES SYSTÈME DJANGO
   ===================================================== */
.messages-systeme {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
  padding: var(--espace-sm) var(--espace-md);
}

.message {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: var(--espace-sm) var(--espace-md);
  border-radius: var(--rayon-sm);
  font-size: 0.9375rem;
}

.message span { flex: 1; }
.btn-fermer-message { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.6; padding: 0; min-width: 24px; min-height: 24px; display: flex; align-items: center; justify-content: center; }
.btn-fermer-message:hover { opacity: 1; }

.message-success { background: var(--couleur-succes-fond); color: var(--couleur-succes-texte); }
.message-warning { background: var(--couleur-attention-fond); color: var(--couleur-attention-texte); }
.message-error { background: var(--couleur-erreur-fond); color: var(--couleur-erreur-texte); }
.message-info { background: var(--couleur-info-fond); color: var(--couleur-info-texte); }

/* =====================================================
   ALERTES INLINE
   ===================================================== */
.alerte-info { background: var(--couleur-info-fond); color: var(--couleur-info-texte); border-radius: var(--rayon-sm); padding: var(--espace-sm) var(--espace-md); display: flex; gap: var(--espace-sm); align-items: center; margin-bottom: var(--espace-md); font-size: 0.9375rem; }
.alerte-attention { background: var(--couleur-attention-fond); color: var(--couleur-attention-texte); border-radius: var(--rayon-sm); padding: var(--espace-sm) var(--espace-md); display: flex; gap: var(--espace-sm); align-items: center; margin-bottom: var(--espace-md); font-size: 0.9375rem; }
.alerte-erreur { background: var(--couleur-erreur-fond); color: var(--couleur-erreur-texte); border-radius: var(--rayon-sm); padding: var(--espace-sm) var(--espace-md); display: flex; gap: var(--espace-sm); align-items: center; margin-bottom: var(--espace-md); font-size: 0.9375rem; }

/* =====================================================
   ÉTAT VIDE
   ===================================================== */
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-xxl) var(--espace-md);
  text-align: center;
  color: var(--couleur-texte-secondaire);
}

.etat-vide i { font-size: 3rem; opacity: 0.4; }
.etat-vide-succes i { color: var(--couleur-succes-texte); opacity: 0.7; }

/* =====================================================
   BARRE D'ACTIONS (au-dessus des listes)
   ===================================================== */
.barre-actions {
  display: flex;
  gap: var(--espace-sm);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--espace-md) var(--espace-md) 0;
  margin-bottom: var(--espace-md);
}

/* =====================================================
   SECTION ALERTES (dashboard)
   ===================================================== */
.section-alertes {
  padding: var(--espace-lg) var(--espace-md);
  border-top: 1px solid var(--couleur-bordure);
  margin-top: var(--espace-lg);
}

.titre-section {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  color: var(--couleur-texte);
  margin-bottom: var(--espace-md);
}

.chargement-indicateur { color: var(--couleur-texte-secondaire); display: flex; align-items: center; gap: var(--espace-sm); }

/* =====================================================
   PAGE DE CONNEXION
   ===================================================== */
.page-connexion {
  background: var(--couleur-fond-page);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conteneur-connexion {
  width: 100%;
  max-width: 420px;
  padding: var(--espace-md);
}

.carte-connexion {
  background: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-xl);
  box-shadow: var(--ombre-carte);
}

.connexion-entete { text-align: center; margin-bottom: var(--espace-xl); }
.connexion-logo { font-size: 3rem; color: var(--couleur-primaire); margin-bottom: var(--espace-md); }
.connexion-titre { color: var(--couleur-primaire); font-size: 1.5rem; }
.connexion-sous-titre { margin-top: var(--espace-sm); }
.connexion-pied { text-align: center; margin-top: var(--espace-md); font-size: 0.875rem; }

/* =====================================================
   PAGINATION
   ===================================================== */
.pagination-conteneur {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  justify-content: center;
  padding: var(--espace-md);
}

.pagination-info { font-size: 0.875rem; color: var(--couleur-texte-secondaire); }

/* =====================================================
   LISTE DE DÉFINITIONS
   ===================================================== */
.liste-definitions { display: flex; flex-direction: column; gap: var(--espace-sm); }
.definition-item { display: grid; grid-template-columns: 1fr 2fr; gap: var(--espace-sm); padding: var(--espace-sm) 0; border-bottom: 1px solid var(--couleur-bordure); }
.definition-item:last-child { border-bottom: none; }
.definition-item dt { font-size: 0.875rem; font-weight: 600; color: var(--couleur-texte-secondaire); }
.definition-item dd { margin: 0; }

/* =====================================================
   UTILITAIRES
   ===================================================== */
.texte-secondaire { color: var(--couleur-texte-secondaire); }
.texte-erreur { color: var(--couleur-erreur-texte); }
.texte-succes { color: var(--couleur-succes-texte); }
.texte-attention { color: var(--couleur-attention-texte); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.d-none { display: none !important; }
.d-block { display: block !important; }

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-table { display: table !important; }
}

/* =====================================================
   HTMX — Indicateurs de chargement
   ===================================================== */
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* =====================================================
   COUCHES ET LAYOUT - INSPIRÉS D'ADMINLTE
   ===================================================== */

/* Mise en page principale */
.mise-en-page {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

.contenu-principal {
  flex: 1;
  min-width: 0;
  padding-bottom: 80px; /* espace bottom-nav mobile */
}

@media (min-width: 992px) {
  .contenu-principal { padding-bottom: 0; }
}

.enveloppe-contenu {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--couleur-fond-page);
  /* margin-left géré dans le bloc sidebar desktop ci-dessous */
}

/* =====================================================
   BARRE SUPÉRIEURE (HEADER NAVBAR)
   ===================================================== */
.barre-superieure {
  height: 57px;
  background-color: var(--header-fond);
  border-bottom: 1px solid var(--couleur-bordure);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--espace-md);
  box-shadow: var(--ombre-header);
  position: sticky;
  top: 0;
  z-index: 101;
  transition: var(--transition-rapide);
}

.header-gauche, .header-droite {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
}

.btn-toggle-sidebar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--couleur-texte-secondaire);
  font-size: 1.35rem;
  padding: var(--espace-xs) var(--espace-sm);
  border-radius: var(--rayon-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  transition: var(--transition-rapide);
}

.btn-toggle-sidebar:hover {
  background-color: var(--couleur-fond-page);
  color: var(--couleur-primaire);
}

.header-titre {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--couleur-texte);
  letter-spacing: 0.02em;
}

.btn-header-action {
  color: var(--couleur-texte-secondaire);
  font-size: 1.25rem;
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--rayon-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-rapide);
}

.btn-header-action:hover {
  background-color: var(--couleur-fond-page);
  color: var(--couleur-primaire);
}

.badge-indicateur-alertes {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--header-fond);
  border-radius: 50%;
}

/* =====================================================
   MENU DÉROULANT DE PROFIL
   ===================================================== */
.btn-profil-dropdown {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  cursor: pointer;
  padding: var(--espace-xs) var(--espace-sm);
  border-radius: 30px;
  transition: var(--transition-rapide);
}

.btn-profil-dropdown:hover {
  background-color: var(--couleur-fond-page);
}

.btn-profil-dropdown::after {
  display: none !important; /* Retirer la flèche Bootstrap */
}

.avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--couleur-primaire);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nom-utilisateur {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--couleur-texte);
}

.dropdown-entete-profil {
  background: linear-gradient(135deg, var(--couleur-primaire) 0%, var(--couleur-primaire-hover) 100%);
  border-top-left-radius: var(--rayon-sm);
  border-top-right-radius: var(--rayon-sm);
}

.avatar-initials-grand {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 auto;
}

/* =====================================================
   SIDEBAR MODERNE SOMBRE
   ===================================================== */

/* Sidebar : fixe sur tous les écrans */
.sidebar {
  width: 260px;
  background-color: var(--sidebar-fond);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: -260px; /* masquée par défaut sur mobile */
  bottom: 0;
  z-index: 200;
  transition: left 0.25s ease, width 0.25s ease;
  box-shadow: 2px 0 8px rgba(0,0,0,0.15);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar.ouverte { left: 0; }

/* Desktop : visible, fixe à gauche */
@media (min-width: 992px) {
  .sidebar { left: 0; }

  .enveloppe-contenu { margin-left: 260px; }

  body.sidebar-mini-collapsed .sidebar { width: 70px; }
  body.sidebar-mini-collapsed .enveloppe-contenu { margin-left: 70px; }
}

/* Logo Brand Header */
.sidebar-logo {
  height: 57px;
  background-color: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--sidebar-bordure);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--espace-md);
}

.logo-lien {
  color: #ffffff !important;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
}

.logo-lien i {
  font-size: 1.4rem;
  color: var(--couleur-secondaire-claire);
}

.btn-fermer-sidebar {
  color: #ffffff;
  opacity: 0.7;
  transition: opacity var(--transition-rapide);
}

.btn-fermer-sidebar:hover {
  opacity: 1;
  background: none;
}

/* User Panel in Sidebar */
.sidebar-user-panel {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: var(--espace-md);
  border-bottom: 1px solid var(--sidebar-bordure);
}

.sidebar-user-panel .user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9375rem;
}

.sidebar-user-panel .user-info {
  display: flex;
  flex-direction: column;
}

.sidebar-user-panel .user-name {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-rapide);
}

.sidebar-user-panel .user-name:hover {
  color: var(--couleur-secondaire-claire);
}

.sidebar-user-panel .user-status {
  color: var(--sidebar-texte);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.status-dot-online {
  width: 7px;
  height: 7px;
  background-color: #28a745;
  border-radius: 50%;
  display: inline-block;
}

/* Recherche de menu (Sidebar Search) */
.sidebar-recherche {
  padding: var(--espace-sm) var(--espace-md);
  border-bottom: 1px solid var(--sidebar-bordure);
}

.champ-recherche-sidebar {
  position: relative;
  display: flex;
  width: 100%;
}

.champ-recherche-sidebar input {
  width: 100%;
  height: 34px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rayon-sm);
  padding: 0 35px 0 10px;
  color: #ffffff;
  font-size: 0.8125rem;
  outline: none;
  transition: var(--transition-rapide);
}

.champ-recherche-sidebar input:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.champ-recherche-sidebar .icone-recherche {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sidebar-texte);
  font-size: 0.8125rem;
  pointer-events: none;
}

/* Entreprise info */
.sidebar-entreprise {
  padding: var(--espace-xs) var(--espace-md);
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--sidebar-bordure);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nom-entreprise-texte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contenu du Menu */
.sidebar-contenu-menu {
  flex: 1;
  overflow-y: auto;
}

/* Custom scrollbar pour la sidebar */
.sidebar-contenu-menu::-webkit-scrollbar {
  width: 5px;
}
.sidebar-contenu-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}
.sidebar-contenu-menu:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
}

.sidebar-menu {
  padding: var(--espace-sm) 0;
  list-style: none;
}

.sidebar-menu .menu-en-tete {
  padding: var(--espace-sm) var(--espace-md) var(--espace-xs);
  font-size: 0.6875rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-menu .menu-item-lien {
  margin-bottom: 2px;
}

.sidebar-menu .nav-lien {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0.6rem var(--espace-md);
  color: var(--sidebar-texte);
  border-radius: var(--rayon-sm);
  margin: 0 var(--espace-sm);
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 38px;
  transition: var(--transition-rapide);
}

.sidebar-menu .nav-lien i {
  font-size: 1.15rem;
  color: var(--sidebar-texte);
  flex-shrink: 0;
}

.sidebar-menu .nav-lien span {
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--transition-rapide);
}

.sidebar-menu .nav-lien:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--sidebar-texte-hover);
}

.sidebar-menu .nav-lien:hover i {
  color: var(--sidebar-texte-hover);
}

.sidebar-menu .nav-lien.actif {
  background-color: var(--couleur-primaire);
  color: var(--sidebar-texte-actif);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar-menu .nav-lien.actif i {
  color: var(--sidebar-texte-actif);
}

/* Pied de sidebar */
.sidebar-pied {
  padding: var(--espace-sm) var(--espace-md);
  border-top: 1px solid var(--sidebar-bordure);
}

.sidebar-pied .btn-deconnexion {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--sidebar-texte);
  border-radius: var(--rayon-sm);
  padding: 0.5rem var(--espace-md);
}

.sidebar-pied .btn-deconnexion:hover {
  background-color: rgba(179, 38, 30, 0.15);
  color: #ff8b85;
  border-color: rgba(179, 38, 30, 0.3);
}

/* =====================================================
   SIDEBAR MINI (COLLAPSED DESKTOP STATE)
   ===================================================== */
@media (min-width: 992px) {
  body.sidebar-mini-collapsed .sidebar {
    width: 70px;
  }
  
  body.sidebar-mini-collapsed .sidebar .logo-texte,
  body.sidebar-mini-collapsed .sidebar .user-info,
  body.sidebar-mini-collapsed .sidebar .sidebar-recherche,
  body.sidebar-mini-collapsed .sidebar .nom-entreprise-texte,
  body.sidebar-mini-collapsed .sidebar .menu-en-tete,
  body.sidebar-mini-collapsed .sidebar .nav-lien span,
  body.sidebar-mini-collapsed .sidebar .btn-deconnexion span {
    display: none !important;
  }
  
  body.sidebar-mini-collapsed .sidebar .sidebar-logo {
    justify-content: center;
    padding: 0;
  }
  
  body.sidebar-mini-collapsed .sidebar .logo-lien {
    justify-content: center;
    gap: 0;
  }
  
  body.sidebar-mini-collapsed .sidebar .logo-lien i {
    font-size: 1.6rem;
  }
  
  body.sidebar-mini-collapsed .sidebar .sidebar-user-panel {
    justify-content: center;
    padding: var(--espace-sm) 0;
  }
  
  body.sidebar-mini-collapsed .sidebar .sidebar-entreprise {
    justify-content: center;
    padding: var(--espace-sm) 0;
  }
  body.sidebar-mini-collapsed .sidebar .sidebar-entreprise i {
    margin: 0 !important;
    font-size: 1rem;
  }
  
  body.sidebar-mini-collapsed .sidebar .nav-lien {
    justify-content: center;
    margin: 4px var(--espace-xs);
    padding: 0.6rem 0;
  }
  
  body.sidebar-mini-collapsed .sidebar .nav-lien i {
    font-size: 1.3rem;
  }
  
  body.sidebar-mini-collapsed .sidebar .sidebar-pied {
    padding: var(--espace-sm) var(--espace-xs);
  }
  body.sidebar-mini-collapsed .sidebar .btn-deconnexion {
    justify-content: center;
    padding: 0.5rem 0;
  }
}

/* =====================================================
   ADMINLTE CARDS DESIGN (BORDURES COLORÉES)
   ===================================================== */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-carte);
  padding: var(--espace-md);
  margin-bottom: var(--espace-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carte:hover {
  transform: translateY(-1px);
  box-shadow: var(--ombre-carte-survol);
}

/*
  .carte a padding: var(--espace-md).
  .carte-header / .carte-body / .carte-footer utilisent des marges négatives
  pour s'étendre jusqu'aux bords de la carte.
*/
.carte-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  background-color: transparent;
  border-bottom: 1px solid var(--couleur-bordure);
  /* Étendre jusqu'aux bords de la carte */
  margin: calc(-1 * var(--espace-md)) calc(-1 * var(--espace-md)) var(--espace-md);
  padding: var(--espace-sm) var(--espace-md);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.carte-titre {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--couleur-texte);
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
}

.carte-titre i {
  color: var(--couleur-primaire);
  font-size: 1.1rem;
}

.carte-outils {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  flex-wrap: wrap;
}

.carte-body {
  flex: 1 1 auto;
  /* Pas de padding : la carte en fournit déjà un */
  padding: 0;
}

.carte-footer {
  background-color: rgba(0, 0, 0, 0.015);
  border-top: 1px solid var(--couleur-bordure);
  /* Étendre jusqu'aux bords de la carte */
  margin: var(--espace-md) calc(-1 * var(--espace-md)) calc(-1 * var(--espace-md));
  padding: var(--espace-sm) var(--espace-md);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Variantes de couleur style AdminLTE (Top Borders) */
.carte-primaire {
  border-top: 3px solid var(--couleur-primaire);
}
.carte-primaire .carte-titre i {
  color: var(--couleur-primaire);
}

.carte-secondaire {
  border-top: 3px solid var(--couleur-secondaire);
}
.carte-secondaire .carte-titre i {
  color: var(--couleur-secondaire);
}

.carte-succes {
  border-top: 3px solid var(--couleur-succes-texte);
}
.carte-succes .carte-titre i {
  color: var(--couleur-succes-texte);
}

.carte-danger {
  border-top: 3px solid var(--couleur-erreur-texte);
}
.carte-danger .carte-titre i {
  color: var(--couleur-erreur-texte);
}

.carte-warning {
  border-top: 3px solid var(--couleur-attention-texte);
}
.carte-warning .carte-titre i {
  color: var(--couleur-attention-texte);
}

.carte-info {
  border-top: 3px solid var(--couleur-info-texte);
}
.carte-info .carte-titre i {
  color: var(--couleur-info-texte);
}

/* =====================================================
   INFO BOXES / WIDGETS D'INDICATEURS
   ===================================================== */
.info-box {
  display: flex;
  background-color: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-carte);
  min-height: 80px;
  overflow: hidden;
  margin-bottom: var(--espace-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte-survol);
}

.info-box-icon {
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #ffffff;
}

.info-box-content {
  flex: 1;
  padding: var(--espace-sm) var(--espace-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-box-text {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
  letter-spacing: 0.02em;
}

.info-box-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--couleur-texte);
  margin-top: 2px;
  line-height: 1.2;
}

/* Variantes de couleur pour les info-boxes */
.info-box-primary .info-box-icon {
  background-color: var(--couleur-primaire);
}
.info-box-success .info-box-icon {
  background-color: var(--couleur-secondaire);
}
.info-box-info .info-box-icon {
  background-color: var(--couleur-info-texte);
}
.info-box-warning .info-box-icon {
  background-color: var(--couleur-attention-texte);
}
.info-box-danger .info-box-icon {
  background-color: var(--couleur-erreur-texte);
}

/* =====================================================
   RÉNOVATION DES TABLEAUX DE DONNÉES
   ===================================================== */
.tableau-donnees {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.tableau-donnees thead {
  background-color: #f8fafc;
}

.tableau-donnees th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
  border-bottom: 2px solid var(--couleur-bordure);
  letter-spacing: 0.05em;
}

.tableau-donnees td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte);
  transition: background-color 0.15s ease;
}

.tableau-donnees tbody tr {
  transition: background-color 0.15s ease;
}

.tableau-donnees tbody tr:hover {
  background-color: rgba(31, 78, 121, 0.03) !important;
}

.tableau-donnees code {
  background-color: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--couleur-primaire);
  font-family: monospace;
}

/* =====================================================
   FORMULAIRES MODERNISÉS
   ===================================================== */
.champ-saisie,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
select, textarea {
  border: 1px solid #c8d2db;
  border-radius: var(--rayon-sm);
  font-size: 0.9rem;
  padding: 0.55rem 0.8rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.champ-saisie:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--couleur-primaire);
  border-width: 1px;
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.15);
}

.champ-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--couleur-texte-secondaire);
  margin-bottom: var(--espace-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Grille et champs de formulaire ─────────────────────── */
.grille-form-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-md);
}

@media (max-width: 640px) {
  .grille-form-2 { grid-template-columns: 1fr; }
}

.champ-form-large { grid-column: 1 / -1; }

.champ-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label-form {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--couleur-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.champ-form input,
.champ-form select,
.champ-form textarea {
  width: 100%;
}

.champ-form-erreur .label-form { color: var(--couleur-erreur-texte); }
.champ-form-erreur input,
.champ-form-erreur select,
.champ-form-erreur textarea {
  border-color: var(--couleur-erreur-texte);
}

.aide-erreur {
  font-size: 0.8rem;
  color: var(--couleur-erreur-texte);
}

/* ── Pages de configuration ─────────────────────────────── */
.config-page {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}

/* Bande paramètres généraux : une ligne compacte */
.config-bande-general {
  background: var(--couleur-fond-composant, #fff);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-md);
  padding: var(--espace-sm) var(--espace-md);
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  flex-wrap: wrap;
  box-shadow: var(--ombre-sm);
}

.config-bande-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--couleur-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-right: var(--espace-sm);
  border-right: 2px solid var(--couleur-bordure);
}

.config-bande-form {
  display: flex;
  align-items: flex-end;
  gap: var(--espace-md);
  flex: 1;
  flex-wrap: wrap;
}

.config-bande-form .champ-form {
  flex: 1 1 220px;
  max-width: 420px;
}

.config-bande-btn { flex-shrink: 0; }

/* Grille 3 colonnes pour les listes de référence */
.config-grille-ref {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-md);
  align-items: start;
}

@media (max-width: 1100px) {
  .config-grille-ref { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .config-grille-ref { grid-template-columns: 1fr; }
  .config-bande-general { flex-direction: column; align-items: flex-start; }
  .config-bande-titre { border-right: none; border-bottom: 2px solid var(--couleur-bordure); padding-right: 0; padding-bottom: var(--espace-xs); width: 100%; }
}

/* Carte liste de référence */
.config-ref-carte .carte-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-ref-icone {
  font-size: 1rem;
  opacity: 0.85;
}

.config-ref-body {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

/* Formulaire d'ajout compact : input qui prend tout l'espace, bouton icône */
.config-ajout-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.config-ajout-form input {
  flex: 1;
  min-width: 0;
}

/* Liste scrollable */
.config-liste-bloc {
  flex: 1;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-sm);
  background: var(--couleur-fond-page);
}

/* Badge compteur dans le carte-header */
.config-badge-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: auto;
  min-width: 22px;
  text-align: center;
}

.config-aide {
  display: block;
  font-size: 0.75rem;
  margin-top: 3px;
  color: var(--couleur-texte-secondaire);
  line-height: 1.4;
}

/* ── Fiche détail (description list) ────────────────────── */
.fiche-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--espace-md);
  font-size: 0.9rem;
}

.fiche-dl dt {
  font-weight: 600;
  color: var(--couleur-texte-secondaire);
  white-space: nowrap;
}

.fiche-dl dd {
  color: var(--couleur-texte);
  word-break: break-word;
}

/* ══ DATA TABLE EMPLOYÉS (style inspiré AdminLTE/screenshot) ═ */

/* ── KPI row ──────────────────────────────────────────────── */
.dt-kpi-row {
  display: flex;
  gap: var(--espace-sm);
  overflow-x: auto;
  padding-bottom: 2px;
}

.dt-kpi-card {
  flex: 1 1 160px;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-md);
  border-bottom: 3px solid var(--kpi-color, var(--couleur-primaire));
  padding: 14px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dt-kpi-left { flex: 1; }

.dt-kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--couleur-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.dt-kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--kpi-color, var(--couleur-primaire));
  line-height: 1;
}

.dt-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ── Table card ───────────────────────────────────────────── */
.dt-card {
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-md);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
}

/* ── Toolbar ──────────────────────────────────────────────── */
.dt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--couleur-bordure);
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
}

.dt-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dt-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--couleur-texte);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dt-toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.dt-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--couleur-bordure);
  background: #fff;
  color: var(--couleur-texte-secondaire);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.dt-action-btn:hover {
  border-color: var(--couleur-primaire);
  color: var(--couleur-primaire);
  background: #f0f4fa;
}
.dt-action-btn.dt-action-primary {
  background: var(--couleur-primaire);
  color: #fff;
  border-color: var(--couleur-primaire);
}
.dt-action-btn.dt-action-primary:hover {
  background: var(--couleur-primaire-hover);
  color: #fff;
}
.dt-action-btn.dt-action-reset {
  color: #dc3545;
  border-color: #dc3545;
}
.dt-action-btn.dt-action-reset:hover { background: #fde8e8; }

.dt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dt-search-global {
  position: relative;
}
.dt-search-global i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--couleur-texte-secondaire);
  font-size: 0.85rem;
  pointer-events: none;
}
.dt-search-global input {
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-sm);
  font-size: 0.85rem;
  width: 240px;
  background: #f8f9fa;
  transition: all 0.15s;
}
.dt-search-global input:focus {
  outline: none;
  border-color: var(--couleur-primaire);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27,79,138,.1);
  width: 280px;
}

.dt-count-badge {
  font-size: 0.78rem;
  color: var(--couleur-texte-secondaire);
  background: #f0f4fa;
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Table ────────────────────────────────────────────────── */
.dt-table-wrapper {
  overflow-x: auto;
}

.dt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Ligne titres colonnes */
.dt-head-titles th {
  padding: 11px 12px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--couleur-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #f4f6f9;
  border-bottom: 1px solid #e0e6ed;
  white-space: nowrap;
}

/* Ligne recherche par colonne */
.dt-head-search th {
  padding: 6px 8px;
  background: #f8f9fb;
  border-bottom: 2px solid #e0e6ed;
}

.dt-col-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #d0d8e4;
  border-radius: var(--rayon-sm);
  font-size: 0.78rem;
  background: #fff;
  color: var(--couleur-texte);
  min-width: 60px;
}
.dt-col-input:focus {
  outline: none;
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 2px rgba(27,79,138,.08);
}

/* Colonnes spéciales */
.dt-col-photo { width: 60px; }
.dt-col-actions { width: 72px; text-align: center; }

/* Lignes de données */
.dt-row td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f3f8;
  vertical-align: middle;
  color: var(--couleur-texte);
}
.dt-row:hover td { background: #f7f9fc; }
.dt-row:last-child td { border-bottom: none; }

/* Avatar photo */
.dt-avatar-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e6ed;
}

.dt-avatar-initials {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--couleur-primaire), #2d6cdf);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e0e6ed;
}

/* Matricule */
.dt-matricule {
  background: #eef2f9;
  color: #1b4f8a;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: monospace;
  font-weight: 600;
}

/* Nom + email */
.dt-nom-cell { display: flex; flex-direction: column; gap: 1px; }
.dt-nom-lien {
  font-weight: 600;
  color: var(--couleur-texte);
  text-decoration: none;
  font-size: 0.875rem;
}
.dt-nom-lien:hover { color: var(--couleur-primaire); }
.dt-email { font-size: 0.75rem; color: var(--couleur-texte-secondaire); }

/* Cellule texte secondaire */
.dt-cell-muted { color: #555; font-size: 0.85rem; }

/* Badge département */
.dt-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.dt-badge-dept {
  background: #e8f0fe;
  color: #1a56db;
}

/* Badge statut avec point coloré */
.dt-statut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.dt-statut-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.dt-statut-actif   { background: #d1fae5; color: #065f46; }
.dt-statut-inactif { background: #e5e7eb; color: #374151; }
.dt-statut-suspendu { background: #fef3c7; color: #92400e; }

/* Boutons actions icônes */
.dt-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #6b7280;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.12s;
  font-size: 0.85rem;
}
.dt-btn-icon:hover {
  border-color: var(--couleur-bordure);
  background: #f3f4f6;
  color: var(--couleur-primaire);
}

/* Pied de table */
.dt-footer-row td { padding: 0; border-bottom: none; }
.dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8f9fa;
  border-top: 1px solid var(--couleur-bordure);
  flex-wrap: wrap;
  gap: 8px;
}

.dt-footer-info {
  font-size: 0.8rem;
  color: var(--couleur-texte-secondaire);
}

/* Pagination */
.dt-pagination {
  display: flex;
  gap: 3px;
  align-items: center;
}

.dt-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.12s;
}
.dt-page-btn:hover { background: var(--couleur-primaire); color: #fff; border-color: var(--couleur-primaire); }
.dt-page-btn.active { background: var(--couleur-primaire); color: #fff; border-color: var(--couleur-primaire); font-weight: 700; }
.dt-page-btn.disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.dt-page-btn.ellipsis { border: none; background: none; pointer-events: none; }

/* État vide */
.dt-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--couleur-texte-secondaire);
}
.dt-empty i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.4; }
.dt-empty p { margin-bottom: 16px; }

/* Mobile : masquer tableau, afficher cards */
@media (max-width: 768px) {
  .dt-table { display: none; }
  .dt-toolbar { flex-direction: column; align-items: flex-start; }
  .dt-search-global input { width: 100%; }
  .dt-kpi-row { flex-wrap: nowrap; }
}

/* ── Liste de départements (config employés) ─────────────── */
.liste-departements {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dept-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--couleur-fond-page);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-sm);
  font-size: 0.9rem;
}

.dept-nom {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--couleur-texte);
}

.btn-icone {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--rayon-sm);
  line-height: 1;
  transition: background 0.15s;
}

.btn-danger-discret {
  color: var(--couleur-erreur-texte);
  opacity: 0.6;
}

.btn-danger-discret:hover {
  background: var(--couleur-erreur-fond, #fde8e8);
  opacity: 1;
}

.etat-vide-sm {
  padding: var(--espace-md) 0;
  font-size: 0.9rem;
}

/* Ajustement de la bottom-nav sur mobile pour correspondre */
.bottom-nav {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  border-top: 1px solid var(--couleur-bordure);
}

.bottom-nav-lien {
  color: var(--couleur-texte-secondaire);
  font-weight: 500;
  transition: color var(--transition-rapide);
}

.bottom-nav-lien.actif {
  color: var(--couleur-primaire);
  font-weight: 700;
}

/* =====================================================
   PAGE CONNEXION — SPLIT PANEL (AdminLTE style)
   ===================================================== */
.page-connexion-split {
  background: var(--couleur-fond-page);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.connexion-split-layout {
  display: flex;
  min-height: 100vh;
}

/* Panneau gauche */
.connexion-panneau-gauche {
  display: none;
  width: 45%;
  background: linear-gradient(160deg, var(--couleur-primaire) 0%, #122d47 100%);
  color: #fff;
  flex-direction: column;
  justify-content: center;
  padding: var(--espace-xxl) var(--espace-xl);
  position: relative;
}

@media (min-width: 900px) {
  .connexion-panneau-gauche { display: flex; }
  .connexion-panneau-droit { width: 55%; }
}

.connexion-branding { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.connexion-branding-logo {
  font-size: 4rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--espace-md);
}

.connexion-branding-titre {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: var(--espace-sm);
}

.connexion-branding-sous-titre {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: var(--espace-xl);
}

.connexion-fonctionnalites {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.connexion-fonctionnalites li {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
}

.connexion-fonctionnalites li i {
  color: #6ddfb4;
  font-size: 1rem;
  flex-shrink: 0;
}

.connexion-copyright {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  margin-top: var(--espace-lg);
  margin-bottom: 0;
}

/* Panneau droit */
.connexion-panneau-droit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-xl) var(--espace-md);
  background: var(--couleur-fond-carte);
}

.connexion-form-wrapper {
  width: 100%;
  max-width: 400px;
}

.connexion-form-entete { margin-bottom: var(--espace-xl); }

.connexion-logo-mobile {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  color: var(--couleur-primaire);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--espace-md);
}
.connexion-logo-mobile i { font-size: 1.75rem; }

.connexion-form-titre {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--couleur-texte);
  margin-bottom: var(--espace-xs);
}

.connexion-form-sous-titre {
  color: var(--couleur-texte-secondaire);
  font-size: 0.9375rem;
  margin: 0;
}

.connexion-formulaire { display: flex; flex-direction: column; gap: 0; }

.champ-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.champ-password-wrapper input {
  width: 100%;
  padding-right: 3rem;
}

.btn-toggle-password {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--couleur-texte-secondaire);
  font-size: 1rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.btn-toggle-password:hover { color: var(--couleur-primaire); }

.connexion-erreur-globale {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur-texte);
  border-left: 3px solid var(--couleur-erreur-texte);
  border-radius: var(--rayon-sm);
  padding: var(--espace-sm) var(--espace-md);
  margin-bottom: var(--espace-md);
  font-size: 0.9rem;
}

.btn-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-sm);
  width: 100%;
  padding: 0.8rem var(--espace-md);
  background: var(--couleur-primaire);
  color: #fff;
  border: none;
  border-radius: var(--rayon-sm);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  min-height: var(--hauteur-tactile-min);
  margin-top: var(--espace-md);
  letter-spacing: 0.02em;
}

.btn-connexion:hover { background: var(--couleur-primaire-hover); color: #fff; }

.connexion-aide {
  margin-top: var(--espace-lg);
  font-size: 0.8125rem;
  color: var(--couleur-texte-secondaire);
  text-align: center;
}

/* =====================================================
   DASHBOARD — KPI GRID
   ===================================================== */
.grille-kpi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-md);
  padding: var(--espace-md) var(--espace-md) 0;
}

@media (min-width: 768px) {
  .grille-kpi { grid-template-columns: repeat(4, 1fr); }
}

.grille-kpi-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.kpi-link { text-decoration: none; }
.kpi-link:hover { transform: translateY(-3px); }

/* =====================================================
   DASHBOARD — MODULE CARDS REDESIGN
   ===================================================== */
.grille-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-md);
}

@media (min-width: 576px) {
  .grille-modules { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .grille-modules { grid-template-columns: repeat(4, 1fr); }
}

.carte-module {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--espace-md);
  background: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-left: 4px solid var(--couleur-primaire);
  border-radius: var(--rayon-lg);
  padding: var(--espace-md);
  box-shadow: var(--ombre-carte);
  text-decoration: none;
  color: var(--couleur-texte);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
}

.carte-module:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte-survol);
  border-left-color: var(--couleur-secondaire);
  color: var(--couleur-texte);
}

.carte-module-icone {
  font-size: 1.75rem;
  color: var(--couleur-primaire);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--couleur-primaire-claire);
  border-radius: var(--rayon-sm);
}

.carte-module-texte { flex: 1; min-width: 0; }

.carte-module-titre {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
  color: var(--couleur-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-module-indicateur {
  font-size: 0.75rem;
  color: var(--couleur-texte-secondaire);
  margin: 2px 0 0;
}

.carte-module-fleche {
  color: var(--couleur-texte-secondaire);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.badge-date-heure {
  font-size: 0.8125rem;
  color: var(--couleur-texte-secondaire);
  background: var(--couleur-fond-page);
  padding: var(--espace-xs) var(--espace-sm);
  border-radius: var(--rayon-sm);
  border: 1px solid var(--couleur-bordure);
  white-space: nowrap;
}

/* =====================================================
   CARTE-BODY.P-0 — Tableaux bord à bord
   ===================================================== */
.carte-body.p-0 {
  /* Étendre jusqu'aux bords bas de la carte */
  margin: 0 calc(-1 * var(--espace-md)) calc(-1 * var(--espace-md));
  padding: 0 !important;
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* =====================================================
   RECHERCHE INLINE DANS CARTE-HEADER
   ===================================================== */
.champ-recherche-header {
  position: relative;
  display: flex;
  align-items: center;
}

.champ-recherche-header > i {
  position: absolute;
  left: 0.65rem;
  color: var(--couleur-texte-secondaire);
  font-size: 0.875rem;
  pointer-events: none;
}

.champ-recherche-inline {
  width: 200px;
  padding-left: 2rem !important;
  height: 36px;
  min-height: 36px;
  font-size: 0.875rem;
  border-radius: var(--rayon-sm);
}

@media (max-width: 576px) {
  .champ-recherche-inline { width: 140px; }
}

/* =====================================================
   LISTE CONGÉS
   ===================================================== */
.liste-conges {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.conge-item {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-md);
  border-bottom: 1px solid var(--couleur-bordure);
  transition: background 0.15s;
}

.conge-item:last-child { border-bottom: none; }
.conge-item:hover { background: var(--couleur-fond-page); }

.conge-type-badge {
  width: 40px;
  height: 40px;
  background: var(--couleur-secondaire-claire);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-secondaire);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.conge-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.conge-type-nom { font-size: 0.9375rem; font-weight: 600; }
.conge-dates { font-size: 0.8125rem; color: var(--couleur-texte-secondaire); }
.conge-duree { font-size: 0.8125rem; color: var(--couleur-texte-secondaire); }
.conge-motif { font-size: 0.8125rem; font-style: italic; }

.conge-item-droit { flex-shrink: 0; }

/* =====================================================
   LISTE CONTRATS
   ===================================================== */
.liste-contrats {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contrat-item {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-md);
  border-bottom: 1px solid var(--couleur-bordure);
  transition: background 0.15s;
  flex-wrap: wrap;
}

.contrat-item:last-child { border-bottom: none; }
.contrat-item:hover { background: var(--couleur-fond-page); }

.contrat-item-icone {
  width: 40px;
  height: 40px;
  background: var(--couleur-info-fond);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-info-texte);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contrat-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}

.contrat-employe-nom { font-size: 0.9375rem; font-weight: 600; }
.contrat-type-poste { font-size: 0.8125rem; color: var(--couleur-texte-secondaire); }
.contrat-dates { font-size: 0.8125rem; color: var(--couleur-texte-secondaire); }

.contrat-item-salaire {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.contrat-salaire { font-size: 0.9375rem; font-weight: 700; color: var(--couleur-secondaire); }

.contrat-item-statut { flex-shrink: 0; }

/* =====================================================
   LISTE ALERTES CONFORMITÉ
   ===================================================== */
.liste-alertes-conformite {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.alerte-conformite-item {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-md);
  padding: var(--espace-md);
  border-bottom: 1px solid var(--couleur-bordure);
  transition: background 0.15s;
}

.alerte-conformite-item:last-child { border-bottom: none; }
.alerte-conformite-item:hover { background: var(--couleur-fond-page); }
.alerte-conformite-item.non-resolue { border-left: 3px solid var(--couleur-erreur-texte); }

.alerte-conformite-icone { font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.alerte-conformite-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.alerte-conformite-desc { font-size: 0.875rem; color: var(--couleur-texte-secondaire); margin: 4px 0; }
.alerte-conformite-statut { flex-shrink: 0; }

/* =====================================================
   PROFIL — CENTRAGE
   ===================================================== */
.ligne-centree {
  display: flex;
  justify-content: center;
  padding: var(--espace-lg) var(--espace-md);
}

/* =====================================================
   PROFIL UTILISATEUR
   ===================================================== */
.profil-avatar-bloc {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  margin-bottom: var(--espace-md);
}

.profil-avatar-cercle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--couleur-primaire) 0%, #2a6faa 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(31,78,121,0.3);
}

.profil-nom {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--couleur-texte);
  margin: 0 0 4px;
}

/* =====================================================
   TABLEAUX — WRAPPER SCROLL MOBILE
   ===================================================== */
.tableau-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =====================================================
   CARTES MOBILE EMPLOYÉS — padding explicite
   ===================================================== */
.carte.carte-employe {
  padding: var(--espace-md);
}

/* =====================================================
   LISTE PRÉSENCES
   ===================================================== */
.liste-presences {
  display: flex;
  flex-direction: column;
}

.presence-item {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-md) 0;
  border-bottom: 1px solid var(--couleur-bordure);
}

.presence-item:last-child { border-bottom: none; }

.presence-item-icone {
  width: 40px;
  height: 40px;
  background: var(--couleur-secondaire-claire);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-secondaire);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.presence-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.presence-item-statut { flex-shrink: 0; }

/* =====================================================
   LISTE BULLETINS DE PAIE
   ===================================================== */
.liste-bulletins {
  display: flex;
  flex-direction: column;
}

.bulletin-item {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-md) 0;
  border-bottom: 1px solid var(--couleur-bordure);
  flex-wrap: wrap;
}

.bulletin-item:last-child { border-bottom: none; }

.bulletin-item-icone {
  width: 40px;
  height: 40px;
  background: var(--couleur-succes-fond);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-succes-texte);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.bulletin-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.bulletin-item-salaire {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.bulletin-salaire {
  font-size: 1rem;
  font-weight: 700;
  color: var(--couleur-succes-texte);
}

.bulletin-item-statut { flex-shrink: 0; }

/* =====================================================
   LISTE PROCÉDURES DISCIPLINAIRES
   ===================================================== */
.liste-procedures {
  display: flex;
  flex-direction: column;
}

.procedure-item {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-md);
  padding: var(--espace-md) 0;
  border-bottom: 1px solid var(--couleur-bordure);
}

.procedure-item:last-child { border-bottom: none; }

.procedure-item-icone {
  width: 40px;
  height: 40px;
  background: var(--couleur-attention-fond);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-attention-texte);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.procedure-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.procedure-type {
  align-self: flex-start;
  font-size: 0.75rem;
}

.procedure-desc {
  font-size: 0.875rem;
  margin: 2px 0;
}

.procedure-item-statut { flex-shrink: 0; }