/* =====================================================
   SAFECO Prévention — Feuille de style globale
   ===================================================== */

:root {
  --safeco-gold:    #F5B800;
  --safeco-green:   #5BA845;
  --safeco-blue:    #2D6AB4;
  --safeco-red:     #DC3030;
  --safeco-dark:    #1C1C2E;
  --safeco-gray:    #9A9A9A;
  /* Alias sémantiques — permettent d'utiliser var(--primary) etc. sans hexa dupliqué */
  --primary:        #2D6AB4;
  --primary-dark:   #1C1C2E;
  --primary-hover:  #1e4d8a;
  --success:        #5BA845;
  --success-bg:     #e6f4e3;
  --warning:        #F5B800;
  --warning-bg:     #fff7da;
  --danger:         #DC3030;
  --danger-bg:      #fdecec;
  --danger-dark:    #dc2626;
  --info:           #2D6AB4;
  --info-bg:        #e8f0fe;
  /* Layout */
  --sidebar-width:  260px;
  --header-height:  64px;
  --bg:             #F0F2F7;
  --card-bg:        #FFFFFF;
  --border:         #E4E6EF;
  --text:           #181C32;
  --text-muted:     #7E8299;
  --shadow:         0 0 30px 0 rgba(82,63,105,.08);
  --radius:         12px;
  --radius-sm:      8px;
  --transition:     .2s ease;
}

/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
/* Empêcher TOUT zoom tactile sur iOS/Android (pinch + double-tap) */
html, body { touch-action: pan-x pan-y; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  /* SAF-0094 — overflow-x:hidden crée un scroll-container qui casse
     position:sticky des descendants (ex: .page-topbar). overflow-x:clip
     donne le même rendu (pas de scrollbar horizontale) sans créer ce
     scroll-container. */
  overflow-x: clip; /* Empêche le débordement horizontal global */
}
a { color: var(--safeco-blue); text-decoration: none; }
a:hover { color: var(--safeco-gold); }

/* ── Layout principal ────────────────────────────── */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--safeco-dark);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  transition: width var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sidebar-logo > a {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* Le logo ne réagit PAS au survol comme un lien de menu (ni barre dorée, ni surbrillance). */
.sidebar-logo a,
.sidebar-logo a:hover {
  background: transparent !important;
  border-left-color: transparent !important;
  padding: 0;
}
/* Bouton fermeture sidebar — visible uniquement sur mobile */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  color: rgba(255,255,255,.8);
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.sidebar-close-btn:hover { background: rgba(255,255,255,.22); }
/* ── Sélecteur d'univers métier (Prévention / Formation) ───────────────── */
.univers-switch { display:flex; gap:6px; padding:10px 12px 6px; }
.univers-switch .us-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 6px; border:none; border-radius:8px; cursor:pointer;
  font-size:12px; font-weight:700; line-height:1;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.55);
  transition:background .15s, color .15s;
}
.univers-switch .us-btn i { font-size:13px; }
.univers-switch .us-btn:hover { color:#fff; background:rgba(255,255,255,.16); }
.univers-switch .us-prev.active { background:#2D6AB4; color:#fff; }
.univers-switch .us-form.active { background:#0F6E56; color:#fff; }
/* Accent visuel d'univers : fin liseré sous le logo (bleu Prévention / vert Formation) */
.sidebar-logo { box-shadow: inset 0 -2px 0 var(--safeco-blue); }
body.univers-formation .sidebar-logo { box-shadow: inset 0 -2px 0 #0F6E56; }
/* Menu replié (rail) : pictogrammes seuls, empilés */
body.sidebar-rail .univers-switch { flex-direction:column; gap:4px; padding:8px 6px 4px; }
body.sidebar-rail .univers-switch .us-btn span { display:none; }
@media (max-width: 992px) {
  .sidebar-close-btn { display: flex; }
}
.sidebar-logo img, .sidebar-logo svg {
  max-width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: brightness(1.1);
}
.sidebar-logo .app-version {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  margin-top: 4px;
}

.sidebar-nav {
  padding: 16px 0;
  flex: 1;
}

/* Style unifié pour tous les éléments de niveau 1 (sections et liens directs) */
.nav-section-title,
.nav-toplevel-link {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.7) !important;
  padding: 10px 24px 10px 24px !important;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  text-decoration: none !important;
  cursor: pointer;
  transition: color .2s, background .2s, border-left-color .2s;
  border-left: 3px solid transparent !important;
  background: transparent !important;
}
.nav-section-title:hover,
.nav-toplevel-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  border-left-color: var(--nav-color, #3b82f6) !important;
}
.nav-toplevel-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-left-color: var(--nav-color, #f5b800) !important;
}
.nav-section-title.open {
  color: rgba(255,255,255,.95) !important;
  border-left-color: var(--nav-color, #3b82f6) !important;
  background: rgba(255,255,255,.04) !important;
}
/* Rectangle coloré vertical avant chaque titre de famille — masqué */
.nav-section-bar { display: none; }

/* Ruban de section en haut des modals */
.modal-section-ribbon {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,.95);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  border-radius: 10px 10px 0 0;
  margin: -1px -1px 0; /* couvre le bord du modal-content */
}
.modal-content .modal-section-ribbon,
.modal-overlay .modal-section-ribbon {
  border-radius: 10px 10px 0 0;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar a:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-left-color: var(--safeco-gold);
}
.sidebar a.active {
  color: #fff;
  background: rgba(245,184,0,.12);
  border-left-color: var(--safeco-gold);
}
.sidebar a i {
  width: 20px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* ── Menu dépliable (collapse) ────────────────────────── */
.nav-collapse {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.nav-collapse .nav-arrow {
  font-size: 9px;
  transition: transform 0.25s ease;
  opacity: 0.75;
}
.nav-collapse.open .nav-arrow {
  transform: rotate(180deg);
}
.nav-children, .nav-subchildren {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
/* SAF — Les sous-menus dépliés étaient bornés à une hauteur FIXE (600 et 400 px).
   Dès qu'un libellé passait sur deux lignes — « Registre congés/absences »,
   « Régularisation jours fériés » — le contenu dépassait et les dernières
   entrées se retrouvaient tronquées, donc inaccessibles.
   `max-height: none` à l'état ouvert laisse le bloc prendre sa hauteur réelle.
   La transition est conservée sur la fermeture, où la hauteur de départ est
   connue. */
.nav-collapse.open + .nav-children,
.nav-collapse.open + .nav-subchildren {
  max-height: none;
  overflow: visible;
}
.nav-subsection {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Même taille de police + même rythme vertical que les menus principaux
     (.nav-section-title : 11px / padding vertical 10px). Indentation gauche
     conservée (28px > 24px) pour distinguer visuellement le sous-niveau. */
  padding: 10px 24px 10px 28px;
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
}
.nav-subsection .nav-arrow {
  margin-left: auto;
  font-size: 8px;
  opacity: 0.7;
}
.nav-subsection:hover {
  color: rgba(255,255,255,.95);
}
.nav-subsection i:first-child {
  width: 16px;
  text-align: center;
  font-size: 12px;
}
.nav-children > .nav-link {
  padding-left: 34px;
  font-size: 13px;
}

/* Séparateur de groupe dans la nav */
.nav-separator {
  margin: 8px 22px 4px;
  height: 1px;
  background: rgba(255,255,255,.12);
  border: none;
  pointer-events: none;
  user-select: none;
}
.nav-subchildren .nav-link {
  padding-left: 48px !important;
  font-size: 13px;
}

.sidebar-badge {
  margin-left: auto;
  background: var(--safeco-red);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}

.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
}
.sidebar-avatar {
  width: 34px; height: 34px;
  background: var(--safeco-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--safeco-dark);
  flex-shrink: 0;
}
.sidebar-user-name { font-weight: 600; color: #fff; font-size: 13px; }
.sidebar-user-role { font-size: 11px; color: rgba(255,255,255,.4); }

/* ── Main content ────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;          /* Empêche l'expansion au-delà de la largeur disponible (flex item) */
  /* SAF-0094 — voir commentaire sur body{overflow-x:clip} : hidden cassait
     position:sticky des descendants (page-topbar, st-tabs...). */
  overflow-x: clip;      /* Contenu large (tables, tabs) ne dépasse pas le viewport */
  max-width: 100%;
}

/* ── Top header ──────────────────────────────────── */
.top-header {
  height: var(--header-height);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
}
/* 29/08/2026 — fenêtre réduite (~1000-1300px) : le fil d'Ariane passait à la
   ligne et poussait le logo Groupe sous la barre (hauteur fixe → chevauchement
   avec le contenu). Le nav peut désormais rétrécir (min-width:0) et le fil ne
   wrappe plus ; en dessous de 1250px, seuls l'accueil et la page courante
   restent (cf. media query plus bas). */
.top-header nav { min-width: 0; overflow: hidden; }
.top-header .breadcrumb,
.top-header ol.breadcrumb,
.top-header ul.breadcrumb {
  flex: 1 !important;
  margin: 0 !important;
  font-size: 13px !important;
  background: none !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  counter-reset: none !important;
  min-width: 0;
  overflow: hidden;
}
.top-header .breadcrumb .breadcrumb-item,
.top-header .breadcrumb li {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  white-space: nowrap;
}
.top-header .breadcrumb .breadcrumb-item::before,
.top-header .breadcrumb li::before {
  content: none !important;
  display: none !important;
}
.top-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.top-header .breadcrumb li + li::before {
  content: "/" !important;
  display: inline !important;
  margin-right: 6px !important;
  color: var(--text-muted) !important;
  font-weight: 300 !important;
}
.top-header .breadcrumb-item a { color: var(--text-muted); font-weight: 500; }
.top-header .breadcrumb-item a:hover { color: var(--safeco-gold); }
.top-header .breadcrumb-item.active { color: var(--text); font-weight: 600; }

/* Petit logo SAFECO Groupe dans la bande blanche, juste après le fil d'Ariane. */
.top-header .th-group-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  opacity: .9;
  transition: opacity .15s;
}
.top-header .th-group-logo:hover { opacity: 1; }
.top-header .th-group-logo img { height: 24px; width: auto; display: block; }
/* Barre compacte sur petit écran : on masque ce logo secondaire pour ne pas
   surcharger l'en-tête mobile (le logo principal reste dans la sidebar). */
@media (max-width: 640px) {
  .top-header .th-group-logo { display: none; }
}
/* 29/08/2026 — palier intermédiaire (fenêtre réduite mais > mobile) : la place
   manque pour le fil complet + logo. On ne garde que l'accueil et la page
   courante, et le logo Groupe décoratif disparaît. */
@media (max-width: 1250px) {
  .top-header .th-group-logo { display: none; }
  .top-header .breadcrumb li:not(:first-child):not(.active),
  .top-header .breadcrumb .breadcrumb-item:not(:first-child):not(.active) { display: none !important; }
}

.top-header .header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Actions rapides globales : Inscription rapide + recherche client (23/08/2026) ──
   Bandeau du haut (PAS le menu latéral) : demande explicite de David, pour rester
   visible peu importe la page/l'univers, sans encombrer le menu de navigation. */
.header-quick-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.sqa-btn {
  display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  padding:8px 14px; border:none; border-radius:8px; cursor:pointer;
  font-size:12.5px; font-weight:700; color:#fff;
  background:#dc2626; background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);
  transition:filter .15s;
}
.sqa-btn:hover { filter:brightness(1.08); }
.sqa-btn i { font-size:13px; }
.hqa-search-wrap { position:relative; flex:0 1 200px; }
.hqa-search-ic {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--text-muted,#94a3b8); font-size:12px; pointer-events:none;
}
.hqa-search-input {
  width:100%; height:36px; padding:0 10px 0 30px; border-radius:8px;
  border:1px solid var(--border,#e2e8f0); background:var(--bg,#fff); font-size:12.5px;
  transition:border-color .2s, box-shadow .2s;
}
.hqa-search-input:focus { border-color:var(--safeco-blue,#2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.12); outline:none; }
.sqa-result-row:hover { background:#f1f5f9; }
@media (max-width: 1200px) { .hqa-search-wrap { display:none; } } /* le bouton reste, la recherche cède la place en priorité */
@media (max-width: 860px) { .header-quick-actions .sqa-btn span { display:none; } .sqa-btn { padding:8px 10px; } }
@media (max-width: 640px) { .header-quick-actions { display:none; } } /* mobile : place limitée, widget accessible via clients.html/formation_dossiers.html */

/* ── Quick Search (recherche rapide de pages) ────────────────────────────── */
.quick-search-wrapper {
  position: relative;
  flex: 0 1 320px;
  margin: 0 12px;
}
.quick-search-box {
  display: flex;
  align-items: center;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  transition: border-color .2s, box-shadow .2s;
}
.quick-search-box:focus-within {
  border-color: var(--safeco-blue, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.quick-search-icon {
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
  margin-right: 8px;
  flex-shrink: 0;
}
#quickSearchInput {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text, #1e293b);
  font-family: inherit;
  min-width: 0;
}
#quickSearchInput::placeholder {
  color: var(--text-muted, #94a3b8);
}
.quick-search-kbd {
  font-family: inherit;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-tertiary, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 18px;
  flex-shrink: 0;
}
.quick-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  max-height: 380px;
  overflow-y: auto;
  z-index: 9999;
}
.qs-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  gap: 12px;
  text-decoration: none;
  color: var(--text, #1e293b);
  font-size: 13px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  transition: background .15s;
}
.qs-item:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }
.qs-item:first-child { border-radius: 10px 10px 0 0; }
.qs-item:only-child { border-radius: 10px; }
.qs-item:hover, .qs-item.active {
  background: rgba(37,99,235,.06);
}
.qs-item-icon {
  width: 18px;
  text-align: center;
  color: var(--safeco-blue, #2563eb);
  opacity: .7;
  flex-shrink: 0;
}
.qs-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.qs-item-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-section {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}
.qs-empty {
  padding: 14px 16px;
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
  text-align: center;
}

/* btn-icon : style pill défini plus bas (ligne ~1074) */
.btn-icon .badge-dot {
  position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px;
  background: var(--safeco-red);
  border-radius: 50%;
  border: 2px solid var(--card-bg);
}

/* ── Page content ────────────────────────────────── */
.page-content {
  padding: 28px;
  flex: 1;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Cards ───────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  padding: 18px 22px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title i { color: var(--safeco-gold); }
.card-body { padding: 22px; }
.card-footer {
  padding: 14px 22px;
  background: #FAFAFA;
  border-top: 1px solid var(--border);
}

/* ── KPI Cards ───────────────────────────────────── */
/* ── KPI Cards globales ─────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
  position: relative;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
}
.kpi-card.gold::before   { background: var(--safeco-gold); }
.kpi-card.green::before  { background: var(--safeco-green); }
.kpi-card.blue::before   { background: var(--safeco-blue); }
.kpi-card.red::before    { background: var(--safeco-red); }
.kpi-card.purple::before { background: #7B61FF; }
.kpi-card.teal::before   { background: #00B8A9; }

.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(0,0,0,.12); }

/* KPI card cliquable : wrapper <a> autour de .kpi-card */
.kpi-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kpi-link:hover,
.kpi-link:focus,
.kpi-link:visited { text-decoration: none; color: inherit; }
.kpi-link:focus-visible > .kpi-card {
  outline: 2px solid var(--safeco-blue);
  outline-offset: 2px;
}

.kpi-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.kpi-icon.gold   { background: rgba(245,184,0,.12);  color: var(--safeco-gold); }
.kpi-icon.green  { background: rgba(91,168,69,.12);  color: var(--safeco-green); }
.kpi-icon.blue   { background: rgba(45,106,180,.12); color: var(--safeco-blue); }
.kpi-icon.red    { background: rgba(220,48,48,.12);  color: var(--safeco-red); }
.kpi-icon.purple { background: rgba(123,97,255,.12); color: #7B61FF; }
.kpi-icon.teal   { background: rgba(0,184,169,.12);  color: #00B8A9; }

.kpi-info { flex: 1; min-width: 0; }
.kpi-value, .kpi-num {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}
.kpi-label, .kpi-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  font-weight: 500;
}
/* Couleurs accentuation barre gauche kpi — via ::before */
.kpi-card.kpi-blue::before   { background: var(--safeco-blue); }
.kpi-card.kpi-green::before  { background: var(--safeco-green); }
.kpi-card.kpi-amber::before  { background: #F59E0B; }
.kpi-card.kpi-red::before    { background: var(--safeco-red); }
.kpi-card.kpi-purple::before { background: #7B61FF; }
.kpi-card.kpi-slate::before  { background: #64748b; }

/* KPI compacte (border-left directe, sans icône — chiffre au-dessus du libellé) */
.kpi-card.kpi-blue,
.kpi-card.kpi-green,
.kpi-card.kpi-amber,
.kpi-card.kpi-red,
.kpi-card.kpi-purple,
.kpi-card.kpi-slate {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
}
.kpi-card.kpi-blue   { border-left: 4px solid #2563eb; }
.kpi-card.kpi-green  { border-left: 4px solid #16a34a; }
.kpi-card.kpi-amber  { border-left: 4px solid #d97706; }
.kpi-card.kpi-red    { border-left: 4px solid #dc2626; }
.kpi-card.kpi-purple { border-left: 4px solid #7c3aed; }
.kpi-card.kpi-slate  { border-left: 4px solid #64748b; }
/* Alias numéro + libellé */
.kpi-card .kpi-num {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.kpi-card .kpi-lbl {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Tableaux ────────────────────────────────────── */
.table-responsive { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.data-table thead th {
  background: #1e293b;
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 11px 16px;
  border-bottom: none;
  white-space: nowrap;
}
.data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #FAFBFF; }

/* Boutons d'action en ligne (jamais empilés) — réduit la hauteur des lignes sur TOUS les tableaux.
   nowrap : les icônes restent côte à côte ; la colonne Actions s'élargit au besoin. */
.td-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
/* Mêmes règles pour les autres conteneurs d'actions de tableaux (sans CSS jusqu'ici → empilés). */
.actions-group,
.table-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
/* Dans les tableaux, les boutons d'action sont en ICÔNES SEULES (libellé en tooltip) pour tenir
   sur une seule ligne et garder les lignes basses — cohérent avec la page Clients. */
.td-actions .btn-label,
.actions-group .btn-label,
.table-actions .btn-label,
.data-table td .btn-label { display: none; }
/* Boutons d'action posés DIRECTEMENT dans une <td> (sans conteneur flex) : empêcher
   le retour à la ligne entre eux → ils restent côte à côte (la colonne s'élargit). */
.data-table td:has(> .btn-icon) { white-space: nowrap; }
.data-table td:has(> .btn-icon) .btn-icon { vertical-align: middle; }
/* Nom principal dans les cellules de tableau */
.td-name { font-weight: 700; font-size: 14px; color: var(--text); }
.td-sub  { font-size: 12px; color: var(--text-muted); }
.btn-action {
  width: 30px; height: 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: all var(--transition);
}
.btn-action.edit   { background: rgba(45,106,180,.1); color: var(--safeco-blue); }
.btn-action.delete { background: rgba(220,48,48,.1);  color: var(--safeco-red); }
.btn-action.view   { background: rgba(91,168,69,.1);  color: var(--safeco-green); }
.btn-action.pdf    { background: rgba(220,48,48,.1);  color: var(--safeco-red); }
.btn-action:hover  { filter: brightness(.88); transform: scale(1.05); }

/* ── Badges statuts ──────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-actif, .badge-valide, .badge-realisé { color: var(--safeco-green); background: rgba(91,168,69,.1); }
.badge-planifié, .badge-en_cours            { color: var(--safeco-blue);  background: rgba(45,106,180,.1); }
.badge-attente, .badge-saisi                { color: #E89110; background: rgba(232,145,16,.1); }
.badge-expiré, .badge-clôturé, .badge-terminé { color: var(--safeco-red); background: rgba(220,48,48,.1); }
.badge-suspendu, .badge-annulé              { color: var(--text-muted); background: rgba(126,130,153,.1); }

/* ── Boutons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  line-height: 1.5;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary {
  background: var(--safeco-gold);
  border-color: var(--safeco-gold);
  color: var(--safeco-dark);
}
.btn-primary:hover { background: #dda700; border-color: #dda700; color: var(--safeco-dark); }

.btn-secondary {
  background: var(--safeco-dark);
  border-color: var(--safeco-dark);
  color: #fff;
}
.btn-secondary:hover { background: #2d2d45; border-color: #2d2d45; color: #fff; }

.btn-success { background: var(--safeco-green); border-color: var(--safeco-green); color: #fff; }
.btn-success:hover { background: #4a9038; border-color: #4a9038; color: #fff; }

.btn-danger  { background: var(--safeco-red); border-color: var(--safeco-red); color: #fff; }
.btn-danger:hover { background: #b82525; border-color: #b82525; color: #fff; }

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-outline:hover { border-color: var(--safeco-gold); color: var(--safeco-gold); }

.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 12px 28px; font-size: 15px; }

/* ── Hauteur unifiée boutons + inputs/selects (même ligne) ──────────────── */
/* Hauteur fixe 42px pour tous les éléments de formulaire et boutons standard */
:root { --form-height: 42px; }
.btn,
input[type="text"], input[type="email"], input[type="date"], input[type="number"],
input[type="tel"], input[type="password"], input[type="search"], input[type="url"],
select, textarea:not([rows]),
.form-control:not(textarea), .form-select,
.input-text:not(textarea), .input-select, .input:not(textarea),
.filter-input:not(textarea), .filter-select {
  box-sizing: border-box;
  min-height: var(--form-height);
}
/* Hauteur FIXE (pas seulement minimale) pour tous les champs de saisie d'une
   ligne : sans elle, un champ date/heure natif rend 2-3 px plus haut que ses
   voisins texte (45 px vs 43 px mesurés) et les formulaires paraissent
   « pas alignés » (retour David 28/08/2026 — fiche du stagiaire, puis règle
   générale demandée pour toutes les pages et toutes les fenêtres). */
input[type="text"], input[type="email"], input[type="date"], input[type="number"],
input[type="tel"], input[type="password"], input[type="search"], input[type="url"],
input[type="time"], input[type="month"],
.input:not(textarea), .input-text:not(textarea),
.filter-input:not(textarea), .form-control:not(textarea) {
  height: var(--form-height);
}
/* Les selects en particulier doivent avoir une hauteur fixe = inputs */
select,
.form-control[type="text"],
.input-select,
.filter-select,
.form-group select,
.filter-group select,
.filters-bar select,
.filters-group select,
.filters-row select,
.form-row select {
  height: var(--form-height);
}

/* ── Boutons côte-à-côte : forcer la même hauteur dans les page-header ── */
.page-header > :last-child,
.page-header .btn-group,
.page-header > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-header .btn {
  height: var(--form-height);
  align-self: center;
}

/* ── Bouton oeil aperçu document ──────────────────── */
.input-with-eye { display:flex; align-items:center; gap:6px; }
.input-with-eye .input-text, .input-with-eye input, .input-with-eye select { flex:1; min-width:0; }
.btn-eye {
  width:34px; height:34px; min-width:34px; border-radius:6px;
  border:1.5px solid var(--border); background:var(--bg); color:#94a3b8;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all .15s; padding:0;
}
.btn-eye:hover { color:#64748b; border-color:#94a3b8; background:#f1f5f9; }
.btn-eye.has-doc { color:#2563eb; border-color:#93c5fd; background:#eff6ff; }
.btn-eye.has-doc:hover { color:#1d4ed8; border-color:#60a5fa; background:#dbeafe; }

/* ── Formulaires ─────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.form-control, .form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  font-family: inherit;
}
.form-control:focus, .form-select:focus {
  border-color: var(--safeco-gold);
  box-shadow: 0 0 0 3px rgba(245,184,0,.15);
}
.form-control::placeholder { color: var(--text-muted); opacity: .6; }
textarea.form-control { resize: vertical; min-height: 90px; }

/* ── Champ avec pictogramme en tête (look « chaud ») ──────────────────────
   Wrapper .ic-field (position:relative) + <i class="ic-lead"> ; l'input reçoit
   un padding-gauche pour laisser la place à l'icône. Le décorateur JS
   iconizeInputs() (app.js) l'applique automatiquement aux champs standard. */
.ic-field { position: relative; display: block; }
.ic-field > .ic-lead {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted, #94a3b8); font-size: 14px; line-height: 1;
  pointer-events: none; z-index: 1;
}
.ic-field > .ic-lead.ic-top { top: 14px; transform: none; }
.ic-field > input, .ic-field > select, .ic-field > textarea { padding-left: 38px !important; }

.form-row {
  display: grid;
  gap: 16px;
}
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── Variantes de classes formulaires (compatibilité HTML existant) ── */
/* Champ de recherche avec croix d'effacement */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.search-wrap .input-text { padding-right: 32px; }
.search-clear-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  display: none; /* caché par défaut */
  transition: color .15s;
}
.search-clear-btn:hover { color: var(--danger, #e53e3e); }
.search-wrap.has-value .search-clear-btn { display: block; }

.input-text,
.input-select,
.input,
.filter-input,
.filter-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  font-family: inherit;
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.input-text:focus,
.input-select:focus,
.input:focus,
.filter-input:focus,
.filter-select:focus {
  border-color: var(--safeco-gold);
  box-shadow: 0 0 0 3px rgba(245,184,0,.15);
}
.input-text::placeholder,
.input::placeholder,
.filter-input::placeholder { color: var(--text-muted); opacity: .6; }

/* ── Style GLOBAL pour TOUS les inputs/selects/textarea dans les zones clés ── */
/* Cible les éléments sans classe dans .form-group, .filter-group, .filters-bar, etc. */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group select,
.form-group textarea,
.filter-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filter-group select,
.filters-bar input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filters-bar select,
.filters-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filters-group select,
.filters-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filters-row select,
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  font-family: inherit;
  line-height: 1.5;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.filter-group input:focus,
.filter-group select:focus,
.filters-bar input:focus,
.filters-bar select:focus,
.filters-group input:focus,
.filters-group select:focus,
.filters-row input:focus,
.filters-row select:focus,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--safeco-gold);
  box-shadow: 0 0 0 3px rgba(245,184,0,.15);
}
.form-group input::placeholder,
.filter-group input::placeholder,
.filters-bar input::placeholder,
.filters-group input::placeholder,
.filters-row input::placeholder,
.form-row input::placeholder { color: var(--text-muted); opacity: .6; }
.form-group textarea,
.form-row textarea { resize: vertical; min-height: 90px; }

/* Selects avec flèche personnalisée — TOUS les selects dans les conteneurs */
.input-select,
.filter-select,
select.input,
select.form-control,
select.form-select,
.form-group select,
.filter-group select,
.filters-bar select,
.filters-group select,
.filters-row select,
.form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E8299' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Labels dans les formulaires (toutes variantes) */
.form-group > label,
.form-grid > .form-group > label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── .form-row sans .cols-* → 2 colonnes par défaut ── */
.form-row:not(.cols-2):not(.cols-3) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── btn-close (bouton fermer modale, variante sans .modal-close) ── */
.btn-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all var(--transition);
}
.btn-close:hover { background: var(--bg); color: var(--safeco-red); }

/* ── Table wrapper / tables génériques ──────────── */
.table-wrapper { overflow-x: auto; }
.table-wrapper table,
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  /* SAF-0093 — overflow:hidden (posé ici juste pour clipper les coins arrondis)
     capte aussi position:sticky des th/thead descendants (même bug que
     body/.main-content, cf. SAF-0094) avant même d'atteindre le vrai wrapper
     scrollable. overflow:clip garde le même rendu visuel sans ce piège. */
  overflow: clip;
}
.table-wrapper thead,
table thead {
  background: #1e293b;
}
.table-wrapper th,
.table-wrapper td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table-wrapper th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #ffffff;
  white-space: nowrap;
  border-bottom: none;
}
.table-wrapper tbody tr:hover { background: #FAFBFF; }

/* ── Actions row (boutons dans les tables) ─────── */
.actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.actions .btn-icon,
.btn-icon {
  height: 32px;
  width: auto;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  background: #fff;
  color: var(--safeco-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  transition: all var(--transition);
  white-space: nowrap;
  padding: 0 12px;
}
.actions .btn-icon:hover,
.btn-icon:hover { background: rgba(45,106,180,.1); border-color: var(--safeco-blue); }
.btn-icon.btn-primary { background: rgba(45,106,180,.06); color: var(--safeco-blue); border-color: rgba(45,106,180,.2); }
.btn-icon.btn-primary:hover { background: var(--safeco-blue); color: #fff; }
.actions .btn-icon.danger,
.actions .btn-icon.btn-danger,
.actions .btn-icon.btn-icon-danger,
.btn-icon.danger,
.btn-icon.btn-danger,
.btn-icon.btn-icon-danger { background: #fff; color: var(--safeco-red); border-color: rgba(220,48,48,.2); }
.actions .btn-icon.danger:hover,
.actions .btn-icon.btn-danger:hover,
.actions .btn-icon.btn-icon-danger:hover,
.btn-icon.danger:hover,
.btn-icon.btn-danger:hover,
.btn-icon.btn-icon-danger:hover { background: rgba(220,48,48,.08); border-color: var(--safeco-red); }

/* ── Libellés boutons ─────── */
.btn-label {
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}
@media (max-width: 1199px) {
  .btn-icon .btn-label,
  .btn-action .btn-label {
    display: none;
  }
  .actions .btn-icon,
  .btn-icon {
    padding: 0;
    width: 32px;
  }
}

/* ── Date alerts (véhicules, habilitations) ────── */
.date-alert-red { color: var(--safeco-red); font-weight: 600; }
.date-alert-orange { color: #f97316; font-weight: 600; }
/* Alias sémantiques dates habilitations */
.date-valid   { color: var(--safeco-green); font-weight: 600; }
.date-soon    { color: #F59E0B; font-weight: 600; }
.date-expired { color: var(--safeco-red); font-weight: 600; }

/* ── Badges généraux (compatibilité Bootstrap-style) ── */
.badge-success { background: rgba(91,168,69,.12);  color: var(--safeco-green); font-weight: 600; border-radius: 20px; padding: 2px 9px; font-size: 11.5px; white-space: nowrap; }
.badge-warning { background: rgba(232,145,16,.12); color: #d97706; font-weight: 600; border-radius: 20px; padding: 2px 9px; font-size: 11.5px; white-space: nowrap; }
.badge-danger  { background: rgba(220,48,48,.12);  color: var(--safeco-red); font-weight: 600; border-radius: 20px; padding: 2px 9px; font-size: 11.5px; white-space: nowrap; }

/* ── Badge durée absences ───────────────────────── */
.duree-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: rgba(79,70,229,.1);
  color: #4f46e5;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Période absences ───────────────────────────── */
.periode-text { font-size: 12.5px; color: var(--text-muted); }

/* ── Chips / Tags (postes, entretiens) ─────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.chip-blue   { background: #eff6ff; color: #1d4ed8; }
.chip-green  { background: #f0fdf4; color: #15803d; }
.chip-amber  { background: #fef3c7; color: #92400e; }
.chip-slate  { background: #f1f5f9; color: #475569; }
.chip-red    { background: #fee2e2; color: #b91c1c; }
.chip-purple { background: #ede9fe; color: #6d28d9; }

/* ── Catégories notes de frais ──────────────────── */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cat-deplacement { background: #dbeafe; color: #1d4ed8; }
.cat-repas       { background: #fef9c3; color: #92400e; }
.cat-hebergement { background: #ede9fe; color: #6d28d9; }
.cat-materiel    { background: #dcfce7; color: #15803d; }
.cat-telephonie  { background: #fee2e2; color: #b91c1c; }
.cat-autre       { background: #f1f5f9; color: #475569; }

/* ── Montants notes de frais ────────────────────── */
.montant-cell       { font-weight: 800; font-size: 14px; }
.montant-en_attente { color: #d97706; }
.montant-validee    { color: #16a34a; }
.montant-refusee    { color: #dc2626; text-decoration: line-through; }

/* ── Grille formulaire 2 colonnes (modal, notes) ── */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 580px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ── btn-add → harmonisé avec btn-primary ──────── */
.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  line-height: 1.5;
  background: var(--safeco-gold);
  color: var(--safeco-dark);
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-add:hover { background: #dda700; }

/* ── Historique table (véhicules) ──────────────── */
.historique-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.historique-table th,
.historique-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.historique-table th {
  background: #1e293b;
  font-weight: 600;
  color: #ffffff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: none;
}

/* ── Filtres / Barre de recherche (variantes) ────── */
/* align-items: flex-end pour que les boutons sans label restent alignés sur la
   baseline des selects/inputs même quand d'autres .filter-group ont un <label>
   au-dessus (cf. evaluations.html, chantiers.html, pointage.html, stock.html).
   Sans label, les items font tous 42 px → flex-end et center rendent identique. */
.filters,
.filters-group,
.filters-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 20px;
}

/* ── Onglets / boutons d'action dans une carte blanche ── */
.card-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
}
.filter-group {
  min-width: 0;
}
/* Un filtre ne doit jamais être compressé au point de devenir illisible.
   Avec min-width:0, flexbox préférait tout écraser sur une seule ligne
   plutôt que de passer à la ligne : sur Pointage, les combos s'affichaient
   « SOCIÉTÉ… », « AGENCE… », « CHANTI… » et le bouton Réinitialiser sortait
   du cadre (audit du 20/08/2026). Le minimum porte sur le CHAMP et non sur
   le groupe, pour ne pas élargir les groupes qui ne contiennent qu'un bouton
   ou une case à cocher. Il est neutralisé en dessous du breakpoint mobile,
   où les filtres passent en colonne pleine largeur. */
.filter-group > select,
.filter-group > .ss-wrap,
.filter-group > .date-range-picker,
.filter-group > .date-range-trigger,
.filter-group > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  min-width: 160px;
}
.filter-group:first-child {
  flex: 1;
  min-width: 200px;
  max-width: 380px;
}
/* Case à cocher inline dans une barre de filtres (ex. « Voir les véhicules sortis ») */
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--form-height);
  cursor: pointer;
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────
   Barres de filtres au-dessus des tableaux : tout sur UNE seule
   ligne sur desktop (≥993px) tant que la largeur le permet, pour
   gagner de la hauteur. Les champs se rétrécissent — mais JAMAIS
   sous un plancher de lisibilité.

   Correction du 20/08/2026 : le nowrap était absolu et le plancher
   valait 0. Au-delà de cinq ou six filtres, les combos devenaient
   « SOCIÉTÉ… », « AGENCE… », « CHANTI… » et les boutons sortaient
   du cadre — mesuré à 269 px de débordement sur Pointage à 1440 px,
   et constaté sur Candidatures et Clients. Avec wrap + plancher,
   une barre qui tient reste sur une ligne (wrap n'a alors aucun
   effet) et une barre trop chargée passe proprement à la ligne. */
@media (min-width: 993px) {
  .filters,
  .filters-group,
  .filters-row,
  .filters-bar {
    flex-wrap: wrap;
  }
  .filters > .filter-group,
  .filters-group > .filter-group,
  .filters-row > .filter-group,
  .filters-bar > .filter-group,
  .filters > .filter-group:first-child,
  .filters-bar > .filter-group:first-child,
  .filters-bar > .search-input-wrapper {
    flex: 0 1 auto;
    min-width: 160px;
    max-width: none;
  }
  /* Un groupe qui ne porte qu'un bouton ou une case à cocher garde sa
     largeur naturelle : lui imposer 160 px creuserait un trou dans la
     barre. Les navigateurs sans :has() gardent le plancher commun,
     ce qui reste lisible. */
  .filters > .filter-group:has(> .btn),
  .filters > .filter-group:has(> button),
  .filters > .filter-group:has(> .checkbox-inline),
  .filters-bar > .filter-group:has(> .btn),
  .filters-bar > .filter-group:has(> button),
  .filters-group > .filter-group:has(> .btn),
  .filters-group > .filter-group:has(> button),
  .filters-row > .filter-group:has(> .btn),
  .filters-row > .filter-group:has(> button) {
    min-width: 0;
  }
}

/* ═══════════════ Pagination serveur ═══════════════ */
.pagination-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #f8fafc;
  border-top: 1px solid var(--border, #e2e8f0);
  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
  flex-wrap: wrap;
}
.pagination-info {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  flex: 1 1 auto;
}
.pagination-info strong { color: #1e293b; font-weight: 700; }
.pagination-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.pagination-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination-btn:hover:not(:disabled):not(.active) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.pagination-btn.active {
  background: var(--primary, #2d6ab4);
  border-color: var(--primary, #2d6ab4);
  color: #fff;
}
.pagination-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.pagination-sep {
  padding: 0 4px;
  color: #94a3b8;
  user-select: none;
}
.pagination-perpage {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.pagination-perpage label { white-space: nowrap; }
.pagination-select {
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: 6px;
}
@media (max-width: 640px) {
  .pagination-wrap { flex-direction: column; gap: 10px; align-items: stretch; }
  .pagination-controls { justify-content: center; }
  .pagination-perpage { justify-content: center; }
}

/* Filter pills (matériel) */
.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-pill {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
}
.filter-pill:hover { border-color: var(--safeco-gold); color: var(--safeco-gold); }
.filter-pill.active {
  background: var(--safeco-gold);
  border-color: var(--safeco-gold);
  color: var(--safeco-dark);
}

/* ── Modal (variantes HTML) ─────────────────────── */
.modal,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1040;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.open,
.modal.active,
.modal.show,
.modal-overlay.open,
.modal-overlay.active,
.modal-overlay.show {
  display: flex;
}

.modal > .modal-content,
.modal-overlay > .modal-content {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: min(95vw, 1100px);
  max-height: 92vh;
  /* Dimensions stables — empêche le redimensionnement selon le contenu de l'onglet actif */
  min-height: min(420px, 80vh);
  /* Layout flex colonne : header fixe + body scrollable + footer fixe */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: modalIn .2s ease;
}
/* Quand un <form> est enfant direct de modal-content, il doit hériter du flex column */
.modal-content > form,
.modal-overlay > .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.modal-lg > .modal-content,
.modal > .modal-content.modal-lg {
  width: min(95vw, 1200px);
}
/* Modale multi-onglets (ex : fiche employé) — hauteur et largeur fixes */
.modal-tabbed > .modal-content {
  height: min(900px, 94vh);
  min-height: unset;
  width: min(95vw, 1300px);
}

/* ── Modal size variants ─────────────────────────────────────── */
.modal-sm .modal-content, .modal-sm .modal-dialog { max-width: 540px; }
.modal-md .modal-content, .modal-md .modal-dialog { max-width: 900px; }
.modal-lg .modal-content, .modal-lg .modal-dialog { max-width: 1100px; }

.modal .modal-header,
.modal-overlay .modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal .modal-header h2,
.modal .modal-header .modal-title,
.modal-overlay .modal-header h2,
.modal-overlay .modal-header .modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.modal .modal-close,
.modal-overlay .modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all var(--transition);
}
.modal .modal-close:hover,
.modal-overlay .modal-close:hover {
  background: var(--bg);
  color: var(--safeco-red);
}
.modal .modal-body,
.modal-overlay .modal-body {
  padding: 24px;
  flex: 1;           /* remplit l'espace restant dans le flex column */
  overflow-y: auto;  /* scroll dans le contenu, pas dans le conteneur entier */
  min-height: 0;     /* fix flex overflow */
}
.modal .modal-footer,
.modal-overlay .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  background: #FAFAFA;
}

/* Form grid layout dans les modals */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .form-group { margin-bottom: 0; }
.form-grid .form-group.full-width {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ── Ligne de configuration libellé/champ (parametres_sous_traitants) ── */
.st-config-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .st-config-row { grid-template-columns: 1fr; }
}

/* ── Encarts pastel (onglet Contrat RH) ────────────── */
.contrat-encart {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.contrat-encart .encart-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contrat-encart .encart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.encart-grid .form-group { margin-bottom: 0; }
@media (max-width: 640px) {
  .contrat-encart .encart-grid { grid-template-columns: 1fr; }
}
/* Variante bleue pastel — Identification */
.encart-blue { background: #f0f7ff; border-color: #e0edff; border-left-color: #a5c8f7; }
.encart-blue .encart-title { color: #5b8ec9; }
/* Variante verte pastel — Poste & Contrat */
.encart-green { background: #f2faf5; border-color: #d6f0de; border-left-color: #8fd4a4; }
.encart-green .encart-title { color: #5ea87a; }
/* Variante ambre pastel — Classification & Rémunération */
.encart-amber { background: #fef9ef; border-color: #f5e8c8; border-left-color: #dfc48b; }
.encart-amber .encart-title { color: #b5944e; }
/* Variante violette pastel — Options */
.encart-purple { background: #f7f5fc; border-color: #e6e0f5; border-left-color: #b8a9e0; }
.encart-purple .encart-title { color: #8878b8; }

/* ── Titre de page (variantes) ──────────────────── */
h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ── Helper classes ─────────────────────────────── */
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Montants/nombres/unités : ne jamais casser sur 2 lignes (ex « 390,00 € ») */
.nowrap-num { white-space: nowrap; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--safeco-red); }
.text-success { color: var(--safeco-green); }

/* ── Badge info ─────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-info, .badge-blue {
  background: rgba(45,106,180,.1);
  color: var(--safeco-blue);
}
.badge-success, .badge-green, .badge-valide, .badge-realisé, .badge-actif {
  background: rgba(91,168,69,.1);
  color: var(--safeco-green);
}
.badge-warning, .badge-orange, .badge-attente, .badge-saisi, .badge-en_attente {
  background: rgba(232,145,16,.1);
  color: #E89110;
}
.badge-danger, .badge-red, .badge-expiré, .badge-terminé {
  background: rgba(220,48,48,.1);
  color: var(--safeco-red);
}
.badge-primary {
  background: rgba(45,106,180,.15);
  color: var(--safeco-blue);
}
.badge-secondary, .badge-suspendu, .badge-annulé {
  background: rgba(126,130,153,.1);
  color: var(--text-muted);
}

/* ── Badge statut couleur (alias globaux badgeStatut()) ─ */
.badge-status.badge-green  { color: var(--safeco-green); background: rgba(91,168,69,.1); }
.badge-status.badge-blue   { color: var(--safeco-blue);  background: rgba(45,106,180,.1); }
.badge-status.badge-red    { color: var(--safeco-red);   background: rgba(220,48,48,.1); }
.badge-status.badge-warning{ color: #E89110;              background: rgba(232,145,16,.1); }

/* ── Badges jours restants (habilitations, docs) ── */
.badge-days {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.badge-days.valid   { background: rgba(91,168,69,.12);  color: var(--safeco-green); }
.badge-days.soon    { background: rgba(232,145,16,.12); color: #E89110; }
.badge-days.expired { background: rgba(220,48,48,.12);  color: var(--safeco-red); }

/* ── Triangle clignotant expiration ────────── */
@keyframes blink-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.exp-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  width: 24px;
}
.exp-alert.expired {
  color: var(--safeco-red);
  animation: blink-alert 1s ease-in-out infinite;
}
.exp-alert.soon {
  color: #E89110;
  animation: blink-alert 1.5s ease-in-out infinite;
}

/* ── Badges document (CV / LM) entretiens ────────── */
.badge-doc {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.badge-doc.ok  { background: #dcfce7; color: #15803d; }
.badge-doc.no  { background: #fee2e2; color: #b91c1c; }

/* ── Required label marker ──────────────────────── */
.required::after {
  content: ' *';
  color: var(--safeco-red);
}

/* ── Checkbox styled ────────────────────────────── */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--safeco-gold);
}

/* ── Alertes ─────────────────────────────────────── */
/* Toast flottant : reste visible AU-DESSUS de toutes les modales
   (modal-backdrop 1040 / modal-dialog 1050 / epmOverlay 10050). */
#flash-zone {
  position: fixed;
  top: 76px;
  right: 16px;
  width: 360px;
  max-width: calc(100vw - 32px);
  z-index: 11000;
  pointer-events: none;
}
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.45;
}
/* Toasts flottants — fond OPAQUE blanc + bordure gauche colorée + ombre marquée.
   Lisibilité maximale par-dessus tout contenu de page (cartes, tableaux, modales). */
#flash-zone > .alert {
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.10);
}
#flash-zone > .alert-success { color: #15803d; border-left-color: #16a34a; }
#flash-zone > .alert-danger  { color: #b91c1c; border-left-color: #dc2626; }
#flash-zone > .alert-warning { color: #92400e; border-left-color: #d97706; }
#flash-zone > .alert-info    { color: #1a4878; border-left-color: #2D6AB4; }

/* Variante inline (en flux d'une page, pas en toast flottant) — usage rare. */
.alert-success { background: rgba(91,168,69,.1); color: #3d7a2a; border: 1px solid rgba(91,168,69,.3); }
.alert-danger  { background: rgba(220,48,48,.1); color: #a81c1c; border: 1px solid rgba(220,48,48,.3); }
.alert-warning { background: rgba(245,184,0,.1); color: #8a6600; border: 1px solid rgba(245,184,0,.3); }
.alert-info    { background: rgba(45,106,180,.1); color: #1a4878; border: 1px solid rgba(45,106,180,.3); }

/* ── Modal ───────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1040;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal-dialog {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: 90%;
  max-width: 1000px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-muted);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.modal-close:hover { background: var(--bg); }
.modal-body    { padding: 24px; }
/* flex-wrap (29/08/2026) : quand les boutons injectés (Sortir / Enregistrer et
   rester / Enregistrer et sortir) s'ajoutent à un bouton local, ils passaient
   hors cadre — ils passent maintenant à la ligne. Sans débordement : inchangé. */
.modal-footer  { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ── Filtres / Recherche ─────────────────────────── */
.filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.search-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.search-input-wrapper i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.search-input-wrapper .form-control { padding-left: 36px; }

/* ── Composant sélecteur de période (date range compact) ── */
/* Utilisé sur plan_action.html, factures.html, etc.        */
.pa-period { min-width: 300px; flex: 1.4; }
.pa-period-wrap {
  display: flex; align-items: center; gap: 6px; width: 100%;
  height: var(--form-height, 42px);
  padding: 0 8px 0 12px;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.pa-period-wrap:focus-within { border-color: var(--safeco-blue, #2563eb); box-shadow: 0 0 0 3px rgba(45,106,180,.12); }
.pa-period-icon { color: #94a3b8; font-size: 14px; flex-shrink: 0; }
.pa-period-wrap input[type="date"] {
  flex: 1; min-width: 110px;
  border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--text, #1e293b);
  padding: 0; height: auto;
  font-family: inherit;
}
.pa-period-sep { color: #cbd5e1; font-size: 13px; flex-shrink: 0; user-select: none; }
.pa-period-clear {
  background: none; border: none; cursor: pointer;
  color: #cbd5e1; font-size: 12px; padding: 4px 6px;
  border-radius: 4px; transition: color .15s, background .15s;
  flex-shrink: 0;
}
.pa-period-clear:hover { color: #dc2626; background: #fef2f2; }

/* ── DateRangePicker (composant période universel) ─── */
.date-range-picker { position: relative; }
.date-range-trigger {
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; white-space: nowrap; min-width: 220px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px;
  color: var(--text); transition: border-color .2s, box-shadow .2s;
  font-family: inherit; line-height: 1.5;
  min-height: var(--form-height); box-sizing: border-box;
}
.date-range-trigger:hover { border-color: var(--safeco-blue, #2D6AB4); }
.date-range-trigger:focus { outline: none; border-color: var(--safeco-blue, #2D6AB4); box-shadow: 0 0 0 3px rgba(45,106,180,.12); }
.date-range-dropdown {
  display: none; position: fixed;
  background: var(--card-bg, #fff); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.15);
  z-index: 9999; overflow: hidden;
}
.date-range-dropdown.open { display: block; }
.date-range-body { display: flex; }
.date-range-presets {
  width: 160px; padding: 12px 8px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(0,0,0,.02); overflow-y: auto; max-height: 340px;
}
.date-range-presets-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted); padding: 4px 8px 6px;
}
.date-range-presets button {
  background: none; border: none; text-align: left; padding: 7px 10px;
  font-size: 12.5px; color: var(--text); border-radius: 6px;
  cursor: pointer; transition: background .15s;
}
.date-range-presets button:hover { background: rgba(45,106,180,.08); }
.date-range-presets button.active { background: var(--safeco-blue, #2D6AB4); color: #fff; font-weight: 600; }
.date-range-calendars { display: flex; gap: 8px; padding: 12px 16px; }
.date-range-cal { width: 252px; }
.date-range-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 10px; font-size: 13px; font-weight: 600; color: var(--text);
}
.date-range-cal-header button {
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; color: var(--text-muted); font-size: 12px;
  transition: background .15s;
}
.date-range-cal-header button:hover { background: rgba(0,0,0,.06); }
.date-range-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-range-cal-grid .dr-dow {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  color: var(--text-muted); text-align: center; padding: 4px 0;
}
.date-range-cal-grid .dr-day {
  text-align: center; padding: 6px 0; font-size: 12.5px;
  border-radius: 6px; cursor: pointer; transition: background .12s, color .12s;
  color: var(--text); border: none; background: none;
}
.date-range-cal-grid .dr-day:hover { background: rgba(45,106,180,.08); }
.date-range-cal-grid .dr-day.other { color: var(--text-muted); opacity: .4; pointer-events: none; }
.date-range-cal-grid .dr-day.today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--safeco-blue, #2D6AB4); }
.date-range-cal-grid .dr-day.in-range { background: rgba(45,106,180,.10); border-radius: 0; }
.date-range-cal-grid .dr-day.range-start { background: var(--safeco-blue, #2D6AB4); color: #fff; font-weight: 600; border-radius: 6px 0 0 6px; }
.date-range-cal-grid .dr-day.range-end   { background: var(--safeco-blue, #2D6AB4); color: #fff; font-weight: 600; border-radius: 0 6px 6px 0; }
.date-range-cal-grid .dr-day.range-start.range-end { border-radius: 6px; }
@media (max-width: 768px) {
  .date-range-dropdown { left: 8px !important; right: 8px !important; }
  .date-range-body { flex-direction: column; }
  .date-range-presets { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); max-height: none; }
  .date-range-calendars { flex-direction: column; }
  .date-range-cal { width: 100%; }
}

/* ── Progression ─────────────────────────────────── */
.progress-bar-wrap {
  background: var(--border);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--safeco-gold);
  transition: width .5s ease;
}
.progress-bar-fill.green  { background: var(--safeco-green); }
.progress-bar-fill.red    { background: var(--safeco-red); }
.progress-bar-fill.blue   { background: var(--safeco-blue); }

/* ── Alertes mini ────────────────────────────────── */
.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  margin-bottom: 10px;
  font-size: 13px;
}
.alert-item.danger  { background: rgba(220,48,48,.06);  border-color: var(--safeco-red); }
.alert-item.warning { background: rgba(245,184,0,.06);  border-color: var(--safeco-gold); }
.alert-item.info    { background: rgba(45,106,180,.06); border-color: var(--safeco-blue); }

/* ── Login page ──────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  background: linear-gradient(135deg, var(--safeco-dark) 0%, #2d2d50 50%, #1a2a4a 100%);
}
.login-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.login-left::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,184,0,.08) 0%, transparent 70%);
  border-radius: 50%;
}
.login-right {
  width: 440px;
  /* Sans cela, le panneau décoratif de gauche (flex:1) peut comprimer le
     formulaire sous sa largeur utile sur les écrans étroits. */
  flex-shrink: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 48px;
}
.login-logo { margin-bottom: 40px; text-align: center; }
.login-logo img, .login-logo svg { max-width: 220px; }
.login-tagline {
  color: rgba(255,255,255,.6);
  font-size: 15px;
  text-align: center;
  max-width: 360px;
  margin-top: 20px;
  line-height: 1.7;
}
.login-features {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.8);
  font-size: 13.5px;
}
.login-feature i {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.login-feature.gold i   { background: rgba(245,184,0,.15); color: var(--safeco-gold); }
.login-feature.green i  { background: rgba(91,168,69,.15); color: var(--safeco-green); }
.login-feature.blue i   { background: rgba(45,106,180,.15); color: #7EB4F5; }
.login-feature.red i    { background: rgba(220,48,48,.15); color: #F57E7E; }

.login-form-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.login-form-subtitle {
  color: var(--text-muted);
  font-size: 13.5px;
  margin-bottom: 32px;
}
.login-form { width: 100%; }
.login-form .form-control {
  padding: 13px 16px;
  font-size: 14px;
}
.login-form .btn { width: 100%; padding: 13px; font-size: 15px; margin-top: 4px; }
.login-form .forgot { font-size: 12.5px; color: var(--text-muted); text-align: right; margin-top: 8px; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Colored bars déco login ─────────────────────── */
.color-bars {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.color-bar {
  width: 6px;
  height: 40px;
  border-radius: 3px;
}

/* ── Charts ──────────────────────────────────────── */
.chart-container { position: relative; }

/* ── Timeline ────────────────────────────────────── */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-bottom: 20px;
  font-size: 13px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--safeco-gold);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(245,184,0,.2);
}
.timeline-item.green::before { background: var(--safeco-green); box-shadow: 0 0 0 3px rgba(91,168,69,.2); }
.timeline-item.red::before   { background: var(--safeco-red);   box-shadow: 0 0 0 3px rgba(220,48,48,.2); }
.timeline-item.blue::before  { background: var(--safeco-blue);  box-shadow: 0 0 0 3px rgba(45,106,180,.2); }
.timeline-date { color: var(--text-muted); font-size: 11px; margin-bottom: 2px; }
.timeline-content { color: var(--text); }

/* ── Pagination ──────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.page-link {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.page-link:hover, .page-link.active {
  background: var(--safeco-gold);
  border-color: var(--safeco-gold);
  color: var(--safeco-dark);
  font-weight: 700;
}

/* ── Toggle sidebar mobile ───────────────────────── */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
}

/* ── Tabs ──────────────────────────────────────────
   Alignés sur les onglets de Pointage (.pt-tab), plus lisibles : l'or sur
   fond blanc manquait de contraste et le soulignement trop fin se voyait à
   peine (retour de David, 20/08/2026). Le bleu est la couleur d'accent de
   la plateforme — boutons principaux, liens — et le trait passe à 3 px.
   Hauteur minimale 44 px : c'est aussi la zone de tap sur mobile. */
.tabs-nav {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-link {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px 8px 0 0;
}
.tab-link:hover   { color: var(--safeco-blue); background: #f8fafc; }
.tab-link.active  { color: var(--safeco-blue); border-bottom-color: var(--safeco-blue); }
.tab-link.active i { color: var(--safeco-blue); }
/* Compteur d'onglet : pastille pleine, lisible, qui suit l'état de l'onglet. */
.tab-link .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  background: #e2e8f0;
  color: #475569;
}
.tab-link.active .badge { background: var(--safeco-blue); color: #fff; }
/* Un compteur d'éléments EN ATTENTE reste ambré même sur l'onglet inactif :
   c'est une alerte, elle ne doit pas se fondre dans le décor. */
.tab-link .badge.badge-warning { background: #FEF3C7; color: #92400E; }
.tab-link.active .badge.badge-warning { background: #F59E0B; color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* Modale à onglets : la barre d'onglets reste figée en haut pendant que le
   contenu défile (taille de fenêtre fixe via .modal-tabbed). Fond opaque qui
   porte le padding du body pour éviter toute bande transparente au scroll. */
.modal-tabbed .modal-body > .tabs-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card-bg);
  margin: -24px -24px 24px;
  padding: 24px 24px 0;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 1050;
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .sidebar-toggle { display: block; }
  .quick-search-wrapper { display: none; }
  .login-left { display: none; }
  .login-right { width: 100%; max-width: 480px; margin: auto; flex-shrink: 1; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr; }
  /* Modal plus étroit sur tablette */
  .modal > .modal-content,
  .modal-overlay > .modal-content,
  .modal-content { max-width: 95vw; }
  /* Header fixe sur mobile — toujours visible en haut */
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
  }
  /* Masquer le fil d'Ariane sur mobile — trop encombrant */
  .top-header .breadcrumb,
  .top-header ol.breadcrumb,
  .top-header ul.breadcrumb { display: none !important; }
  /* Compenser la hauteur du header fixe */
  .page-content {
    padding-top: calc(var(--header-height) + 16px);
  }
}

@media (max-width: 640px) {
  .page-content { padding: 16px; padding-top: calc(var(--header-height) + 12px); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  /* Formulaires en 1 colonne sur mobile */
  .form-row,
  .form-row.cols-2,
  .form-row.cols-3,
  .form-grid { grid-template-columns: 1fr !important; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .btn { width: 100%; justify-content: center; }
  .top-header { padding: 0 12px; gap: 8px; }
  /* Filtres en colonne sur mobile */
  .filters,
  .filters-bar,
  .filters-group,
  .filters-row,
  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group:first-child { max-width: 100%; }
  .filter-group input,
  .filter-group select,
  .filters-bar input,
  .filters-bar select,
  .filters-group input,
  .filters-group select { width: 100%; min-width: 0; }
  /* Boutons filtres pleine largeur */
  .filters .btn,
  .filters-bar .btn,
  .btn-add { width: 100%; justify-content: center; }
  /* Page content — espace en bas pour safe area iOS */
  .page-content { padding-bottom: 32px; }
  /* Modals plein écran sur mobile */
  .modal > .modal-content,
  .modal-overlay > .modal-content,
  .modal-content {
    max-width: 100vw;
    max-height: 100vh;             /* fallback navigateurs anciens */
    max-height: 100dvh;            /* dvh = viewport dynamique (exclut la barre navigateur iOS) */
    min-height: unset;             /* reset du min-height desktop (420px) */
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* le scroll se fait dans modal-body */
  }
  .modal, .modal-overlay { padding: 0; }
  /* Body scrollable, header + footer toujours visibles */
  .modal .modal-body,
  .modal-overlay .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal .modal-footer,
  .modal-overlay .modal-footer { flex-shrink: 0; padding-bottom: 20px; }
  .modal .modal-header,
  .modal-overlay .modal-header { flex-shrink: 0; }
  /* modal-dialog (variante) */
  .modal-dialog {
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-dialog .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-dialog .modal-footer { flex-shrink: 0; padding-bottom: 20px; }
  .modal-dialog .modal-header { flex-shrink: 0; }
  /* Tableau scrollable */
  .table-responsive,
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table,
  .table-wrapper table { min-width: 600px; }
  /* Header actions */
  .header-actions { gap: 6px; }
  .header-actions > div:last-child { display: none; } /* cache la date */
}

@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
  h1 { font-size: 18px; }
}

/* ── .table-container (alias scrollable horizontal) ─── */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-container table { min-width: 600px; }

/* ── Grilles dashboard responsive ───────────────── */
.dash-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.dash-grid-3-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  margin-bottom: 24px;
}
/* Grille 50/50 — ex: Mon Dashboard (absences | notes de frais) */
.dash-grid-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .dash-grid-2-1,
  .dash-grid-3-2,
  .dash-grid-equal {
    grid-template-columns: 1fr;
  }
}

/* ── Pages de connexion sur smartphone ──────────────
   Le panneau blanc garde un padding de 48 px hérité du bureau : sur un écran
   de 375 px il ne reste que 279 px pour les champs. On resserre, et on garde
   des zones de tap confortables. Concerne login, login_employe,
   login_sous_traitant et reset_password. */
@media (max-width: 640px) {
  .login-page { min-height: 100dvh; }
  .login-right {
    padding: 28px 20px;
    justify-content: flex-start;
    padding-top: 40px;
  }
  .login-form-title { font-size: 21px; }
  .login-form-subtitle { font-size: 13px; }
  /* Zone de tap : 44 px minimum (bouton principal et champs). */
  .login-form .btn { padding: 14px; font-size: 15px; min-height: 48px; }
  .login-form .input-text { min-height: 46px; font-size: 16px; }
}

/* ── Améliorations mobiles complémentaires ────────── */
@media (max-width: 640px) {
  /* Card — overflow auto pour permettre scroll horizontal Safari iOS */
  .card { overflow: auto; }

  /* Cards — padding réduit */
  .card-body { padding: 14px; }
  .card-header {
    padding: 12px 14px 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .card-title { font-size: 13px; }
  .card-footer { padding: 10px 14px; }

  /* KPI — plus compacts */
  .kpi-card { padding: 8px 12px; gap: 8px; }
  .kpi-value, .kpi-num { font-size: 16px !important; }
  .kpi-icon { width: 28px; height: 28px; font-size: 13px; }
  .kpi-label, .kpi-lbl { font-size: 10px; }
  .kpi-sub  { font-size: 10px; }

  /* Titre de page */
  h1 { font-size: 18px; }
  .subtitle { font-size: 11px; }

  /* Tableau — cellules compactes */
  .data-table th,
  .data-table td { padding: 8px 10px; font-size: 12px; }
  .data-table thead th { font-size: 11px; letter-spacing: .02em; }
  .td-actions { gap: 4px; }

  /* Boutons d'actions dans les tables — icônes seules sur mobile */
  .td-actions .btn-icon,
  .actions .btn-icon {
    width: 28px; height: 28px; font-size: 11px; padding: 0;
  }

  /* Filtres — 2 colonnes sur mobile (compact) */
  .filters,
  .filters-bar,
  .filters-group,
  .filters-row {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  /* Enfants directs : .filter-group OU div (selon la page) */
  .filters .filter-group,
  .filters-bar .filter-group,
  .filters-group > div,
  .filters-row > div {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
  /* Premier enfant (champ recherche) — toujours pleine largeur */
  .filters .filter-group:first-child,
  .filters-bar .filter-group:first-child,
  .filters-group > div:first-child,
  .filters-row > div:first-child {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }
  /* Boutons filtres — pleine largeur */
  .filters .btn,
  .filters-bar .btn,
  .filters-group .btn,
  .filters-row .btn,
  .filters .btn-add,
  .filters-bar .btn-add {
    flex: 1 1 100%;
    width: 100%;
  }
  /* Labels dans les filtres — compact */
  .filter-group > label,
  .filters-group > div > label,
  .filters-row > div > label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Search input — pleine largeur sur mobile */
  .search-input-wrapper {
    max-width: 100%;
    width: 100%;
  }

  /* Champs de recherche et filtres */
  input[type="search"],
  .search-input,
  .filter-input { width: 100% !important; min-width: 0 !important; }

  /* Anti-zoom iOS : Safari auto-zoom les inputs < 16px — forcer 16px sur mobile */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Page header — titre compact, espacement réduit */
  .page-header { margin-bottom: 16px; }
  .page-header h1 { font-size: 17px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; }

  /* Top header */
  .top-header { height: auto; min-height: 54px; padding: 8px 12px; }

  /* Pagination */
  .pagination { gap: 3px; flex-wrap: wrap; }
  .pagination button { padding: 5px 9px; font-size: 11px; min-width: 32px; }

  /* Section headers avec titre + bouton */
  .section-header { flex-wrap: wrap; gap: 8px; }
  .section-header .btn { flex: 1; min-width: 120px; justify-content: center; }

  /* Badges — plus petits */
  .badge { padding: 2px 7px; font-size: 10.5px; }

  /* Page content — espacement réduit entre sections */
  .page-content > .card,
  .page-content > .kpi-grid {
    margin-bottom: 12px;
  }

  /* Onglets de carte — scroll horizontal sur mobile */
  .card-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 10px 12px;
    gap: 6px;
    scrollbar-width: none; /* Firefox */
  }
  .card-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .card-tabs .btn {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
  }

  /* page-content — padding réduit sur mobile (conserver padding-top pour header fixe) */
  .page-content { padding: 14px 12px; padding-top: calc(var(--header-height) + 10px); }

  /* ── Anti-zoom iOS : forcer font-size ≥ 16px sur les champs ── */
  /* iOS Safari zoome automatiquement sur les inputs dont la font < 16px */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select,
  .form-control,
  .form-select,
  .input-text,
  .input-select,
  .filter-input,
  .filter-select {
    font-size: 16px !important;
  }
}

/* ── Overlay sidebar mobile ──────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1049;
}
.sidebar-overlay.open { display: block; }

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Print ───────────────────────────────────────── */
@media print {
  .sidebar, .top-header, .btn, .btn-action, .page-actions { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ── Engins page ──────────────────────────────────────────── */
#eng-mini-map { width:100%; height:300px; border-radius:10px; border:1px solid #e5e7eb; z-index:1; }
.eng-map-info { background:#fffbeb; border-left:3px solid #f59e0b; padding:10px 14px; border-radius:0 8px 8px 0; margin-bottom:12px; font-size:13px; color:#92400e; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* Bord gauche bleu réservé aux cartes SANS couleur propre (page Engins : .active / .maint).
   Appliqué à toutes, il s'ajoutait à la barre de couleur ::before des cartes .gold/.green/.red…
   → deux couleurs sur le bord (constaté le 25/09/2026). */
.kpi-card { background: white; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.kpi-card:not(.gold):not(.green):not(.blue):not(.red):not(.purple):not(.teal):not(.kpi-blue):not(.kpi-green):not(.kpi-amber):not(.kpi-red):not(.kpi-purple):not(.kpi-slate) { border-left: 4px solid #0066cc; }
.kpi-card.active { border-left-color: #22c55e; }
.kpi-card.maint { border-left-color: #f97316; }
.kpi-card .label { font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-card .value { font-size: 1.5rem; font-weight: 700; color: #1f2937; margin-top: 0.25rem; }
.historique-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.historique-table th, .historique-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; }
.historique-table th { background: #f9fafb; font-weight: 600; color: #374151; }

/* ── Vehicules page ───────────────────────────────────────── */
#veh-mini-map { width:100%; height:300px; border-radius:10px; border:1px solid #e5e7eb; z-index:1; }
.veh-map-info { background:#f0f9ff; border-left:3px solid #3b82f6; padding:10px 14px; border-radius:0 8px 8px 0; margin-bottom:12px; font-size:13px; color:#1e40af; }
.kpi-card.available { border-left-color: #22c55e; }
.kpi-card.mission { border-left-color: #3b82f6; }
.kpi-card.maintenance { border-left-color: #f97316; }
.date-alert-red { color: #ef4444; font-weight: 600; }
.date-alert-orange { color: #f97316; font-weight: 600; }

/* ── Parametres page ──────────────────────────────────────── */
.settings-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 24px;
}
.settings-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.settings-card-title i {
  color: var(--primary);
  font-size: 18px;
}
.port-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── Permissions layout ── */
.perm-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .perm-layout { grid-template-columns: 1fr; }
}
.perm-col-left {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: #f8fafc;
}
.perm-col-right {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  min-height: 200px;
}
.profil-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background .15s;
  border: 1px solid transparent;
}
.profil-item:hover { background: #edf2f7; }
.profil-item.active { background: #e8f0fe; border-color: #2d6ab4; }
.profil-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.profil-name { font-size: 13px; font-weight: 600; flex: 1; color: var(--text); }
.profil-actions { display: flex; gap: 4px; }
.profil-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px 4px; border-radius: 4px;
  font-size: 12px;
}
.profil-btn:hover { color: var(--primary); background: #e8f0fe; }
.profil-btn.del:hover { color: #dc2626; background: #fef2f2; }

/* ── Matrice permissions ── */
.perm-group-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b;
  padding: 12px 0 6px; margin: 0 0 4px;
  border-bottom: 1px solid var(--border);
}
.perm-group-title i { font-size: 12px; }
.perm-group-name { display: flex; align-items: center; gap: 7px; }
.perm-group-toggles { display: flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: 0; }
.perm-group-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.perm-group-toggle input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; margin: 0; }
.perm-group-toggle.col-read  { color: #2563eb; }
.perm-group-toggle.col-write { color: #16a34a; }
@media (max-width: 640px) {
  .perm-group-toggles { width: 100%; justify-content: flex-start; }
}
.perm-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  align-items: center;
  padding: 5px 4px;
  border-radius: 6px;
  gap: 8px;
}
.perm-row:hover { background: #f8fafc; }
.perm-row-label { font-size: 13px; color: var(--text); }
.perm-row.perm-none .perm-row-label { color: #94a3b8; }
.perm-check-cell {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; color: var(--text-muted);
}
.perm-check-cell input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; margin: 0; }
.perm-check-cell.col-read  input { accent-color: #2563eb; }
.perm-check-cell.col-write input { accent-color: #16a34a; }
.perm-matrix-header {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 8px;
  padding: 0 4px 6px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
}
.perm-matrix-header span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #64748b;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.perm-matrix-header span:first-child { text-align: left; align-items: flex-start; }
.perm-matrix-header span.col-read  { color: #2563eb; }
.perm-matrix-header span.col-write { color: #16a34a; }
.perm-col-toggle { cursor: pointer; transform: scale(1.2); }

/* ── Tableau de bord à pictogrammes (dashboard.html) ─────────────────────── */
.dash-tiles-block { margin-bottom: 22px; }
.dash-tiles-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.dash-tiles-head h2 {
  font-size: 16px; font-weight: 800; color: var(--text); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.dash-tiles-head h2 i { color: var(--safeco-gold, #F5B800); }
.dash-tiles-head .text-muted { font-size: 12px; }
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.dash-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
  min-height: 132px; padding: 18px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--tile-color, #64748b);
  border-radius: 14px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}
.dash-tile-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--tile-color, #64748b);
  background: #f1f5f9; /* fallback navigateurs sans color-mix */
  background: color-mix(in srgb, var(--tile-color, #64748b) 12%, #fff);
}
.dash-tile-label {
  font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25;
}
.dash-tile-count { font-size: 11px; color: var(--text-muted); }
.dash-tiles-loading,
.dash-tiles-empty {
  grid-column: 1 / -1;
  text-align: center; color: var(--text-muted);
  padding: 28px 16px;
}
.dash-tiles-empty i { font-size: 30px; opacity: .4; display: block; margin-bottom: 10px; }
.dash-tiles-empty p { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.dash-tiles-empty span { font-size: 12px; }
@media (max-width: 640px) {
  .dash-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .dash-tile { min-height: 116px; padding: 14px 8px; }
  .dash-tile-icon { width: 46px; height: 46px; font-size: 19px; }
}

/* ── Pastilles d'agence (colonne « Agence » des tableaux) ─────────────────────
   Rendu par agenceBadges() dans app.js. Couleur de fond = couleur de l'agence. */
.ag-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap; color: #fff; line-height: 1.5;
}
.ag-badge-wrap { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── États de chargement / vide — centrage horizontal homogène ───────────────
   Composant central rendu par showLoader()/emptyState() dans app.js, + harmonisation
   de la classe de chargement partagée .loading-cell (sans centrage défini).
   L'ensemble « spinner + libellé » est centré horizontalement sur toutes les
   pages, sans casser les états vides/erreur. */
.app-loading-cell { text-align: center; padding: 40px 16px; }
.app-loading,
.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;     /* centrage horizontal du spinner + libellé */
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--text-muted);
}
.app-loading i,
.app-empty i { display: block; }
.app-empty i { font-size: 28px; opacity: .55; }
.app-loading span,
.app-empty span { font-size: 14px; }

/* Cellule de chargement utilisée directement dans le HTML des pages
   (<td class="loading-cell"><i class="fas fa-spinner fa-spin"></i> Chargement…</td>).
   Cette classe n'était pas définie globalement → libellé calé à gauche.
   On la centre horizontalement de façon homogène. NB : on ne touche PAS à
   .empty-row, surchargée localement comme ligne de données (simulateur de bulletin). */
td.loading-cell,
.loading-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 16px;
}
.loading-cell i { margin-right: 6px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Select recherchable (combo filtrable) — composant partagé (cf. app.js)
   Le <select> réel est masqué (.ss-hidden-select) mais conservé dans le DOM
   (id/name/value/change intacts). Le .ss-trigger reproduit visuellement un select
   SAFECO (42px, même bordure/rayon/police que .input-select). Le .ss-dropdown est
   appendu au <body> → z-index global cohérent, jamais rogné par overflow:hidden.
   ───────────────────────────────────────────────────────────────────────────── */
.ss-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
}
/* Le vrai select reste dans le DOM mais invisible et non interactif */
.ss-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Déclencheur : look identique à un .input-select */
.ss-trigger {
  width: 100%;
  min-width: 0;
  height: var(--form-height, 42px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition, .15s), box-shadow var(--transition, .15s);
  outline: none;
}
.ss-trigger:hover { border-color: #cbd5e1; }
.ss-wrap-open .ss-trigger,
.ss-trigger:focus {
  border-color: var(--safeco-gold);
  box-shadow: 0 0 0 3px rgba(245,184,0,.15);
}
.ss-disabled .ss-trigger {
  background: #f1f5f9;
  color: var(--text-muted);
  cursor: not-allowed;
}
.ss-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-label.ss-placeholder { color: var(--text-muted); opacity: .7; }
.ss-caret {
  position: absolute;
  right: 14px;
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform .15s;
}
.ss-wrap-open .ss-caret { transform: rotate(180deg); }

/* Dropdown (appendu au body) — au-dessus des modales (1040) */
.ss-dropdown {
  position: absolute;
  z-index: 11050;
  display: none;
  min-width: 180px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  overflow: hidden;
}
.ss-dropdown.ss-open { display: block; }
.ss-search {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.ss-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.ss-search-input:focus {
  border-color: var(--safeco-gold);
  box-shadow: 0 0 0 3px rgba(245,184,0,.15);
}
.ss-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.ss-option {
  padding: 9px 12px;
  border-radius: var(--radius-sm, 6px);
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.ss-option:hover,
.ss-option.ss-active { background: #f1f5f9; }
.ss-option.ss-selected {
  background: rgba(245,184,0,.14);
  font-weight: 600;
}
.ss-option.ss-opt-disabled {
  color: var(--text-muted);
  opacity: .6;
  cursor: not-allowed;
}
.ss-empty {
  padding: 14px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Responsive : dropdown pleine largeur + zones tap ≥44px sur mobile */
@media (max-width: 640px) {
  .ss-dropdown { max-width: 96vw; }
  .ss-search-input { height: 44px; font-size: 16px; }
  .ss-option { padding: 12px 14px; min-height: 44px; box-sizing: border-box; }
  .ss-list { max-height: 50vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFORMISATION GLOBALE DES BOUTONS (demande David — 24/06/2026)
   TOUS les boutons : fond BLEU SAFECO, picto + texte BLANC, taille cohérente.
   Placé en fin de fichier + !important pour neutraliser les ~68 styles inline.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn,
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-outline {
  background: var(--safeco-dark) !important;
  border-color: var(--safeco-dark) !important;
  color: #fff !important;
}
.btn:hover,
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover,
.btn-info:hover, .btn-warning:hover, .btn-outline:hover {
  background: #2d2d45 !important;     /* bleu un peu plus foncé au survol */
  border-color: #2d2d45 !important;
  color: #fff !important;
}
.btn i, .btn .fas, .btn .far, .btn .fa, .btn .btn-label { color: #fff !important; }

/* Boutons-icône (actions de tableaux & ailleurs) : bleus pleins, blanc, MÊME TAILLE carrée 34×34 */
.btn-icon,
.btn-icon.btn-primary, .btn-icon.danger, .btn-icon.btn-danger, .btn-icon.btn-icon-danger, .btn-icon.btn-success {
  background: var(--safeco-dark) !important;
  border: 1.5px solid var(--safeco-dark) !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-icon:hover,
.btn-icon.btn-primary:hover, .btn-icon.danger:hover, .btn-icon.btn-danger:hover, .btn-icon.btn-icon-danger:hover {
  background: #2d2d45 !important;
  border-color: #2d2d45 !important;
  color: #fff !important;
}
.btn-icon i, .btn-icon .fas, .btn-icon .far, .btn-icon .fa { color: #fff !important; font-size: 13px; }
.btn-icon .btn-label { display: none !important; }   /* bouton-icône = icône seule → taille fixe partout */

/* ═══════════════ Sidebar repliable en rail d'icônes (toggle desktop) ═══════════════ */
/* Icône de catégorie : présente dans le DOM mais masquée en mode normal,
   visible uniquement quand la sidebar est repliée en rail. */
.nav-cat-icon { display: none; }

/* Bouton de repli (barre du haut) — desktop uniquement (mobile = hamburger). */
.rail-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border: none; background: transparent; color: var(--text, #1e293b);
  cursor: pointer; border-radius: 8px; font-size: 16px; margin-right: 4px;
}
.rail-toggle:hover { background: var(--bg, #f1f5f9); }
@media (max-width: 992px) { .rail-toggle { display: none; } }

/* Mode rail : appliqué sur <body>, effet uniquement sur desktop. */
@media (min-width: 993px) {
  body.sidebar-rail .sidebar { width: var(--sidebar-rail, 88px); }
  body.sidebar-rail .main-content { margin-left: var(--sidebar-rail, 88px); }
  /* Masquer tous les textes / chevrons / badges */
  body.sidebar-rail .sidebar-logo .app-version,
  body.sidebar-rail .nav-section-title > span,
  body.sidebar-rail .nav-subsection > span,
  body.sidebar-rail .nav-link-label,
  body.sidebar-rail .nav-arrow,
  body.sidebar-rail .sidebar-user > div:last-child,
  body.sidebar-rail .sidebar-badge { display: none !important; }
  /* Afficher l'icône de catégorie en rail */
  body.sidebar-rail .nav-cat-icon { display: inline-block; }
  /* Centrer les icônes, supprimer les paddings latéraux */
  body.sidebar-rail .nav-section-title,
  body.sidebar-rail .nav-subsection,
  body.sidebar-rail .nav-toplevel-link,
  body.sidebar-rail .nav-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  body.sidebar-rail .nav-link i,
  body.sidebar-rail .nav-section-title i,
  body.sidebar-rail .nav-subsection i,
  body.sidebar-rail .nav-toplevel-link i { margin: 0; font-size: 20px !important; width: auto; }
  body.sidebar-rail .sidebar-logo { padding-left: 6px; padding-right: 6px; }
  body.sidebar-rail .sidebar-logo img { max-width: 74px; }
  body.sidebar-rail .sidebar-avatar { width: 38px; height: 38px; font-size: 14px; }
  body.sidebar-rail .sidebar-user { justify-content: center; }
  /* « Déconnexion » : masquer le libellé (texte nu), garder l'icône */
  body.sidebar-rail .sidebar-footer a { font-size: 0 !important; justify-content: center; }
  body.sidebar-rail .sidebar-footer a i { font-size: 19px !important; }
}

/* ── Bandeau « Message d'accueil » (paramétrable en Administration) — façon OxySafe ── */
.message-accueil {
  padding: 14px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  animation: msgAccueilSlide .4s ease;
}
.message-accueil .msg-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  animation: msgIconBlink 1.8s ease-in-out infinite;
}
@keyframes msgIconBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .message-accueil .msg-icon { animation: none; } }
.message-accueil .msg-text { flex: 1; white-space: pre-line; }
.message-accueil-info    { background: #e3f2fd; border-left: 4px solid #1976D2; color: #0d47a1; }
.message-accueil-warning { background: #fff3e0; border-left: 4px solid #F57C00; color: #e65100; }
.message-accueil-success { background: #e8f5e9; border-left: 4px solid #43A047; color: #1b5e20; }
.message-accueil-danger  { background: #fdecea; border-left: 4px solid #d32f2f; color: #b71c1c; }
@keyframes msgAccueilSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }


/* ── Origine d'un enregistrement (réception documentaire, 19/08/2026) ──────────
   Pastille discrète : la colonne existe dans tous les tableaux alimentables par
   courriel, sans alourdir des tableaux déjà larges. Le détail (expéditeur,
   date) est dans l'infobulle. */
.saf-origine {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  font-size: 11px; cursor: help;
}
.saf-origine-manuel { background: #f1f5f9; color: #94a3b8; }
.saf-origine-email  { background: #dbeafe; color: #1d4ed8; }

/* ───────────────────────────────────────────────────────────
   Très petits écrans (≤ 440 px — iPhone SE/13/15, Android courants).
   Les filtres passent en DEUX colonnes dès 640 px : à 375 px chaque
   colonne ne fait plus que 150 px et les libellés se coupent
   (« AGENCES (tou… », « CHANTIERS (t… » — audit du 20/08/2026).
   En dessous de 440 px on repasse donc à UNE colonne pleine largeur :
   la page s'allonge un peu, mais chaque filtre redevient lisible. */
@media (max-width: 440px) {
  .filters .filter-group,
  .filters-bar .filter-group,
  .filters-group > div,
  .filters-row > div {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FILTRES REPLIABLES (demande de David, 20/08/2026)

   Toute barre de filtres est enveloppée par initFiltresRepliables() dans
   une section dépliable, dépliée par défaut. Les barres de filtres
   occupaient jusqu'à trois lignes sur les pages très filtrées et
   repoussaient le tableau hors de l'écran ; on peut désormais rendre
   cette place au contenu.

   Second volet de la demande : DANS cette section, tous les champs ont
   la même hauteur et le même style — aucune différence visible entre un
   select natif, un champ texte, un combo cherchable (.ss-wrap) ou un
   sélecteur de période (.date-range-trigger).
   ═══════════════════════════════════════════════════════════════════════ */
.saf-filtres {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 8px);
  margin-bottom: 16px;
  overflow: hidden;
}
/* Une barre déjà logée dans une carte ne doit pas doubler le cadre. */
.card > .saf-filtres,
.card .saf-filtres { border: 0; margin-bottom: 0; border-radius: 0; }

.saf-filtres-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 18px;
  background: #f8fafc;
  border: 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-align: left;
  transition: background .15s;
}
.saf-filtres-tete:hover { background: #f1f5f9; }
.saf-filtres-icone { color: #2D6AB4; font-size: 13px; }
.saf-filtres-titre { flex: 0 0 auto; }
.saf-filtres-actifs {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 700;
}
.saf-filtres-chevron {
  margin-left: auto;
  font-size: 12px;
  color: #94a3b8;
  transition: transform .2s;
}
.saf-filtres.replie .saf-filtres-chevron { transform: rotate(180deg); }
.saf-filtres.replie .saf-filtres-tete { border-bottom: 0; }
.saf-filtres.replie .saf-filtres-corps { display: none; }

/* Filtres extraits de la barre de titre : .pt-filters était en
   display:contents et n'avait donc aucune boîte propre. Devenu autonome,
   il lui faut une vraie mise en page flex. */
.saf-filtres .saf-filtres-extrait {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 20px;
}
.saf-filtres .saf-filtres-extrait > .filter-group { margin: 0; }

/* KPI / panneau d'aide absorbés dans le corps repliable (David 24/08/2026) :
   ce ne sont plus des enfants directs de .page-content mais du corps replié —
   il leur faut le même espacement horizontal que la barre de filtres, plus un
   peu d'air au-dessus (séparation visuelle) et en dessous (avant le tableau). */
.saf-filtres-corps > .kpi-grid,
.saf-filtres-corps > details {
  margin: 0 20px 18px;
}
.saf-filtres-corps > .kpi-grid:first-child,
.saf-filtres-corps > details:first-child { margin-top: 18px; }
/* Barre de filtres logée directement dans le bloc repliable : même marge intérieure que
   les filtres extraits de la barre de titre (sinon les champs touchent le cadre). */
.saf-filtres-corps > .filters-bar,
.saf-filtres-corps > .filters,
.saf-filtres-corps > .filters-group { padding: 16px 20px 18px; margin: 0 !important; }

/* Création rapide de client à droite du champ Client (commun à toutes les pages) */
.qc-client-row { display: flex; gap: 8px; align-items: flex-start; }
.qc-client-row > select,
.qc-client-row > .ss-wrap,
.qc-client-row > .input-select { flex: 1 1 0; width: auto; min-width: 0; }
.qc-client-row > .qc-add-btn { flex: 0 0 42px; width: 42px; height: var(--form-height, 42px); padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ── Uniformité stricte des champs de filtre ── */
.saf-filtres input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.saf-filtres select,
.saf-filtres .ss-trigger,
.saf-filtres .date-range-trigger,
.saf-filtres .agf-trigger,
.saf-filtres .btn {
  height: var(--form-height, 42px);
  min-height: var(--form-height, 42px);
  box-sizing: border-box;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.4;
  border-radius: var(--radius-sm, 6px);
}
.saf-filtres input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.saf-filtres select,
.saf-filtres .ss-trigger,
.saf-filtres .date-range-trigger,
.saf-filtres .agf-trigger {
  border: 1.5px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--text, #1f2937);
}
/* Champ simple : marge égale des deux côtés. */
.saf-filtres input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  padding: 0 14px;
}
/* Élément déroulant : la place du chevron doit rester libre à droite, sinon
   le libellé vient buter dessus (« SOCIÉTÉS (toutes)⌄ »). */
.saf-filtres select,
.saf-filtres .ss-trigger,
.saf-filtres .date-range-trigger,
.saf-filtres .agf-trigger {
  padding: 0 34px 0 14px;
}
/* Le combo cherchable habille son propre wrapper : sans cela, le trigger
   flotte à une hauteur différente de celle des selects voisins. */
.saf-filtres .ss-wrap,
.saf-filtres .date-range-picker { display: flex; align-items: stretch; }
.saf-filtres .ss-wrap .ss-trigger,
.saf-filtres .date-range-picker .date-range-trigger { width: 100%; }

@media (max-width: 640px) {
  .saf-filtres-tete { padding: 10px 14px; }
  .saf-filtres .saf-filtres-extrait { padding: 14px; gap: 10px; }
}

/* ══════════ ALERTES DE FORMATION SUR LE TABLEAU DE BORD ══════════
   Réunion Mickael ALBANO du 26/08/2026, point 10 : les alertes d'un dossier
   sont visibles sur le dossier ET sur le tableau de bord, en clignotant,
   purgeables en un clic. Diffusion limitée aux personnes de l'« Encadrement ».
   Aucune notification par e-mail — demande explicite : « des mails, on en
   reçoit trop et on ne les lit plus ».
   Classes propres au tableau de bord Formation, aucune page ne les utilisait. */
.dash-alertes { border: 1px solid #fcd34d; background: #FFFBEB; border-radius: 12px; padding: 14px 18px; margin: 0 0 18px; }
.dash-alertes.danger { border-color: #fca5a5; background: #FEF2F2; }
.dash-al-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #92400E; flex-wrap: wrap; }
.dash-alertes.danger .dash-al-h { color: #b91c1c; }
.dash-al-h > i { animation: dashAlBlink 1.4s ease-in-out infinite; }
@keyframes dashAlBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dash-al-h > i { animation: none; } }
.dash-al-purge { margin-left: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer;
                 font-size: 12px; font-weight: 600; color: #64748b; padding: 7px 13px; font-family: inherit; white-space: nowrap; min-height: 36px; }
.dash-al-purge:hover { color: #0F6E56; border-color: #cfe8de; }
.dash-al-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dash-al-i { display: block; background: #fff; border: 1px solid #fde9ce; border-radius: 10px; padding: 11px 14px;
             text-decoration: none; color: inherit; }
.dash-al-i:hover { border-color: #0F6E56; }
.dash-al-i.danger { border-color: #fecaca; }
.dash-al-doss { font-size: 11.5px; font-weight: 700; color: #0F6E56; text-transform: uppercase; letter-spacing: .03em; }
.dash-al-msg { font-size: 13px; color: #1e293b; line-height: 1.45; margin-top: 3px; }
@media (max-width: 640px) {
  .dash-alertes { padding: 12px 14px; }
  .dash-al-purge { margin-left: 0; width: 100%; }
}