/* ============================================================
   GESTION RH — Design Sombre Néon Premium
   Bootstrap 5 + CSS Personnalisé
   Tous les noms de classes et commentaires en FRANÇAIS
   ============================================================ */

/* ── Police Google ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Variables CSS ── */
:root {
  --couleur-fond-principal:   #0B0F14;
  --couleur-fond-surface:     #121820;
  --couleur-fond-carte:       rgba(18, 24, 32, 0.88);
  --couleur-fond-barre-nav:   #0e1620;
  --neon-cyan:                #00F5D4;
  --neon-violet:              #9B5DE5;
  --neon-bleu:                #3D9EFF;
  --neon-rose:                #F72585;
  --texte-principal:          #E6EDF3;
  --texte-secondaire:         #8B949E;
  --bordure-couleur:          rgba(255, 255, 255, 0.08);
  --ombre-neon:               0 0 24px rgba(0, 245, 212, 0.18);
  --ombre-carte:              0 8px 32px rgba(0, 0, 0, 0.45);
  --largeur-barre-laterale:   240px;
  --hauteur-barre-navigation: 60px;
  --rayon-bord:               12px;
  --rayon-bord-petit:         8px;
  --transition-douce:         all 0.25s ease;
}

/* ── Réinitialisation de base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--couleur-fond-principal);
  color: var(--texte-principal);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 0.92rem;
}

/* ══════════════════════════════════════════════
   CHARGEUR (PRELOADER)
══════════════════════════════════════════════ */
#chargeur {
  position: fixed;
  inset: 0;
  background: var(--couleur-fond-principal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#chargeur.cache {
  opacity: 0;
  visibility: hidden;
}
#chargeur .marque-chargeur {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 6px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pouls-texte 1.5s ease-in-out infinite;
}
.cercle-tournant {
  width: 52px;
  height: 52px;
  border: 3px solid rgba(0, 245, 212, 0.15);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: rotation 0.9s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }
@keyframes pouls-texte {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── Barre de défilement personnalisée ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--couleur-fond-principal); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 245, 212, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }

/* ══════════════════════════════════════════════
   BARRE DE NAVIGATION SUPÉRIEURE
══════════════════════════════════════════════ */
.barre-navigation {
  background: rgba(14, 22, 32, 0.96) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--bordure-couleur);
  height: var(--hauteur-barre-navigation);
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1040;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.barre-navigation .marque-application {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.barre-navigation .marque-application i {
  -webkit-text-fill-color: var(--neon-cyan);
  font-size: 1.3rem;
}
.barre-navigation .lien-nav {
  color: var(--texte-secondaire) !important;
  font-weight: 500;
  transition: var(--transition-douce);
}
.barre-navigation .lien-nav:hover { color: var(--neon-cyan) !important; }
.barre-navigation .menu-deroulant {
  background: var(--couleur-fond-surface);
  border: 1px solid var(--bordure-couleur);
  border-radius: var(--rayon-bord-petit);
  box-shadow: var(--ombre-carte);
  min-width: 180px;
}
.barre-navigation .element-menu {
  color: var(--texte-secondaire);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  transition: var(--transition-douce);
}
.barre-navigation .element-menu:hover {
  background: rgba(0, 245, 212, 0.08);
  color: var(--neon-cyan);
}
/* Badge utilisateur dans la navbar */
.badge-utilisateur {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid rgba(0, 245, 212, 0.22);
  border-radius: 50px;
  padding: 5px 14px;
  cursor: pointer;
  transition: var(--transition-douce);
  color: var(--texte-principal) !important;
  text-decoration: none;
}
.badge-utilisateur:hover {
  background: rgba(0, 245, 212, 0.15);
  color: var(--neon-cyan) !important;
}
.badge-utilisateur i { color: var(--neon-cyan); }

/* ══════════════════════════════════════════════
   BARRE LATÉRALE (SIDEBAR)
══════════════════════════════════════════════ */
.barre-laterale {
  background: var(--couleur-fond-barre-nav);
  border-right: 1px solid var(--bordure-couleur);
  min-height: calc(100vh - var(--hauteur-barre-navigation));
  padding: 1.25rem 0.75rem;
  position: sticky;
  top: var(--hauteur-barre-navigation);
  height: calc(100vh - var(--hauteur-barre-navigation));
  overflow-y: auto;
}
.barre-laterale .lien-sidebar {
  color: var(--texte-secondaire);
  border-radius: var(--rayon-bord-petit);
  padding: 0.62rem 1rem;
  margin-bottom: 3px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-douce);
  text-decoration: none;
}
.barre-laterale .lien-sidebar i {
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
}
.barre-laterale .lien-sidebar:hover {
  background: rgba(0, 245, 212, 0.08);
  color: var(--neon-cyan);
  transform: translateX(4px);
}
.barre-laterale .lien-sidebar.actif {
  background: linear-gradient(135deg, rgba(0,245,212,0.14), rgba(155,93,229,0.11));
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 245, 212, 0.24);
  box-shadow: inset 0 0 14px rgba(0, 245, 212, 0.05);
}
/* Séparateur de section dans la sidebar */
.separateur-section {
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  padding: 0.75rem 1rem 0.25rem;
  opacity: 0.55;
}

/* ══════════════════════════════════════════════
   CONTENU PRINCIPAL
══════════════════════════════════════════════ */
.contenu-principal {
  padding: 1.75rem 1.5rem;
  min-height: calc(100vh - var(--hauteur-barre-navigation));
}

/* ── En-tête de page ── */
.entete-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bordure-couleur);
}
.entete-page h1, .entete-page .titre-page {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--texte-principal), var(--texte-secondaire));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.entete-page .breadcrumb-nav {
  font-size: 0.78rem;
  color: var(--texte-secondaire);
  margin: 0;
}

/* ══════════════════════════════════════════════
   CARTES (Bootstrap override)
══════════════════════════════════════════════ */
.carte, .card {
  background: var(--couleur-fond-carte) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bordure-couleur) !important;
  border-radius: var(--rayon-bord) !important;
  box-shadow: var(--ombre-carte);
  color: var(--texte-principal);
  transition: var(--transition-douce);
  animation: glissement-bas 0.4s ease forwards;
}
.carte:hover, .card:hover {
  border-color: rgba(0, 245, 212, 0.18) !important;
}
.carte .en-tete-carte, .card-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--bordure-couleur) !important;
  padding: 0.9rem 1.25rem;
  border-radius: var(--rayon-bord) var(--rayon-bord) 0 0 !important;
}
.carte .titre-carte, .card-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--texte-principal);
  margin: 0;
}
.carte .corps-carte, .card-body { padding: 1.25rem; }

/* ── Cartes statistiques ── */
.carte-statistique {
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.carte-statistique::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--rayon-bord) var(--rayon-bord) 0 0;
}
.carte-statistique:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-neon), var(--ombre-carte);
}
.carte-statistique .icone-stat {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.carte-statistique .valeur-stat {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.carte-statistique .libelle-stat {
  font-size: 0.75rem;
  color: var(--texte-secondaire);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.carte-statistique .tendance-stat {
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 4px;
}

/* Variantes de couleur pour les cartes statistiques */
.stat-cyan::before   { background: linear-gradient(90deg, var(--neon-cyan), #00bcd4); }
.stat-violet::before { background: linear-gradient(90deg, var(--neon-violet), #c77dff); }
.stat-bleu::before   { background: linear-gradient(90deg, var(--neon-bleu), #74b9ff); }
.stat-rose::before   { background: linear-gradient(90deg, var(--neon-rose), #ff6fb7); }

.stat-cyan  .icone-stat { background: rgba(0,245,212,0.12); color: var(--neon-cyan); }
.stat-violet .icone-stat { background: rgba(155,93,229,0.12); color: var(--neon-violet); }
.stat-bleu  .icone-stat { background: rgba(61,158,255,0.12); color: var(--neon-bleu); }
.stat-rose  .icone-stat { background: rgba(247,37,133,0.12); color: var(--neon-rose); }

.stat-cyan  .valeur-stat { background: linear-gradient(135deg, var(--neon-cyan), #00e5c3); }
.stat-violet .valeur-stat { background: linear-gradient(135deg, var(--neon-violet), #c77dff); }
.stat-bleu  .valeur-stat { background: linear-gradient(135deg, var(--neon-bleu), #74b9ff); }
.stat-rose  .valeur-stat { background: linear-gradient(135deg, var(--neon-rose), #ff6fb7); }

.stat-cyan  .tendance-stat { color: var(--neon-cyan); }
.stat-violet .tendance-stat { color: var(--neon-violet); }
.stat-bleu  .tendance-stat { color: var(--neon-bleu); }
.stat-rose  .tendance-stat { color: var(--neon-rose); }

/* ══════════════════════════════════════════════
   TABLEAUX (Bootstrap override)
══════════════════════════════════════════════ */
.tableau, .table {
  color: var(--texte-principal);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
}
.tableau thead th, .table thead th {
  background: rgba(255,255,255,0.04);
  color: var(--texte-secondaire);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bordure-couleur) !important;
  padding: 0.85rem 1rem;
  white-space: nowrap;
  border-top: none;
}
.tableau td, .table td {
  border-bottom: 1px solid var(--bordure-couleur);
  border-top: none;
  padding: 0.78rem 1rem;
  vertical-align: middle;
  color: var(--texte-principal);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,0.018) !important;
  color: var(--texte-principal);
}
.table-hover tbody tr:hover td {
  background: rgba(0, 245, 212, 0.05) !important;
  transition: background 0.2s ease;
}

/* ── Avatar / Initiales dans le tableau ── */
.avatar-initiales {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, rgba(0,245,212,0.25), rgba(155,93,229,0.25));
  border: 1.5px solid rgba(0, 245, 212, 0.3);
  color: var(--neon-cyan);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   BOUTONS (Bootstrap override)
══════════════════════════════════════════════ */
.btn {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--rayon-bord-petit);
  transition: var(--transition-douce);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Bouton principal — dégradé cyan */
.btn-primary {
  background: linear-gradient(135deg, var(--neon-cyan), #00bcd4) !important;
  border: none !important;
  color: #0B0F14 !important;
  box-shadow: 0 4px 16px rgba(0,245,212,0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #00e5c3, var(--neon-cyan)) !important;
  box-shadow: 0 6px 24px rgba(0,245,212,0.42);
  transform: translateY(-2px);
  color: #0B0F14 !important;
}
/* Bouton secondaire */
.btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bordure-couleur) !important;
  color: var(--texte-secondaire) !important;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--texte-principal) !important;
  transform: translateY(-1px);
}
/* Bouton avertissement — ambre */
.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: none !important;
  color: #0B0F14 !important;
}
.btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(245,158,11,0.35);
  color: #0B0F14 !important;
}
/* Bouton danger — rose/rouge */
.btn-danger {
  background: linear-gradient(135deg, var(--neon-rose), #b5004d) !important;
  border: none !important;
  color: #fff !important;
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(247,37,133,0.35);
  color: #fff !important;
}
/* Bouton info — bleu */
.btn-info {
  background: linear-gradient(135deg, var(--neon-bleu), #0d6efd) !important;
  border: none !important;
  color: #fff !important;
}
.btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(61,158,255,0.35);
  color: #fff !important;
}
/* Bouton contour principal */
.btn-outline-primary {
  border: 1px solid var(--neon-cyan) !important;
  color: var(--neon-cyan) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: rgba(0,245,212,0.1) !important;
  transform: translateY(-1px);
}

/* Tailles bouton */
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
.btn-lg { padding: 0.65rem 1.6rem; font-size: 0.95rem; }

/* Groupe de boutons d'action */
.groupe-actions .btn { border-radius: 6px !important; margin-left: 3px; }
.groupe-actions .btn:first-child { margin-left: 0; }

/* ══════════════════════════════════════════════
   FORMULAIRES (Bootstrap override)
══════════════════════════════════════════════ */
.etiquette-champ, .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 0.4rem;
}
.champ-saisie, .form-control, .form-select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bordure-couleur) !important;
  border-radius: var(--rayon-bord-petit) !important;
  color: var(--texte-principal) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  padding: 0.58rem 0.88rem;
  transition: var(--transition-douce);
}
.champ-saisie:focus, .form-control:focus, .form-select:focus {
  background: rgba(0,245,212,0.04) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,245,212,0.14) !important;
  color: var(--texte-principal) !important;
  outline: none;
}
.form-control::placeholder { color: rgba(139,148,158,0.5); }
.form-control option, .form-select option {
  background: var(--couleur-fond-surface);
  color: var(--texte-principal);
}
/* Groupe d'entrée */
.input-group-text {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bordure-couleur) !important;
  border-right: none !important;
  color: var(--neon-cyan) !important;
}
.input-group .form-control { border-left: none !important; }

/* Zone de texte */
textarea.form-control { min-height: 90px; resize: vertical; }

/* Texte d'aide */
.texte-aide, .form-text { color: var(--texte-secondaire); font-size: 0.78rem; }

/* Messages d'erreur de formulaire */
.message-erreur, .invalid-feedback, .text-danger {
  color: #f87171 !important;
  font-size: 0.78rem;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════
   ÉTIQUETTES (BADGES) — Bootstrap override
══════════════════════════════════════════════ */
.etiquette, .badge {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 0.35em 0.75em;
  border-radius: 50px;
}
.bg-success { background: rgba(25,135,84,0.2) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,0.3) !important; }
.bg-danger  { background: rgba(220,53,69,0.2) !important; color: #f87171 !important; border: 1px solid rgba(248,113,113,0.3) !important; }
.bg-warning { background: rgba(255,193,7,0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,0.3) !important; }
.bg-primary { background: rgba(0,245,212,0.15) !important; color: var(--neon-cyan) !important; border: 1px solid rgba(0,245,212,0.3) !important; }
.bg-info    { background: rgba(61,158,255,0.15) !important; color: var(--neon-bleu) !important; border: 1px solid rgba(61,158,255,0.3) !important; }
.bg-secondary { background: rgba(255,255,255,0.1) !important; color: var(--texte-secondaire) !important; }

/* ══════════════════════════════════════════════
   ALERTES (Bootstrap override)
══════════════════════════════════════════════ */
.alerte, .alert {
  border-radius: var(--rayon-bord-petit);
  border-left: 3px solid;
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  font-size: 0.875rem;
  padding: 0.85rem 1rem;
}
.alert-success { background: rgba(25,135,84,0.12); border-color: rgba(74,222,128,0.3) !important; color: #4ade80; }
.alert-danger, .alert-error { background: rgba(220,53,69,0.12); border-color: rgba(248,113,113,0.3) !important; color: #f87171; }
.alert-warning { background: rgba(255,193,7,0.12); border-color: rgba(251,191,36,0.3) !important; color: #fbbf24; }
.alert-info { background: rgba(0,245,212,0.08); border-color: rgba(0,245,212,0.3) !important; color: var(--neon-cyan); }
.btn-close { filter: invert(1) brightness(0.7); }

/* ══════════════════════════════════════════════
   PAGE DE CONNEXION / INSCRIPTION
══════════════════════════════════════════════ */
.page-authentification {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(155,93,229,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0,245,212,0.10) 0%, transparent 70%),
    var(--couleur-fond-principal);
  padding: 2rem 1rem;
}
.carte-authentification {
  width: 100%;
  max-width: 440px;
  background: rgba(14, 22, 32, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--bordure-couleur);
  border-radius: 20px;
  box-shadow: var(--ombre-carte), 0 0 60px rgba(0, 245, 212, 0.06);
  padding: 2.5rem 2rem;
  animation: glissement-bas 0.5s ease forwards;
}
.entete-authentification {
  text-align: center;
  margin-bottom: 2rem;
}
.icone-logo-auth {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, rgba(0,245,212,0.2), rgba(155,93,229,0.2));
  border: 1px solid rgba(0,245,212,0.3);
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  color: var(--neon-cyan);
  margin-bottom: 1rem;
  box-shadow: 0 0 30px rgba(0,245,212,0.1);
}
.entete-authentification h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.4rem;
}
.entete-authentification p {
  color: var(--texte-secondaire);
  font-size: 0.85rem;
  margin: 0;
}

/* ══════════════════════════════════════════════
   PAGE DÉTAIL (Employé / Contrat / Département)
══════════════════════════════════════════════ */
.avatar-detail {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,245,212,0.22), rgba(155,93,229,0.22));
  border: 2px solid rgba(0,245,212,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--neon-cyan);
  margin: 0 auto 0.75rem;
  box-shadow: 0 0 30px rgba(0,245,212,0.15);
}
.liste-details { list-style: none; padding: 0; margin: 0; }
.liste-details .element-detail {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--bordure-couleur);
  gap: 1rem;
}
.liste-details .element-detail:last-child { border-bottom: none; }
.liste-details .libelle-detail {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--texte-secondaire);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 120px;
}
.liste-details .valeur-detail {
  color: var(--texte-principal);
  font-weight: 500;
  text-align: right;
}

/* ══════════════════════════════════════════════
   PAGE DE CONFIRMATION DE SUPPRESSION
══════════════════════════════════════════════ */
.carte-suppression {
  max-width: 520px;
  margin: 3rem auto;
  text-align: center;
}
.icone-danger-suppression {
  width: 76px; height: 76px;
  background: rgba(247,37,133,0.12);
  border: 1px solid rgba(247,37,133,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  color: var(--neon-rose);
  margin: 0 auto 1.25rem;
}

/* ══════════════════════════════════════════════
   BARRE DE RECHERCHE / FILTRE
══════════════════════════════════════════════ */
.barre-recherche {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bordure-couleur);
  border-radius: var(--rayon-bord);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

/* ══════════════════════════════════════════════
   ÉTAT VIDE (aucun résultat)
══════════════════════════════════════════════ */
.etat-vide {
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--texte-secondaire);
}
.etat-vide i {
  font-size: 3.5rem;
  opacity: 0.25;
  display: block;
  margin-bottom: 1rem;
}
.etat-vide p { margin: 0; font-size: 0.9rem; }

/* ══════════════════════════════════════════════
   TITRE DE SECTION
══════════════════════════════════════════════ */
.titre-section {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.titre-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bordure-couleur);
}

/* ══════════════════════════════════════════════
   UTILITAIRES
══════════════════════════════════════════════ */
.texte-neon     { color: var(--neon-cyan) !important; }
.texte-violet   { color: var(--neon-violet) !important; }
.texte-rose     { color: var(--neon-rose) !important; }
.texte-secondaire-clair { color: var(--texte-secondaire) !important; }
.bordure-neon   { border-color: rgba(0,245,212,0.3) !important; }
.fond-verre {
  background: var(--couleur-fond-carte) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
hr { border-color: var(--bordure-couleur); opacity: 1; }

/* ══════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════ */
@keyframes glissement-bas {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glissement-droite {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anime-entree { animation: glissement-bas 0.45s ease forwards; }

/* ══════════════════════════════════════════════
   BARRE DE DÉFILEMENT & AUTRES
══════════════════════════════════════════════ */
canvas { max-width: 100%; }
.table-responsive { border-radius: var(--rayon-bord-petit); overflow: hidden; }

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile
══════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .barre-laterale {
    position: fixed;
    left: -100%;
    top: var(--hauteur-barre-navigation);
    width: var(--largeur-barre-laterale);
    height: calc(100vh - var(--hauteur-barre-navigation));
    z-index: 1030;
    transition: left 0.3s ease;
  }
  .barre-laterale.visible { left: 0; }
  .contenu-principal { padding: 1rem; }
  .carte-statistique .valeur-stat { font-size: 1.8rem; }
  .carte-authentification { padding: 2rem 1.25rem; }
  .entete-page { flex-direction: column; align-items: flex-start; }
}