/* ================================================================
   DASHBOARD V2 — MODERN UI (#9527)
   Standalone layout — does not depend on write_menu/write_lateral_menu.
   To revert: switch back to index_d.php.
   ================================================================ */

/* ===== DESIGN TOKENS ===== */
:root, :root.light {
  --eb-primary: #2563EB;
  --eb-primary-light: #EFF6FF;
  --eb-primary-dim: #DBEAFE;
  --eb-success: #10B981;
  --eb-success-light: #ECFDF5;
  --eb-warning: #F97316;
  --eb-warning-light: #FFF7ED;
  --eb-danger: #EF4444;
  --eb-danger-light: #FEF2F2;
  --eb-purple: #8B5CF6;
  --eb-purple-light: #F5F3FF;
  --eb-surface: #FFFFFF;
  --eb-surface-hover: #F8FAFC;
  --eb-bg: #F1F5F9;
  --eb-text: #1E293B;
  --eb-text-secondary: #64748B;
  --eb-text-muted: #94A3B8;
  --eb-border: #E2E8F0;
  --eb-radius: 12px;
  --eb-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --eb-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --eb-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --eb-transition: 0.2s ease;
  --eb-primary-hover: #1D4ED8;
  --eb-success-hover: #059669;
  --eb-danger-hover: #DC2626;
  --eb-warning-hover: #D97706;
  --eb-danger-bg: #FEE2E2;
  --eb-scrollbar: #CBD5E1;
  --eb-sidebar-text: #64748B;
  --eb-sidebar-text-hover: #1E293B;
  /* Sidebar component tokens (#9575 Phase 3) */
  --eb-sidebar-bg: #0F172A;
  --eb-sidebar-color: #CBD5E1;
  --eb-sidebar-text-bright: #F1F5F9;
  --eb-sidebar-text-dim: #64748B;
  --eb-sidebar-nav-section: #475569;
  --eb-sidebar-nav-text: #94A3B8;
  --eb-sidebar-nav-hover-text: #E2E8F0;
  --eb-sidebar-nav-hover-bg: rgba(255,255,255,0.06);
  --eb-sidebar-active-bg: rgba(37,99,235,0.15);
  --eb-sidebar-chevron: rgba(255,255,255,0.3);
  --eb-sidebar-chevron-active: #60A5FA;
  --eb-sidebar-border: rgba(255,255,255,0.08);
  --eb-sidebar-menu-bg: #1E293B;
  --eb-sidebar-menu-border: rgba(255,255,255,0.1);
  --eb-sidebar-toggle: #334155;
  --eb-sidebar-toggle-dot: #94A3B8;
}
:root.dark {
  --eb-primary: #3B82F6;
  --eb-primary-light: #1E3A5F;
  --eb-primary-dim: #1E3A5F;
  --eb-success: #34D399;
  --eb-success-light: #064E3B;
  --eb-warning: #FB923C;
  --eb-warning-light: #431407;
  --eb-danger: #F87171;
  --eb-danger-light: #450A0A;
  --eb-purple: #A78BFA;
  --eb-purple-light: #2E1065;
  --eb-surface: #1C1C1C;
  --eb-surface-hover: #252525;
  --eb-bg: #0F0F0F;
  --eb-text: #E2E8F0;
  --eb-text-secondary: #94A3B8;
  --eb-text-muted: #64748B;
  --eb-border: #333333;
  --eb-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --eb-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --eb-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --eb-primary-hover: #60A5FA;
  --eb-success-hover: #6EE7B7;
  --eb-danger-hover: #FCA5A5;
  --eb-warning-hover: #FDBA74;
  --eb-danger-bg: #450A0A;
  --eb-scrollbar: #444;
  --eb-sidebar-text: #a7a7a7;
  --eb-sidebar-text-hover: #c1c1c1;
  /* Sidebar component tokens (#9575 Phase 3) */
  --eb-sidebar-bg: var(--bkg-color59, #1a1a1a);
  --eb-sidebar-color: #a7a7a7;
  --eb-sidebar-text-bright: #e0e0e0;
  --eb-sidebar-text-dim: #777;
  --eb-sidebar-nav-section: #777;
  --eb-sidebar-nav-text: #a7a7a7;
  --eb-sidebar-nav-hover-text: #c1c1c1;
  --eb-sidebar-nav-hover-bg: rgba(255,255,255,0.06);
  --eb-sidebar-active-bg: rgba(255,255,255,0.08);
  --eb-sidebar-chevron: rgba(255,255,255,0.2);
  --eb-sidebar-chevron-active: #c1c1c1;
  --eb-sidebar-border: var(--bor-color4, #3c3c3c);
  --eb-sidebar-menu-bg: var(--bkg-color59, #1a1a1a);
  --eb-sidebar-menu-border: var(--bor-color4, #3c3c3c);
  --eb-sidebar-toggle: #333;
  --eb-sidebar-toggle-dot: #a7a7a7;
  /* Badges de statut (.label.label-inline + pastelStatutStyle) : en clair, la
     fonction PHP émet hsl(h, s, ≤32 %) → texte sombre sur fond pastel à 16 %.
     En dark theme on remonte la luminosité à ~72 % pour que le texte reste
     lisible sur le même fond (le pastel à 16 % d'opacité paraît plus sombre
     sur un body noir). Cf. pastelStatutStyle() dans fonctions.php. */
  --statut-text-l: 72%;
}

/* ===== 1. LAYOUT ===== */
.eb-dashboard-v2 { background: var(--eb-bg) !important; margin: 0; padding: 0; overflow: visible !important; }
/* Peint directement sur <html> les couleurs finales du layout (sidebar
   sombre à gauche sur 240px, body à droite). Évite le flash blanc qui
   apparaissait sur le menu latéral pendant les transitions de page : quand
   le body est momentanément vide pendant la navigation, l'utilisateur voit
   déjà la bonne couleur de sidebar via <html>. */
html, :root.light {
  overflow-x: hidden !important;
  background: linear-gradient(to right,
    var(--eb-sidebar-bg) 0, var(--eb-sidebar-bg) var(--eb-sidebar-w, 240px),
    var(--bkg-color28, #EEF0F8) var(--eb-sidebar-w, 240px), var(--bkg-color28, #EEF0F8) 100%);
}
:root.dark {
  background: linear-gradient(to right,
    var(--bkg-color59, #1a1a1a) 0, var(--bkg-color59, #1a1a1a) var(--eb-sidebar-w, 240px),
    var(--bkg-color28, #0F0F0F) var(--eb-sidebar-w, 240px), var(--bkg-color28, #0F0F0F) 100%);
}
/* En mobile la sidebar est cachée (display:none via @media max-width:768px),
   donc on supprime le dégradé pour ne pas laisser une bande fantôme. */
@media (max-width: 768px) {
  html, :root.light, :root.dark { background: var(--bkg-color28, #EEF0F8); }

  /* #10438 — Garde anti-pan horizontal GLOBALE (vue mobile).
     Le `html { overflow-x: hidden }` ci-dessus ne suffit pas sur iOS / webview
     Flutter : le scroll horizontal se produit alors sur <body>. Quand un
     élément déborde de quelques px le viewport, toute la page (et ses cards)
     devient glissable gauche/droite au doigt — c'est le bug constaté sur la
     fiche perso onglet Information (#10438), corrigé là par un clip scopé.
     On généralise ici à toutes les pages en vue mobile : overflow-x: clip
     coupe le pan sans créer de conteneur de scroll (l'axe vertical reste
     intact), et les scrollers internes légitimes (tableaux .fixed-table-body,
     barres d'onglets .eb-tab-scroll/.eb-hscroll) conservent leur propre
     overflow-x. */
  body { overflow-x: clip; }
}
/* Sidebar réduite (user preference .collapsed) : on utilise un attribut
   sur <html> pour pouvoir adapter le dégradé sans JS complexe. Le toggle
   existant dans dashboard-modern.js peut ajouter data-sidebar="collapsed"
   sur <html> pour profiter de cette règle (phase ultérieure). */
html[data-sidebar="collapsed"], :root.light[data-sidebar="collapsed"] {
  background: linear-gradient(to right,
    var(--eb-sidebar-bg) 0, var(--eb-sidebar-bg) 60px,
    var(--bkg-color28, #EEF0F8) 60px, var(--bkg-color28, #EEF0F8) 100%);
}
:root.dark[data-sidebar="collapsed"] {
  background: linear-gradient(to right,
    var(--bkg-color59, #1a1a1a) 0, var(--bkg-color59, #1a1a1a) 60px,
    var(--bkg-color28, #0F0F0F) 60px, var(--bkg-color28, #0F0F0F) 100%);
}
.eb-layout { display: flex; min-height: 100vh; }

/* ===== 2. SIDEBAR ===== */
.eb-sidebar {
  width: 240px; min-width: 240px;
  background: var(--eb-sidebar-bg);
  color: var(--eb-sidebar-color);
  position: fixed; top: 0; left: 0; bottom: 0;
  display: flex; flex-direction: column;
  z-index: 1050;
  /* Pas de scroll sur le container : seul .eb-sidebar-nav scrolle.
     Logo (haut) et user-block (bas) restent toujours visibles. */
  overflow: hidden;
}
/* Header (logo) et footer (user-block) ne se compressent jamais —
   c'est .eb-sidebar-nav qui prend tout l'espace flex restant et scrolle. */
.eb-sidebar-logo,
.eb-sidebar-bottom {
  flex-shrink: 0;
}
/* Hide V1 sidebar that might still exist */
.eb-dashboard-v2 .col-lateral { display: none !important; }
.eb-sidebar-logo {
  padding: 18px 20px 14px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--eb-sidebar-border);
}
.eb-sidebar-logo img { height: 28px; }
.eb-sidebar-version { display: flex; flex-direction: column; }
.eb-sidebar-version span { font-size: 15px; font-weight: 600; color: var(--eb-sidebar-text-bright); }
.eb-sidebar-version small { font-size: 11px; color: var(--eb-sidebar-text-dim); }
.eb-sidebar-version-small { font-size: 11px; color: var(--eb-sidebar-text-dim); margin-left: auto; }

/* Logo eBrigade par defaut sur fond sombre :
   - eb-logo-text : logo complet (rosace + texte) passe en blanc pur
     pour que "eBrigade." soit lisible sur le fond sombre
   - eb-logo-rosace : rosace coloree superposee a gauche pour garder
     les couleurs de marque sur l'icone
   - reflet "luxe" anime en surcouche, masque sur la silhouette du logo
*/
.eb-sidebar-logo-default {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.eb-sidebar-logo-default .eb-logo-text {
  display: block;
  height: 28px;
  width: 121px; /* 28 * (160/37) -> ratio du logo_site.png */
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #e8edf5 25%,
    #a8b6cc 50%,
    #e8edf5 75%,
    #ffffff 100%);
  background-size: 200% 100%;
  -webkit-mask: url('../images/logo_site.png') no-repeat center / contain;
          mask: url('../images/logo_site.png') no-repeat center / contain;
  animation: ebLogoGradient 6s ease-in-out infinite;
}
.eb-sidebar-logo-default .eb-logo-rosace {
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  width: 28px;
  object-fit: contain;
}
@keyframes ebLogoGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.eb-sidebar-logo-default::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      transparent 0%,
      transparent 30%,
      rgba(255,255,255,0.35) 40%,
      rgba(255,255,255,1)    50%,
      rgba(255,255,255,0.35) 60%,
      transparent 70%,
      transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  -webkit-mask-image: url('../images/logo_site.png');
          mask-image: url('../images/logo_site.png');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  animation: ebLogoShine 3s ease-in-out infinite;
}
@keyframes ebLogoShine {
  0%   { background-position: 180% 0; }
  55%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eb-sidebar-logo-default::after { animation: none; }
}

/* Logo client custom : image du client + nom choisi avec le meme
   reflet "luxe" anime que le logo eBrigade par defaut (shimmer + glow). */
.eb-sidebar-logo-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
.eb-logo-custom-name {
  position: relative;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #e8edf5 25%,
    #a8b6cc 50%,
    #e8edf5 75%,
    #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* glow doux + shimmer glissant (memes keyframes que le logo par defaut) */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
  animation: ebLogoGradient 6s ease-in-out infinite,
             ebLogoCustomGlow 3s ease-in-out infinite;
}
@keyframes ebLogoCustomGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18)); }
  50%      { filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.40)); }
}
@media (prefers-reduced-motion: reduce) {
  .eb-logo-custom-name { animation: none; }
}

/* État "aucune donnée" pour les graphiques (au lieu d'un canvas blanc).
   Barres skeleton animées (effet d'attente) + libellé discret. */
.eb-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 180px;
  color: var(--eb-text-muted, #94a3b8);
}
.eb-chart-empty-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 64px;
}
.eb-chart-empty-bars span {
  width: 14px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg,
    var(--bor-color4, #e2e8f0) 0%,
    var(--bkg-color28, #eef0f8) 100%);
  animation: ebChartEmptyPulse 1.4s ease-in-out infinite;
}
.eb-chart-empty-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.eb-chart-empty-bars span:nth-child(2) { height: 70%; animation-delay: .18s; }
.eb-chart-empty-bars span:nth-child(3) { height: 100%; animation-delay: .36s; }
.eb-chart-empty-bars span:nth-child(4) { height: 55%; animation-delay: .54s; }
@keyframes ebChartEmptyPulse {
  0%, 100% { opacity: .35; transform: scaleY(.85); }
  50%      { opacity: .9;  transform: scaleY(1); }
}
.eb-chart-empty-bars span { transform-origin: bottom; }
.eb-chart-empty-text {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .01em;
}
@media (prefers-reduced-motion: reduce) {
  .eb-chart-empty-bars span { animation: none; }
}

/* Bandeaux héros des pages stats/bilans retirés (demande client) :
   on masque le bandeau titre+description coloré en haut des pages de rapport. */
.eb-group-banner,
.eb-bilan-banner { display: none !important; }

/* ===== Lightbox global (clic sur image de tableau → agrandissement animé) ===== */
.eb-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(15, 22, 35, 0);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  cursor: zoom-out;
  transition: background .3s ease, opacity .25s ease,
              -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease,
              visibility 0s linear .3s;
}
.eb-lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
  background: rgba(15, 22, 35, .82);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background .3s ease, opacity .25s ease,
              -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
.eb-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  background: #fff; /* avatars SVG transparents lisibles sur fond sombre */
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  object-fit: contain;
  cursor: default;
  will-change: transform, opacity;
}
.eb-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.eb-lightbox-close:hover { background: rgba(255, 255, 255, .25); transform: scale(1.08); }
body.eb-lightbox-lock { overflow: hidden; }
/* Indice visuel : les images de tableau (hors liens) sont agrandissables */
.fixed-table-body td img, table td img { cursor: zoom-in; }
.fixed-table-body td a img, table td a img { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .eb-lightbox-img { transition: none !important; }
}

/* Nav */
.eb-sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.eb-sidebar-nav::-webkit-scrollbar { width: 4px; }
.eb-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.eb-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.eb-nav-section-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--eb-sidebar-nav-section);
  padding: 16px 16px 6px;
}
.eb-nav-group { margin: 1px 8px; }
.eb-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--eb-radius-sm); cursor: pointer;
  font-size: 13.5px; color: var(--eb-sidebar-nav-text);
  text-decoration: none !important;
  transition: all 0.15s ease;
  overflow: hidden;
  text-align: left;
}
.eb-nav-item:hover { background: var(--eb-sidebar-nav-hover-bg); color: var(--eb-sidebar-nav-hover-text); }
.eb-nav-item.active { background: var(--eb-sidebar-active-bg); color: var(--eb-primary); font-weight: 500; }
.eb-nav-item i:first-child { width: 18px; text-align: center; font-size: 14px; opacity: 0.7; }
.eb-nav-item.active i:first-child { opacity: 1; }
.eb-nav-item span:not(.eb-chevron) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eb-chevron {
  margin-left: auto; font-size: 11px; opacity: 0.5;
  transition: transform 0.2s; flex-shrink: 0;
  width: 16px; text-align: center;
  color: var(--eb-sidebar-chevron);
}
.eb-nav-group.open .eb-chevron { transform: rotate(90deg); opacity: 0.8; color: var(--eb-sidebar-chevron-active); }

.eb-nav-sub { display: none; padding: 2px 0 4px; }
.eb-nav-sub.show { display: block; }
.eb-nav-sub-item {
  display: flex; align-items: center; min-height: 30px;
  padding: 4px 12px 4px 28px;
  font-size: 13px; color: var(--eb-sidebar-nav-text); border-radius: 6px;
  text-decoration: none !important; transition: all 0.15s ease;
  text-align: left;
}
.eb-nav-sub-item i.fas { width: 18px; text-align: center; margin-right: 6px; font-size: 12px; opacity: 0.55; }
.eb-nav-sub-item:hover i.fas { opacity: 0.9; }
.eb-nav-sub-item:hover { color: var(--eb-sidebar-nav-hover-text); background: rgba(255,255,255,0.04); }
.eb-nav-sub-item.active { color: var(--eb-primary); background: var(--eb-sidebar-active-bg); font-weight: 500; }
.eb-nav-sub-item.active i.fas { opacity: 1; }

/* Sidebar bottom — user (layout defined further down) */
.eb-sidebar-user {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  text-decoration: none !important; color: inherit !important;
  border-radius: var(--eb-radius-sm); padding: 4px; transition: background 0.15s ease;
  flex: 1; min-width: 0; text-align: left;
}
a.eb-sidebar-user:hover { background: var(--eb-sidebar-nav-hover-bg); }
.eb-sidebar-avatar {
  width: 32px; height: 32px; min-width: 32px; border-radius: var(--eb-radius-sm); object-fit: cover;
}
/* !important requis : ebNormalizeAvatarSize() pose un style inline (56px, le
   plancher réel) sur cet <img>, qui gagne toujours sur une règle externe
   simple. Sans ce forçage, l'avatar déborde du rail réduit à 60px (#eb-sidebar
   collapsed) dans le contenu principal. La pastille de grade (dimensionnée
   pour un cercle de 56px) est cachée ici plutôt que mal proportionnée sur un
   avatar 32px. */
.eb-sidebar.collapsed .eb-avatar-stack { width: 32px !important; height: 32px !important; }
.eb-sidebar.collapsed .eb-sidebar-avatar { width: 32px !important; height: 32px !important; min-width: 32px !important; }
.eb-sidebar.collapsed .eb-avatar-stack img:last-child { display: none; }
.eb-sidebar-user-info {
  min-width: 0; display: flex; flex-direction: column; gap: 1px;
  flex: 1; align-items: flex-start; text-align: left;
}
.eb-sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--eb-sidebar-nav-hover-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 0; line-height: 1.3; text-align: left; }
.eb-sidebar-user-role { font-size: 11px; color: var(--eb-sidebar-text-dim); margin: 0; padding: 0; line-height: 1.3; text-align: left; }
.eb-sidebar-user-role:empty { display: none; }
.eb-dispo-badge { font-size: 10px !important; padding: 2px 8px !important; margin: 2px 0 0 0; display: inline-block; line-height: 1.2; border-radius: 4px; text-align: center; align-self: flex-start; }
.eb-dispo-off { background: rgba(148, 163, 184, 0.15); color: var(--eb-sidebar-text-dim); }
/* La sidebar est toujours sombre : teintes translucides (comme .eb-dispo-off)
   plutôt que les tokens *-light theme-dépendants, qui rendaient un pavé quasi
   blanc sur fond sombre. */
.eb-dispo-on { background: rgba(52, 211, 153, 0.15); color: #34D399; }
.eb-dispo-absent { background: rgba(248, 113, 113, 0.15); color: #F87171; }

/* Espace Client button */
.eb-espace-client-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--eb-primary); color: #fff !important;
  border-radius: var(--eb-radius-sm); padding: 9px 14px;
  font-size: 13px; font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s;
}
.eb-espace-client-btn:hover { background: var(--eb-primary-hover); }
.eb-sidebar.collapsed .eb-espace-client-btn span,
.eb-sidebar.collapsed .eb-espace-client-btn { font-size: 0; padding: 9px; }
.eb-sidebar.collapsed .eb-espace-client-btn i { font-size: 14px; }

/* User dropdown menu */
.eb-user-menu {
  display: none;
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: var(--eb-sidebar-menu-bg); border: 1px solid var(--eb-sidebar-menu-border);
  border-radius: var(--eb-radius-md); padding: 6px 0;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 200;
}
.eb-user-menu.show { display: block; }
.eb-user-menu a,
.eb-user-menu label.eb-user-menu-theme {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 13px; color: var(--eb-sidebar-color);
  text-decoration: none !important; cursor: pointer;
  transition: background 0.12s;
}
.eb-user-menu a:hover,
.eb-user-menu label.eb-user-menu-theme:hover {
  background: var(--eb-sidebar-nav-hover-bg);
  color: var(--eb-sidebar-text-bright);
}
.eb-user-menu a i,
.eb-user-menu label i {
  width: 16px; text-align: center; font-size: 13px; opacity: 0.6;
}
.eb-user-menu-divider {
  height: 1px; background: var(--eb-sidebar-border);
  margin: 4px 0;
}
.eb-user-menu-logout {
  color: var(--eb-danger) !important;
}
.eb-user-menu-logout:hover {
  background: rgba(248,113,113,0.1) !important;
  color: var(--eb-danger-hover) !important;
}
/* Modern toggle switch */
.eb-toggle {
  width: 36px; height: 20px; border-radius: var(--eb-radius-md);
  background: var(--eb-sidebar-toggle); display: inline-flex;
  align-items: center; padding: 2px;
  margin-left: auto; flex-shrink: 0;
  transition: background 0.2s;
  cursor: pointer;
  /* #9813 — overflow:hidden pour que le dot ne sorte pas des coins
     arrondis, ce qui faisait apparaître le cercle coupé */
  overflow: hidden;
}
.eb-toggle-input {
  position: relative;
  margin-bottom: 0;
}
.eb-toggle-input-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.eb-toggle-dot {
  /* #9813 — dot légèrement plus petit (14px vs 16px) pour laisser
     1px d'espace par rapport au track arrondi, évite l'effet "coupé" */
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--eb-sidebar-toggle-dot);
  transition: all 0.2s;
  flex-shrink: 0;
}
/* #9813 — le dot déplacé + le track vire au bleu (style GitLab) */
.eb-toggle-dot.on,
.eb-toggle:has(input.eb-toggle-input-native:checked) .eb-toggle-dot {
  transform: translateX(16px);
  background: #fff;
}
.eb-toggle:has(.eb-toggle-dot.on),
.eb-toggle.eb-toggle-on,
.eb-toggle:has(input.eb-toggle-input-native:checked) {
  background: var(--eb-primary);
}
/* Theme toggle in user menu */
.eb-user-menu-theme {
  justify-content: flex-start !important;
}

/* Dispo live block V2 sidebar */
.eb-dispo-live-toggle-row,
.eb-dispo-live-duration-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 13px; color: var(--eb-sidebar-color);
  cursor: pointer; transition: background 0.12s; user-select: none;
}
.eb-dispo-live-toggle-row:hover,
.eb-dispo-live-duration-row:hover {
  background: var(--eb-sidebar-nav-hover-bg);
}
.eb-dispo-live-toggle-row i,
.eb-dispo-live-duration-row i {
  width: 16px; text-align: center; font-size: 13px; opacity: 0.6; flex-shrink: 0;
}
.eb-dispo-duration-chevron { font-size: 10px !important; opacity: 0.4; }
.eb-dispo-live-duration-row.eb-dispo-duration-active { color: var(--eb-primary); }
.eb-dispo-live-duration-row.eb-dispo-duration-active i { opacity: 1; }

/* Reset button dans le sidebar bottom (sous nom/badge) */
.eb-dispo-live-reset {
  background: none; border: none;
  padding: 3px 10px 6px 10px; width: 100%;
  font-size: 10px; color: var(--eb-danger); cursor: pointer;
  display: flex; align-items: center; gap: 4px; line-height: 1.2;
  text-align: left;
}
.eb-dispo-live-reset:hover { text-decoration: underline; }
.eb-dispo-live-reset i { font-size: 9px; }
/* Masquer le reset button quand sidebar collapsed */
.eb-sidebar.collapsed .eb-dispo-live-reset { display: none !important; }

/* Sidebar scrollbar */
.eb-sidebar::-webkit-scrollbar { width: 4px; }
.eb-sidebar::-webkit-scrollbar-track { background: transparent; }
.eb-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ===== 3. MAIN CONTENT ===== */
.eb-main {
  margin-left: 240px; flex: 1;
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* ===== 4. TOP BAR ===== */

/* Apply the V2 topbar look to the V1 #navbar_principale used by every
   non-dashboard page. The V1 nav HTML structure is kept (logo, collapse
   menu, user dropdown) but its chrome (background, border, height,
   shadow) matches the dashboard topbar so the product feels uniform. */
body:not(.eb-dashboard-v2) #navbar_principale {
  background: var(--eb-surface, #ffffff) !important;
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: none !important;
  height: 52px !important;
  min-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body:not(.eb-dashboard-v2) #navbar_principale .navbar-brand,
body:not(.eb-dashboard-v2) #navbar_principale .navbar-collapse {
  height: 52px;
  display: flex;
  align-items: center;
}

.eb-topbar {
  background: var(--eb-surface);
  border-bottom: 1px solid var(--eb-border);
  /* #align — gouttière de contenu canonique (cf. bloc « CONTENT GUTTER »
     en fin de fichier). 24px = même retrait que .eb-dashboard et que le
     padding horizontal de #space-left, pour que le fil d'Ariane s'aligne
     pile sur le contenu en dessous. */
  padding: 0 var(--eb-content-gutter, 24px); height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 40;
  box-sizing: border-box;
  max-width: 100vw;
  /* PAS d'overflow:hidden en desktop : la topbar peut accueillir des aides
     visuelles au survol. La protection anti-débordement reste active en mobile
     (media query plus bas). */
}

/* ===== V2 topbar opt-in for non-dashboard pages =====
   A page that includes eb_topbar_v2.php adds class `eb-has-topbar-v2` on
   <body>. Hide the legacy V1 #navbar_principale so the two topbars don't
   stack, and push the page content below the 52px fixed V2 topbar. We do
   NOT touch .space-left margin-left here — regular pages still need the
   240px side-offset for the lateral sidebar (unlike .eb-dashboard-v2
   which uses a full-width canvas). */
body.eb-has-topbar-v2 { padding-top: 0 !important; }
body.eb-has-topbar-v2 #navbar_principale { display: none !important; }

/* Modern dashboard-style cards for the legacy .stats-container-new row
   used across every listing page (personnel, evenement_choice, etc.).
   The underlying markup is:
     <ul class="stats-container-new">
       <li class="nav-item"><a class="btn ..."> ... </a></li>
       ...
     </ul>
   We override its chrome to match the .eb-stat-card look on the
   dashboard (white bg, 1px border, rounded corners, sm shadow, top
   color accent bar, subtle hover lift). Applied globally — the
   .stats-container-new class is factorised across all pages. */
.stats-container-new {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 16px !important;
  gap: 16px;
  display: flex !important;
  flex-wrap: wrap;
}
/* Quand plusieurs <ul.stats-container-new> sont siblings dans un
   .stats-container-diviser, on veut qu'ils partagent la largeur dispo
   au lieu que chacun prenne sa largeur naturelle (qui forçait un wrap
   sur 2+ lignes — cf. indispo_choice, dispo.php?tab=5).
   `flex-basis: 0` (vs `auto` avant) garantit le partage équitable. */
.stats-container-diviser > .stats-container-new {
  flex: 1 1 0 !important;
}
/* Product-wide page gutter for split stat groups.
   Some pages render stats directly in #space-left, others inside
   .container-fluid/.row, and a few legacy pages put them in
   .table-responsive. Keep the outer gutter on the parent and use gap for
   the spacing between groups so left/right edges stay aligned everywhere. */
.stats-container-diviser {
  margin-left: 16px !important;
  margin-right: 16px !important;
  gap: 16px;
  align-items: stretch;
  /* QA #10160 — qualifications.php rend 2 groupes (2 + 3 cartes) dans le même
     .stats-container-diviser ; sans flex-wrap les 3 cartes du second groupe
     étaient compressées et la 5e (« Expiré ») sortait de la grille. wrap
     laisse le second groupe redescendre sur une ligne si la place manque ;
     les pages 4-cartes (Absence/Distinction) tiennent toujours en une ligne. */
  flex-wrap: wrap;
}
/* QA #10160 — empêche le compteur (nombre à 3+ chiffres comme « 100 ») de
   tronquer la carte « Actif » sur les pages avec un grand nombre d'entrées.
   `min-width: 0` lève la contrainte intrinsic-min-width sur les flex items ;
   couplé à un word-break sécurisé sur .sc-number on garde le chiffre lisible. */
.stats-container-diviser .sc-number {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.eb-has-topbar-v2 .eb-evenement-choice-stats {
  margin-top: 16px !important;
  width: auto !important;
  box-sizing: border-box;
}
.stats-container-diviser > .stats-container-new,
.stats-container-diviser > .stats-container-new:first-child,
.stats-container-diviser > .stats-container-new:last-child {
  margin: 0 !important;
  min-width: 0;
}
.eb-personnel-formation-panel .stats-container-diviser {
  align-items: stretch !important;
  height: auto !important;
  margin-bottom: 8px !important;
  margin-top: 8px !important;
  min-height: 0 !important;
}
.eb-personnel-formation-panel .stats-container-new {
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.eb-personnel-formation-panel .stats-container-new > .nav-item {
  display: flex !important;
  align-self: stretch !important;
}
.eb-personnel-formation-panel .stats-container-new > .nav-item > .stats-card-size-compact {
  height: 100% !important;
  min-height: 82px !important;
  padding-bottom: 14px !important;
  padding-top: 16px !important;
}
.eb-personnel-formation-panel #toolbar {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* #11156 — aligne la barre filtres/recherche/bouton « + Formation »
   sur les mêmes bords gauche/droit que la stats-container-diviser
   (qui porte des margin-left/right de 16px, ramenés à 8px sous 768px). */
.eb-personnel-formation-panel .fixed-table-toolbar {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.eb-personnel-formation-panel .bootstrap-table {
  margin-top: 0 !important;
}
@media (max-width: 768px) {
  .eb-personnel-formation-panel .fixed-table-toolbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.eb-personnel-formation-panel #table_no_result .no-result-img,
.eb-personnel-formation-panel #table_no_result .no-content2 {
  margin-top: 16px !important;
}

/* ------------------------------------------------------------------ */
/* Tableau Formation — badges de type + cellules vides discrètes      */
/* (formation_load.php : colonne « Type », durée, lieu, formateur…)   */
/* ------------------------------------------------------------------ */
.eb-ftype {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  border: 1px solid transparent;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: middle;
}
/* Libellés longs (« Maintien et actualisation… ») : ellipsis + tooltip natif */
.eb-ftype .eb-ftype-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eb-ftype::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.eb-ftype--initiale       { color: #1d4ed8; background: rgba(37, 99, 235, .10);  border-color: rgba(37, 99, 235, .22); }
.eb-ftype--continue       { color: #b45309; background: rgba(217, 119, 6, .12);  border-color: rgba(217, 119, 6, .24); }
.eb-ftype--complementaire { color: #0f766e; background: rgba(13, 148, 136, .12); border-color: rgba(13, 148, 136, .24); }
.eb-ftype--prerequis      { color: #6b7280; background: rgba(107, 114, 128, .12);border-color: rgba(107, 114, 128, .24); }
.eb-ftype--seminaire      { color: #7c3aed; background: rgba(124, 58, 237, .12); border-color: rgba(124, 58, 237, .24); }
.eb-ftype--default        { color: #475569; background: rgba(71, 85, 105, .10);  border-color: rgba(71, 85, 105, .22); }
/* Cellule vide : tiret gris discret plutôt qu'un blanc ambigu */
.eb-ftype-na { color: var(--txt-color10, #94a3b8); opacity: .55; font-weight: 500; }

/* Lignes du tableau un peu plus aérées pour la lecture */
.eb-personnel-formation-panel .bootstrap-table td {
  vertical-align: middle;
}
@media (max-width: 768px) {
  .stats-container-diviser {
    margin-left: 8px !important;
    margin-right: 8px !important;
    gap: 8px;
  }

  .eb-personnel-formation-panel .stats-container-diviser {
    display: flex !important;
  }

  .eb-personnel-formation-panel .stats-container-new.show_on_mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .eb-personnel-formation-panel .stats-container-new.show_on_mobile > .nav-item {
    width: 100% !important;
  }

  .eb-personnel-formation-panel .stats-container-new.show_on_mobile > .nav-item > .stats-card-size-compact {
    min-height: 72px !important;
    width: 100% !important;
  }

  .eb-personnel-formation-panel .fixed-table-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .eb-personnel-formation-panel .fixed-table-body {
    background: transparent !important;
    overflow-x: hidden !important;
  }

  .eb-personnel-formation-panel .fixed-table-custom-view {
    padding: 0 8px 16px !important;
  }

  .eb-formation-mobile-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .eb-formation-mobile-card {
    background: var(--bkg-color1, #fff);
    border: 1px solid var(--bkg-color109, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    padding: 14px;
  }

  .eb-formation-mobile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .eb-formation-mobile-card-date {
    color: var(--txt-color3, #1f2937);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  .eb-formation-mobile-card-kind {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
  }

  .eb-formation-mobile-card-field {
    display: grid;
    grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-top: 1px solid rgba(148, 163, 184, .18);
    padding: 9px 0;
  }

  .eb-formation-mobile-card-label {
    color: var(--txt-color8, #64748b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .eb-formation-mobile-card-value {
    color: var(--txt-color3, #1f2937);
    font-size: 14px;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .eb-formation-mobile-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    padding-top: 12px;
  }

  .eb-formation-mobile-card-actions .btn-action {
    align-items: center;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
  }
}

/* Organisation / section.php modern layout */
.eb-section-page {
  padding: 0 16px 24px;
}
.eb-section-stats {
  margin-top: 8px;
}
.eb-section-stats .stats-container-new {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.eb-section-expand-switch {
  flex: 0 0 auto;
}
.eb-section-expand-label {
  display: inline-flex;
  align-items: center;
  color: var(--eb-text-secondary, #64748b);
  font-size: 13px;
  white-space: nowrap;
}
.eb-section-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.eb-section-panel-search {
  position: relative;
  padding: 8px 12px;
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
}
.eb-section-panel-search i {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--eb-text-muted, #94a3b8);
  pointer-events: none;
  font-size: 13px;
}
/* ID #sectionSearchInput (spécificité 1,0,0) nécessaire pour gagner contre
   la règle P0.3 (0,3,1) qui force padding:9px 12px!important via shorthand
   et écrase le padding-left même avec !important au même niveau. */
body.eb-has-topbar-v2 .eb-section-panel-search .form-control,
.eb-section-panel-search .form-control,
#sectionSearchInput {
  padding-left: 34px !important;
  border-radius: 7px;
  font-size: 13px;
  height: 34px;
}
.eb-section-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.eb-section-panel,
.eb-section-detail-panel .card,
.eb-section-detail-card {
  background: var(--eb-surface, #fff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
}
.eb-section-panel {
  min-height: 420px;
  overflow: hidden;
}
.eb-section-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.eb-section-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--eb-text, #0f172a);
}
.eb-section-tree {
  max-height: min(68vh, 760px);
  overflow: auto;
  padding: 10px;
}
.eb-section-node {
  display: block;
}
.eb-section-node.is-filter-hidden {
  display: none !important;
}
.eb-section-node-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 3px 4px 3px var(--section-indent, 4px);
  border-radius: 7px;
  transition: background-color 0.12s ease;
}
.eb-section-node-line:hover,
.eb-section-node.is-selected > .eb-section-node-line {
  background: var(--eb-primary-bg, #eff6ff);
}
.eb-section-tree-toggle {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--eb-text-secondary, #64748b);
  flex: 0 0 26px;
}
.eb-section-tree-toggle:not(.is-empty):hover {
  background: var(--eb-surface-muted, #f8fafc);
}
.eb-section-tree-toggle.is-empty {
  display: inline-block;
}
.eb-section-node-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 5px 0;
  color: var(--eb-text, #0f172a);
}
.eb-section-node-code {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 13px;
  color: var(--eb-primary, #3b82f6);
  background: var(--eb-primary-bg, #eff6ff);
  border-radius: 5px;
  padding: 3px 7px;
}
.eb-section-node-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.eb-section-node.is-inactive .eb-section-node-name,
.eb-section-node.is-inactive .eb-section-node-code {
  opacity: 0.62;
}
.eb-section-status-badge {
  background: var(--eb-danger-bg, #fee2e2);
  color: var(--eb-danger, #dc2626);
  font-weight: 600;
}
.eb-section-node-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.25;
  transition: opacity 0.12s ease;
}
.eb-section-node-line:hover .eb-section-node-actions,
.eb-section-node.is-selected > .eb-section-node-line .eb-section-node-actions {
  opacity: 1;
}
.eb-section-children {
  margin-left: 0;
}
.eb-section-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--eb-text-secondary, #64748b);
  min-height: 160px;
}
.eb-section-detail-panel .card {
  overflow: hidden;
}
.eb-section-detail-inner {
  padding: 16px;
}
.eb-section-detail-crumb {
  min-height: 18px;
  color: var(--eb-text-secondary, #64748b);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.eb-section-detail-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.eb-section-detail-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 96px;
}
.eb-section-detail-logo {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--eb-surface-muted, #f8fafc);
  border: 1px solid var(--eb-border, #e2e8f0);
  overflow: hidden;
}
.eb-section-detail-logo.logo-transparent {
  background: transparent;
  border-color: transparent;
}
.eb-section-detail-code {
  font-size: 20px;
  font-weight: 800;
  color: var(--eb-text, #0f172a);
}
.eb-section-detail-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--eb-text-secondary, #64748b);
}
.eb-section-detail-root,
.eb-section-detail-address,
.eb-section-detail-id {
  font-size: 13px;
  color: var(--eb-text-secondary, #64748b);
}
.eb-section-detail-chart {
  min-width: 130px;
}
.eb-section-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.eb-section-metric {
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: 7px;
  padding: 11px;
  background: var(--eb-surface-muted, #f8fafc);
}
.eb-section-metric-label {
  color: var(--eb-text-secondary, #64748b);
  font-size: 12px;
}
.eb-section-metric-value {
  display: block;
  margin-top: 4px;
  color: var(--eb-text, #0f172a);
  font-size: 22px;
  font-weight: 800;
}
.eb-section-activity-chart {
  width: 100%;
  margin-top: 12px;
  height: 180px;
  position: relative;
}
.eb-chart-nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0 4px;
}
.eb-chart-nodata-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 52px;
}
.eb-chart-nodata-bars span {
  width: 14px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--eb-border, #e2e8f0) 25%, #f8fafc 50%, var(--eb-border, #e2e8f0) 75%);
  background-size: 300% 100%;
  animation: eb-chart-shimmer 1.6s ease-in-out infinite;
}
.eb-chart-nodata-bars span:nth-child(1) { animation-delay: 0s; }
.eb-chart-nodata-bars span:nth-child(2) { animation-delay: 0.12s; }
.eb-chart-nodata-bars span:nth-child(3) { animation-delay: 0.24s; }
.eb-chart-nodata-bars span:nth-child(4) { animation-delay: 0.36s; }
.eb-chart-nodata-bars span:nth-child(5) { animation-delay: 0.48s; }
.eb-chart-nodata-bars span:nth-child(6) { animation-delay: 0.60s; }
.eb-chart-nodata-bars span:nth-child(7) { animation-delay: 0.72s; }
@keyframes eb-chart-shimmer {
  0%   { background-position: 200% 0; opacity: 1; }
  50%  { background-position: -100% 0; opacity: 0.5; }
  100% { background-position: 200% 0; opacity: 1; }
}
.eb-chart-nodata-msg {
  font-size: 12px;
  color: var(--eb-text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
}
.eb-section-detail-access {
  width: 100%;
  margin-top: 14px;
}
@media (max-width: 992px) {
  .eb-section-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .eb-section-layout {
    grid-template-columns: 1fr;
  }
  .eb-section-tree {
    max-height: none;
  }
}
@media (max-width: 576px) {
  .eb-section-detail-hero {
    grid-template-columns: 1fr;
  }
  .eb-section-detail-logo,
  .eb-section-detail-chart {
    justify-self: center;
  }
  .eb-section-node-line {
    padding-left: var(--section-indent, 2px);
  }
  .eb-section-node-actions {
    opacity: 1;
  }
}
/* no-hover modifier: the container is purely informational (e.g.
   personnel_dispo "1 24h" summary). Keep the card chrome identical
   but disable the cursor + hover lift. */
.stats-container-new.no-hover > .nav-item > a,
.stats-container-new.no-hover > .nav-item > .btn {
  cursor: default !important;
}
.stats-container-new.no-hover > .nav-item > a:hover,
.stats-container-new.no-hover > .nav-item > .btn:hover {
  transform: none !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04)) !important;
}
.stats-container-new > .nav-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.stats-container-new > .nav-item > a,
.stats-container-new > .nav-item > .btn {
  background: var(--eb-surface, #fff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius, 10px) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04)) !important;
  padding: 26px 24px 20px !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  transition: all 0.15s ease;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  color: var(--eb-text, #0f172a) !important;
}
.stats-container-new > .nav-item > a:hover,
.stats-container-new > .nav-item > .btn:hover {
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(15,23,42,0.08)) !important;
  transform: translateY(-1px);
}
.stats-container-new > .nav-item > a.stat-container-disabled,
.stats-container-new > .nav-item > .btn.stat-container-disabled,
.stats-container-new > .nav-item > a.stat-container-disabled:hover,
.stats-container-new > .nav-item > .btn.stat-container-disabled:hover {
  cursor: default;
  pointer-events: none;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04)) !important;
  transform: none !important;
}
/* Top colored accent — cycle through 4 eBrigade colors by nth-child */
.stats-container-new > .nav-item > a::before,
.stats-container-new > .nav-item > .btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.stats-container-new > .nav-item:nth-child(4n+1) > a::before,
.stats-container-new > .nav-item:nth-child(4n+1) > .btn::before { background: var(--eb-primary, #3b82f6); }
.stats-container-new > .nav-item:nth-child(4n+2) > a::before,
.stats-container-new > .nav-item:nth-child(4n+2) > .btn::before { background: var(--eb-success); }
.stats-container-new > .nav-item:nth-child(4n+3) > a::before,
.stats-container-new > .nav-item:nth-child(4n+3) > .btn::before { background: var(--eb-warning); }
.stats-container-new > .nav-item:nth-child(4n+4) > a::before,
.stats-container-new > .nav-item:nth-child(4n+4) > .btn::before { background: var(--eb-purple); }
/* Active state = red-tinted card (like the 146 Actif in the screenshots) */
.stats-container-new > .nav-item > a.btn-active-danger.active,
.stats-container-new > .nav-item > .btn-active-danger.active {
  background: var(--eb-danger-bg) !important;
  border-color: var(--eb-danger-hover) !important;
}
/* Typography inside the cards */
.stats-container-new .svg-icon,
.stats-container-new .stats-icon {
  font-size: 24px !important;
  color: var(--eb-text-secondary, #64748b) !important;
  margin-bottom: 8px !important;
}
.stats-container-new .sc-icon-slot {
  position: absolute !important;
  top: 12px;
  right: 12px;
  left: auto;
  margin: 0 !important;
  z-index: 2;
}
/* #10283 #12/#13 — quand la carte stat n'a pas d'icône (Absence,
   Disponibilité…), on masque complètement le slot pour éviter qu'un
   simple carré badge n'apparaisse en haut-droite sans signification. */
.stats-container-new .sc-icon-slot.sc-icon-empty {
  display: none !important;
}
.stats-container-new .stats-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eb-primary-soft, #eff6ff);
  color: var(--eb-primary, #3b82f6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.stats-container-new > .nav-item:nth-child(4n+1) .stats-icon-badge {
  background: rgba(59,130,246,0.10);
  color: var(--eb-primary, #3b82f6) !important;
}
.stats-container-new > .nav-item:nth-child(4n+2) .stats-icon-badge {
  background: rgba(16,185,129,0.12);
  color: var(--eb-success, #10b981) !important;
}
.stats-container-new > .nav-item:nth-child(4n+3) .stats-icon-badge {
  background: rgba(245,158,11,0.14);
  color: var(--eb-warning, #f59e0b) !important;
}
.stats-container-new > .nav-item:nth-child(4n+4) .stats-icon-badge {
  background: rgba(139,92,246,0.12);
  color: var(--eb-purple, #8b5cf6) !important;
}
.stats-container-new .stats-icon-badge i,
.stats-container-new .stats-icon-badge svg {
  font-size: 18px !important;
  color: inherit !important;
}
.stats-container-new .sc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 84px;
  padding: 8px 60px 8px 12px;
  text-align: center;
}
.stats-container-new .fs-8,
.stats-container-new .fs-2,
.stats-container-new span[id^="nb_"],
.stats-container-new .sc-number {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--eb-text, #0f172a) !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Inside .eb-fs12 sub-text, nb_ spans must stay small (e.g. vehicule Entretien card) */
.stats-container-new .eb-fs12 span[id^="nb_"] {
  font-size: 12px !important;
  font-weight: 400 !important;
}
.stats-container-new .sc-text {
  font-size: 15px !important;
  line-height: 1.35;
  color: var(--eb-text-secondary, #64748b) !important;
  max-width: 100%;
  text-wrap: balance;
}

/* Cybersécurité — KPI 2×2 dans la colonne étroite (lg-3).
   Les cartes y sont très serrées : la réserve de 60px à droite (pour le
   badge icône) ne laissait quasi aucune largeur au nombre, qui se faisait
   tronquer par l'ellipsis ("1...", "6..", "N.."). On réduit le badge et la
   réserve droite, on récupère la largeur et on garantit l'affichage complet
   du nombre tout en rendant les tuiles plus respirantes. */
.cs-kpi-wrap .stats-container-new .nav-item {
  padding-left: 3px !important;
  padding-right: 3px !important;
}
.cs-kpi-wrap .stats-container-new .sc-content {
  padding: 6px 12px 6px 12px;
  min-height: 72px;
}
.cs-kpi-wrap .stats-container-new .sc-icon-slot {
  top: 8px;
  right: 8px;
}
.cs-kpi-wrap .stats-container-new .stats-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.cs-kpi-wrap .stats-container-new .stats-icon-badge i,
.cs-kpi-wrap .stats-container-new .stats-icon-badge svg {
  font-size: 14px !important;
}
.cs-kpi-wrap .stats-container-new .sc-number {
  font-size: 25px !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.cs-kpi-wrap .stats-container-new .sc-text {
  font-size: 13.5px !important;
  line-height: 1.25;
}

/* #10493 — Stats cards à l'intérieur d'une SwAL modale (cotisations
   Prélèvement, etc.). La modale fait souvent ≤ 600px de large, ce qui
   réduit chaque tuile à ~145px. La règle par défaut (.sc-number à 30px,
   60px de réserve droite pour le badge icône) tronque alors la valeur
   ("4.18 €" → "4.", "138" → "1.."). On reprend le même rééquilibrage
   que .cs-kpi-wrap : badge réduit, réserve droite réduite, police plus
   petite et désactivation de l'ellipsis pour garantir la lisibilité. */
.swal2-popup .stats-container-new .nav-item {
  padding-left: 3px !important;
  padding-right: 3px !important;
}
.swal2-popup .stats-container-new .sc-content {
  padding: 6px 50px 6px 8px;
  min-height: 72px;
}
.swal2-popup .stats-container-new .sc-icon-slot {
  top: 8px;
  right: 8px;
}
.swal2-popup .stats-container-new .stats-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.swal2-popup .stats-container-new .stats-icon-badge i,
.swal2-popup .stats-container-new .stats-icon-badge svg {
  font-size: 14px !important;
}
.swal2-popup .stats-container-new .sc-number {
  font-size: 22px !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.swal2-popup .stats-container-new .sc-text {
  font-size: 13px !important;
  line-height: 1.25;
}

/* #11114 — onglets de statut /indispo_choice.php (Annulé/Refusé/Validé).
   La variante en `display: inline-flex` n'était pas respectée dans le
   contexte sc-text → titre + plage de dates collés (« Annulé20-06-2026-
   20-09-2026 »). On passe en block + margins explicites pour garantir
   la séparation, et on espace les date/séparateur/date à l'intérieur
   de la période. */
.stats-container-new .stats-text-stack {
  display: block;
  max-width: 100%;
  line-height: 1.15;
  text-align: center;
}

.stats-container-new .stats-text-title {
  display: block;
  font-weight: 600;
}

.stats-container-new .stats-text-period {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.15;
  color: var(--eb-text-muted, #94a3b8);
}

.stats-container-new .stats-text-period > span {
  display: inline;
}

.stats-container-new .stats-text-period .stats-text-separator {
  margin: 0 4px;
}

.stats-container-new .stats-text-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.15;
  color: var(--eb-text-muted, #94a3b8);
}

.stats-container-new > .nav-item > a.stats-card-size-compact,
.stats-container-new > .nav-item > .btn.stats-card-size-compact {
  height: auto !important;
  min-height: 96px !important;
  padding: 18px 18px 16px !important;
}

.stats-container-new > .stats-card-item-size-compact {
  align-self: flex-start !important;
}

.stats-container-new .stats-card-size-compact .sc-icon-slot {
  top: 10px;
  right: 10px;
}

.stats-container-new .stats-card-size-compact .stats-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.stats-container-new .stats-card-size-compact .stats-icon-badge i,
.stats-container-new .stats-card-size-compact .stats-icon-badge svg {
  font-size: 15px !important;
}

.stats-container-new .stats-card-size-compact .sc-content {
  min-height: 56px;
  gap: 6px;
  padding: 4px 48px 4px 8px;
}

.stats-container-new .stats-card-size-compact .sc-number,
.stats-container-new .stats-card-size-compact span[id^="nb_"] {
  font-size: 24px !important;
}

.stats-container-new .stats-card-size-compact .sc-text {
  font-size: 14px !important;
  line-height: 1.25;
}

/* Collapsed state — user clicked the ⌃ toggle in the top-right of the
   stats row. Shrink card min-height + padding + typography so the row
   really becomes compact (was only hiding the icon + py classes, but
   the min-height:120px/padding:20px still left the cards tall). */
.stats-container-new.stats-collapsed > .nav-item > a,
.stats-container-new.stats-collapsed > .nav-item > .btn {
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 16px !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 10px;
}
.stats-container-diviser:has(> .stats-container-new.stats-collapsed),
.stats-container-diviser.stats-container-diviser-collapsed {
  align-items: flex-start !important;
  margin-bottom: 8px !important;
}
.stats-container-diviser > .stats-container-new.stats-collapsed {
  align-items: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.stats-container-new.stats-collapsed > .nav-item {
  align-self: stretch !important;
  display: flex !important;
}
.stats-container-new.stats-collapsed > .nav-item > a,
.stats-container-new.stats-collapsed > .nav-item > .btn {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 56px !important;
}
.stats-container-new.stats-collapsed .svg-icon,
.stats-container-new.stats-collapsed .stats-icon {
  display: none !important;
  margin: 0 !important;
}
.stats-container-new.stats-collapsed .sc-icon-slot {
  display: none !important;
}
.stats-container-new.stats-collapsed .sc-content {
  gap: 6px;
  min-height: 0;
  padding: 0;
}
.stats-container-new.stats-collapsed .fs-8,
.stats-container-new.stats-collapsed .fs-2,
.stats-container-new.stats-collapsed span[id^="nb_"],
.stats-container-new.stats-collapsed .sc-number {
  font-size: 18px !important;
}
.stats-container-new.stats-collapsed .eb-fs12 span[id^="nb_"] {
  font-size: 12px !important;
}
.stats-container-new.stats-collapsed .sc-text {
  font-size: 13px !important;
}
/* #9958 — Logistique vue mobile.
   Les tuiles de stats sont masquées par défaut sur ≤992px (.hide_mobile).
   consommable_tabs / materiel_tabs opt-in via $showOnMobile=true → la UL
   reçoit la classe `show_on_mobile`. On force ici un layout grille
   compact pour rester utilisable au téléphone. */
@media (max-width: 992px) {
  .stats-container-new.show_on_mobile {
    margin: 8px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .stats-container-new.show_on_mobile > .nav-item {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .stats-container-new.show_on_mobile > .nav-item > a,
  .stats-container-new.show_on_mobile > .nav-item > .btn {
    min-height: 64px !important;
    padding: 8px 6px !important;
    flex-direction: column !important;
    gap: 2px;
  }
  .stats-container-new.show_on_mobile .svg-icon,
  .stats-container-new.show_on_mobile .stats-icon {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  .stats-container-new.show_on_mobile .sc-icon-slot {
    top: 8px;
    right: 8px;
  }
  .stats-container-new.show_on_mobile .stats-icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .stats-container-new.show_on_mobile .stats-icon-badge i,
  .stats-container-new.show_on_mobile .stats-icon-badge svg {
    font-size: 13px !important;
  }
  .stats-container-new.show_on_mobile .sc-number,
  .stats-container-new.show_on_mobile span[id^="nb_"],
  .stats-container-new.show_on_mobile span[id$="_count"] {
    font-size: 18px !important;
  }
  .stats-container-new.show_on_mobile .sc-text,
  .stats-container-new.show_on_mobile span:not(.sc-number):not([id^="nb_"]):not([id$="_count"]) {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }
  /* Le toggle collapse (fas fa-angle-double-…) en top-right reste utile
     mais n'a plus la place sur mobile : la grille déborde derrière. */
.stats-container-new.show_on_mobile .toggle-container {
    display: none !important;
  }
}

/* Legacy helper cards still used in a few screens (notably recrutement).
   Give them the same visual language as the factorized .stats-container-new
   cards so the product keeps one stat-card family. */
.stats-container-legacy-factorized {
  width: 100%;
  min-width: 0;
  background: transparent !important;
  padding: 0 !important;
}
.stats-container-legacy-factorized .stats-legacy-card {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 132px;
  margin: 0;
  padding: 26px 24px 20px;
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius, 10px);
  background: var(--eb-surface, #fff);
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.stats-container-legacy-factorized .stats-legacy-accent {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--eb-primary, #3b82f6);
}
.stats-container-legacy-factorized[data-stat-style='orange'] .stats-legacy-accent,
.stats-container-legacy-factorized[data-stat-style='soon-expired'] .stats-legacy-accent {
  background: var(--eb-warning, #f59e0b);
}
.stats-container-legacy-factorized[data-stat-style='green'] .stats-legacy-accent {
  background: var(--eb-success, #10b981);
}
.stats-container-legacy-factorized[data-stat-style='red'] .stats-legacy-accent,
.stats-container-legacy-factorized[data-stat-style='disabled'] .stats-legacy-accent,
.stats-container-legacy-factorized[data-stat-style='expired'] .stats-legacy-accent {
  background: var(--eb-danger, #ef4444);
}
.stats-container-legacy-factorized[data-stat-style='purple'] .stats-legacy-accent {
  background: var(--eb-purple, #8b5cf6);
}
.stats-container-legacy-factorized .stats-legacy-icon {
  position: absolute;
  top: 12px;
  right: 12px;
}
.stats-container-legacy-factorized .stats-legacy-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 84px;
  padding: 8px 60px 8px 12px;
  text-align: center;
}

@media (max-width: 1500px) {
  .stats-container-new .sc-icon-slot,
  .stats-container-legacy-factorized .stats-legacy-icon {
    top: 10px;
    right: 10px;
  }
  .stats-container-new .stats-icon-badge,
  .stats-container-legacy-factorized .stats-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .stats-container-new .stats-icon-badge i,
  .stats-container-new .stats-icon-badge svg,
  .stats-container-legacy-factorized .stats-icon-badge i,
  .stats-container-legacy-factorized .stats-icon-badge svg {
    font-size: 15px !important;
  }
  .stats-container-new .sc-content,
  .stats-container-legacy-factorized .stats-legacy-content {
    padding-right: 48px;
  }
}

@media (max-width: 1280px) {
  .stats-container-new .sc-icon-slot,
  .stats-container-legacy-factorized .stats-legacy-icon {
    display: none !important;
  }
  .stats-container-new .sc-content,
  .stats-container-legacy-factorized .stats-legacy-content {
    padding-right: 12px;
  }
}
.stats-container-legacy-factorized .counter {
  font-size: 30px !important;
  line-height: 1.1;
  color: var(--eb-text, #0f172a) !important;
}
.stats-container-legacy-factorized .stats-title {
  font-size: 15px !important;
  line-height: 1.35;
  color: var(--eb-text-secondary, #64748b) !important;
}
/* The topbar include is rendered inside #space-left (just after <body>)
   so use a descendant selector, not a direct-child one.
   Exclude .eb-dashboard-v2: the dashboard renders .eb-topbar inside
   .eb-main where position:sticky works naturally — forcing position:fixed
   removes it from flow and the 52px padding-top on .space-left creates a
   visible empty band between the sidebar/topbar and the widget area. */
body.eb-has-topbar-v2:not(.eb-dashboard-v2) .eb-topbar {
  position: fixed !important;
  top: 0 !important;
  left: var(--eb-sidebar-w) !important;
  right: 0 !important;
  width: auto !important;
  z-index: 1040 !important;
}
/* Push the content area down by the topbar height (52px) + 12px de
   respiration pour éviter que les boutons/formulaires en haut de page
   ne soient collés au breadcrumb (#9813). #space-left a déjà
   margin-left:240px pour la sidebar sur les pages non-dashboard.
   Pas nécessaire sur le dashboard : la topbar sticky occupe la place. */
body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left,
body.eb-has-topbar-v2:not(.eb-dashboard-v2) .space-left {
  padding-top: 64px !important;
}
/* Le label 'MAIL DESACTIVE / DEBUG / MAINTENANCE' est émis après la topbar
   dans le DOM (V2). On le transforme en barre sticky centrée qui suit le
   scroll sans chevaucher les onglets ni le contenu.
   #10270 — margin-top: -12px pour compenser le padding-top: 64px de
   .space-left (topbar 52px + 12px de respiration) : le label vient se
   coller directement sous la topbar au lieu de flotter 12px plus bas. */
body.eb-has-topbar-v2 .test-label-container {
  position: sticky;
  top: 52px;
  z-index: 39;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-top: -12px;
}
body.eb-has-topbar-v2 .test-label-container > span {
  position: static !important;
  top: auto !important;
  margin-top: 0 !important;
  transform: none !important;
  left: auto !important;
  border-radius: 0 0 5px 5px;
}
/* The legacy .breadcrumb-responsive bar (the white strip with
   "Accueil > Personnel > Liste" on the left and action buttons on the
   right) is redundant on pages that opt into the V2 topbar — the
   topbar already shows the breadcrumb. Hide it entirely; action
   buttons that used to sit in this bar will be re-integrated in the
   V2 topbar as a dedicated "actions" slot (see eb_topbar_v2.php). */
body.eb-has-topbar-v2 .breadcrumb-responsive { display: none !important; }
body.eb-has-topbar-v2 #div_principale { margin-top: 0 !important; }
/* Le .space-left legacy dans #div_principale sert uniquement à contenir la
   nav latérale (déplacée vers #ebSidebar par JS). Quand il est vide, ses
   paddings (52px + 120px = 172px) créent un espace blanc au-dessus du contenu.
   On le collapse pour que #div_principale ne prenne que la taille du topbar. */
body.eb-has-topbar-v2 #div_principale > .space-left {
  padding-bottom: 0 !important;
}
/* Nested .space-left: pages like export.php create a second .space-left
   inside #space-left — it must NOT inherit the 52px topbar padding or
   the 240px sidebar margin, otherwise there's excessive whitespace. */
body.eb-has-topbar-v2 .space-left .space-left {
  padding-top: 0 !important;
  margin-left: 0 !important;
}
/* SPA page changes keep the current content visible while the next page
   is fetched. The loader is scoped to #space-left so it never covers the
   fixed lateral menu. */
body.eb-has-topbar-v2 #space-left.eb-spa-is-loading,
body.eb-has-topbar-v2 .space-left.eb-spa-is-loading {
  position: relative;
  min-height: 240px;
}
body.eb-has-topbar-v2 #space-left.eb-spa-is-loading > :not(.eb-spa-loader),
body.eb-has-topbar-v2 .space-left.eb-spa-is-loading > :not(.eb-spa-loader) {
  opacity: 0.55;
  pointer-events: none;
}
body.eb-has-topbar-v2 #space-left.eb-container-is-loading,
body.eb-has-topbar-v2 .space-left.eb-container-is-loading {
  background: var(--eb-bg, #f1f5f9);
  min-height: 240px;
}
body.eb-has-topbar-v2 #space-left.eb-container-is-loading > :not(.eb-topbar),
body.eb-has-topbar-v2 .space-left.eb-container-is-loading > :not(.eb-topbar) {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
body.eb-has-topbar-v2 .eb-spa-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 96px;
  background: transparent;
  pointer-events: none;
  z-index: 20;
}
:root.dark body.eb-has-topbar-v2 .eb-spa-loader {
  background: transparent;
}
body.eb-has-topbar-v2 .eb-spa-loader i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--eb-card-bg, #fff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  font-size: 24px;
  color: var(--eb-primary, #2563EB);
}
body.eb-has-topbar-v2 #space-left .page-loader,
body.eb-has-topbar-v2 #space-left #page-loader,
body.eb-has-topbar-v2 .space-left .page-loader,
body.eb-has-topbar-v2 .space-left #page-loader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* The legacy #menu bar (sub-nav tabs like Liste/Remboursement on
   notes_frais_choice, Liste/Activité on vehicule, …) is position:sticky
   with top:99px in main.css — calibrated for the old V1 layout where
   the topbar was 50px + breadcrumb 49px. With the V2 topbar (52px +
   no breadcrumb strip) that stale offset leaves a ~47px gap above the
   tabs and makes them overlap downstream content when scrolled. Pin it
   to the bottom of the V2 topbar instead. */
body.eb-has-topbar-v2 #menu {
  top: 48px !important;
}

/* ===== Modern sub-nav tab bar (legacy #menu) =====
   Legacy markup (fonctions_menu.php::carousel_menu_mobile): a Bootstrap
   carousel wraps <div class="menu-mobile"> rows which contain <a> tabs
   with <span class="marge-active fa-sm2 active-color bord"> (active) or
   <span class="int-marge fa-sm2 inactive-color "> (inactive). Default
   styling is a flat blue bar with white active pills. Rework it to a
   minimal pill row matching the V2 stat cards / topbar look on every
   page that opts into body.eb-has-topbar-v2. */
body.eb-has-topbar-v2 #menu {
  background: var(--eb-surface, #ffffff) !important;
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 0 16px !important;
  min-height: 52px;
  display: flex;
  align-items: center;
}
body.eb-has-topbar-v2 #menu .carousel,
body.eb-has-topbar-v2 #menu .carousel-inner,
body.eb-has-topbar-v2 #menu .carousel-item {
  background: transparent !important;
  width: 100%;
}
body.eb-has-topbar-v2 #menu .menu-mobile {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* Hide structural empty spacer cells the carousel injects to balance its
   fixed-width grid. Real tabs always contain an <a>; spacers don't. */
body.eb-has-topbar-v2 #menu .menu-mobile > div:not(:has(a)),
body.eb-has-topbar-v2 #menu .div-mobile {
  display: none !important;
}
body.eb-has-topbar-v2 #menu .menu-mobile > div {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  width: auto !important;
}
body.eb-has-topbar-v2 #menu a[role='button'],
body.eb-has-topbar-v2 #menu .menu-mobile a {
  display: inline-flex !important;
  align-items: center;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* The actual clickable pill — unify active and inactive variants. */
body.eb-has-topbar-v2 #menu .fa-sm2 {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--eb-text-secondary, #64748b) !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  white-space: nowrap;
  cursor: pointer;
}
body.eb-has-topbar-v2 #menu .fa-sm2:hover {
  color: var(--eb-text, #0f172a) !important;
  background: var(--eb-bg, #f1f5f9) !important;
}
/* Active tab — tinted pill with thin border accent. */
body.eb-has-topbar-v2 #menu .fa-sm2.active-color,
body.eb-has-topbar-v2 #menu .fa-sm2.active {
  color: var(--eb-primary, #3b82f6) !important;
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04)) !important;
  font-weight: 600 !important;
}
body.eb-has-topbar-v2 #menu .fa-sm2.active-color:hover {
  background: rgba(59, 130, 246, 0.14) !important;
}
/* Icons inside the pill (the <i class="fa ..."> or <img> before the text) */
body.eb-has-topbar-v2 #menu .fa-sm2 > i,
body.eb-has-topbar-v2 #menu .fa-sm2 > img,
body.eb-has-topbar-v2 #menu .fa-sm2 svg {
  font-size: 14px;
  line-height: 1;
  margin: 0 !important;
}
/* Badge counters occasionally placed next to the label. */
body.eb-has-topbar-v2 #menu .fa-sm2 .badge {
  margin-left: 2px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
}
/* Kill carousel prev/next arrows — the pill row never needs them with
   the rework; the carousel is sized to content and fits on one line. */
body.eb-has-topbar-v2 #menu .carousel-control-prev,
body.eb-has-topbar-v2 #menu .carousel-control-next {
  display: none !important;
}
.eb-topbar-left { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.eb-breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; font-size: 13px; min-width: 0; overflow: hidden; }
/* Hide breadcrumb on dashboard — greeting replaces it */
.eb-dashboard-v2 .eb-breadcrumb { display: none !important; }
/* #fil-ariane — jamais deux lignes : chaque segment reste sur une seule ligne
   (white-space:nowrap), la barre ne wrappe pas (flex-wrap:nowrap) et les
   libellés longs (page courante, dossiers / organisations intermédiaires) se
   tronquent avec « … » au lieu de pousser la barre sur une 2e ligne. Le « … »
   est partagé : la page courante (souvent la plus longue) absorbe en premier,
   les liens intermédiaires ne se tronquent qu'en dernier recours. */
.eb-breadcrumb > * { flex: 0 0 auto; white-space: nowrap; }
.eb-breadcrumb a { color: var(--eb-text-secondary); text-decoration: none; flex: 0 1 auto; min-width: 4ch; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.eb-breadcrumb a:hover { color: var(--eb-primary); }
.eb-breadcrumb-sep { color: var(--eb-text-muted); font-size: 14px; }
.eb-breadcrumb-current { color: var(--eb-text); font-weight: 500; flex: 0 1 auto; min-width: 3ch; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; }

/* Pas d'overflow:hidden ici en desktop : le pont hover du menu Ajout rapide
   doit pouvoir descendre sous l'icône. */
.eb-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; flex: 0 1 auto; }
/* Action buttons slot — lives inside .eb-topbar-right, before the
   search bar, populated per-page via $eb_topbar_actions. Contains
   things like "Recherche avancée", "+ Personnel", Excel export, etc. */
.eb-topbar-actions { display: flex; align-items: center; gap: 6px; }
.eb-topbar-actions .buttons-container { display: flex; align-items: center; gap: 6px; padding: 0; margin: 0; }
.eb-topbar-actions .btn { height: 34px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.eb-topbar-actions .btn i { font-size: 14px; }
/* Preserve whitespace inside the button label so "Recherche avancée"
   / "Personnel" don't get glued to the icon when the flex layout
   collapses text whitespace. */
.eb-topbar-actions .btn span { white-space: nowrap; }
.eb-topbar-actions .btn-default { background: var(--eb-surface); color: var(--eb-text); border: 1px solid var(--eb-border); }
/* On narrow screens collapse the label and keep just the icon */
@media (max-width: 1199px) {
  .eb-topbar-actions .btn .hide_mobile { display: none; }
  .eb-topbar-actions .btn.btn-success,
  .eb-topbar-actions .btn.btn-primary {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    justify-content: center;
  }
}
/* Two-tone search pill : grey icon block + white input block.
   The wrapper carries no visuals — each block draws its own half of the
   continuous border so the inner seam stays square and only the outer
   corners are rounded. align-items:stretch + a fixed wrapper height keep
   both halves at exactly the same height. */
.eb-topbar-search {
  display: inline-flex; align-items: stretch;
  min-width: 180px; max-width: 260px;
  height: 36px;
  box-sizing: border-box;
  position: relative;
}
.eb-topbar-search i {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px;
  background: var(--eb-bg);
  border: 1px solid var(--eb-border);
  border-right: none;
  border-radius: var(--eb-radius-sm) 0 0 var(--eb-radius-sm);
  box-sizing: border-box;
  color: var(--eb-text-muted); font-size: 13px;
}
.eb-topbar-search input {
  flex: 1 1 auto; min-width: 0;
  background: var(--eb-surface) !important;
  border: 1px solid var(--eb-border) !important;
  border-left: none !important;
  border-radius: 0 var(--eb-radius-sm) var(--eb-radius-sm) 0 !important;
  box-sizing: border-box;
  outline: none !important;
  font-size: 13px !important; color: var(--eb-text) !important;
  font-family: inherit !important;
  /* Cancel global .form-control inflation; keep the input flush in its block. */
  padding: 0 14px !important;
  height: auto !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.eb-topbar-search input:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--eb-border) !important;
}
.eb-topbar-search input::placeholder { color: var(--eb-text-muted); }

.eb-topbar-icon {
  width: 36px; height: 36px; border-radius: var(--eb-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--eb-text-secondary); cursor: pointer;
  transition: all 0.15s ease; position: relative;
  border: none; background: none; box-shadow: none; outline: none;
}
.eb-topbar-icon:hover { background: var(--eb-bg); color: var(--eb-text); }
.eb-topbar-icon:focus, .eb-topbar-icon:active { box-shadow: none; outline: none; }

/* Badge de notification de la topbar (ex: enveloppe messagerie) — pastille
   ronde, nette et collée à l'icône. Override de la pill générique .badge-circle
   qui était trop éloignée (top:-6/right:-8) et en forme de gélule. */
.eb-topbar-icon .badge-circle,
html body .eb-topbar-icon .badge-circle,
html body.eb-has-topbar-v2 .eb-topbar-icon .badge-circle {
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border: 2px solid var(--eb-card, #fff) !important;
  background-color: #EF4444 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
  /* Collée au coin haut-droit de l'icône, à cheval léger sur le bord. */
  top: -3px !important;
  right: -3px !important;
}
/* ≥ 100 → reste une pastille arrondie, à peine plus large, même ancrage. */
.eb-topbar-icon .badge-circle.high-value,
html body .eb-topbar-icon .badge-circle.high-value,
html body.eb-has-topbar-v2 .eb-topbar-icon .badge-circle.high-value {
  min-width: 22px !important;
  height: 17px !important;
  font-size: 9px !important;
  top: -3px !important;
  right: -5px !important;
}

/* Geolocation button states & animations */
.eb-geoloc-icon.eb-geoloc-active {
  color: #1bc5bd;
}
.eb-geoloc-icon.eb-geoloc-active i {
  animation: eb-geoloc-pulse 2s ease-in-out infinite;
}
.eb-geoloc-icon.eb-geoloc-stale {
  color: #ffa800;
}
.eb-geoloc-icon.eb-geoloc-stale i {
  animation: eb-geoloc-pulse 2s ease-in-out infinite;
}
.eb-geoloc-icon.eb-geoloc-inactive {
  color: #f64e60;
}
.eb-geoloc-icon.eb-geoloc-inactive i {
  animation: eb-geoloc-shake 3s ease-in-out infinite;
}
@keyframes eb-geoloc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}
@keyframes eb-geoloc-shake {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-8deg); }
  20% { transform: rotate(8deg); }
  30% { transform: rotate(0deg); }
}

.eb-topbar-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; background: var(--eb-danger);
  border-radius: 50%; border: 2px solid var(--eb-surface);
}
.eb-topbar-profile img {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--eb-border); object-fit: cover;
  margin-left: 4px;
}

/* Quickadd dropdown */
.eb-dropdown-trigger { position: relative; }
.eb-quickadd-dropdown {
  /* Ouverture/fermeture pilotées en JS via .eb-quickadd-open (hover-intent +
     délai de fermeture) : le survol CSS seul était trop fragile (l'icône et le
     menu ne sont pas alignés, on traversait une zone morte qui refermait le
     menu avant d'y arriver). */
  visibility: hidden; opacity: 0; pointer-events: none;
  position: fixed; top: 64px; right: 28px;
  background: var(--eb-surface); border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-md); box-shadow: var(--eb-shadow-md);
  width: 280px; z-index: 1041; overflow: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.eb-quickadd-dropdown.eb-quickadd-open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
.eb-quickadd-title {
  font-size: 13px; font-weight: 600; color: var(--eb-text);
  padding: 12px 16px; border-bottom: 1px solid var(--eb-border);
}
.eb-quickadd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.eb-quickadd-grid a {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 8px; cursor: pointer;
  font-size: 12px; color: var(--eb-text-secondary) !important;
  text-decoration: none !important; border: 1px solid var(--eb-border);
  transition: background 0.15s;
}
.eb-quickadd-grid a:hover { background: var(--eb-bg); color: var(--eb-primary) !important; }
.eb-quickadd-grid a i { font-size: 18px; color: var(--eb-primary); }

/* Search dropdown results */
.eb-topbar-search .dropdown-menu {
  min-width: 320px; max-width: 400px; border-radius: var(--eb-radius-sm) !important;
  box-shadow: var(--eb-shadow-md) !important; border: 1px solid var(--eb-border) !important;
  margin-top: 4px !important;
  top: 100% !important; transform: none !important;
  right: 0; left: auto;
}
.eb-topbar-search .search-menu {
  outline: none !important; box-shadow: none !important;
  font-size: 13px; color: var(--eb-text);
  font-family: inherit; padding: 0 14px !important;
}
.eb-topbar-search .search-menu::placeholder { color: var(--eb-text-muted); }

/* Dispo badge in sidebar */
.eb-dispo-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 8px; border-radius: var(--eb-radius-md); margin-top: 0;
  line-height: 1.4; text-align: center; align-self: flex-start;
}
.eb-dispo-on { background: rgba(52, 211, 153, 0.15); color: #34D399; }
.eb-dispo-off { background: rgba(148, 163, 184, 0.15); color: var(--eb-sidebar-text-dim); }
.eb-dispo-absent { background: rgba(248, 113, 113, 0.15); color: #F87171; }

/* Sidebar collapse button — under logo */
.eb-sidebar-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--eb-sidebar-nav-section);
  cursor: pointer; padding: 8px 16px; width: 100%;
  font-size: 13px; transition: all 0.15s;
  border-bottom: 1px solid var(--eb-sidebar-border);
}
.eb-sidebar-collapse-btn:hover { color: var(--eb-sidebar-nav-text); background: rgba(255,255,255,0.03); }

/* Sidebar collapsed state */
.eb-sidebar.collapsed { width: 60px !important; min-width: 60px !important; }
.eb-sidebar.collapsed .eb-sidebar-version,
.eb-sidebar.collapsed .eb-nav-section-title,
.eb-sidebar.collapsed .eb-nav-item span,
.eb-sidebar.collapsed .eb-chevron,
.eb-sidebar.collapsed .eb-nav-sub,
.eb-sidebar.collapsed .eb-sidebar-user-info,
.eb-sidebar.collapsed .eb-sidebar-collapse-btn i { display: none !important; }
/* #10433 — Sidebar repliée : le menu utilisateur (clic sur l'avatar en bas) doit
   s'afficher EN DEHORS de la barre. En absolu left:0/right:0 il serait écrasé à
   ~60px et clippé par l'overflow:hidden du sidebar. On passe en position:fixed
   (aucun ancêtre n'a de transform → ancrage viewport) pour un flyout à droite. */
.eb-sidebar.collapsed .eb-user-menu {
  position: fixed;
  left: 66px;
  right: auto;
  bottom: 12px;
  width: 248px;
  margin-bottom: 0;
}
.eb-sidebar.collapsed .eb-sidebar-logo { justify-content: center; padding: 16px 8px; }
.eb-sidebar.collapsed .eb-sidebar-logo a img { height: 24px !important; }
.eb-sidebar.collapsed .eb-sidebar-collapse-btn::after {
  content: '\f101'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
  color: var(--eb-sidebar-nav-section);
}
.eb-sidebar.collapsed .eb-nav-item { justify-content: center; padding: 10px; }
.eb-sidebar.collapsed .eb-nav-item i:first-child { margin: 0; width: auto; }
.eb-sidebar.collapsed .eb-sidebar-bottom { padding: 10px 6px; justify-content: center; }
.eb-sidebar.collapsed .eb-sidebar-user { padding: 4px; justify-content: center; }
.eb-sidebar.collapsed .eb-sidebar-user .fa-ellipsis-v { display: none; }
.eb-main.collapsed { margin-left: 60px !important; }

/* Sidebar collapsed state */
.eb-sidebar.collapsed { width: 60px; min-width: 60px; }
.eb-sidebar.collapsed .eb-sidebar-logo span,
.eb-sidebar.collapsed .eb-sidebar-logo small,
.eb-sidebar.collapsed .eb-sidebar-version,
.eb-sidebar.collapsed .eb-nav-section-title,
.eb-sidebar.collapsed .eb-nav-item span,
.eb-sidebar.collapsed .eb-chevron,
.eb-sidebar.collapsed .eb-nav-sub,
.eb-sidebar.collapsed .eb-sidebar-user-info { display: none !important; }
.eb-sidebar.collapsed .eb-nav-item { justify-content: center; padding: 10px; }
.eb-sidebar.collapsed .eb-sidebar-user { justify-content: center; }
.eb-sidebar.collapsed .eb-sidebar-collapse-btn i { transform: rotate(180deg); }
.eb-main.collapsed { margin-left: 60px; }

/* Sidebar bottom layout — safe-area-inset-bottom pour ne pas être mangé
   par la gesture bar Android/iOS quand la sidebar prend toute la hauteur. */
.eb-sidebar-bottom {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--eb-sidebar-border);
}

/* ===== 5. DASHBOARD AREA ===== */
/* #align — padding vertical 20px conservé, gouttière horizontale alignée
   sur la constante --eb-content-gutter (24px) pour que les cartes du
   tableau de bord partagent le même bord gauche que la topbar et que le
   contenu des autres pages (#space-left). */
.eb-dashboard { padding: 20px var(--eb-content-gutter, 24px); flex: 1; }

/* Greeting */
.eb-greeting {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 20px; gap: 20px;
}
.eb-greeting-title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--eb-text); margin: 0; line-height: 1.2; text-align: left;
}
.eb-greeting-left { text-align: left; }
.eb-greeting-subtitle {
  font-size: 14px; color: var(--eb-text-secondary); margin: 4px 0 0;
}
.eb-greeting-actions { display: flex; gap: 10px; flex-shrink: 0; }
.eb-btn-modern {
  padding: 9px 18px !important; border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important; font-weight: 500 !important;
  display: inline-flex !important; align-items: center !important;
  gap: 8px !important; transition: all 0.15s ease !important;
  font-family: inherit !important;
}
.eb-btn-modern.btn-outline-secondary {
  background: var(--eb-surface) !important; color: var(--eb-text) !important;
  border: 1px solid var(--eb-border) !important;
}
.eb-btn-modern.btn-outline-secondary:hover { background: var(--eb-bg) !important; }
.eb-btn-modern.btn-primary {
  background: var(--eb-primary) !important; color: #fff !important;
  border: 1px solid var(--eb-primary) !important;
  box-shadow: 0 1px 3px rgba(37,99,235,0.3) !important;
}
.eb-btn-modern.btn-primary:hover { background: var(--eb-primary-hover) !important; }

/* ===== 5b. CLOCK WIDGET ===== */
.eb-clock-widget {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px 6px 8px;
  background: var(--eb-surface); border: 1px solid var(--eb-border);
  border-radius: 16px; user-select: none;
}
.eb-clock-face {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border: 2px solid var(--eb-border);
  position: relative; flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.eb-clock-marks {
  position: absolute; inset: 0;
}
.eb-clock-marks::before, .eb-clock-marks::after {
  content: ''; position: absolute;
  background: var(--eb-text-secondary); border-radius: 1px;
}
.eb-clock-marks::before {
  /* 12 o'clock */
  width: 2px; height: 5px; top: 2px; left: 50%; transform: translateX(-50%);
}
.eb-clock-marks::after {
  /* 6 o'clock */
  width: 2px; height: 5px; bottom: 2px; left: 50%; transform: translateX(-50%);
}
.eb-clock-hand {
  position: absolute; bottom: 50%; left: 50%;
  transform-origin: bottom center; border-radius: 2px;
}
.eb-clock-hour {
  width: 2.5px; height: 11px; margin-left: -1.25px;
  background: var(--eb-text); z-index: 3;
}
.eb-clock-minute {
  width: 2px; height: 15px; margin-left: -1px;
  background: var(--eb-primary); z-index: 4;
}
.eb-clock-second {
  width: 1px; height: 16px; margin-left: -0.5px;
  background: var(--eb-danger); z-index: 5;
  transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
.eb-clock-center {
  position: absolute; width: 5px; height: 5px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--eb-primary); border-radius: 50%; z-index: 6;
  box-shadow: 0 0 0 1px #fff;
}
.eb-clock-digital {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 18px; font-weight: 600; letter-spacing: 1px;
  color: var(--eb-text);
  min-width: 52px; text-align: center;
}
@media (max-width: 640px) {
  .eb-clock-widget { padding: 4px 10px 4px 6px; gap: 8px; }
  .eb-clock-face { width: 34px; height: 34px; }
  .eb-clock-digital { font-size: 15px; }
}

/* ===== 5b. CLOCK FUN ANIMATIONS ===== */
.eb-clock-widget { cursor: pointer; transition: transform 0.3s ease; }

/* Spin */
.eb-clock-anim-spin .eb-clock-face {
  animation: ebClockSpin 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes ebClockSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Jelly wobble */
.eb-clock-anim-jelly {
  animation: ebClockJelly 0.6s ease;
}
@keyframes ebClockJelly {
  0% { transform: scale(1, 1); }
  20% { transform: scale(1.25, 0.75); }
  40% { transform: scale(0.75, 1.25); }
  60% { transform: scale(1.15, 0.85); }
  80% { transform: scale(0.95, 1.05); }
  100% { transform: scale(1, 1); }
}

/* Bounce */
.eb-clock-anim-bounce {
  animation: ebClockBounce 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes ebClockBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-30px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(3deg); }
  75% { transform: translateY(-12px) rotate(-2deg); }
}

/* Rocket — flies up then back */
.eb-clock-anim-rocket {
  animation: ebClockRocket 1s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ebClockRocket {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  30% { transform: translateY(-80px) scale(0.6); opacity: 0.5; }
  50% { transform: translateY(-100px) scale(0.4); opacity: 0; }
  60% { transform: translateY(20px) scale(0.4); opacity: 0; }
  80% { transform: translateY(10px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Dizzy shake */
.eb-clock-anim-dizzy {
  animation: ebClockDizzy 0.5s ease;
}
@keyframes ebClockDizzy {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-8deg); }
  20% { transform: rotate(8deg); }
  30% { transform: rotate(-6deg); }
  40% { transform: rotate(6deg); }
  50% { transform: rotate(-4deg); }
  60% { transform: rotate(4deg); }
  70% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}

/* Flip */
.eb-clock-anim-flip {
  animation: ebClockFlip 0.8s ease;
  perspective: 400px;
}
@keyframes ebClockFlip {
  0% { transform: perspective(400px) rotateY(0); }
  50% { transform: perspective(400px) rotateY(180deg) scale(1.1); }
  100% { transform: perspective(400px) rotateY(360deg) scale(1); }
}

/* Pulse glow */
.eb-clock-anim-pulse .eb-clock-face {
  animation: ebClockPulse 0.8s ease;
}
@keyframes ebClockPulse {
  0% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.06), 0 0 0 0 rgba(var(--eb-primary-rgb, 59,130,246), 0.6); }
  50% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.06), 0 0 20px 10px rgba(var(--eb-primary-rgb, 59,130,246), 0.3); }
  100% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.06), 0 0 0 0 rgba(var(--eb-primary-rgb, 59,130,246), 0); }
}

/* Time warp — hands go crazy */
.eb-clock-anim-warp .eb-clock-hour {
  animation: ebWarpH 0.8s ease-in-out !important;
}
.eb-clock-anim-warp .eb-clock-minute {
  animation: ebWarpM 0.8s ease-in-out !important;
}
.eb-clock-anim-warp .eb-clock-second {
  animation: ebWarpS 0.8s ease-in-out !important;
  transition: none !important;
}
@keyframes ebWarpH { 0% { transform: rotate(var(--h-deg, 0deg)); } 50% { transform: rotate(calc(var(--h-deg, 0deg) + 720deg)); } 100% { transform: rotate(var(--h-deg, 0deg)); } }
@keyframes ebWarpM { 0% { transform: rotate(var(--m-deg, 0deg)); } 50% { transform: rotate(calc(var(--m-deg, 0deg) - 1080deg)); } 100% { transform: rotate(var(--m-deg, 0deg)); } }
@keyframes ebWarpS { 0% { transform: rotate(var(--s-deg, 0deg)); } 50% { transform: rotate(calc(var(--s-deg, 0deg) + 1440deg)); } 100% { transform: rotate(var(--s-deg, 0deg)); } }

/* Confetti particle */
.eb-confetti {
  position: fixed; width: 8px; height: 8px; border-radius: 2px;
  pointer-events: none; z-index: 9999;
  animation: ebConfettiFall 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes ebConfettiFall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(120px) rotate(720deg) scale(0); opacity: 0; }
}

/* Emoji float */
.eb-emoji-float {
  position: fixed; font-size: 24px; pointer-events: none; z-index: 9999;
  animation: ebEmojiFloat 1.5s ease-out forwards;
}
@keyframes ebEmojiFloat {
  0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-120px) scale(1.2) rotate(30deg); opacity: 0; }
}

/* ===== 6. STAT CARDS — V2 mockup layout ===== */
.eb-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 16px;
}
.eb-stat-card {
  background: var(--eb-surface); border-radius: var(--eb-radius);
  padding: 20px; position: relative; overflow: hidden;
  box-shadow: var(--eb-shadow-sm); border: 1px solid var(--eb-border);
  cursor: pointer; transition: all 0.15s;
  text-decoration: none !important; color: var(--eb-text) !important;
  display: block;
}
.eb-stat-card:hover { box-shadow: var(--eb-shadow-md); transform: translateY(-1px); }
.eb-stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.eb-stat-blue::before { background: var(--eb-primary); }
.eb-stat-green::before { background: var(--eb-success); }
.eb-stat-orange::before { background: var(--eb-warning); }
.eb-stat-purple::before { background: var(--eb-purple); }
.eb-stat-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.eb-stat-label {
  font-size: 13px; font-weight: 500; color: var(--eb-text-secondary);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.eb-stat-icon {
  width: 40px; height: 40px; border-radius: var(--eb-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.eb-stat-blue .eb-stat-icon { background: var(--eb-primary-light); color: var(--eb-primary); }
.eb-stat-green .eb-stat-icon { background: var(--eb-success-light); color: var(--eb-success); }
.eb-stat-orange .eb-stat-icon { background: var(--eb-warning-light); color: var(--eb-warning); }
.eb-stat-purple .eb-stat-icon { background: var(--eb-purple-light); color: var(--eb-purple); }
.eb-stat-value {
  font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1; color: var(--eb-text); margin-bottom: 8px;
}
.eb-stat-detail { font-size: 13px; color: var(--eb-text-secondary); }
.eb-stat-detail strong { color: var(--eb-text); }
@media (max-width: 1200px) { .eb-stats-row { grid-template-columns: 1fr 1fr; } .eb-stat-value { font-size: 28px; } }
@media (max-width: 768px) { .eb-stats-row { grid-template-columns: 1fr; } }

/* Legacy stat cards (kept for backward compat) */
.widget-stats { background: transparent !important; }
.widget-stats .stats-container { padding: 6px; background: transparent !important; }
.widget-stats .stats-participations,
.widget-stats .stats-activities,
.widget-stats .stats-members,
.widget-stats .stats-taches,
.widget-stats .stats-dispos {
  background: var(--eb-surface) !important;
  border-radius: var(--eb-radius) !important;
  border: 1px solid var(--eb-border) !important;
  box-shadow: var(--eb-shadow-sm) !important;
  padding: 18px 20px !important;
  position: relative; overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.widget-stats .stats-participations:hover,
.widget-stats .stats-activities:hover,
.widget-stats .stats-members:hover,
.widget-stats .stats-taches:hover,
.widget-stats .stats-dispos:hover {
  box-shadow: var(--eb-shadow-md) !important; transform: translateY(-1px);
}
/* Top color bars */
.widget-stats .eb-stats-full::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.widget-stats .stats-participations::before { background: var(--eb-primary) !important; }
.widget-stats .stats-activities::before { background: var(--eb-success) !important; }
.widget-stats .stats-members::before { background: var(--eb-warning) !important; }
.widget-stats .stats-dispos::before,
.widget-stats .stats-taches::before { background: var(--eb-purple) !important; }
/* Icons */
.widget-stats .stats-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.widget-stats .stats-header .stats-title { order: 1; }
.widget-stats .stats-header > div:first-child { order: 2; }
.widget-stats .stats-icon {
  width: 40px !important; height: 40px !important; min-width: 40px;
  border-radius: var(--eb-radius-md) !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: 16px !important;
}
.widget-stats .stats-participations-icon, .widget-stats .stats-participations .stats-icon { background: var(--eb-primary-light) !important; color: var(--eb-primary) !important; }
.widget-stats .stats-activities-icon, .widget-stats .stats-activities .stats-icon { background: var(--eb-success-light) !important; color: var(--eb-success) !important; }
.widget-stats .stats-members-icon, .widget-stats .stats-members .stats-icon { background: var(--eb-warning-light) !important; color: var(--eb-warning) !important; }
.widget-stats .stats-dispos-icon, .widget-stats .stats-taches-icon,
.widget-stats .stats-dispos .stats-icon, .widget-stats .stats-taches .stats-icon { background: var(--eb-purple-light) !important; color: var(--eb-purple) !important; }
/* Titles & numbers */
.widget-stats .stats-title {
  font-size: 13px !important; font-weight: 500 !important; color: var(--eb-text-secondary) !important;
  text-transform: uppercase !important; letter-spacing: 0.03em !important;
  text-align: left !important; padding-left: 0 !important; margin-top: 0 !important;
}
.widget-stats .stats-numbers { display: flex; align-items: baseline; gap: 24px; }
.widget-stats .stats-number span,
.widget-stats .stats-numbers > div > span {
  font-size: 36px !important; font-weight: 700 !important;
  letter-spacing: -0.02em; line-height: 1; color: var(--eb-text) !important;
  display: block;
}
.widget-stats .stats-numbers > div > div {
  font-size: 12px; color: var(--eb-text-muted) !important;
  margin-bottom: 4px; font-weight: 500;
}
/* Tabs */
.widget-stats .stats-container-new { margin-top: 12px; background: transparent !important; }
.stats-container-new.no-hover { margin-top: 12px; }
.stats-container-new.no-hover li a { cursor: default; }
.stats-container-new.no-hover li a:hover { background: inherit !important; box-shadow: none !important; }
.stats-container-new.no-hover li a input[type="checkbox"] { pointer-events: auto; cursor: pointer; }
.widget-stats .stats-container-new li a {
  border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important;
  padding: 4px 12px !important; border: 1px solid var(--eb-border) !important;
  color: var(--eb-text-secondary) !important;
}
.widget-stats .stats-container-new li a:hover { border-color: var(--eb-primary) !important; color: var(--eb-primary) !important; }
.widget-stats .stats-container-new li a.active { background: var(--eb-primary) !important; color: #fff !important; border-color: var(--eb-primary) !important; }

/* ===== 7. WIDGET CARDS ===== */
.card.card-default.graycarddefault {
  border-radius: var(--eb-radius) !important;
  border: 1px solid var(--eb-border) !important;
  box-shadow: var(--eb-shadow-sm) !important;
  overflow: hidden; background: var(--eb-surface) !important;
}
.card-header.graycard {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--eb-border) !important;
  background: var(--eb-surface) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.card-header.graycard .card-title {
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--eb-text) !important;
  display: flex !important; align-items: center !important;
  flex: 1 !important; min-width: 0;
  width: 100% !important;
}
/* Card hover */
.card.card-default.graycarddefault:hover { box-shadow: var(--eb-shadow) !important; }
/* Card links */
.card-body a:not(.btn) { color: var(--eb-primary) !important; }
.card-body a:not(.btn):hover { color: var(--eb-primary-hover) !important; }
/* Inner flex container must fill the card-title so action buttons sit at the far right */
.card-header.graycard .card-title > .d-flex {
  flex: 1 1 0% !important;
  min-width: 0;
  width: 100% !important;
}
/* Arrow links hidden */
.card-header .fa-arrow-alt-circle-right { display: none !important; }
/* Action links in header — always blue (high specificity to override main.css) */
.card.card-default .card-header.graycard .ms-auto a,
.card.card-default .card-header.graycard a.eb-card-action,
a.eb-card-action {
  color: var(--eb-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.card.card-default .card-header.graycard .ms-auto a:hover,
a.eb-card-action:hover {
  text-decoration: underline !important;
}
/* Fix: links INSIDE title should not be blue (they wrap the title text) */
.card.card-default .card-header.graycard .card-title a:not(.eb-card-action):not(.btn),
.card-header .eb-ruby a:not(.eb-card-action):not(.btn) {
  color: inherit !important;
  text-decoration: none !important;
}
/* But the arrow link inside title should stay hidden */
.card-header .eb-ruby a .fa-arrow-alt-circle-right { display: none !important; }
/* Hide arrow icons in card headers */
.card-header .fa-arrow-alt-circle-right,
.card-header .fa-arrow-circle-right { display: none !important; }
/* Add icon before widget titles via data-w-function */
[data-w-function="welcome"] .card-title::before { content: '\f2bd'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="my_sections"] .card-title::before { content: '\f1ad'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="show_events"] .card-title::before { content: '\f14a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-success); font-size: 14px; }
[data-w-function="show_about"] .card-title::before { content: '\f05a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="show_duty"] .card-title::before { content: '\f06d'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-danger); font-size: 14px; }
[data-w-function="show_notes"] .card-title::before { content: '\f543'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-text-secondary); font-size: 14px; }
[data-w-function="show_tblo_formation"] .card-title::before { content: '\f19d'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-warning); font-size: 14px; }
[data-w-function="show_participations"] .card-title::before { content: '\f073'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="show_infos"] .card-title::before { content: '\f1ea'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-warning); font-size: 14px; }
[data-w-function="franceinfo"] .card-title::before { content: '\f1ea'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="lemonde"] .card-title::before { content: '\f1ea'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-text); font-size: 14px; }
[data-w-function="cnews"] .card-title::before { content: '\f1ea'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-text); font-size: 14px; }
[data-w-function="don"] .card-title::before { content: '\f4b9'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-danger); font-size: 14px; }
[data-w-function="support"] .card-title::before { content: '\f1cd'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="show_alerts_vehicules"] .card-title::before { content: '\f1b9'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="show_alerts_consommables"] .card-title::before { content: '\f1b3'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-warning); font-size: 14px; }
[data-w-function="show_logistique"] .card-title::before { content: '\f0d1'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="show_alerts_cp"] .card-title::before { content: '\f073'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-danger); font-size: 14px; }
[data-w-function="show_remplacements_infos"] .card-title::before { content: '\f2c1'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-purple); font-size: 14px; }
[data-w-function="show_alerts_horaires"] .card-title::before { content: '\f017'; font-family: 'Font Awesome 5 Free'; font-weight: 400; margin-right: 8px; color: var(--eb-text-secondary); font-size: 14px; }

/* Badges */
.card-body .badge-primary, .card-body .badge-info { background: var(--eb-primary) !important; border-radius: 20px !important; }
.card-body .badge-success { background: var(--eb-success) !important; border-radius: 20px !important; }
.card-body .badge-warning { background: var(--eb-warning) !important; border-radius: 20px !important; color: #fff !important; }
.card-body .badge-danger { background: var(--eb-danger) !important; border-radius: 20px !important; }

/* Buttons in widgets */
.card-body .btn-primary {
  background: var(--eb-primary) !important; border-color: var(--eb-primary) !important;
  border-radius: var(--eb-radius-sm) !important;
}

/* Empty state images — cibler le placeholder "aucun_resultat", pas tout src
   contenant "aucun" (ex. un slug d'article BFM "...n-y-a-aucune-raison..."). */
.card-body img[src*="aucun_resultat"], .card-body img[src*="Aucun_resultat"] {
  opacity: 0.4 !important; max-width: 56px !important;
}

/* Progress bars */
.progress { height: 18px !important; border-radius: 9px !important; background: var(--eb-bg) !important; overflow: visible !important; }
.progress .progress-bar { background: linear-gradient(90deg, var(--eb-primary), var(--eb-purple)) !important; border-radius: 9px !important; font-size: 11px !important; line-height: 18px !important; color: #fff !important; padding: 0 8px !important; white-space: nowrap !important; overflow: visible !important; min-width: fit-content !important; }

/* Widget grid — 3-column 1:2:1 layout so side columns each match the
   width of one stat container (.eb-stat-card) and the center column
   matches two. User requested alignment with the stats row above. */
.eb-widget-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
  padding: 0;
}
.eb-widget-col { min-width: 0; }
.eb-widget-col .widget-column { display: flex; flex-direction: column; gap: 16px; padding: 0 !important; margin: 0 !important; }
.eb-widget-col .widget-column .col-sm-12 { width: 100% !important; max-width: 100% !important; flex: none; padding: 0 !important; margin: 0 !important; }
/* Uniform card spacing */
.eb-widget-col .card.card-default { margin-bottom: 0 !important; }

/* #7079 — Flash de surbrillance sur un widget après refresh AJAX
   (ex : inscription/désinscription → les widgets "Inscription" et
   "Mes activités" se rafraîchissent ; le flash aide à visualiser
   le changement sans recharger la page). */
.eb-widget-refresh-flash {
  animation: ebWidgetFlash 0.9s ease-out;
}
@keyframes ebWidgetFlash {
  0%   { box-shadow: 0 0 0 3px rgba(250, 112, 112, 0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(250, 112, 112, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(250, 112, 112, 0); }
}

@media (max-width: 1200px) {
  .eb-widget-grid { grid-template-columns: 1fr 1fr; }
  .eb-widget-col:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .eb-widget-grid { grid-template-columns: 1fr; }
}

/* Legacy spacing overrides — align widgets with stat cards */
.eb-dashboard .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
.row.accueil { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0 !important; }
.row.accueil .widget-column { --bs-gutter-y: 0; }

/* ================================================================
   7b. PER-WIDGET STYLING (targeted by data-w-function)
   ================================================================ */

/* ── WELCOME / Ma fiche ── */
[data-w-function="welcome"] .card-body {
  padding: 20px !important;
}
[data-w-function="welcome"] table { width: 100%; }
[data-w-function="welcome"] img.rounded,
[data-w-function="welcome"] img[src*="boy"],
[data-w-function="welcome"] img[src*="girl"],
[data-w-function="welcome"] img[src*="trombi"] {
  border-radius: 50% !important;
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  box-shadow: none !important;
}
[data-w-function="welcome"] .bloc1 {
  text-align: center;
}
[data-w-function="welcome"] .bloc1 .subtitle {
  font-size: 13px !important;
  color: var(--eb-text-secondary) !important;
}
[data-w-function="welcome"] .bloc2 {
  display: flex;
  justify-content: center;
}
/* Profile completion chart — ApexCharts */
[data-w-function="welcome"] .apexcharts-datalabel-value {
  font-weight: 700 !important;
  fill: var(--eb-primary) !important;
}
[data-w-function="welcome"] .apexcharts-radialbar-track > path {
  stroke: var(--eb-border) !important;
}
/* Photo container */
[data-w-function="welcome"] td > div[style*="box-shadow"] {
  box-shadow: none !important;
  border: 2px solid var(--eb-border) !important;
  border-radius: 50% !important;
}
/* Edit photo button */
[data-w-function="welcome"] .btn-circle {
  background: var(--eb-surface) !important;
  border: 1px solid var(--eb-border) !important;
  box-shadow: none !important;
}

/* ── MY SECTIONS / Mon organisation principale ── */
[data-w-function="my_sections"] .card-body { padding: 16px 20px !important; }
#card_detail { font-size: 13.5px; }
#card_detail .noBorder,
#card_detail .widget-table { width: 100%; }
/* Section photo/logo */
#card_detail img[src*="section"],
#card_detail img[src*="logo"],
#card_detail img[width="80"],
#card_detail img[width="60"],
#card_detail td > img:first-child {
  border-radius: var(--eb-radius) !important;
  object-fit: cover;
}
#card_detail a { color: var(--eb-primary) !important; font-weight: 500; }
/* Stats badges (Personnel: 195, etc.) */
#card_detail .badge,
.widget-table .badge {
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-width: 36px;
  text-align: center;
}
/* Agrément circle */
.agrement-cercle, [class*="agrement"], #card_detail .circular-chart {
  color: var(--eb-primary) !important;
}
/* Birthday icon */
#card_detail .fa-birthday-cake, #card_detail .fa-cake-candles {
  color: var(--eb-warning) !important;
}
/* WhatsApp icon */
#card_detail .fa-whatsapp { color: #25D366 !important; }
/* Email button — styles génériques appliqués via .btn-on-widget plus bas */

/* ── SHOW EVENTS / Inscription possible ── */
[data-w-function="show_events"] .card-body { padding: 8px 16px !important; }
[data-w-function="show_events"] .widget-principal-subtitle {
  padding: 6px 4px !important;
  margin-bottom: 4px !important;
}
[data-w-function="show_events"] .subtitle-small {
  font-size: 11.5px !important;
  color: var(--eb-text-muted) !important;
}
[data-w-function="show_events"] table tr {
  transition: background 0.15s !important;
}
[data-w-function="show_events"] table tr:hover {
  background: var(--eb-bg) !important;
}
/* Event type icon */
[data-w-function="show_events"] img[src*="evenements"] {
  border-radius: var(--eb-radius-md) !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: cover;
}
/* Inscription button */
[data-w-function="show_events"] .btn-success,
[data-w-function="show_events"] .btn-primary {
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  background: var(--eb-success) !important;
  border-color: var(--eb-success) !important;
}
/* Complet badge */
[data-w-function="show_events"] .eb-badge-complet {
  background: var(--eb-danger-light) !important;
  color: var(--eb-danger) !important;
  border-radius: var(--eb-radius-md) !important;
}

/* ── SHOW DUTY / Astreinte ── */
[data-w-function="show_duty"] .card-body { padding: 12px 16px !important; }
[data-w-function="show_duty"] .eb-avatar-round {
  width: 44px !important; height: 44px !important;
  border-radius: var(--eb-radius) !important;
  object-fit: cover;
}
[data-w-function="show_duty"] .subtitle {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
[data-w-function="show_duty"] .subtitle a {
  color: var(--eb-text) !important;
  font-weight: 500 !important;
}
[data-w-function="show_duty"] .subtitle-small a {
  color: var(--eb-text-muted) !important;
}
[data-w-function="show_duty"] .btn-primary {
  background: var(--eb-primary) !important;
  border-color: var(--eb-primary) !important;
  border-radius: var(--eb-radius-sm) !important;
}

/* ── SHOW NOTES / Note de frais ── */
[data-w-function="show_notes"] .card-body { padding: 0 !important; }
[data-w-function="show_notes"] .card-alert { border-radius: 0 !important; }
[data-w-function="show_notes"] .alert-number { font-size: 28px !important; font-weight: 700 !important; }
[data-w-function="show_notes"] .table-section { padding: 12px 16px !important; }
[data-w-function="show_notes"] .eb-avatar-round { width: 28px !important; height: 28px !important; }
[data-w-function="show_notes"] .eb-clickable:hover { background: var(--eb-bg) !important; }
[data-w-function="show_notes"] .alert-number-2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--eb-primary) !important;
}
[data-w-function="show_notes"] .eb-avatar-round {
  width: 30px !important; height: 30px !important;
  border-radius: var(--eb-radius-sm) !important;
  object-fit: cover;
}
[data-w-function="show_notes"] .table-section {
  padding: 8px 16px !important;
}
[data-w-function="show_notes"] table tr.eb-clickable:hover {
  background: var(--eb-bg) !important;
}

/* ── FORMATION ── */
[data-w-function="show_tblo_formation"] .card-body {
  padding: 16px !important;
  min-height: 100px;
}
[data-w-function="show_tblo_formation"] .no-content2 {
  padding: 30px 0 !important;
  background-size: 48px !important;
  opacity: 0.5;
}

/* ── METEO — mockup gradient layout ── */
.eb-meteo-header {
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  padding: 16px 20px; color: #fff; border-radius: 0;
}
.eb-meteo-location {
  font-size: 12px; font-weight: 500; opacity: 0.8;
  display: flex; align-items: center; gap: 4px; margin-bottom: 8px;
}
.eb-meteo-main {
  display: flex; align-items: center; justify-content: space-between;
}
.eb-meteo-temp {
  font-size: 48px !important; font-weight: 700 !important;
  letter-spacing: -0.03em; line-height: 1; color: #fff !important;
}
.eb-meteo-desc {
  font-size: 13px; opacity: 0.85; margin-top: 4px; color: #fff !important;
}
.eb-meteo-icon {
  width: 60px !important; height: auto; filter: brightness(0) invert(1); opacity: 0.9;
}
.eb-meteo-details {
  display: flex; gap: 16px; margin-top: 12px; font-size: 12px; opacity: 0.8;
}
.eb-meteo-details span { display: flex; align-items: center; gap: 4px; }
/* Meteo card — full-bleed: no header, no card background, no padding */
/* High specificity needed to override body.eb-has-topbar-v2 .card rules */
[data-w-function="Météo"] .card-header,
[data-w-function="meteo"] .card-header,
body.eb-has-topbar-v2 [data-w-function="Météo"] .card-header,
body.eb-has-topbar-v2 [data-w-function="meteo"] .card-header { display: none !important; }
[data-w-function="Météo"] .card-body,
[data-w-function="meteo"] .card-body,
body.eb-has-topbar-v2 [data-w-function="Météo"] .card-body,
body.eb-has-topbar-v2 [data-w-function="meteo"] .card-body { padding: 0 !important; overflow: hidden !important; background: transparent !important; }
[data-w-function="Météo"] .card,
[data-w-function="meteo"] .card,
body.eb-has-topbar-v2 [data-w-function="Météo"] .card,
body.eb-has-topbar-v2 [data-w-function="meteo"] .card {
  overflow: hidden !important; border-radius: var(--eb-radius) !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
}

/* ── METEO forecast days table (kept for backward compat) ── */
[data-w-function="Météo"] #table_jour {
  background: var(--eb-surface) !important;
  width: 100% !important;
  border-spacing: 0 !important;
}
[data-w-function="Météo"] #table_jour td {
  color: var(--eb-text) !important;
  padding: 8px 4px !important;
  text-align: center !important;
  font-size: 10px !important;
  cursor: pointer;
}
[data-w-function="Météo"] #table_jour td:hover {
  background: var(--eb-bg) !important;
}
[data-w-function="Météo"] #table_jour img {
  max-width: 28px !important; height: auto;
}
[data-w-function="Météo"] div[style*="overflow"] {
  overflow-x: auto !important; overflow-y: hidden !important;
  max-width: 100% !important;
  scrollbar-width: none;
}
[data-w-function="Météo"] div[style*="overflow"]::-webkit-scrollbar { display: none; }

/* #10531 — Mobile: contraint le tableau prévisions à la largeur du viewport
   (les <div> internes ont un width:50px inline qui forçait ~406px > 360px). */
@media (max-width: 480px) {
  [data-w-function="Météo"] #table_jour { table-layout: fixed !important; }
  [data-w-function="Météo"] #table_jour td { padding: 6px 2px !important; }
  [data-w-function="Météo"] #table_jour td > a > div,
  [data-w-function="Météo"] #table_jour td > div { width: auto !important; max-width: 100% !important; }
}

/* ── NEWS: France Info, Le Monde, CNews ── */
[data-w-function="franceinfo"] .card-body,
[data-w-function="lemonde"] .card-body,
[data-w-function="cnews"] .card-body {
  padding: 12px 16px !important;
}
[data-w-function="franceinfo"] .card-body a,
[data-w-function="lemonde"] .card-body a,
[data-w-function="cnews"] .card-body a {
  color: var(--eb-primary) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
/* News carousel arrows */
[data-w-function="franceinfo"] .carousel-control-prev-icon,
[data-w-function="franceinfo"] .carousel-control-next-icon,
[data-w-function="lemonde"] .carousel-control-prev-icon,
[data-w-function="lemonde"] .carousel-control-next-icon,
[data-w-function="cnews"] .carousel-control-prev-icon,
[data-w-function="cnews"] .carousel-control-next-icon {
  filter: invert(0.5) !important;
  width: 24px !important; height: 24px !important;
}
/* Lire l'article button */
[data-w-function="franceinfo"] .btn,
[data-w-function="lemonde"] .btn,
[data-w-function="cnews"] .btn {
  background: var(--eb-primary) !important;
  border-color: var(--eb-primary) !important;
  border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important;
}

/* ── SHOW ABOUT / A propos ── */
[data-w-function="show_about"] .card-body { padding: 16px 20px !important; }
[data-w-function="show_about"] .widget-table { width: 100%; }
[data-w-function="show_about"] .grey-button-arrow {
  width: 36px; height: 36px;
  border-radius: var(--eb-radius-sm) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  font-size: 16px !important;
  background: var(--eb-bg) !important;
  color: var(--eb-text-secondary) !important;
  transition: all 0.15s;
}
[data-w-function="show_about"] .fa-youtube { color: #FF0000 !important; }
[data-w-function="show_about"] .fa-facebook-f { color: #1877F2 !important; }
[data-w-function="show_about"] .fa-linkedin-in { color: #0A66C2 !important; }
[data-w-function="show_about"] .fa-info { color: var(--eb-primary) !important; }
[data-w-function="show_about"] .fa-globe { color: var(--eb-success) !important; }
[data-w-function="show_about"] .subtitle { font-size: 13px !important; color: var(--eb-text) !important; }
[data-w-function="show_about"] .subtitle a { color: var(--eb-text) !important; text-decoration: none !important; }
[data-w-function="show_about"] .subtitle a:hover { color: var(--eb-primary) !important; }
[data-w-function="show_about"] td { padding: 6px 4px !important; }

/* ── DON ── */
[data-w-function="don"] .btn {
  background: var(--eb-primary) !important;
  border-color: var(--eb-primary) !important;
  border-radius: var(--eb-radius-sm) !important;
}

/* ── SUPPORT ── */
[data-w-function="support"] .card-body { padding: 12px 16px !important; }

/* Summary badges */
[data-w-function="support"] .eb-support-summary {
  display: flex;
  gap: 8px;
  padding: 0 0 12px;
  flex-wrap: wrap;
  align-items: center;
}
[data-w-function="support"] .eb-support-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  line-height: 1.4;
}
[data-w-function="support"] .eb-support-badge--open {
  background: var(--eb-primary-light, #EFF6FF);
  color: var(--eb-primary, #2563EB);
}
[data-w-function="support"] .eb-support-badge--msg {
  background: #FEF3C7;
  color: #D97706;
}

/* Ticket list */
[data-w-function="support"] .eb-support-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-w-function="support"] .card-body a.eb-support-row,
[data-w-function="support"] a.eb-support-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--eb-radius, 8px);
  text-decoration: none !important;
  color: var(--eb-text, #1E293B) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  flex-wrap: nowrap;
}
[data-w-function="support"] .card-body a.eb-support-row:hover,
[data-w-function="support"] a.eb-support-row:hover {
  background: var(--eb-surface-hover, #F8FAFC);
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  text-decoration: none !important;
  color: var(--eb-text, #1E293B) !important;
}
[data-w-function="support"] a.eb-support-row:hover .eb-support-row-arrow {
  color: var(--eb-primary, #2563EB) !important;
  transform: translateX(2px);
}

/* Row elements */
[data-w-function="support"] .eb-support-row-id {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--eb-text-muted, #94A3B8) !important;
  min-width: 48px;
  flex-shrink: 0;
}
[data-w-function="support"] .eb-support-row-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--eb-text, #1E293B) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
[data-w-function="support"] .eb-support-row-cat {
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-w-function="support"] .eb-support-row-cat .label {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  border-radius: var(--eb-radius) !important;
  white-space: nowrap;
  line-height: 1.4 !important;
}
[data-w-function="support"] .eb-support-row-cat > div {
  gap: 4px;
}
[data-w-function="support"] .eb-support-row-arrow {
  font-size: 10px;
  color: var(--eb-text-muted, #94A3B8) !important;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

/* Footer / see all link */
[data-w-function="support"] .eb-support-footer {
  text-align: center;
  padding: 10px 0 2px;
  border-top: 1px solid var(--eb-border, #E2E8F0);
  margin-top: 8px;
}
[data-w-function="support"] .eb-support-see-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--eb-primary, #2563EB) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
[data-w-function="support"] .eb-support-see-all:hover {
  color: var(--eb-primary-hover, #1D4ED8) !important;
  text-decoration: underline !important;
}

/* Legacy table fallback (if table still rendered) */
[data-w-function="support"] table { width: 100% !important; border-collapse: collapse !important; }
[data-w-function="support"] table td { padding: 10px 12px !important; font-size: 13px !important; vertical-align: middle !important; border-bottom: 1px solid var(--eb-border) !important; }
[data-w-function="support"] table tr:last-child td { border-bottom: none !important; }
[data-w-function="support"] table tr { cursor: pointer; transition: background 0.15s ease; }
[data-w-function="support"] table tr:hover { background: var(--eb-surface-hover, #F8FAFC) !important; }

/* ── SHOW PARTICIPATIONS / Mes activités ── */
[data-w-function="show_participations"] .card-body { padding: 0 !important; }
[data-w-function="show_participations"] table { width: 100% !important; border-collapse: collapse !important; }
[data-w-function="show_participations"] table td { padding: 10px 12px !important; font-size: 13px !important; vertical-align: middle !important; border-bottom: 1px solid var(--eb-border) !important; }
[data-w-function="show_participations"] table tr:last-child td { border-bottom: none !important; }
[data-w-function="show_participations"] table tr:hover { background: var(--eb-bg) !important; }
[data-w-function="show_participations"] img[src*="evenements"] { border-radius: var(--eb-radius-sm) !important; width: 32px !important; height: 32px !important; object-fit: cover; }

/* ── SHOW EVENTS / Inscription possible ── */
[data-w-function="show_events"] .card-body { padding: 0 !important; }
[data-w-function="show_events"] .widget-principal-subtitle { padding: 8px 16px 4px !important; font-size: 12px !important; color: var(--eb-text-muted) !important; }
[data-w-function="show_events"] table { width: 100% !important; border-collapse: collapse !important; }
[data-w-function="show_events"] table td { padding: 10px 12px !important; font-size: 13px !important; vertical-align: middle !important; border-bottom: 1px solid var(--eb-border) !important; }
[data-w-function="show_events"] table tr:last-child td { border-bottom: none !important; }
[data-w-function="show_events"] table tr:hover { background: var(--eb-bg) !important; }
[data-w-function="show_events"] img[src*="evenements"] { border-radius: var(--eb-radius-sm) !important; width: 36px !important; height: 36px !important; object-fit: cover; }
[data-w-function="show_events"] .btn-success { border-radius: 50% !important; width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* ── SHOW INFOS / Consignes ── */
[data-w-function="show_infos"] .card-body { padding: 0 !important; }
[data-w-function="show_infos"] .timeline-card { padding: 16px !important; }

/* ── SHOW COMMUNICATION (fusion Consigne + Actualite) ── */
[data-w-function="show_communication"] .card-title::before { content: '\f086'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; color: var(--eb-primary); font-size: 14px; }
[data-w-function="show_communication"] .card-body { padding: 16px !important; }
.eb-comm-list { display: flex; flex-direction: column; gap: 12px; }
.eb-comm-item { padding: 12px; border-radius: var(--eb-radius-md); border: 1px solid var(--eb-border, #E2E8F0); transition: box-shadow 0.15s; }
.eb-comm-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.eb-comm-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.eb-comm-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.eb-comm-meta { flex: 1; min-width: 0; }
.eb-comm-title { display: block; font-size: 13px; font-weight: 600; color: var(--eb-text, #1E293B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-comm-date { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--eb-text-muted, #94A3B8); flex-wrap: wrap; }
.eb-comm-type { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px; }
.eb-comm-type--consigne { background: #FEE2E2; color: #DC2626; }
.eb-comm-type--actu { background: #DBEAFE; color: #2563EB; }
.eb-comm-cat { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.eb-comm-attach { color: var(--eb-text-muted, #94A3B8); font-size: 14px; }
.eb-comm-attach:hover { color: var(--eb-primary, #3B82F6); }
.eb-comm-body { font-size: 12px; color: var(--eb-text-secondary, #64748B); line-height: 1.5; padding-left: 38px; }
.eb-comm-pagination { display: flex; justify-content: center; gap: 4px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--eb-border, #E2E8F0); }
.eb-comm-page { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--eb-border, #E2E8F0); background: transparent; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--eb-text-muted, #94A3B8); transition: all 0.15s; }
.eb-comm-page:hover { background: var(--eb-bg, #F8FAFC); }
.eb-comm-page--active { background: var(--eb-primary, #3B82F6) !important; color: #fff !important; border-color: var(--eb-primary, #3B82F6) !important; }

/* ── SHOW ALERTS VEHICULES ── */
[data-w-function="show_alerts_vehicules"] .card-body { padding: 12px !important; }
[data-w-function="show_alerts_vehicules"] svg { max-width: 100% !important; height: auto !important; }

/* ── DON ── */
[data-w-function="don"] .card-body { padding: 16px !important; text-align: center; }
[data-w-function="don"] .btn { min-width: 150px; }

/* ── SHOW PARTICIPATIONS / Mes activités ── */
[data-w-function="show_participations"] .card-body { padding: 8px 16px !important; }
[data-w-function="show_participations"] table tr:hover { background: var(--eb-bg) !important; }
[data-w-function="show_participations"] img[src*="evenements"] {
  border-radius: var(--eb-radius-sm) !important;
  width: 32px !important; height: 32px !important;
}

/* ── ALL ALERT WIDGETS — uniform padding and empty states ── */
[data-w-function="show_alerts_vehicules"] .card-body,
[data-w-function="show_alerts_consommables"] .card-body,
[data-w-function="show_logistique"] .card-body,
[data-w-function="show_alerts_cp"] .card-body,
[data-w-function="show_remplacements_infos"] .card-body,
[data-w-function="show_alerts_horaires"] .card-body {
  padding: 16px !important;
}
/* Alert cards */
.card-alert { border-radius: var(--eb-radius-md) !important; overflow: hidden; margin-bottom: 8px; }
.alert-number { font-size: 28px !important; font-weight: 700 !important; }
/* Vehicule widget charts */
.vehicule-widget { padding: 8px 0; }
.vehicule-widget svg { max-width: 100%; height: auto; }

/* ── GENERIC: Empty states — clean minimal look ── */
.no-content2,
.card-body .text-center[style*="background-image"] {
  padding: 32px 16px !important;
  font-size: 13px !important;
  color: var(--eb-text-muted) !important;
  background-size: 40px !important;
  background-position: center 12px !important;
  opacity: 0.6;
  min-height: 80px;
}
.card-body img[src*="aucun_resultat"],
.card-body img[src*="Aucun_resultat"] {
  opacity: 0.3 !important;
  max-width: 40px !important;
  margin: 0 auto 8px !important;
  display: block !important;
}

/* ── GENERIC: Uniform widget body padding ── */
.card-body.graycard {
  padding: 16px !important;
  background: var(--eb-surface) !important;
}

/* ── GENERIC: Tables in widgets — clean rows ── */
.card-body table.noBorder { width: 100%; border-collapse: collapse; }
.card-body table.noBorder td { padding: 8px 4px; vertical-align: middle; font-size: 13px; }
.card-body table.widget-table td { padding: 10px 6px; }
.card-body .table-striped-2 tr:nth-child(even) { background: var(--eb-bg); }
.card-body .table-with-hover tr:hover { background: var(--eb-bg) !important; }

/* ── GENERIC: Avatar images uniform ── */
.eb-avatar-round {
  border-radius: var(--eb-radius-md) !important;
  object-fit: cover;
}

/* ── GENERIC: Subtitle text ── */
.subtitle { font-size: 13px !important; color: var(--eb-text) !important; }
.subtitle-small { font-size: 11.5px !important; color: var(--eb-text-muted) !important; }
.subtitle a { color: var(--eb-primary) !important; text-decoration: none !important; }

/* ── GENERIC: Carousel arrows ── */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(0.4) !important;
  width: 20px !important; height: 20px !important;
}

/* ── GENERIC: Buttons in widgets ── */
.card-body .btn-primary,
.btn-on-widget {
  background: var(--eb-primary) !important;
  border-color: var(--eb-primary) !important;
  border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.card-body .btn-primary:hover { background: var(--eb-primary-hover) !important; }
.card-body .btn-danger {
  background: var(--eb-danger) !important;
  border-color: var(--eb-danger) !important;
  border-radius: var(--eb-radius-sm) !important;
}
.card-body .btn-success {
  background: var(--eb-success) !important;
  border-color: var(--eb-success) !important;
  border-radius: var(--eb-radius-sm) !important;
}

/* ── GLOBAL : tous les btn-success (ajout / save / valider) prennent
   la couleur eb-success (#10B981 emerald-500) au lieu du vert Bootstrap
   #198754 par défaut. Factorisé pour uniformité sur tout le produit. */
.btn-success,
.btn-success:not(:disabled):not(.disabled),
button.btn-success,
a.btn-success,
span.btn-success,
input.btn-success {
  --bs-btn-bg: var(--eb-success, #10B981) !important;
  --bs-btn-border-color: var(--eb-success, #10B981) !important;
  --bs-btn-hover-bg: var(--eb-success-hover, #059669) !important;
  --bs-btn-hover-border-color: var(--eb-success-hover, #059669) !important;
  --bs-btn-active-bg: var(--eb-success-hover, #059669) !important;
  --bs-btn-active-border-color: var(--eb-success-hover, #059669) !important;
  --bs-btn-disabled-bg: var(--eb-success, #10B981) !important;
  --bs-btn-disabled-border-color: var(--eb-success, #10B981) !important;
  background-color: var(--eb-success, #10B981) !important;
  border-color: var(--eb-success, #10B981) !important;
  color: #fff !important;
}
.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover,
span.btn-success:hover {
  background-color: var(--eb-success-hover, #059669) !important;
  border-color: var(--eb-success-hover, #059669) !important;
  color: #fff !important;
}

/* ── GENERIC: Badge pills ── */
.card-body .badge {
  border-radius: 20px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
}

/* ── GENERIC: Widget tables ── */
.widget-table { width: 100%; border-collapse: collapse; }
.widget-table td { vertical-align: middle; }
.widget-table .subtitle { font-size: 13px !important; }
.widget-table .subtitle-small { font-size: 11.5px !important; color: var(--eb-text-muted) !important; }
/* Lignes d'activité (widgets « Mes activités » / « Inscription ») :
   la colonne titre prend toute la largeur dispo et les longs libellés passent
   à la ligne au lieu de chevaucher la durée/le lieu ; date+heure compacts à droite. */
.widget-table .eb-ev-title { width: 100%; overflow-wrap: break-word; }
.widget-table .eb-ev-title .subtitle-small { display: block; margin-top: 0; }
/* Resserre le titre et sa ligne secondaire (durée, lieu, libellé de statut).
   La règle globale `.subtitle > a` (main.css) force min-height:40px + padding
   comme cible tactile ; sur un titre d'une seule ligne suivi d'un <br> + libellé
   (badge Facturation, lieu Statistique, durée Activités), ces 40px réservent un
   espace vide sous le titre. La ligne entière du widget est déjà cliquable, donc
   on laisse le lien épouser son texte. */
.widget-table .subtitle > a { display: inline-block; line-height: 1.2; min-height: 0; padding: 0; }
/* Widget « Facturation » : rapproche le badge de statut (À facturer / À
   relancer / Relancé) du titre de l'activité. */
.widget-table .eb-ev-row .badge { margin-top: 0; }
/* Colonne date : largeur naturelle (width:1% + nowrap = shrink-to-content),
   comme la colonne bouton. Sans ça, le titre (width:100%) écrasait la date à
   ~0px et la date se cassait en un caractère par ligne. */
.widget-table .eb-ev-date { white-space: nowrap; text-align: right; width: 1%; padding-left: 10px; }
.widget-table .eb-ev-date .subtitle-small { display: block; }
.widget-table .activity-date {
  min-width: 140px;
  width: 140px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.widget-table .activity-date .subtitle-small { display: block; }
/* Colonne action (bouton « S'inscrire » / désinscription) : largeur naturelle
   (width:1%) pour ne pas être comprimée par la colonne titre, et libellé qui
   ne se coupe pas sur plusieurs lignes. */
.widget-table .eb-ev-row > td:last-child { width: 1%; white-space: nowrap; text-align: center; }
.widget-table .eb-ev-row > td:last-child .btn,
.widget-table .eb-ev-row .inscriptionBtnGroup .btn { white-space: nowrap; }
.widget-table .eb-avatar-round {
  border-radius: var(--eb-radius-md) !important;
  object-fit: cover;
}

/* ── Widget Recrutement : pipeline (KPI + entonnoir) et liste candidats ──
   Aligné sur la norme des widgets modernes (tokens --eb-*, cartes KPI façon
   facturation, lignes façon eb-ev-row). */
.eb-recr-toggle { display: inline-flex; background: var(--eb-bg); border-radius: var(--eb-radius-sm); padding: 2px; gap: 2px; }
.eb-recr-toggle-btn {
  width: 30px; height: 24px; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--eb-text-secondary); transition: all 0.15s;
}
.eb-recr-toggle-btn.active { background: var(--eb-primary); color: #fff; }

.eb-recr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.eb-recr-kpi {
  background: var(--eb-surface-hover, #F8FAFC); border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm); padding: 10px 12px;
  text-decoration: none !important; color: inherit; transition: all 0.15s;
}
.eb-recr-kpi:hover { border-color: var(--eb-primary); }
.eb-recr-kpi-label { font-size: 11px; color: var(--eb-text-secondary); margin-bottom: 4px; }
.eb-recr-kpi-value { font-size: 22px; font-weight: 700; line-height: 1; color: var(--eb-text); }
.eb-recr-kpi--cand .eb-recr-kpi-value { color: var(--eb-primary); }
.eb-recr-kpi--resp .eb-recr-kpi-value { color: var(--eb-warning); }

.eb-recr-form { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; }
.eb-recr-form-icon { font-size: 13px; color: var(--eb-text-muted); }
.eb-recr-form-name { font-size: 12px; font-weight: 500; color: var(--eb-text); }
.eb-recr-form-rule { flex: 1; height: 1px; background: var(--eb-border); }
.eb-recr-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.eb-recr-step { display: flex; align-items: center; gap: 10px; }
.eb-recr-step-num {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--eb-bg); color: var(--eb-text-secondary);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.eb-recr-step--active .eb-recr-step-num { background: var(--eb-primary-light); color: var(--eb-primary); }
.eb-recr-step-body { flex: 1; min-width: 0; }
.eb-recr-step-label { font-size: 12px; color: var(--eb-text-secondary); margin-bottom: 3px; }
.eb-recr-step--active .eb-recr-step-label { color: var(--eb-text); }
.eb-recr-bar { height: 5px; border-radius: 3px; background: var(--eb-bg); overflow: hidden; display: flex; }
.eb-recr-bar-cand { height: 100%; background: var(--eb-primary); }
.eb-recr-bar-resp { height: 100%; background: var(--eb-warning); }
.eb-recr-step-counts { display: flex; align-items: center; gap: 4px; flex: none; }
.eb-recr-pill { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.eb-recr-pill--cand { color: var(--eb-primary); background: var(--eb-primary-light); }
.eb-recr-pill--resp { color: var(--eb-warning); background: var(--eb-warning-light); }
.eb-recr-pill--zero { color: var(--eb-text-muted); background: transparent; padding-right: 2px; }

.eb-recr-list { display: flex; flex-direction: column; }
.eb-recr-cand {
  display: flex; align-items: center; gap: 11px; padding: 9px 8px;
  border-radius: var(--eb-radius-sm); cursor: pointer;
  text-decoration: none !important; color: inherit; transition: background 0.15s;
}
.eb-recr-cand:hover { background: var(--eb-bg); }
.eb-recr-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.eb-recr-avatar--cand { background: var(--eb-primary-light); color: var(--eb-primary); }
.eb-recr-avatar--resp { background: var(--eb-warning-light); color: var(--eb-warning); }
.eb-recr-cand-body { flex: 1; min-width: 0; }
.eb-recr-cand-name { font-size: 13px; color: var(--eb-text); }
.eb-recr-cand-step { font-size: 11px; color: var(--eb-text-muted); }
.eb-recr-empty { font-size: 13px; text-align: center; color: var(--eb-text-muted); padding: 16px 8px; }

/* ── GENERIC: Grey arrow buttons in widgets ── */
.grey-button-arrow {
  width: 32px; height: 32px;
  border-radius: var(--eb-radius-sm) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  background: var(--eb-bg) !important;
  color: var(--eb-text-secondary) !important;
  transition: all 0.15s;
  font-size: 14px !important;
}
.grey-button-arrow:hover {
  background: var(--eb-primary-light) !important;
  color: var(--eb-primary) !important;
}

/* ── Inscription button loading state ── */
.eb-btn-loading {
  cursor: progress !important;
  opacity: 0.85;
  pointer-events: none;
}
/* Let Font Awesome's .fa-spin animation run on loading buttons — an
   earlier `animation: none` here was killing the spinner it was
   supposed to leave alone. */

/* ── Modal inscription: transition douce au lieu du délai 500ms ── */
#openModalInscription.modal.fade .modal-dialog {
  transition: transform .18s ease-out, opacity .18s ease-out;
}

/* ===== 7d2. NEWS TABBED WIDGET ===== */
.eb-news-tabs {
  display: flex; border-bottom: 1px solid var(--eb-border);
  padding: 0 12px; background: var(--eb-surface);
  overflow-x: auto; scrollbar-width: none;
}
.eb-news-tabs::-webkit-scrollbar { display: none; }
.eb-news-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 12px; font-size: 12px; font-weight: 500;
  color: var(--eb-text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s; white-space: nowrap;
}
.eb-news-tab i { font-size: 12px; }
.eb-news-tab.active { color: var(--eb-primary); border-bottom-color: var(--eb-primary); }
.eb-news-tab:hover:not(.active) { color: var(--eb-text-secondary); }
.eb-news-tab:focus-visible { outline: 2px solid var(--eb-primary); outline-offset: -2px; border-radius: 4px; }

/* ===== 7d3. NEWS PANEL V2 (article vedette + liste compacte) ===== */
.eb-news-panel-v2 {
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
.eb-news-featured { display: flex; flex-direction: column; gap: 10px; }
.eb-news-featured-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  max-height: 180px;
  border-radius: var(--eb-radius); overflow: hidden;
  background: var(--eb-surface-2, #f3f4f6);
  display: flex; align-items: center; justify-content: center;
}
.eb-news-featured-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.eb-news-featured:hover .eb-news-featured-media img { transform: scale(1.02); }
.eb-news-img-fallback .eb-news-img-placeholder-icon {
  font-size: 36px; color: var(--eb-text-muted); opacity: .5;
}
.eb-news-featured-body { display: flex; flex-direction: column; gap: 8px; }
.eb-news-featured-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--eb-text-muted);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 500;
}
.eb-news-featured-meta .eb-news-dot { opacity: .6; }
.eb-news-featured-title {
  font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.eb-news-featured-title a { color: var(--eb-text); text-decoration: none; }
.eb-news-featured-title a:hover { color: var(--eb-primary); }
.eb-news-featured-excerpt {
  font-size: 13px; color: var(--eb-text-secondary); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.eb-news-cta {
  align-self: flex-start; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
}

/* Compact list */
.eb-news-list {
  display: flex; flex-direction: column;
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--eb-border);
}
.eb-news-list-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--eb-border);
  align-items: flex-start;
}
.eb-news-list-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.eb-news-list-img {
  flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: var(--eb-radius-sm); object-fit: cover;
  background: var(--eb-surface-2, #f3f4f6);
  display: flex; align-items: center; justify-content: center;
}
.eb-news-list-img-fallback { color: var(--eb-text-muted); font-size: 18px; opacity: .55; }
.eb-news-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eb-news-list-title {
  font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--eb-text);
  text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
  padding: 3px 0;
}
.eb-news-list-title:hover { color: var(--eb-primary); text-decoration: none; }
.eb-news-list-meta { font-size: 11px; color: var(--eb-text-muted); }

/* Panel states */
.eb-news-loading, .eb-news-error {
  padding: 32px 16px; text-align: center;
  color: var(--eb-text-muted); font-size: 13px;
}
.eb-news-loading i { font-size: 20px; }
.eb-news-error i { margin-right: 6px; color: var(--eb-danger-hover); }

/* Mobile tuning */
@media (max-width: 768px) {
  .eb-news-panel-v2 { padding: 12px; gap: 12px; }
  .eb-news-featured-title { font-size: 14px; }
  .eb-news-list-img { flex-basis: 48px; width: 48px; height: 48px; }
  .eb-news-tab { padding: 10px 10px; font-size: 11px; }
}

/* ===== 7d4. CONSOLIDATED WIDGET GROUPS (#9728) ===== */
.eb-group-tabs {
  display: flex; border-bottom: 1px solid var(--eb-border);
  padding: 0 12px; background: var(--eb-surface);
  overflow-x: auto; scrollbar-width: none;
}
.eb-group-tabs::-webkit-scrollbar { display: none; }
.eb-group-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 14px; font-size: 12px; font-weight: 500;
  color: var(--eb-text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s; white-space: nowrap;
}
.eb-group-tab.active { color: var(--eb-primary); border-bottom-color: var(--eb-primary); }
.eb-group-tab:hover:not(.active) { color: var(--eb-text-secondary); }
.eb-group-panel { padding: 0; container-type: inline-size; }
.eb-group-panel .widget-table { margin: 0; }
.eb-group-panel .noBorder { border: none; }

/* Widget activité responsive : en colonne LARGE (centre), date + bouton restent
   en nowrap sur une ligne (lisible). En colonne ÉTROITE (latérale), la date en
   nowrap (~186px) + le bouton écrasaient le titre à 1 caractère par ligne. Sous
   ~470px de largeur de widget, on autorise la date et le libellé du bouton à
   passer à la ligne → la largeur revient au titre, qui redevient lisible. */
@container (max-width: 470px) {
    /* En colonne latérale étroite (~360px), les largeurs fixes du correctif
       #10463 (icône 52 + date 112 + statut 142 = 306px !important) ne laissaient
       que ~14px au titre → nom affiché 1 lettre par ligne. On empile la ligne en
       carte (même grille que le fallback mobile @media 600px), pour les deux
       widgets activité (#CalendarEvents = « Mes activités », #allMyEvents =
       participations). Les !important sont nécessaires pour battre #10463. */
    .eb-group-panel #CalendarEvents,
    .eb-group-panel #CalendarEvents tbody,
    .eb-group-panel #allMyEvents,
    .eb-group-panel #allMyEvents tbody {
        display: block !important;
        table-layout: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .eb-group-panel #CalendarEvents tbody tr,
    .eb-group-panel #allMyEvents tbody tr {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas: "icon title status" "icon date status";
        align-items: center;
        column-gap: 10px;
        row-gap: 2px;
        padding: 10px 2px !important;
        border-bottom: 1px solid var(--eb-border, #eef2f7);
    }
    .eb-group-panel #CalendarEvents tbody tr > td,
    .eb-group-panel #allMyEvents tbody tr > td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        white-space: normal !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .eb-group-panel #CalendarEvents tbody tr > td:nth-child(1),
    .eb-group-panel #allMyEvents tbody tr > td:nth-child(1) { grid-area: icon; }
    .eb-group-panel #CalendarEvents tbody tr > td:nth-child(2),
    .eb-group-panel #allMyEvents tbody tr > td:nth-child(2) { grid-area: title; }
    .eb-group-panel #CalendarEvents tbody tr > td:nth-child(3),
    .eb-group-panel #allMyEvents tbody tr > td:nth-child(3) {
        grid-area: date; text-align: left !important; font-size: 11px;
    }
    .eb-group-panel #CalendarEvents tbody tr > td:last-child,
    .eb-group-panel #allMyEvents tbody tr > td:last-child {
        grid-area: status; text-align: right !important; white-space: nowrap !important;
    }
    /* Titre : retour à la ligne normal (plus d'ellipsis ni de 1 lettre/ligne) */
    .eb-group-panel #CalendarEvents .eb-ev-title,
    .eb-group-panel #CalendarEvents .eb-ev-title a,
    .eb-group-panel #CalendarEvents .eb-ev-title .subtitle-small,
    .eb-group-panel #allMyEvents .eb-ev-title,
    .eb-group-panel #allMyEvents .eb-ev-title a,
    .eb-group-panel #allMyEvents .eb-ev-title .subtitle-small {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }
    /* Date : retour à la ligne libre, plus de plafond 112px */
    .eb-group-panel #CalendarEvents .eb-ev-date,
    .eb-group-panel #allMyEvents .activity-date {
        white-space: normal !important;
        text-align: left !important;
    }
}

/* #9728 — Polish visuel pour contenus anciens dans groupes */
.eb-group-panel table.widget-table { width: 100%; border-collapse: collapse; }
.eb-group-panel table.widget-table tr { transition: background 0.15s; }
.eb-group-panel table.widget-table tr:hover { background: var(--eb-bg, #F8FAFC); }
.eb-group-panel table.widget-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--eb-border, #E2E8F0);
  font-size: 13px;
  vertical-align: middle;
}
.eb-group-panel table.widget-table tr:last-child td { border-bottom: none; }
.eb-group-panel table.widget-table td img { border-radius: 6px; }
.eb-group-panel table.widget-table .subtitle { font-weight: 600; color: var(--eb-text, #1E293B); }
.eb-group-panel table.widget-table .subtitle-small { font-size: 11px; color: var(--eb-text-muted, #94A3B8); }
.eb-group-panel table.widget-table .activity-date { text-align: center; font-size: 12px; color: var(--eb-text-muted, #94A3B8); }
/* Colonne date (widget « Mes activités ») : largeur naturelle (width:1% +
   nowrap = shrink-to-content) comme la colonne bouton. Sinon le titre
   (.eb-ev-title width:100%) l'écrasait à ~0px et la date longue (« 13-06 au
   20-06 ») se cassait en un caractère par ligne. */
.widget-table .activity-date { white-space: nowrap; width: 1%; padding-left: 10px; text-align: right; }
.widget-table .activity-date .subtitle-small { display: block; }
/* Boutons d'action des widgets activité (texte + bandeau) : pas de retour à la
   ligne du libellé, colonne action compacte. */
.widget-table .btn { white-space: nowrap; }
#allMyEvents tr > td:last-child { width: 1%; white-space: nowrap; text-align: center; }
.eb-group-panel table.widget-table .widget-text { font-weight: 700; color: var(--eb-text, #1E293B); }
.eb-group-panel table.widget-table .btn { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.eb-group-panel table.widget-table .btn i { font-size: 11px; }

/* #10463 — Les redraws du graphique météo peuvent déclencher un recalcul des
   colonnes des widgets activité. On borne explicitement les colonnes critiques
   pour que les actions restent dans la carte et que le titre se réduise avant
   de pousser le bouton hors cadre. */
[data-w-function="show_participations"] #allMyEvents,
[data-w-function="show_events"] #CalendarEvents {
  table-layout: fixed !important;
  max-width: 100% !important;
}
[data-w-function="show_participations"] #allMyEvents tr > td:first-child,
[data-w-function="show_events"] #CalendarEvents tr > td:first-child {
  width: 52px !important;
}
[data-w-function="show_participations"] #allMyEvents .eb-ev-title,
[data-w-function="show_events"] #CalendarEvents .eb-ev-title {
  width: auto !important;
  min-width: 0 !important;
}
[data-w-function="show_participations"] #allMyEvents .eb-ev-title a,
[data-w-function="show_events"] #CalendarEvents .eb-ev-title a,
[data-w-function="show_participations"] #allMyEvents .eb-ev-title .subtitle-small,
[data-w-function="show_events"] #CalendarEvents .eb-ev-title .subtitle-small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-w-function="show_participations"] #allMyEvents .activity-date,
[data-w-function="show_events"] #CalendarEvents .eb-ev-date {
  width: 112px !important;
  max-width: 112px !important;
  padding-left: 8px !important;
}
[data-w-function="show_participations"] #allMyEvents tr > td:last-child,
[data-w-function="show_events"] #CalendarEvents tr > td:last-child {
  width: 142px !important;
  max-width: 142px !important;
  overflow: hidden !important;
  text-align: right !important;
  white-space: nowrap !important;
}
[data-w-function="show_participations"] #allMyEvents tr > td:last-child .btn,
[data-w-function="show_events"] #CalendarEvents tr > td:last-child .btn {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
[data-w-function="show_participations"] #allMyEvents tr > td:last-child .btn .hide_mobile,
[data-w-function="show_events"] #CalendarEvents tr > td:last-child .btn .hide_mobile {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mobile (<=600px) — widget « Mes activités » : les colonnes fixes (date 112px
   + statut 142px + icône 52px) ne laissaient que ~14px au titre → nom affiché
   1 lettre par ligne. On empile la ligne en carte : icône à gauche, titre+date
   au centre (pleine largeur, retour à la ligne normal), statut à droite. */
@media (max-width: 600px) {
  /* Cible #allMyEvents directement : couvre le widget tabbed (.eb-group-panel)
     ET le widget direct ([data-w-function]) — les deux pouvaient écraser le
     titre (1 lettre/ligne) selon la largeur du conteneur. */
  #allMyEvents,
  #allMyEvents tbody,
  #CalendarEvents,
  #CalendarEvents tbody {
    display: block !important;
    table-layout: auto !important;
    width: 100% !important;
  }
  #allMyEvents tbody tr,
  #CalendarEvents tbody tr {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon title status" "icon date status";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--eb-border, #eef2f7);
  }
  #allMyEvents tbody tr > td,
  #CalendarEvents tbody tr > td {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: normal !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #allMyEvents tbody tr > td:nth-child(1),
  #CalendarEvents tbody tr > td:nth-child(1) { grid-area: icon; }
  #allMyEvents tbody tr > td:nth-child(2),
  #CalendarEvents tbody tr > td:nth-child(2) { grid-area: title; }
  #allMyEvents tbody tr > td:nth-child(3),
  #CalendarEvents tbody tr > td:nth-child(3) {
    grid-area: date; text-align: left !important; font-size: 11px;
  }
  #allMyEvents tbody tr > td:last-child,
  #CalendarEvents tbody tr > td:last-child {
    grid-area: status; text-align: right !important; white-space: nowrap !important;
  }
  /* Le titre s'enroule normalement (plus d'ellipsis ni de 1 lettre/ligne) */
  #allMyEvents .eb-ev-title,
  #allMyEvents .eb-ev-title a,
  #allMyEvents .eb-ev-title .subtitle-small,
  #CalendarEvents .eb-ev-title,
  #CalendarEvents .eb-ev-title a,
  #CalendarEvents .eb-ev-title .subtitle-small {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }
}

/* Messagerie mobile — la sidebar (position:absolute;inset:0) se calait sur le
   viewport (titre « Messages » masqué sous la topbar fixe). On donne un contexte
   de positionnement à .eb-msg-app pour qu'elle se cale dans l'app (sous la
   topbar). Doublé ici car messagerie.css est chargé via ?v=packageVersion (cache
   non busté au fil des éditions), alors que dashboard-modern.css l'est par mtime. */
@media (max-width: 768px) {
  .eb-msg-app { position: relative !important; }
}

.eb-group-panel .grey-button-arrow { color: var(--eb-text-muted, #94A3B8); opacity: 0.6; transition: opacity 0.15s; }
.eb-group-panel tr:hover .grey-button-arrow { opacity: 1; }
.eb-group-panel-footer {
  padding: 10px 16px; border-top: 1px solid var(--eb-border);
  text-align: right;
}
.eb-group-panel-footer .eb-card-action {
  font-size: 12px; font-weight: 500; color: var(--eb-primary);
  text-decoration: none;
}
.eb-group-panel-footer .eb-card-action:hover { text-decoration: underline; }
.eb-group-panel-header { padding: 8px 16px; border-bottom: 1px solid var(--eb-border); }
.eb-group-alert {
  padding: 10px 16px; background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  font-size: 13px;
}
.eb-group-alert .widget-table { margin: 0; }

/* #9819 — "Organisation" label dans les panneaux group\u00e9s :
   neutralise le position:absolute legacy de .widget-principal-subtitle
   pour \u00e9viter qu'il recouvre la barre d'onglets, et le pr\u00e9sente
   comme un chip lisible avec icône. */
.eb-group-panel .widget-principal-subtitle {
  position: static !important;
  top: auto !important; left: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 10px 12px 2px !important;
  padding: 4px 10px !important;
  background: var(--eb-bg, #F1F5F9);
  border-radius: 999px;
  font-size: 11px !important;
  color: var(--eb-text-muted, #64748B) !important;
  font-weight: 600 !important;
  width: auto !important;
  overflow: visible !important;
  white-space: nowrap;
}
.eb-group-panel .widget-principal-subtitle::before {
  content: "\f1ad"; /* fa-building */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  font-size: 10px;
  opacity: 0.7;
  display: inline-block;
}
.eb-group-panel .widget-principal-subtitle .subtitle-small {
  font-size: 11px !important;
  color: var(--eb-text, #1E293B) !important;
  font-weight: 600 !important;
}

.eb-widget-empty-state {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 18px;
  text-align: center;
  color: var(--eb-text-secondary, #64748b);
}
.eb-widget-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eb-bg, #f8fafc);
  border: 1px solid var(--eb-border, #e2e8f0);
  color: var(--eb-primary, #2563eb);
}
.eb-widget-empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--eb-text, #1e293b);
}
.eb-widget-empty-text {
  max-width: 270px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--eb-text-secondary, #64748b);
}

@media (max-width: 768px) {
  .eb-group-tab { padding: 10px 10px; font-size: 11px; }
}

/* ===== 7e. V2 PHP COMPONENTS ===== */

/* Profile card (welcome widget) */
.eb-profile-card {
  text-align: center; padding: 24px 20px 20px;
}
.eb-profile-avatar-wrap {
  width: 80px; height: 80px; margin: 0 auto 12px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.eb-profile-avatar-img {
  width: 68px !important; height: 68px !important; border-radius: 50% !important;
  object-fit: cover !important; display: block; position: relative; z-index: 2;
}
.eb-profile-ring {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 50%;
  /* Anneau de progression PRÉCIS basé sur --pct (0–100), parfaitement centré
     autour de l'avatar : conic-gradient (portion remplie rouge + reste gris)
     démarrant à 12 h, dont on ne garde qu'un anneau de 4px via un masque radial.
     (Avant : 3 bordures colorées + rotate -45° → faux % fixe et décentré.) */
  background: conic-gradient(#FA7070 calc(var(--pct, 0) * 1%), var(--eb-border) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.eb-profile-name { font-size: 15px; font-weight: 600; color: var(--eb-text); }
.eb-profile-role { font-size: 12px; color: var(--eb-text-muted); margin-top: 2px; }
.eb-profile-org-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--eb-primary-light); color: var(--eb-primary);
  font-size: 11px; font-weight: 500; padding: 3px 10px;
  border-radius: 20px; margin-top: 8px;
}
.eb-profile-completion {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--eb-border);
}
.eb-profile-completion-header {
  display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;
}
.eb-profile-completion-header span:first-child { color: var(--eb-text-secondary); }
.eb-profile-completion-header span:last-child { font-weight: 600; color: #FA7070; }
.eb-progress-track {
  height: 6px; background: var(--eb-bg); border-radius: 3px; overflow: hidden;
}
.eb-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #FA7070, #F97316);
  transition: width 0.5s ease;
}

/* Alerte « Notifications bloquées » (kill switch F_ID=81) — sous la carte profil.
   Label rouge cliquable : état clair + CTA de réactivation vers les préférences. */
/* Colonne étroite du widget profil : disposition empilée (message puis CTA) pour
   éviter que « Notifications bloquées » ne se coupe caractère par caractère. */
.eb-profile-notif-blocked {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 16px 16px; padding: 10px 12px;
  border: 1px solid #f1aeb5; border-radius: 8px;
  background: #fdecee;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Spécificité doublée pour battre `.card-body a:not(.btn){color:...!important}` :
   le widget profil vit dans une .card-body, dont la règle de lien primaire
   écraserait sinon le rouge d'alerte. */
a.eb-profile-notif-blocked.eb-profile-notif-blocked,
a.eb-profile-notif-blocked.eb-profile-notif-blocked:hover { color: #b02a37 !important; }
.eb-profile-notif-blocked:hover { background: #fbdce0; border-color: #eb929c; }
.eb-profile-notif-blocked__head { display: flex; align-items: center; gap: 8px; }
.eb-profile-notif-blocked__head > i { font-size: 14px; flex: 0 0 auto; }
.eb-profile-notif-blocked__txt { flex: 1 1 auto; }
.eb-profile-notif-blocked__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  align-self: stretch; padding: 5px 8px;
  border-radius: 6px; background: #b02a37; color: #fff !important;
  font-weight: 700; white-space: nowrap;
}
.eb-profile-notif-blocked:hover .eb-profile-notif-blocked__cta { background: #922330; }
.eb-profile-notif-blocked__cta i { font-size: 11px; }

/* About widget — simple layout */
.eb-about { padding: 4px 0; }
.eb-about-version {
  font-size: 14px; color: var(--eb-text); margin-bottom: 8px;
}
.eb-about-version strong { color: var(--eb-primary); }
.eb-about-links {
  display: flex; gap: 16px;
}
.eb-about-links a {
  font-size: 12.5px; color: var(--eb-text-muted) !important;
  text-decoration: none !important;
}
.eb-about-links a:hover { color: var(--eb-primary) !important; }

/* Organisation widget — mockup layout */
.eb-org-card { padding: 4px 0; }
.eb-org-info {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--eb-border);
  margin-bottom: 12px;
}
.eb-org-avatar {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: var(--eb-radius-md);
  background: var(--eb-primary);
  color: #fff; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.eb-org-details { flex: 1; min-width: 0; }
.eb-org-name { font-size: 14px; font-weight: 600; }
.eb-org-name a { color: var(--eb-text) !important; text-decoration: none !important; }
.eb-org-name a:hover { color: var(--eb-primary) !important; }
.eb-org-desc { font-size: 12px; color: var(--eb-text-muted); }
.eb-org-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--eb-success-light); color: var(--eb-success);
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; margin-top: 6px;
}
.eb-org-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.eb-org-stat {
  text-align: center; padding: 12px 8px;
  background: var(--eb-bg); border-radius: var(--eb-radius-sm);
}
.eb-org-stat-value {
  font-size: 22px; font-weight: 700; color: var(--eb-text);
  line-height: 1.2;
}
.eb-org-stat-highlight .eb-org-stat-value { color: var(--eb-primary); }
.eb-org-stat-label {
  font-size: 10px; color: var(--eb-text-muted);
  text-transform: uppercase; font-weight: 500;
  letter-spacing: 0.03em; margin-top: 2px;
}

/* ===== 7f. SWAL — unified footer (factorised with modal-footer) =====
   The custom swal wrapper (js/swal.js) renders its buttons inside a
   .swal2-actions div. Keep a single source of truth for its chrome
   that matches .modal-footer: 14px 20px padding, 1px top border, sm
   gap, right-aligned action buttons, all pill 8px radius. */
.swal2-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  padding: 14px 20px !important;
  width: 100% !important;
  border-top: 1px solid var(--eb-border) !important;
  background: var(--eb-surface) !important;
  overflow: visible !important;
  z-index: 1 !important;
  margin: 0 !important;
  border-radius: 0 0 12px 12px !important;
}
/* #10283 — Dialogs Ajout Rôle / Permission : la barre horizontale
   au-dessus des boutons Fermer/Sauver alourdit un dialog très simple
   (2 selects). On la retire dans ce contexte spécifique. Les marges
   latérales sont aussi resserrées (40px → 24px) — on est sur 2 selects
   pas besoin d'un padding aussi généreux. */
.swal2-popup:has(#swalRoleForm) .swal2-actions {
  border-top: none !important;
}
.swal2-popup:has(#swalRoleForm) .swal2-header,
.swal2-popup:has(#swalRoleForm) .swal2-content {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.swal2-popup:has(#swalRoleForm) td {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
/* Tue le 1px de scrollbar horizontale qui apparaissait sur
   #modal-center.table-responsive (overflow-x:auto + 1px d'overshoot). */
.swal2-popup:has(#swalRoleForm) #modal-center.table-responsive {
  overflow: visible !important;
}
/* All buttons in a swal share the same compact pill layout. */
.swal2-actions .btn,
.swal2-actions button,
.swal2-actions .btn-swal {
  border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  min-width: auto !important;
  position: relative !important;
  overflow: visible !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  box-shadow: none !important;
}
.swal2-actions [hidden],
.swal3-actions [hidden],
.swal2-actions .btn[hidden],
.swal2-actions button[hidden],
.swal3-actions .btn[hidden],
.swal3-actions button[hidden] {
  display: none !important;
}
/* Primary / confirm / accept — brand blue. Scoped so the "Sauver"
   success button of legacy forms stays green. */
.swal2-actions .swal2-accept,
.swal2-actions .btn-primary {
  background: var(--eb-primary, #3b82f6) !important;
  border: 1px solid var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
}
.swal2-actions .swal2-accept:hover,
.swal2-actions .btn-primary:hover {
  background: var(--eb-primary) !important;
  border-color: var(--eb-primary) !important;
  transform: translateY(-1px);
}
/* Success (Sauver, Importer, …) — green */
.swal2-actions .btn-success {
  background: var(--eb-success) !important;
  border: 1px solid var(--eb-success) !important;
  color: #ffffff !important;
}
.swal2-actions .btn-success:hover {
  background: var(--eb-success-hover) !important;
  border-color: var(--eb-success-hover) !important;
  transform: translateY(-1px);
}
/* Danger (Supprimer) — red */
.swal2-actions .btn-danger {
  background: var(--eb-danger) !important;
  border: 1px solid var(--eb-danger) !important;
  color: #ffffff !important;
}
.swal2-actions .btn-danger:hover {
  background: var(--eb-danger-hover) !important;
  border-color: var(--eb-danger-hover) !important;
  transform: translateY(-1px);
}
/* Warning (Avertir) — amber */
.swal2-actions .btn-warning {
  background: var(--eb-warning) !important;
  border: 1px solid var(--eb-warning) !important;
  color: #ffffff !important;
}
.swal2-actions .btn-warning:hover {
  background: var(--eb-warning-hover) !important;
  border-color: var(--eb-warning-hover) !important;
  transform: translateY(-1px);
}
/* Secondary / cancel / close — ghost pill */
.swal2-actions .swal2-confirm:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning),
.swal2-actions .swal2-cancel,
.swal2-actions .btn-secondary,
.swal2-popup .btn-secondary {
  background: var(--eb-surface) !important;
  color: var(--eb-text) !important;
  border: 1px solid var(--eb-border) !important;
}
.swal2-actions .swal2-confirm:not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-warning):hover,
.swal2-actions .swal2-cancel:hover,
.swal2-actions .btn-secondary:hover {
  background: var(--eb-bg) !important;
}
/* Ensure swal doesn't clip its children */
.swal2-popup,
.swal2-popup .swal2-html-container {
  overflow: visible !important;
}
/* Swal activity form — modernize */
.swal2-popup form table.default {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}
.swal2-popup form table.default td {
  padding: 6px 8px !important;
  vertical-align: middle !important;
}
/* #9813 — Swal participation horaires : garde les td comme table-cell
   même si des classes utilitaires comme d-flex/d-block sont appliquées
   (Bootstrap 5 met display:flex !important ce qui casse le rowspan).
   On cible uniquement les classes utilitaires concernées pour ne pas
   écraser les td volontairement masqués (ex: #divzipcode dropdown). */
.swal2-popup form table.noBorder td.d-flex,
.swal2-popup form table.noBorder td.d-block,
.swal2-popup form table.noBorder td.d-inline,
.swal2-popup form table.noBorder td.d-inline-block,
.swal2-popup form table.noBorder td.d-grid,
.swal2-popup form table.noBorder td.d-inline-flex {
  display: table-cell !important;
  vertical-align: middle !important;
}
.swal2-popup form .form-control:not(.bootstrap-select),
.swal2-popup form .form-control-sm:not(.bootstrap-select) {
  border: 1px solid var(--eb-border) !important;
  border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
}
/* champs date avec icône calendrier en absolu (evenement_horaires_swal) :
   garder l'espace à gauche pour que le texte ne passe pas sous l'icône.
   Sélecteur calé sur la règle topbar-v2 ci-dessous + classe .partie-range-input
   pour la dominer en spécificité. */
body.eb-has-topbar-v2 .partie-range-input.form-control:not(.bootstrap-select):not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 .partie-range-input.form-control-sm:not(.bootstrap-select):not(.alert-red-fade):not(.eb-field-error) {
  padding-left: 34px !important;
}
/* bootstrap-select wrapper : quand le <select> source a la classe form-control,
   bootstrap-select la propage sur le <div.bootstrap-select> wrapper. Le bouton
   interne .dropdown-toggle porte déjà notre bordure — on neutralise donc la
   bordure/padding du wrapper pour éviter le double-border. */
.swal2-popup form .bootstrap-select.form-control,
.swal2-popup form .bootstrap-select.form-control-sm {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  height: auto !important;
}
.swal2-popup form select.selectpicker {
  border: 1px solid var(--eb-border) !important;
  border-radius: var(--eb-radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  background: var(--eb-surface) !important;
}
/* Swal buttons row — the custom swal() wrapper injects a
   <div class="w-100"><div class="d-flex justify-content-center gap-1">
   structure INSIDE .swal2-actions. Since .swal2-actions already provides
   the footer chrome (padding, border-top, background), neutralize the
   inner wrappers so we don't get a double footer. */
.swal2-actions > .w-100 {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.swal2-actions .d-flex.justify-content-center {
  padding: 0 !important;
  border-top: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  gap: 10px !important;
  margin: 0 !important;
}
.swal2-actions .d-flex.justify-content-center .btn {
  border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
  box-shadow: none !important;
}
.swal2-actions .d-flex.justify-content-center .btn-success {
  background: var(--eb-success) !important;
  border-color: var(--eb-success) !important;
  color: #fff !important;
}
.swal2-actions .d-flex.justify-content-center .btn-success:hover {
  background: var(--eb-success-hover) !important;
}
/* Swal popup — clean look */
.swal2-popup {
  border-radius: var(--eb-radius) !important;
  padding: 0 !important;
  overflow: visible !important;
}
/* Swal header — barre d'en-tête grise avec séparation visuelle du corps.
   Par défaut le header est neutre (transparent, sans hauteur) : beaucoup de
   modales construisent leur propre en-tête (icône + titre) dans le CONTENU et
   ne passent aucune option `title`. Le header natif se retrouvait alors vide,
   n'affichant qu'une fine bande grise parasite en haut de la modale.
   La barre grise n'apparaît donc que lorsqu'il y a un vrai titre, une icône
   native ou une image dans le header. */
.swal2-header {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
}
.swal2-popup:has(> .swal2-header .swal2-title:not(:empty)) > .swal2-header,
.swal2-popup:has(> .swal2-header .swal2-icon) > .swal2-header,
.swal2-popup:has(> .swal2-header .swal2-image) > .swal2-header {
  padding: 16px 20px !important;
  background: var(--eb-bg) !important;
  border-radius: var(--eb-radius) var(--eb-radius) 0 0 !important;
}
.swal2-content {
  padding: 16px 20px !important;
  font-size: 14px !important;
}
/* Swal title — centered, text-only (icons hidden for clean look) */
.swal2-title, [id="swal2-title"] {
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: var(--eb-text, #0f172a) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1.4 !important;
}
/* Decorative icons in titles are hidden — the title text describes the action */
.swal2-title i,
.swal2-title .fa,
.swal2-title .fas,
.swal2-title .far,
.swal2-title .fa-solid,
.swal2-title .fa-regular {
  display: none !important;
}
/* Swal close button — reposition inside the new header bar */
.swal2-popup .swal2-close {
  top: 12px !important;
  right: 14px !important;
}
/* Inscription table inside swal */
.swal2-content table {
  width: 100% !important;
  font-size: 13px !important;
}
.swal2-content table td {
  padding: 6px 8px !important;
}
/* Toggle switch in swal */
.swal2-content .switchconfig,
.swal2-content .toggle {
  transform: scale(0.85);
}

.swal2-close,
.swal2-popup .swal2-close,
button.swal2-close {
  color: var(--eb-text-secondary, #333) !important;
  opacity: 0.7 !important;
  font-size: 28px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}
.swal2-close:hover,
.swal2-popup .swal2-close:hover {
  color: var(--eb-text, #000) !important;
  opacity: 1 !important;
}

/* ===== 8. HIDE V1 CHROME ===== */
/* Hide V1 visual chrome but keep JS/HTML functional for popups */
/* V1 sidebar — hidden globally (V2 sidebar replaces it) */
.col-lateral {
  display: none !important;
}
/* Non-dashboard pages: V1 navbar shifted right for V2 sidebar */
.navbar.fixed-top {
  left: var(--eb-sidebar-w) !important;
  width: calc(100% - var(--eb-sidebar-w)) !important;
}
.space-left {
  margin-left: 240px !important;
}
.breadcrumb-responsive {
  margin-left: 240px !important;
}
/* Dashboard: V1 navbar hidden (V2 topbar replaces it) */
.eb-dashboard-v2 .navbar.fixed-top,
.eb-dashboard-v2 > .container.noprint {
  height: 0 !important; overflow: visible !important;
  visibility: hidden !important; pointer-events: none !important;
  position: relative !important; z-index: 0 !important;
  padding: 0 !important; margin: 0 !important; border: none !important;
}
/* V1 dropdowns/popups — ALWAYS on top when shown */
#dropdownBadgeuse.show,
.navbar #dropdownBadgeuse.show {
  position: fixed !important;
  top: 52px !important; right: 10px !important; left: auto !important;
  z-index: 999999 !important;
  visibility: visible !important; pointer-events: auto !important;
  background: var(--eb-surface) !important;
  border-radius: var(--eb-radius) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
  border: 1px solid var(--eb-border) !important;
  min-width: 400px !important;
}
#broadcastPopup[style*="block"],
#broadcastPopup:not([style*="none"]) {
  z-index: 999999 !important;
  visibility: visible !important; pointer-events: auto !important;
  border-radius: var(--eb-radius, 12px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  overflow: hidden;
}
#div_aide_lateral {
  position: fixed !important;
  top: 52px !important; right: 0 !important; bottom: 0 !important;
  left: auto !important; width: 400px;
  height: calc(100vh - 52px) !important;
  z-index: 9998 !important;
  background: var(--eb-surface) !important;
  box-shadow: var(--eb-shadow-drawer) !important;
  overflow-y: auto !important;
}
/* V1 dropdown menus in general */
.navbar .dropdown-menu.show {
  z-index: 999999 !important;
}
/* V1 dropdowns/popups escape hidden parent via position:fixed */
.eb-dashboard-v2 .dropdown-menu.show,
.eb-dashboard-v2 #dropdownBadgeuse.show,
.eb-dashboard-v2 #broadcastPopup[style*="block"],
.eb-dashboard-v2 #div_aide_lateral {
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
  position: fixed !important;
}
/* #10322 — Le dropdown de recherche du topbar V2 est positionné `absolute` sous
   son input (top:100% relatif à .eb-topbar-search en position:relative). La règle
   générique ci-dessus le forçait en position:fixed : combiné à top:100%, il était
   propulsé à top:100vh (hors écran, en bas) → les résultats / les 3 liens ne
   s'affichaient pas sur index_d.php alors qu'ils marchaient sur personnel.php
   (qui n'a pas la classe .eb-dashboard-v2). On restaure le positionnement absolu. */
.eb-dashboard-v2 .eb-topbar-search .dropdown-menu.show {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
}
.eb-dashboard-v2 #dropdownBadgeuse.show {
  top: 52px !important; right: 10px !important; left: auto !important;
  z-index: 99999 !important;
  background: var(--eb-surface) !important;
  border-radius: var(--eb-radius) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important;
  border: 1px solid var(--eb-border) !important;
  min-width: 400px !important;
}
.eb-dashboard-v2 #broadcastPopup[style*="block"],
body.eb-has-topbar-v2 #broadcastPopup[style*="block"] {
  top: 52px !important; right: 60px !important; left: auto !important;
}
.eb-dashboard-v2 .breadcrumb-responsive {
  display: none !important;
}
/* space-left contains our V2 layout — reset its V1 styling */
.eb-dashboard-v2 .space-left {
  margin-left: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.eb-dashboard-v2 #div_principale {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
/* V1 popups/panels that must stay visible */
.eb-dashboard-v2 #aide-llm-wrap,
.eb-dashboard-v2 #aide-llm-panel,
.eb-dashboard-v2 #aide-llm-inpage,
.eb-dashboard-v2 #dropdownBadgeuse,
.eb-dashboard-v2 #broadcastPopup {
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Aide lateral panel — force right-side fixed position, below the V2 topbar.
   Width is managed by JS (getAide → animate) so no !important here (#9750). */
.eb-dashboard-v2 #div_aide_lateral,
body.eb-has-topbar-v2 #div_aide_lateral {
  position: fixed !important;
  top: 52px !important; right: 0 !important; bottom: 0 !important;
  left: auto !important;
  width: 400px;
  height: calc(100vh - 52px) !important;
  z-index: 9998 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: var(--eb-surface) !important;
  box-shadow: var(--eb-shadow-drawer) !important;
  overflow-y: auto !important;
}
.eb-dashboard-v2 #div_aide_lateral #nav_aide {
  position: relative !important;
  left: auto !important;
}
/* V1 dropdown menus that appear on click must be visible */
.eb-dashboard-v2 .navbar .dropdown-menu.show,
.eb-dashboard-v2 #dropdownBadgeuse.show {
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 52px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 9999 !important;
  transform: none !important;
  background: var(--eb-surface) !important;
  border: 1px solid var(--eb-border) !important;
  border-radius: var(--eb-radius) !important;
  box-shadow: var(--eb-shadow-md) !important;
}
/* V1 broadcast popup — reparented to body by JS */
.eb-dashboard-v2 #broadcastPopup,
body.eb-has-topbar-v2 #broadcastPopup {
  position: fixed !important;
  top: 52px !important;
  right: 60px !important;
  left: auto !important;
  /* The V1 inline style sets `bottom: 30px;` which, combined with the
     fixed top, stretches the popup to the full viewport (~800px).
     Force bottom/height to auto so the popup hugs its content. */
  bottom: auto !important;
  height: auto !important;
  max-height: calc(100vh - 72px) !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: var(--eb-surface) !important;
  border: 1px solid var(--eb-border) !important;
  border-radius: var(--eb-radius) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  min-width: 300px !important;
  max-width: 360px !important;
  color: var(--eb-text) !important;
}
/* Mobile : le popup géoloc (right:60px + max-width:360px) débordait hors écran
   à gauche sur les petits viewports → on le borne aux 2 bords avec une marge. */
@media (max-width: 480px) {
  .eb-dashboard-v2 #broadcastPopup,
  body.eb-has-topbar-v2 #broadcastPopup {
    right: 8px !important;
    left: 8px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}
/* Geolocation popup inner styling (#9747) */
#broadcastPopupContent {
  padding: 0 !important;
}
/* Calendrier mobile — bouton filtre + dropdown type + bouton Synchroniser sur
   une seule ligne (#toolbar est déplacé dans .fc-header-toolbar par calendar.php,
   et le bouton filtre y est regroupé en JS). */
@media (max-width: 768px) {
  .fc-header-toolbar #toolbar.filterAreaDiv {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .fc-header-toolbar #toolbar > .eb-filter-mobile-wrap,
  .fc-header-toolbar #toolbar > .rotate-button {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .fc-header-toolbar #toolbar .bootstrap-select,
  .fc-header-toolbar #toolbar .bootstrap-select.w-100 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
}
.eb-geoloc-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  font-size: 14px; font-weight: 600;
  color: var(--eb-text);
  border-bottom: 1px solid var(--eb-border);
  background: var(--eb-bg, #f8fafc);
}
.eb-geoloc-header i {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--eb-radius-sm);
  background: var(--eb-primary, #2563EB);
  color: #fff;
  font-size: 13px;
}
.eb-geoloc-body {
  padding: 8px 0;
}
.eb-geoloc-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 20px;
  font-size: 13px; line-height: 1.5;
  color: var(--eb-text);
  transition: background 0.15s;
}
.eb-geoloc-row:hover {
  background: var(--eb-bg, #f8fafc);
}
.eb-geoloc-row-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--eb-radius-sm);
  background: var(--eb-bg, #f1f5f9);
  color: var(--eb-primary, #2563EB);
  font-size: 13px;
  margin-top: 2px;
}
/* Danger-coloured icon variant (used for error/disabled states) */
.eb-geoloc-row-icon[style*="color:var(--eb-danger"],
.eb-geoloc-row-icon.eb-geoloc-icon-danger {
  background: rgba(246, 78, 96, 0.1);
  color: var(--eb-danger, #f64e60) !important;
}
/* Warning-coloured icon variant */
.eb-geoloc-row-icon.eb-geoloc-icon-warning {
  background: rgba(255, 168, 0, 0.1);
  color: #ffa800 !important;
}
.eb-geoloc-label {
  font-size: 11px; font-weight: 500;
  color: var(--eb-text-muted, #94a3b8);
  text-transform: uppercase; letter-spacing: 0.5px;
}
/* "Activer" button inside the geolocation popup */
.eb-geoloc-body .btn-primary,
.eb-geoloc-row .btn-primary {
  border-radius: var(--eb-radius-sm);
  font-size: 12px; font-weight: 600;
  padding: 6px 16px;
  border: none;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.eb-geoloc-body .btn-primary:hover,
.eb-geoloc-row .btn-primary:hover {
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}
/* Tutorial image inside the geolocation error row */
.eb-geoloc-row img,
.eb-geoloc-body img {
  border-radius: var(--eb-radius-sm);
  border: 1px solid var(--eb-border, #e2e8f0);
  margin-top: 8px;
  max-width: 200px;
}
/* Separator between geoloc rows (subtle divider) */
.eb-geoloc-row + .eb-geoloc-row {
  border-top: 1px solid var(--eb-border, #e2e8f0);
}

/* Help side panel #div_aide_lateral — created by getAide() when the ?
   button is clicked. Its inner <nav id='nav_aide'> carries the Bootstrap
   classes 'navbar navbar-expand-lg' which default to display:flex;
   flex-direction:row; align-items:center — the content ends up
   vertically centered inside the 100vh panel, leaving a ~270px visual
   gap at the top. Force the nav to stack top-down. */
.eb-dashboard-v2 #div_aide_lateral,
body #div_aide_lateral {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.eb-dashboard-v2 #div_aide_lateral #nav_aide,
body #div_aide_lateral #nav_aide {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
/* Trim the oversized padding-top inside the scroll wrapper too */
.eb-dashboard-v2 #div_aide_lateral .div-scroll.aide-llm-tabs-row-wrap,
body #div_aide_lateral .div-scroll.aide-llm-tabs-row-wrap {
  padding-top: 16px !important;
}

/* Inline chatbot at bottom of aide panel (#9750) */
.eb-aide-chat {
  margin-top: 24px;
}
.eb-aide-chat-divider {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; margin-bottom: 8px;
  border-top: 1px solid var(--eb-border, #e2e8f0);
  font-size: 13px; font-weight: 600;
  color: var(--eb-primary, #2563EB);
}
.eb-aide-chat-divider i {
  font-size: 14px;
}
.eb-aide-chat-messages {
  max-height: 250px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0; margin-bottom: 8px;
}
.eb-aide-chat-msg {
  max-width: 90%; padding: 8px 12px;
  border-radius: var(--eb-radius); font-size: 13px; line-height: 1.5;
  word-wrap: break-word; white-space: pre-wrap;
}
.eb-aide-chat-msg.user {
  align-self: flex-end;
  background: var(--eb-primary, #2563EB); color: #fff;
  border-bottom-right-radius: 4px;
}
.eb-aide-chat-msg.bot {
  align-self: flex-start;
  background: var(--eb-bg, #f1f5f9); color: var(--eb-text, #1e293b);
  border-bottom-left-radius: 4px;
}
.eb-aide-chat-msg.bot.error {
  background: #fef2f2; color: #b91c1c;
  border: 1px solid #fecaca;
}
.eb-aide-chat-msg.bot.typing {
  background: var(--eb-bg, #f1f5f9); color: var(--eb-primary, #2563EB);
  padding: 8px 16px;
}
.eb-aide-chat-form {
  display: flex; gap: 8px;
  padding: 8px 0;
}
.eb-aide-chat-form input {
  flex: 1; padding: 8px 12px;
  border-radius: var(--eb-radius-md); border: 1px solid var(--eb-border, #e2e8f0);
  font-size: 13px; background: var(--eb-surface, #fff);
  color: var(--eb-text, #1e293b);
}
.eb-aide-chat-form input:focus {
  border-color: var(--eb-primary, #2563EB); outline: none;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.eb-aide-chat-form .btn {
  padding: 8px 14px; border-radius: var(--eb-radius-md);
}

/* Aide promo panel (when module not installed) */
.eb-aide-promo {
  display: none; position: fixed;
  top: 0; right: 0; bottom: 0; width: 380px;
  background: var(--eb-surface); z-index: 9999;
  box-shadow: var(--eb-shadow-drawer);
  flex-direction: column; overflow-y: auto;
}
.eb-aide-promo.show { display: flex; }
.eb-aide-promo-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--eb-border);
  font-size: 16px; font-weight: 600;
}
.eb-aide-promo-header button {
  background: none; border: none; font-size: 18px;
  color: var(--eb-text-muted); cursor: pointer;
}
.eb-aide-promo-body {
  padding: 40px 24px; text-align: center; flex: 1;
}
.eb-aide-promo-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--eb-primary-light); color: var(--eb-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 20px;
}
.eb-aide-promo-body h3 {
  font-size: 20px; font-weight: 700; margin-bottom: 12px;
  color: var(--eb-text);
}
.eb-aide-promo-body p {
  font-size: 14px; color: var(--eb-text-secondary);
  line-height: 1.6; margin-bottom: 24px;
}
.eb-aide-promo-body ul {
  list-style: none; padding: 0; text-align: left;
  margin-bottom: 32px;
}
.eb-aide-promo-body ul li {
  padding: 8px 0; font-size: 14px; color: var(--eb-text);
  display: flex; align-items: center; gap: 10px;
}
.eb-aide-promo-body ul li i { color: var(--eb-success); }
.eb-aide-promo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--eb-radius-sm);
  background: var(--eb-primary); color: #fff !important;
  font-size: 14px; font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s;
}
.eb-aide-promo-btn:hover { background: var(--eb-primary-hover); }

/* ===== 9. RESPONSIVE ===== */

/* Tablet */
@media (max-width: 1200px) {
  .eb-stats-row { grid-template-columns: 1fr 1fr; }
  .eb-stat-value { font-size: 28px; }
  .eb-stat-label { font-size: 11px; }
  .eb-widget-grid { grid-template-columns: 1fr 1fr !important; }
  .eb-widget-col:nth-child(3) { grid-column: 1 / -1; }
}

/* Burger button — hidden on desktop */
.eb-burger {
  display: none; background: none; border: none; color: var(--eb-text);
  font-size: 18px; cursor: pointer; padding: 6px 8px; border-radius: 6px;
  margin-right: 8px; box-shadow: none; outline: none;
}
.eb-burger:hover { background: var(--eb-bg); }
.eb-burger:focus, .eb-burger:active { box-shadow: none; outline: none; }

/* Mobile sidebar overlay */
.eb-sidebar.mobile-open { display: flex !important; z-index: 99999 !important; }
.eb-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99998; }
/* Close button inside sidebar — hidden on desktop */
.eb-sidebar-close {
  display: none; position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--eb-sidebar-nav-text);
  font-size: 18px; cursor: pointer; z-index: 10;
  padding: 4px 8px; border-radius: 6px;
}
.eb-sidebar-close:hover { color: var(--eb-sidebar-nav-hover-text); background: rgba(255,255,255,0.1); }

/* Mobile */
@media (max-width: 768px) {
  /* Burger visible */
  .eb-burger { display: flex; align-items: center; }
  /* Close button visible in sidebar */
  .eb-sidebar-close { display: block; }
  /* Le bouton close (top:12px right:12px, ~36px de large) recouvrait
     .eb-sidebar-version-small qui flotte à droite de la rangée logo.
     On dégage de la place à droite du badge version pour qu'il reste
     lisible derrière l'icône X. */
  .eb-sidebar-version-small { margin-right: 36px; }
  /* Sidebar hidden by default, slideable */
  .eb-sidebar { display: none !important; }

  /* Main content full width */
  .eb-main { margin-left: 0 !important; }
  .space-left { margin-left: 0 !important; }
  .breadcrumb-responsive { margin-left: 0 !important; }
  .navbar.fixed-top { left: 0 !important; width: 100% !important; }

  /* Topbar — reset le left:240px forcé plus haut (hors media query) qui
     anchre la topbar à droite du sidebar desktop. En mobile le sidebar
     est caché (display:none) donc la topbar doit occuper toute la largeur. */
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) .eb-topbar,
  body.eb-has-topbar-v2 .eb-topbar {
    left: 0 !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    /* Anti-débordement mobile (#10539) : le menu Ajout rapide est rendu hors
       de la topbar, donc ce hidden ne le clippe pas. */
    overflow: hidden !important;
  }
  .eb-topbar { padding: 0 12px; height: 48px; }
  .eb-topbar-search { display: none; }
  /* Cibles tactiles : 40x40 minimum (WCAG 2.5.5). Avant : 32x32 → trop
     petit, erreurs de tap fréquentes sur les icônes ⚡ 🕐 📍 ✉️ 🔀. */
  .eb-topbar-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  /* La barre right contient jusqu'à 5 icônes (40px + gap 4px). Permet le
     wrap si besoin et réduit le gap pour que tout tienne en 375px. */
  .eb-topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .eb-topbar-right {
    gap: 2px !important;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .eb-topbar-actions,
  .eb-topbar-actions .buttons-container {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .eb-topbar-actions .btn-group {
    flex: 0 0 auto;
  }
  .eb-topbar-actions .buttons-container {
    gap: 2px;
  }
  .eb-topbar-actions .btn {
    width: 32px;
    min-width: 32px;
    padding: 0 !important;
    justify-content: center;
  }
  .eb-topbar-actions .btn.btn-success,
  .eb-topbar-actions .btn.btn-primary {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }
  @media (max-width: 380px) {
    .eb-topbar-left .eb-breadcrumb {
      display: none;
    }
  }

  /* Breadcrumb — sur mobile avec page-specific actions (.eb-topbar-actions)
     dans le topbar-right, la chaîne "Accueil › Activité › Planning" prend
     ~220px et pousse les icônes hors viewport. On ne garde que le dernier
     segment (la page courante) sur mobile. */
  .eb-topbar-left .eb-breadcrumb a,
  .eb-topbar-left .eb-breadcrumb > span:not(.eb-breadcrumb-current),
  .eb-topbar-left .eb-breadcrumb .eb-breadcrumb-sep { display: none; }
  .eb-topbar-left .eb-breadcrumb .eb-breadcrumb-current {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Bumped from 150px → 220px : "Crédits & développements" et autres
       titres longs étaient tronqués mid-mot ("Crédits & développe…"). */
    max-width: 220px;
  }
  /* Icônes persistantes — masquer question-circle (help) sur mobile, peu
     utilisé et facilement remplaçable par le menu burger. */
  .eb-topbar-right .eb-topbar-icon:has(.fa-question-circle) { display: none !important; }

  /* Dropdown Ajout rapide — ancré au viewport sur mobile (sinon sort à
     gauche car le trigger est loin du bord droit). */
  .eb-quickadd-dropdown {
    position: fixed;
    top: 48px;
    right: 8px;
    left: auto;
    width: calc(100vw - 16px);
    max-width: 320px;
  }

  /* Stats cards (.stats-container-new) — les 4-5 cards sont en flex:1 sans
     wrap, ce qui écrase chaque card à ~70px en mobile et tronque le texte
     ("Sur les 30 prochains jours"). Wrap à 2 par row. */
  .stats-container-new {
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 12px !important;
  }
  .stats-container-new > .nav-item {
    flex: 1 1 calc(50% - 12px) !important;
    min-width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
  .stats-container-new > .nav-item > a,
  .stats-container-new > .nav-item > .btn {
    min-height: 96px !important;
    padding: 12px !important;
  }
  .stats-container-new .svg-icon,
  .stats-container-new .stats-icon {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }
  .stats-container-new .fs-8,
  .stats-container-new .fs-2,
  .stats-container-new span[id^="nb_"] { font-size: 22px !important; }

  /* .filter-area (toolbar "Affiner" dans fixed-table-toolbar) — collapsed en height:0
     mais ses children en flex lui donnent une width naturelle de ~470px, ce qui fait
     déborder .fixed-table-toolbar → body scrollWidth > viewport → page horizontal scroll
     (qui cascade sur .eb-topbar position:fixed et le fait s'étirer à toute la largeur
     du document). Fix : forcer la toolbar en overflow:hidden sur mobile pour clipper
     proprement la filter-area collapsed, et contraindre la filter-area à la largeur
     du parent quand elle est active pour qu'elle wrap ses filtres au lieu de déborder. */
  .fixed-table-toolbar { overflow: hidden; }
  .fixed-table-toolbar .columns { overflow: visible; }
  .fixed-table-toolbar .columns .dropdown-menu { max-height: 60vh; }
  .fixed-table-toolbar .filter-area {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .fixed-table-toolbar .filter-area .filterAreaDiv {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Respecter hide_mobile appliqué par write_stats_containers_group() (fonctions.php:10779)
     sur les appels non-widget. Sans ce override, la règle display:flex !important plus
     haut dans ce fichier masque le display:none de .hide_mobile (main.css:2407), et les
     stats "desktop-only" s'affichent quand même en mobile (ex: personnel.php qui rend
     3 ul.stats-container-new dans un .stats-container-diviser flex-row → écrasé à ~100px
     par card). Meilleur comportement : respecter l'intention d'origine et masquer. */
  .stats-container-new.hide_mobile { display: none !important; }
  /* Si le diviser ne contient QUE des ul.hide_mobile, on masque aussi le diviser
     pour éviter un bloc vide. */
  .stats-container-diviser:not(:has(> ul:not(.hide_mobile))) { display: none !important; }

  /* Swal3 mobile — le close button (X) rendu par défaut par SweetAlert2 est
     placé en grid-cell détaché dans le coin haut-droite du .swal3-popup (48x48,
     pas inset dans la bordure), et fait doublon avec le bouton cancel "Fermer"
     quand swal3() est appelé via js/sweetalert2_tools.js:8 (showCloseButton: true).
     Sur mobile on le masque pour ne garder que le bouton Fermer centré. */
  .swal3-popup .swal3-close { display: none !important; }
  /* Les boutons d'action (.swal3-actions contient .swal3-confirm + .swal3-cancel)
     sont par défaut en flex inline avec un gap ; sur mobile on les passe en
     flex-wrap pour que chaque bouton prenne toute la largeur si besoin, et on
     centre l'ensemble. */
  .swal3-popup .swal3-actions {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .swal3-popup .swal3-actions .swal3-confirm,
  .swal3-popup .swal3-actions .swal3-cancel {
    min-width: 120px;
  }

  /* Greeting */
  .eb-greeting { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 0 16px; }
  .eb-greeting-title { font-size: 22px; }
  .eb-greeting-subtitle { font-size: 13px; }
  .eb-btn-modern { padding: 8px 14px !important; font-size: 12px !important; }

  /* Stat cards */
  .eb-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .eb-stat-card { padding: 14px; }
  .eb-stat-value { font-size: 24px; }
  .eb-stat-label { font-size: 10px; }
  .eb-stat-icon { width: 32px; height: 32px; font-size: 13px; }
  .eb-stat-detail { font-size: 11px; }

  /* Widget grid */
  .eb-widget-grid { grid-template-columns: 1fr !important; }
  .eb-dashboard { padding: 12px; }

  /* Cards */
  .card-header.graycard { padding: 12px 14px !important; }
  .card-body.graycard { padding: 12px 14px !important; }
  .card-header.graycard .card-title { font-size: 13px !important; }

  /* News tabs */
  .eb-news-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .eb-news-tab { white-space: nowrap; font-size: 12px; padding: 10px 12px; }

  /* Profil card */
  .eb-profile-avatar-wrap { width: 64px; height: 64px; }
  .eb-profile-avatar-img { width: 56px; height: 56px; }
  .eb-profile-name { font-size: 14px; }

  /* Organisation card */
  .eb-org-stats { gap: 6px; }
  .eb-org-stat { padding: 8px 4px; }
  .eb-org-stat-value { font-size: 18px; }
  .eb-org-stat-label { font-size: 9px; }
}

/* Small mobile */
@media (max-width: 480px) {
  .eb-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .eb-stat-card { padding: 12px; }
  .eb-stat-value { font-size: 22px; }
  .eb-greeting-title { font-size: 20px; }
  .eb-dashboard { padding: 8px; }
}

/* ===== Modern "Aucun résultat" empty state =====
   The legacy no_result_card() (fonctions.php:10024) renders a 600px-tall
   card with a 250px raster background image + centered title/text. That
   looks dated on the V2 pages. Override the outer container, hide the
   raster background, draw a clean modern illustration via an inline
   gradient + SVG mask, and restyle the text. Scoped to the pages that
   opt into the V2 topbar (body.eb-has-topbar-v2) so non-migrated
   contexts keep the original art. */
body.eb-has-topbar-v2 .no-result-img,
body.eb-has-topbar-v2 .no-content2,
body.eb-has-topbar-v2 .no-content3 {
  margin: 32px auto !important;
  padding: 48px 24px !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: 520px !important;
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius, 12px) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04)) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Kill the legacy raster background on the .error-3 panel */
body.eb-has-topbar-v2 .no-result-img .error-3,
body.eb-has-topbar-v2 .no-content2 .error-3,
body.eb-has-topbar-v2 .no-content3 .error-3 {
  background-image: none !important;
  background-size: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Inject a modern vector illustration (a magnifier on a document) as
   an ::before pseudo-element. Uses a data URI SVG tinted with the
   primary color so it scales crisply and matches the brand palette. */
body.eb-has-topbar-v2 .no-result-img .error-3::before,
body.eb-has-topbar-v2 .no-content2 .error-3::before,
body.eb-has-topbar-v2 .no-content3 .error-3::before {
  content: '';
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  background-color: rgba(59, 130, 246, 0.10);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='28' cy='28' r='14'/><path d='M39 39l10 10'/><path d='M22 28h12'/><path d='M28 22v12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
}
/* Title — modern sans, solid dark slate */
body.eb-has-topbar-v2 .no-result-img .error-title,
body.eb-has-topbar-v2 .no-content2 .error-title,
body.eb-has-topbar-v2 .no-content3 .error-title {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
  margin: 0 0 8px !important;
  width: auto !important;
  line-height: 1.3 !important;
}
/* Body text — secondary gray, normal weight */
body.eb-has-topbar-v2 .no-result-img .error-content,
body.eb-has-topbar-v2 .no-content2 .error-content,
body.eb-has-topbar-v2 .no-content3 .error-content {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--eb-text-secondary, #64748b) !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
/* The "Réinitialiser le filtre" button band sits in a separate
   .buttons-band-container below the card — center it horizontally and
   nudge it up slightly so it feels visually attached to the card.
   :not(.d-none) — sinon ce display:flex !important écrase le d-none
   ajouté/enlevé en JS pour masquer la barre quand rien n'est sélectionné.
   #10283 #3 — exclure .bandResponsive : ce sélecteur servait à l'usage
   "inline sous la card" (margin 16px/24px). Sur la version flottante
   position:fixed (.bandResponsive), le margin-bottom:24px se cumulait
   avec bottom:4px et créait un décalage visuel imprévisible quand
   ResizeObserver recalculait la padding-bottom du body. */
body.eb-has-topbar-v2 .band-buttons:not(.d-none),
body.eb-has-topbar-v2 #band-container:not(.d-none):not(.bandResponsive) {
  display: flex !important;
  justify-content: center !important;
  margin: 16px auto 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
body.eb-has-topbar-v2 .band-buttons .btn,
body.eb-has-topbar-v2 #band-container .btn {
  border-radius: var(--eb-radius-sm) !important;
  padding: 8px 18px !important;
  font-weight: 500 !important;
}

/* #9748 — Topbar-scoped .eb-btn-loading rules removed; the spinner is
   no longer applied to any element inside .eb-topbar. The generic
   .eb-btn-loading rule (section 7d1) still covers .btn-action rows. */

/* ===== Modern bottom action band (#band-container / .bandResponsive) =====
   The legacy bandResponsive is a position-fixed full-width strip pinned
   to the bottom of the viewport. It holds page-specific action buttons
   (Message, Mail, Télécharger, Inactif, Supprimer…). Default look was a
   plain unstyled row — turn it into a floating toolbar matching the
   rest of the V2 UI: centered pill-shaped card sitting above a subtle
   shadow, with 8px radius buttons, bold font, and hover lift. Scoped
   to body.eb-has-topbar-v2 so unmigrated contexts stay untouched. */
body.eb-has-topbar-v2 #band-container.bandResponsive {
  left: var(--eb-sidebar-w) !important;      /* suit la largeur (resizable) de la sidebar V2 */
  right: 0 !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none;        /* let clicks pass through the empty rail */
  /* #9687 — descendu plus bas sur la page (demande Joseph) : passe de 16px
     à 4px pour que la pill flotte presque contre le bas de la fenêtre. */
  bottom: 4px !important;
  z-index: 1031 !important;   /* au-dessus du fixed-table-loading (z:1000) et des dropdowns (z:1000) */
}
body.eb-has-topbar-v2 #band-container.bandResponsive > .container-fluid,
body.eb-has-topbar-v2 #band-container.bandResponsive > div {
  pointer-events: auto;
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  /* #11451 — coins moins prononces : rectangle arrondi (12px) au lieu de
     la forme pilule (999px), jugee trop marquee. */
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12),
              0 4px 10px rgba(15, 23, 42, 0.06) !important;
  /* La carte doit englober la hauteur des boutons, y compris les variantes
     de modules plus hautes que les boutons Bootstrap standard.
     #11451 — padding vertical reduit (barre moins haute) et padding lateral
     plus genereux pour que les boutons ne touchent pas les bords. */
  padding: 8px 24px !important;
  margin: 0 auto !important;
  gap: 8px !important;
  /* #11451 — La pill est un flex-item du parent (#band-container = d-flex) :
     inline-flex est blockifie et la resolution de largeur passe par le flex
     algorithm. Sans indication ferme, certains navigateurs partent sur
     min-content (largeur d'un seul bouton) et les autres boutons debordent
     via overflow:visible. On force explicitement flex:0 0 max-content : la
     pill prend toujours la largeur totale deroulee de ses boutons, sans que
     le flex parent ne la fasse retrecir. max-width la borne au viewport et
     flex-wrap:wrap conserve le retour a la ligne si un module empile
     beaucoup de boutons. */
  flex: 0 0 max-content !important;
  width: max-content !important;
  max-width: calc(100% - 48px);
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  box-sizing: border-box;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn {
  border-radius: var(--eb-radius-sm) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  min-height: 36px;
  border-width: 1px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive #resetFilter {
  min-width: 40px;
  min-height: 40px;
  font-size: 16px !important;
}
/* Respecter d-none : le display:inline-flex ci-dessus bat Bootstrap .d-none */
body.eb-has-topbar-v2 #band-container.bandResponsive .btn.d-none {
  display: none !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.10) !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn > i {
  font-size: 13px;
  line-height: 1;
}
/* Primary (Message, Mail, …) — brand blue */
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-primary {
  background: var(--eb-primary, #3b82f6) !important;
  border-color: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-primary:hover {
  background: var(--eb-primary) !important;
  border-color: var(--eb-primary) !important;
}
/* Secondary (Télécharger, …) — soft gray */
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-secondary {
  background: var(--eb-bg, #f1f5f9) !important;
  border-color: var(--eb-border, #e2e8f0) !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-secondary:hover {
  background: var(--eb-border) !important;
}
/* Danger (Inactif, Supprimer, …) — red */
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-danger {
  background: var(--eb-danger) !important;
  border-color: var(--eb-danger) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-danger:hover {
  background: var(--eb-danger-hover) !important;
  border-color: var(--eb-danger-hover) !important;
}
/* Success (Valider, Enregistrer, …) — green */
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-success {
  background: var(--eb-success) !important;
  border-color: var(--eb-success) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-success:hover {
  background: var(--eb-success-hover) !important;
  border-color: var(--eb-success-hover) !important;
}
/* Warning — amber */
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-warning {
  background: var(--eb-warning) !important;
  border-color: var(--eb-warning) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-warning:hover {
  background: var(--eb-warning-hover) !important;
  border-color: var(--eb-warning-hover) !important;
}
/* Default outline — ghost pill */
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-default,
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-light {
  background: var(--eb-surface, #ffffff) !important;
  border-color: var(--eb-border, #e2e8f0) !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-default:hover,
body.eb-has-topbar-v2 #band-container.bandResponsive .btn-light:hover {
  background: var(--eb-bg, #f1f5f9) !important;
}
/* Mobile: drop the sidebar offset and shrink padding. */
@media (max-width: 768px) {
  body.eb-has-topbar-v2 #band-container.bandResponsive {
    left: 0 !important;
    bottom: 8px !important;
  }
  body.eb-has-topbar-v2 #band-container.bandResponsive > .container-fluid,
  body.eb-has-topbar-v2 #band-container.bandResponsive > div {
    /* #11451 — meme logique qu'en desktop : barre peu haute mais degagement
       lateral genereux pour que les boutons ne touchent pas les bords. */
    padding: 8px 20px !important;
    gap: 6px !important;
    max-width: calc(100% - 16px);
  }
  body.eb-has-topbar-v2 #band-container.bandResponsive .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 34px;
  }
}
/* Give the page enough bottom padding so the floating band never
   covers the last table row / pagination / content. Band card is
   ~52px + 4px bottom offset + 24px safety = 80px minimum per row ;
   #9813 — augmenté à 160px pour couvrir les cas où les boutons
   wrappent sur 2 lignes (ex : page organisation > onglet personnel). */
body.eb-has-topbar-v2 #space-left,
body.eb-has-topbar-v2 .space-left {
  padding-bottom: 160px !important;
}
/* Bootstrap-table pagination bar — explicit bottom margin so the
   floating action band never overlaps the page number buttons. */
body.eb-has-topbar-v2 .fixed-table-pagination {
  margin-bottom: 24px !important;
}

/* ===== Modern row action buttons (.btn-action) =====
   The legacy .btn-action class (see write_buttons() in fonctions.php)
   renders the 25x25 icon buttons in the rightmost "Bouton" column of
   every DataTable listing: voir, envoyer email, identifiant, QR code,
   supprimer, … Default style is a white square with a 1px border and a
   primary-colored FA icon inside. Modernize to match the V2 UI:

     - 32x32 rounded square (8px radius)
     - Transparent background, no border, muted icon color
     - Hover: subtle tinted wash and slight lift
     - Color-coded variants: trash → red on hover, duplicate → amber,
       valid → green; derived from the FA icon class.
*/
body.eb-has-topbar-v2 .btn.btn-action:not(.d-none),
body.eb-has-topbar-v2 .btn-default.btn-action:not(.d-none) {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--eb-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--eb-text-secondary, #64748b) !important;
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.12s ease, box-shadow 0.15s ease !important;
  vertical-align: middle;
}
body.eb-has-topbar-v2 .btn.btn-action + .btn.btn-action,
body.eb-has-topbar-v2 .btn-default.btn-action + .btn-default.btn-action {
  margin-left: 2px !important;
}
/* #10418 — Crayon d'édition inline (colonnes Fonction / Equipe).
   Le .btn-action standard fait 32px de large : trop pour un simple crayon
   dans ces colonnes étroites, ce qui rognait le libellé. On compacte le
   bouton et on réduit l'écart bouton/libellé pour rendre de la place au texte. */
body.eb-has-topbar-v2 .btn.btn-action.eb-inline-edit:not(.d-none),
body.eb-has-topbar-v2 .btn-default.btn-action.eb-inline-edit:not(.d-none) {
  width: 20px !important;
}
/* #10557 — Boutons d'action isolés en widget dashboard : cible tactile 44x44
   sur mobile pour respecter les recommandations d'accessibilité (WCAG). */
body.eb-has-topbar-v2 .btn.btn-action.eb-action-touch:not(.d-none),
body.eb-has-topbar-v2 .btn-default.btn-action.eb-action-touch:not(.d-none) {
  min-width: 44px !important;
  min-height: 44px !important;
}
@media (max-width: 576px) {
  body.eb-has-topbar-v2 .btn.btn-action.eb-action-touch:not(.d-none),
  body.eb-has-topbar-v2 .btn-default.btn-action.eb-action-touch:not(.d-none) {
    width: 44px !important;
    height: 44px !important;
  }
}
/* #10584 — Boutons d'action de ligne (.btn-action) en table : sur mobile,
   passer la cible tactile à 40x40 minimum (vs 32x32 par défaut). L'audit
   accessibilité demande min 40px sur les pages /astreintes.php, /dispo.php,
   /qualifications.php (et toute liste utilisant le même rendu). On exclut
   .eb-inline-edit (crayon étroit dans une colonne, géré séparément). */
@media (max-width: 576px) {
  body.eb-has-topbar-v2 .btn.btn-action:not(.d-none):not(.eb-inline-edit):not(.eb-action-touch),
  body.eb-has-topbar-v2 .btn-default.btn-action:not(.d-none):not(.eb-inline-edit):not(.eb-action-touch) {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}
/* #10601 — Respecter le masquage mobile explicite sur les boutons d'action :
   le display:inline-flex des .btn-action modernes ne doit pas réafficher un
   bouton portant .hide_mobile. */
@media (max-width: 992px) {
  body.eb-has-topbar-v2 .btn.btn-action.hide_mobile,
  body.eb-has-topbar-v2 .btn-default.btn-action.hide_mobile {
    display: none !important;
  }
}
.eb-inline-edit-cell {
  gap: 2px !important;
}
/* #10418 — Onglet Véhicules : bouton "matériel embarqué" (cube) + compteur.
   L'ancien badge inline (top:-17px, left:14px, float) débordait sur le bouton
   poubelle voisin et le masquait. Compteur ré-ancré au coin haut-droit du
   bouton, en absolu, sans déborder sur les boutons suivants. */
.eb-embarque-btn { position: relative; }
.eb-embarque-btn .eb-embarque-count {
  position: absolute;
  top: -3px;
  right: -1px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  background-color: var(--eb-danger, #dc3545);
  color: #fff;
  border-radius: 999px;
  text-align: center;
  pointer-events: none;
}
body.eb-has-topbar-v2 .btn.btn-action:hover,
body.eb-has-topbar-v2 .btn-default.btn-action:hover {
  background: rgba(59, 130, 246, 0.10) !important;
  color: var(--eb-primary, #3b82f6) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}
body.eb-has-topbar-v2 .btn.btn-action > i,
body.eb-has-topbar-v2 .btn-default.btn-action > i {
  font-size: 13px !important;
  line-height: 1 !important;
  width: auto !important;
  color: inherit !important;
}
/* #10418 — Icônes d'action en état "actif/édition" : cloche (rappel activé),
   voiture (km renseigné), crayons Fonction/Équipe. La règle ci-dessus impose
   `.btn-action > i { color: inherit !important }`, donc on pose le bleu sur le
   BOUTON (l'icône hérite) — même mécanisme que la variante poubelle rouge. */
body.eb-has-topbar-v2 .btn.btn-action.eb-action-blue,
body.eb-has-topbar-v2 .btn-default.btn-action.eb-action-blue {
  color: #3591ff !important;
}
body.eb-has-topbar-v2 .btn.btn-action.eb-action-red,
body.eb-has-topbar-v2 .btn-default.btn-action.eb-action-red {
  color: var(--eb-danger) !important;
}
body.eb-has-topbar-v2 .btn.btn-action.eb-contact-favorite-active,
body.eb-has-topbar-v2 .btn-default.btn-action.eb-contact-favorite-active {
  color: var(--txt-color33) !important;
}
body.eb-has-topbar-v2 .btn.btn-action.eb-contact-favorite-inactive,
body.eb-has-topbar-v2 .btn-default.btn-action.eb-contact-favorite-inactive {
  color: var(--txt-color43) !important;
}
/* #10418 — Kilométrage en exposant en haut à droite de l'icône voiture. */
.eb-km-btn { position: relative; }
.eb-km-btn .eb-km-sup {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: #3591ff;
  pointer-events: none;
  white-space: nowrap;
}
/* Delete / trash variants — keep the icon red by default, wash on hover. */
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-trash),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-trash-alt),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-trash-can),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-times),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-xmark) {
  color: var(--eb-danger) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-trash):hover,
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-trash-alt):hover,
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-trash-can):hover,
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-times):hover,
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-xmark):hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--eb-danger-hover) !important;
}
/* Valid / OK variants */
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-check),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-check-circle),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-circle-check) {
  color: var(--eb-success) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-check):hover,
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-check-circle):hover,
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-circle-check):hover {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--eb-success-hover) !important;
}
/* Visibility / eye variants — visible = success (green), masked = danger (red).
   Le i.fa-eye et i.fa-eye-slash portaient déjà .text-success/.text-danger
   mais la règle "color: inherit !important" sur .btn.btn-action > i les
   neutralisait. Ici on color le bouton parent pour que l'icône hérite. */
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-eye) {
  color: var(--eb-success) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-eye):hover {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--eb-success-hover) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-eye-slash) {
  color: var(--eb-danger) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-eye-slash):hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--eb-danger-hover) !important;
}
/* Lock variants — closed = danger, open = success */
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-lock) {
  color: var(--eb-danger) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-lock):hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--eb-danger-hover) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-lock-open) {
  color: var(--eb-success) !important;
}
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-lock-open):hover {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--eb-success-hover) !important;
}
/* Edit / pencil / key — keep primary blue.
   NB : FA6 « pen-to-square »/« pencil-alt » sont des classes distinctes de
   « pen »/« pencil » → on les liste explicitement, sinon le crayon d'édition
   des tableaux d'inventaire (véhicule…) reste gris au lieu du bleu standard. */
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-pencil),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-pencil-alt),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-pen),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-pen-to-square),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-pen-square),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-edit),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-key) {
  color: var(--eb-primary, #3b82f6) !important;
}
/* Email / send — primary blue */
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-envelope),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-paper-plane),
body.eb-has-topbar-v2 .btn.btn-action:has(> .fa-arrow-alt-circle-right) {
  color: var(--eb-primary, #3b82f6) !important;
}
/* Wrapping cell: nowrap + tight gap so 5-6 buttons fit on one line. */
body.eb-has-topbar-v2 table td:has(> .btn-action),
body.eb-has-topbar-v2 table td .btn-action-wrap {
  white-space: nowrap;
}

/* =====================================================================
   ===== V2 PRODUCT-WIDE MODERNIZATION BATCH =====
   All selectors below are scoped to body.eb-has-topbar-v2 so unmigrated
   contexts keep the original look exactly. The batch covers the full
   audit list (P0 + P1 + P2): modals, SweetAlerts, pagination, forms,
   nav tabs, alerts, cards, buttons, badges, datepickers, selects,
   tables, FullCalendar, login, profile, upload, maps. Everything uses
   the existing --eb-* tokens defined at the top of this file.
   ===================================================================== */

/* ===== P0.1 Modals ===== */
body.eb-has-topbar-v2 .modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.20),
              0 8px 20px rgba(15, 23, 42, 0.10) !important;
  overflow: hidden;
  background: var(--eb-surface, #ffffff) !important;
}
body.eb-has-topbar-v2 .modal-header {
  background: var(--eb-surface, #ffffff) !important;
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 18px 24px !important;
  align-items: center;
}
body.eb-has-topbar-v2 .modal-header .modal-title,
body.eb-has-topbar-v2 .modal-header h1,
body.eb-has-topbar-v2 .modal-header h2,
body.eb-has-topbar-v2 .modal-header h3,
body.eb-has-topbar-v2 .modal-header h4,
body.eb-has-topbar-v2 .modal-header h5 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.eb-has-topbar-v2 .modal-header .btn-close,
body.eb-has-topbar-v2 .modal-header .close {
  background: transparent !important;
  border: none !important;
  color: var(--eb-text-muted, #94a3b8) !important;
  font-size: 20px !important;
  padding: 6px !important;
  border-radius: var(--eb-radius-sm) !important;
  opacity: 1 !important;
  transition: all 0.15s ease !important;
}
body.eb-has-topbar-v2 .modal-header .btn-close:hover,
body.eb-has-topbar-v2 .modal-header .close:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .modal-body {
  background: var(--eb-surface, #ffffff) !important;
  padding: 24px !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .modal-footer {
  background: var(--eb-surface, #ffffff) !important;
  border-top: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 16px 24px !important;
  gap: 8px;
}
body.eb-has-topbar-v2 .modal-footer .btn {
  border-radius: var(--eb-radius-sm) !important;
  padding: 8px 18px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .modal-backdrop.show {
  opacity: 0.55 !important;
  background: #0f172a !important;
}

/* ===== P0.1b SweetAlerts (swal2 + legacy swal) ===== */
body.eb-has-topbar-v2 .swal2-popup {
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(15,23,42,0.20),
              0 8px 20px rgba(15,23,42,0.10) !important;
  padding: 0 !important;
  font-family: inherit !important;
  overflow: hidden !important;
}
body.eb-has-topbar-v2 .swal2-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
body.eb-has-topbar-v2 .swal2-title i,
body.eb-has-topbar-v2 .swal2-title .fa,
body.eb-has-topbar-v2 .swal2-title .fas,
body.eb-has-topbar-v2 .swal2-title .far,
body.eb-has-topbar-v2 .swal2-title .fa-solid,
body.eb-has-topbar-v2 .swal2-title .fa-regular {
  display: none !important;
}
body.eb-has-topbar-v2 .swal2-html-container,
body.eb-has-topbar-v2 .swal2-content {
  font-size: 14px !important;
  color: var(--eb-text-secondary, #64748b) !important;
  line-height: 1.5 !important;
}
body.eb-has-topbar-v2 .swal2-actions {
  gap: 10px !important;
  margin: 0 !important;
}
body.eb-has-topbar-v2 .swal2-styled {
  border-radius: var(--eb-radius-sm) !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}
body.eb-has-topbar-v2 .swal2-styled.swal2-confirm {
  background: var(--eb-primary, #3b82f6) !important;
  color: #fff !important;
}
body.eb-has-topbar-v2 .swal2-styled.swal2-confirm:hover {
  background: var(--eb-primary-hover, #2563eb) !important;
  transform: translateY(-1px);
}
body.eb-has-topbar-v2 .swal2-styled.swal2-cancel {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-text, #0f172a) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
}
body.eb-has-topbar-v2 .swal2-styled.swal2-cancel:hover {
  background: var(--eb-border) !important;
}
body.eb-has-topbar-v2 .swal2-styled.swal2-deny {
  background: var(--eb-danger) !important;
  color: #fff !important;
}
body.eb-has-topbar-v2 .swal2-styled.swal2-deny:hover {
  background: var(--eb-danger-hover) !important;
}
body.eb-has-topbar-v2 .swal2-icon {
  margin: 0 auto 16px !important;
}
body.eb-has-topbar-v2 .swal2-input,
body.eb-has-topbar-v2 .swal2-textarea,
body.eb-has-topbar-v2 .swal2-select {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body.eb-has-topbar-v2 .swal2-input:focus,
body.eb-has-topbar-v2 .swal2-textarea:focus,
body.eb-has-topbar-v2 .swal2-select:focus {
  border-color: var(--eb-primary, #3b82f6) !important;
  box-shadow: var(--eb-shadow-focus) !important;
}
/* Legacy swal1 (old wrapper) fallback */
body.eb-has-topbar-v2 .swal-overlay .swal-modal {
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(15,23,42,0.20) !important;
  font-family: inherit !important;
}
body.eb-has-topbar-v2 .swal-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
}

/* ===== P0.2 Pagination + bootstrap-table controls ===== */
body.eb-has-topbar-v2 .pagination {
  gap: 4px;
  margin: 0;
}
body.eb-has-topbar-v2 .pagination .page-item .page-link,
body.eb-has-topbar-v2 .pagination .page-link {
  min-width: 34px;
  height: 34px;
  padding: 0 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-sm) !important;
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text, #0f172a) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
}
body.eb-has-topbar-v2 .pagination .page-item .page-link:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  border-color: var(--eb-border, #e2e8f0) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .pagination .page-item.active .page-link {
  background: var(--eb-primary, #3b82f6) !important;
  border-color: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 .pagination .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
}
body.eb-has-topbar-v2 .fixed-table-pagination {
  padding: 14px 16px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
/* Note: la visibilité de la pagination est gérée par bootstrap-table */
body.eb-has-topbar-v2 .bootstrap-table.eb-no-data .fixed-table-pagination {
  display: none !important;
}
body.eb-has-topbar-v2 .fixed-table-pagination .pagination-detail {
  color: var(--eb-text-secondary, #64748b);
  font-size: 13px;
}
body.eb-has-topbar-v2 .fixed-table-pagination .page-list .btn.dropdown-toggle,
body.eb-has-topbar-v2 .fixed-table-pagination select {
  border-radius: var(--eb-radius-sm) !important;
  padding: 6px 12px !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text, #0f172a) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar {
  padding: 4px 16px !important;
  background: transparent !important;
  border: none !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar .search input,
body.eb-has-topbar-v2 .fixed-table-toolbar .search .form-control {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* ===== P0.3 Form inputs + validation ===== */
body.eb-has-topbar-v2 .form-control:not(.bootstrap-select):not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="text"]:not(.flatpickr-input):not(.swal2-input):not(.alert-red-fade):not(.eb-field-error):not(.search-menu),
body.eb-has-topbar-v2 input[type="email"]:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="tel"]:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="number"]:not(.numInput):not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="password"]:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="url"]:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="search"]:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="date"]:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 input[type="time"]:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 select.form-control:not(.alert-red-fade):not(.eb-field-error),
body.eb-has-topbar-v2 select.form-select:not(.alert-red-fade):not(.eb-field-error) {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: var(--eb-text, #0f172a) !important;
  background-color: var(--eb-surface, #ffffff) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  /* css/main.css:2064 force `select { height: 24px }` (legacy global). Avec
     padding 9+9, il ne reste que 6px pour le texte → libellé coupé. On
     restaure une hauteur naturelle pilotée par padding + font. */
  height: auto !important;
  min-height: 38px;
}
/* #10805 — Les <textarea> reprennent le look v2 mais SANS `height: auto !important`
   (qui ne sert qu'à corriger le `select { height: 24px }` legacy). Ce !important
   écrasait la hauteur inline posée par la poignée de resize native → le
   redimensionnement vertical ne fonctionnait plus. */
body.eb-has-topbar-v2 textarea:not(.alert-red-fade):not(.eb-field-error) {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: var(--eb-text, #0f172a) !important;
  background-color: var(--eb-surface, #ffffff) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  min-height: 38px;
}
body.eb-has-topbar-v2 select.form-select.form-select-sm,
body.eb-has-topbar-v2 select.form-control-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
  min-height: 31px;
}
/* bootstrap-select propage la classe form-control sur son wrapper <div.bootstrap-select>.
   Le bouton interne .dropdown-toggle porte déjà sa bordure → on neutralise le wrapper
   pour éviter le double cadre autour des dropdowns. */
body.eb-has-topbar-v2 .bootstrap-select.form-control,
body.eb-has-topbar-v2 .bootstrap-select.form-control-sm,
body.eb-has-topbar-v2 .bootstrap-select.form-control-lg {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .form-control:not(.bootstrap-select):focus,
body.eb-has-topbar-v2 input[type="text"]:focus,
body.eb-has-topbar-v2 input[type="email"]:focus,
body.eb-has-topbar-v2 input[type="tel"]:focus,
body.eb-has-topbar-v2 input[type="number"]:focus,
body.eb-has-topbar-v2 input[type="password"]:focus,
body.eb-has-topbar-v2 input[type="url"]:focus,
body.eb-has-topbar-v2 input[type="search"]:focus,
body.eb-has-topbar-v2 input[type="date"]:focus,
body.eb-has-topbar-v2 input[type="time"]:focus,
body.eb-has-topbar-v2 textarea:focus,
body.eb-has-topbar-v2 select.form-control:focus,
body.eb-has-topbar-v2 select.form-select:focus {
  border-color: var(--eb-primary, #3b82f6) !important;
  box-shadow: var(--eb-shadow-focus) !important;
  outline: none !important;
}
body.eb-has-topbar-v2 .form-control::placeholder,
body.eb-has-topbar-v2 input::placeholder,
body.eb-has-topbar-v2 textarea::placeholder {
  color: var(--eb-text-muted, #94a3b8) !important;
  opacity: 1;
}
body.eb-has-topbar-v2 .form-label,
body.eb-has-topbar-v2 label:not(.btn):not(.form-check-label) {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--eb-text, #0f172a) !important;
  margin-bottom: 6px !important;
}
/* Libellés du widget adresse (Pays, Adresse, champs décomposés, Complément) :
   on les fait hériter de la couleur ambiante du formulaire au lieu de les forcer
   en --eb-text foncé, pour qu'ils soient uniformes avec les autres champs.
   Sélecteur volontairement plus spécifique que la règle ci-dessus + !important. */
body.eb-has-topbar-v2 label.eb-addr-label:not(.btn):not(.form-check-label) {
  color: inherit !important;
}
body.eb-has-topbar-v2 .form-text {
  font-size: 12px !important;
  color: var(--eb-text-secondary, #64748b) !important;
}
/* Validation — soft red halo instead of harsh Bootstrap red */
body.eb-has-topbar-v2 .form-control.is-invalid,
body.eb-has-topbar-v2 .is-invalid,
body.eb-has-topbar-v2 .form-control[style*="background-color: rgba(255"] {
  border-color: var(--eb-danger) !important;
  background-image: none !important;
  padding-right: 12px !important;
}
body.eb-has-topbar-v2 .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
body.eb-has-topbar-v2 .invalid-feedback,
body.eb-has-topbar-v2 .error-message {
  color: var(--eb-danger-hover) !important;
  font-size: 12px !important;
  margin-top: 4px;
}
/* Checkboxes & radios */
body.eb-has-topbar-v2 .form-check-input {
  border: 1.5px solid var(--eb-border, #e2e8f0) !important;
  border-radius: 4px !important;
  width: 16px;
  height: 16px;
}
body.eb-has-topbar-v2 .form-check-input:checked {
  background-color: var(--eb-primary, #3b82f6) !important;
  border-color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .form-check-input:focus {
  box-shadow: var(--eb-shadow-focus) !important;
  border-color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .form-check-label {
  font-size: 13px !important;
  color: var(--eb-text, #0f172a) !important;
  padding-left: 4px;
}
/* bootstrap-select widget */
body.eb-has-topbar-v2 .bootstrap-select > .dropdown-toggle {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text, #0f172a) !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .bootstrap-select.show > .dropdown-toggle,
body.eb-has-topbar-v2 .bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--eb-primary, #3b82f6) !important;
  box-shadow: var(--eb-shadow-focus) !important;
}

/* ------------------------------------------------------------------
   Largeur des selectpicker « nus » (produit-wide)
   bootstrap-select impose 220px par défaut (cf. bootstrap-select.css
   « .bootstrap-select:not([col-]):not([form-control]):not(.input-group-btn)
   { width:220px } ») — beaucoup trop large pour des libellés courts
   (« Par mois », « Juin », « 2026 », un nom d'équipe, « Toutes »…). On les
   fait tenir à leur contenu sélectionné, avec un min-width confortable au
   clic et un max-width + ellipsis pour qu'une valeur longue ne s'étire pas.
   PAS de !important : on reste sous les règles toolbar (#toolbar …, ID +
   !important) qui pilotent le plein écran mobile des filtres de table.
   Exclus : grilles (col-*), form-control (largeur gérée ailleurs), largeur
   explicite (data-width → inline style / .fit-width), input-group. */
body.eb-has-topbar-v2 .bootstrap-select:not([class*="col-"]):not(.form-control):not(.form-control-sm):not(.form-control-lg):not(.input-group-btn):not([style*="width"]):not(.fit-width) {
  width: auto;
  min-width: 104px;
  max-width: 240px;
}
body.eb-has-topbar-v2 .bootstrap-select:not([class*="col-"]):not(.form-control):not(.form-control-sm):not(.form-control-lg):not(.input-group-btn):not([style*="width"]):not(.fit-width) > .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu {
  border-radius: var(--eb-radius-md) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.12) !important;
  padding: 6px !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu .dropdown-item {
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu .dropdown-item:hover,
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu .dropdown-item.active {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-primary, #3b82f6) !important;
}

/* ===== P0.4 Nav tabs ===== */
body.eb-has-topbar-v2 .nav-tabs {
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  gap: 4px;
  padding: 0 8px;
}
body.eb-has-topbar-v2 .nav-tabs .nav-item {
  margin: 0 !important;
}
body.eb-has-topbar-v2 .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--eb-text-secondary, #64748b) !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  margin-bottom: -1px !important;
}
body.eb-has-topbar-v2 .nav-tabs .nav-link:hover {
  color: var(--eb-text, #0f172a) !important;
  background: transparent !important;
  border-bottom-color: var(--eb-border, #e2e8f0) !important;
}
body.eb-has-topbar-v2 .nav-tabs .nav-link.active {
  color: var(--eb-primary, #3b82f6) !important;
  background: transparent !important;
  border-bottom-color: var(--eb-primary, #3b82f6) !important;
  font-weight: 600 !important;
}
body.eb-has-topbar-v2 .nav-tabs .nav-link .badge {
  margin-left: 6px;
  font-size: 10px;
  padding: 2px 6px;
}

/* ===== P0.5 Alerts ===== */
body.eb-has-topbar-v2 .alert {
  border-radius: var(--eb-radius-md) !important;
  border: 1px solid transparent !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
body.eb-has-topbar-v2 .alert-primary,
body.eb-has-topbar-v2 .alert-info,
body.eb-has-topbar-v2 .alert-blue2 {
  background: rgba(59,130,246,0.10) !important;
  border-color: rgba(59,130,246,0.25) !important;
  color: #1e40af !important;
}
body.eb-has-topbar-v2 .alert-success,
body.eb-has-topbar-v2 .alert-green-apple {
  background: rgba(16,185,129,0.10) !important;
  border-color: rgba(16,185,129,0.25) !important;
  color: #065f46 !important;
}
body.eb-has-topbar-v2 .alert-warning,
body.eb-has-topbar-v2 .alert-orange {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.25) !important;
  color: #92400e !important;
}
body.eb-has-topbar-v2 .alert-danger,
body.eb-has-topbar-v2 .alert-red {
  background: rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.25) !important;
  color: #991b1b !important;
}
body.eb-has-topbar-v2 .alert-custom,
body.eb-has-topbar-v2 #alert-custom {
  background: rgba(245,158,11,0.10) !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
  border-radius: var(--eb-radius-md) !important;
  color: #92400e !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .alert i,
body.eb-has-topbar-v2 #alert-custom i {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}

/* ===== P1.1 Cards ===== */
body.eb-has-topbar-v2 .card {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04)) !important;
  background: var(--eb-surface, #ffffff) !important;
  overflow: hidden;
}
body.eb-has-topbar-v2 .card-header,
body.eb-has-topbar-v2 .card-header.graycard {
  background: var(--eb-surface, #ffffff) !important;
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .card-header .card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
  margin: 0 !important;
  flex: 1 !important;
  width: 100% !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Titre marqué .flex-grow-0 (write_card_header_block, branche avec bouton
   d'action) : on annule le flex:1/width:100% global pour que le titre se
   limite à son contenu et laisse le bouton sur la MÊME ligne, à droite,
   via le justify-content-between du header. Sans cette règle le titre
   occupe toute la largeur et relègue le bouton à la ligne suivante. */
/* Qualifié `.card-header.graycard` (spécificité 0,5,1) pour battre DEUX règles
   flex:1 de spécificité 0,4,1 — `.card-header .card-title` ET
   `.card.card-default .card-title` (chargée plus bas, gagnait au source-order
   et renvoyait le bouton d'action sous le titre sur mobile). */
body.eb-has-topbar-v2 .card-header.graycard .card-title.flex-grow-0 {
  flex: 0 0 auto !important;
  width: auto !important;
}
/* Tout bouton/groupe d'actions placé dans le .card-title est poussé à droite
   du header (alignement à droite systématique, plutôt que float-right qui
   échoue à l'intérieur d'un flex item). */
body.eb-has-topbar-v2 .card-header .card-title > .btn,
body.eb-has-topbar-v2 .card-header .card-title > button,
body.eb-has-topbar-v2 .card-header .card-title > .btn-group,
body.eb-has-topbar-v2 .card-header .card-title > .card-actions {
  margin-left: auto;
}

/* Swal d'info module : un seul scroll (celui de l'iframe). Sans ça le
   conteneur swal2 scrolle AUSSI → barre de scroll en double. */
.swal2-popup:has(.addon-info-iframe-wrap) .swal2-html-container,
.swal2-popup:has(.addon-info-iframe-wrap) .swal2-content {
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
}
.swal2-popup:has(.addon-info-iframe-wrap) {
    padding: 0 !important;
}
.addon-info-iframe-wrap {
    flex: 1 1 auto;
}

/* Placeholder "Page à venir" pour les modules dont la fiche WordPress
   n'existe pas encore — affiché à la place de l'iframe. */
.addon-info-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 48px 24px;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-radius: 8px;
}
.addon-info-coming-soon-icon {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 30px -8px rgba(79, 70, 229, .35);
}
.addon-info-coming-soon-icon i {
    font-size: 64px;
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.addon-info-coming-soon-icon::before,
.addon-info-coming-soon-icon::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px dashed rgba(79, 70, 229, .25);
}
.addon-info-coming-soon-icon::before {
    inset: -14px;
    animation: addon-info-spin 18s linear infinite;
}
.addon-info-coming-soon-icon::after {
    inset: -28px;
    border-color: rgba(37, 99, 235, .15);
    animation: addon-info-spin 26s linear infinite reverse;
}
@keyframes addon-info-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.addon-info-coming-soon-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px;
}
.addon-info-coming-soon-text {
    font-size: 16px;
    color: #475569;
    margin: 0 0 8px;
    max-width: 480px;
    line-height: 1.55;
}
.addon-info-coming-soon-text-small {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
    max-width: 480px;
    line-height: 1.55;
}

/* Swal message (mail_create en swalMode) : supprimer le double scroll
   (swal2-content ET .table-responsive scrollaient tous les deux) et
   compacter les boutons du sélecteur Type pour tenir sur une ligne. */
.swal2-popup .table-responsive {
    overflow: visible !important;
}
.swal2-popup #formulaire .row.mt-2,
.swal2-popup #formulaire > form .row {
    margin-top: 0 !important;
}
.swal2-popup #formulaire .btn-group,
.swal2-popup #formulaire .d-flex.flex-wrap.gap-2 {
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.swal2-popup #formulaire .label2.btn {
    white-space: nowrap;
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
/* Verrouille le scroll de la page quand une swal2 est ouverte : sinon
   l'utilisateur voit 2 barres de scroll (celle du contenu swal + celle
   de la page derrière). */
html:has(.swal2-container),
html:has(.swal2-popup) {
    overflow: hidden !important;
}
/* Le .swal2-container par défaut a overflow-y:auto ce qui affiche une
   2e barre de scroll collée au bord droit du viewport (en plus du scroll
   interne de .swal2-content). On passe le container en overflow:hidden
   pour ne garder que le scroll interne du contenu. */
.swal2-container {
    overflow: hidden !important;
}

/* Swal message : compacter le contenu pour qu'il tienne sans scroll interne
   (viewport >= 700px). Réduction des paddings autour du formulaire et du
   swal2-content + max-height du popup augmentée à 95vh. Au final, dans la
   majorité des cas, AUCUNE barre de scroll ne s'affiche — et si l'écran
   est vraiment court, une seule barre discrète reste dans swal2-content. */
/* Fix : les .card qui sont aussi des .col-sm-6 (ou autre col-*) sont
   collées entre elles dans une row.g-3 car .card { padding:0 } écrase
   --bs-gutter-x. On rétrécit la largeur via calc + ajoute margin-x pour
   créer un gap visible entre cards adjacentes. */
.row.g-3 > .card.col-sm-6,
.row.g-3 > .card[class*='col-'],
.row.g-2 > .card.col-sm-6,
.row.g-2 > .card[class*='col-'] {
    width: calc(50% - 12px) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
}

/* Fix global : l'animation swal2-show reste parfois figée à scale(0.7),
   ce qui rendait tout le popup à 70% de sa taille (notamment les swal
   manager Catégorie/Type/Hiérarchie ouverts depuis le paramétrage).
   On applique scale(1) post-animation à tous les popups. */
.swal2-popup,
.swal2-popup.swal2-show {
    transform: scale(1) !important;
    animation: none !important;
}
.swal2-popup:has(#formulaire) {
    max-height: 95vh !important;
}
.swal2-popup:has(#formulaire) .swal2-content {
    padding: 4px 16px 8px !important;
}
.swal2-popup:has(#formulaire) .swal2-title {
    padding: 12px 16px 8px !important;
}
/* Supprime l'espace inutile entre le titre swal et le label "Type" :
   la card-body interne avait un padding:18px générique (hérité du thème),
   plus un margin-bottom:16px sur la colonne, plus le padding-top du TD
   "Type" (6px). On compacte à 8px top, puisqu'en swalMode il n'y a ni
   card-header ni colonne de filtres à aérer. */
.swal2-popup:has(#formulaire) .card-body {
    padding: 0 !important;
    /* card-body héritait display:inline de .graycard, ce qui créait un
       line-box de ~15px avant le TABLE qui le suit (le TABLE étant block
       doit rompre la ligne inline). Forcer block retire ces 15px fantômes. */
    display: block !important;
}
.swal2-popup:has(#formulaire) .graycard {
    display: block !important;
}
.swal2-popup:has(#formulaire) .swal2-html-container {
    padding: 0 !important;
}
.swal2-popup:has(#formulaire) .table-responsive {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}
/* Marges négatives Bootstrap `.row` + padding interne `.col-*` : en mode
   page normale la grille nécessite ces valeurs, mais en swal ça dépasse
   la largeur du popup et crée un scroll horizontal. On neutralise. */
.swal2-popup:has(#formulaire) .card-body .row {
    margin: 0 !important;
}
.swal2-popup:has(#formulaire) .card-body .row > [class*="order-"],
.swal2-popup:has(#formulaire) .card-body .row > [class*="col-"] {
    padding: 0 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
}
.swal2-popup:has(#formulaire) #form_table td {
    padding: 4px 6px !important;
}

/* Masquage fiable de la ligne "Objet" en mode SMS ou Notification.
   Le JS changeTypeMessage() hide/show sur subjectrow est parfois contré
   par des callbacks AJAX (filterGroup, selectpicker refresh...). Un CSS
   conditionnel sur l'état :checked du radio mode est imparable. */
.swal2-popup #formulaire:has(#mode2:checked) #subjectrow,
.swal2-popup #formulaire:has(#mode3:checked) #subjectrow {
    display: none !important;
}

/* Scrollbar plus discrète dans la swal message si elle doit apparaître */
.swal2-popup:has(#formulaire) .swal2-content::-webkit-scrollbar {
    width: 6px;
}
.swal2-popup:has(#formulaire) .swal2-content::-webkit-scrollbar-track {
    background: transparent;
}
.swal2-popup:has(#formulaire) .swal2-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}
body.eb-has-topbar-v2 .card-body,
body.eb-has-topbar-v2 .card-body.graycard {
  background: var(--eb-surface, #ffffff) !important;
  padding: 18px !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .card-footer {
  background: var(--eb-surface, #ffffff) !important;
  border-top: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 12px 18px !important;
}

/* ===== P1.2 Buttons (global .btn-*) =====
   Only tweak the legacy default/light variants that look the most
   dated; primary/danger/success/warning are already overridden inside
   the band and action slot rules above. */
body.eb-has-topbar-v2 .btn {
  border-radius: var(--eb-radius-sm) !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}
body.eb-has-topbar-v2 .btn:focus {
  box-shadow: var(--eb-shadow-focus) !important;
}
body.eb-has-topbar-v2 .btn-default,
body.eb-has-topbar-v2 .btn-light {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .btn-default:hover,
body.eb-has-topbar-v2 .btn-light:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  border-color: var(--eb-border, #e2e8f0) !important;
}
body.eb-has-topbar-v2 .btn-outline-primary {
  border: 1px solid var(--eb-primary, #3b82f6) !important;
  color: var(--eb-primary, #3b82f6) !important;
  background: transparent !important;
}
body.eb-has-topbar-v2 .btn-outline-primary:hover {
  background: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
}

/* ===== P1.3 Badges & labels ===== */
body.eb-has-topbar-v2 .badge {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.01em;
}
body.eb-has-topbar-v2 .badge.bg-primary,
body.eb-has-topbar-v2 .badge.badge-primary {
  background: rgba(59,130,246,0.12) !important;
  color: #1e40af !important;
}
body.eb-has-topbar-v2 .badge.bg-success,
body.eb-has-topbar-v2 .badge.badge-success {
  background: rgba(16,185,129,0.12) !important;
  color: #065f46 !important;
}
body.eb-has-topbar-v2 .badge.bg-warning,
body.eb-has-topbar-v2 .badge.badge-warning {
  background: rgba(245,158,11,0.12) !important;
  color: #92400e !important;
}
body.eb-has-topbar-v2 .badge.bg-danger,
body.eb-has-topbar-v2 .badge.badge-danger {
  background: rgba(239,68,68,0.12) !important;
  color: #991b1b !important;
}
body.eb-has-topbar-v2 .badge.bg-secondary,
body.eb-has-topbar-v2 .badge.badge-secondary {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-text-secondary, #64748b) !important;
}
body.eb-has-topbar-v2 .badge.bg-info {
  background: rgba(6,182,212,0.12) !important;
  color: #155e75 !important;
}

/* ===== P1.4 Tables ===== */
body.eb-has-topbar-v2 .table {
  border-color: var(--eb-border, #e2e8f0) !important;
  color: var(--eb-text, #0f172a) !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .table thead th {
  background: #E2E8F0 !important;
  color: var(--eb-text-secondary, #64748b) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 12px 16px !important;
}
:root.dark body.eb-has-topbar-v2 .table thead th {
  background: #252525 !important;
  color: var(--eb-text-secondary) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
body.eb-has-topbar-v2 .table tbody td {
  border-top: 1px solid var(--eb-border, #e2e8f0) !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
}
:root.dark body.eb-has-topbar-v2 .table tbody td {
  background: var(--bkg-color59) !important;
  color: var(--txt-color3) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
body.eb-has-topbar-v2 .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(248,250,252,0.6) !important;
}
:root.dark body.eb-has-topbar-v2 .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.03) !important;
}
/* Zebra appliquée par compteur (lignes de détail repliables cachées qui
   fausseraient un nth-of-type, ex. cotisation_organisation). Même teinte
   que .table-striped pour rester homogène avec les autres tableaux. */
body.eb-has-topbar-v2 .table tbody tr.eb-row-stripe {
  background: rgba(248,250,252,0.6) !important;
}
:root.dark body.eb-has-topbar-v2 .table tbody tr.eb-row-stripe {
  background: rgba(255,255,255,0.03) !important;
}
body.eb-has-topbar-v2 .table tbody tr:hover {
  background: rgba(59,130,246,0.04) !important;
}
:root.dark body.eb-has-topbar-v2 .table tbody tr:hover {
  background: rgba(59,130,246,0.10) !important;
}
body.eb-has-topbar-v2 .table-bordered {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
}
body.eb-has-topbar-v2 .table-bordered th,
body.eb-has-topbar-v2 .table-bordered td {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
}

/* ===== P1.5 Datepicker popover + flatpickr ===== */
body.eb-has-topbar-v2 .datepicker.dropdown-menu,
body.eb-has-topbar-v2 .datepicker-dropdown {
  border-radius: var(--eb-radius) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: var(--eb-shadow-lg) !important;
  padding: 10px !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .datepicker table tr td.active,
body.eb-has-topbar-v2 .datepicker table tr td.active.highlighted,
body.eb-has-topbar-v2 .datepicker table tr td span.active {
  background: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
  border-radius: var(--eb-radius-sm) !important;
  text-shadow: none !important;
}
body.eb-has-topbar-v2 .datepicker table tr td.day:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  border-radius: var(--eb-radius-sm) !important;
}
body.eb-has-topbar-v2 .datepicker table tr td.today:not(.active) {
  background: rgba(59,130,246,0.12) !important;
  color: var(--eb-primary, #3b82f6) !important;
  border-radius: var(--eb-radius-sm) !important;
}
body.eb-has-topbar-v2 .flatpickr-calendar {
  border-radius: var(--eb-radius) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: var(--eb-shadow-lg) !important;
}
body.eb-has-topbar-v2 .flatpickr-day.selected,
body.eb-has-topbar-v2 .flatpickr-day.startRange,
body.eb-has-topbar-v2 .flatpickr-day.endRange {
  background: var(--eb-primary, #3b82f6) !important;
  border-color: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 .flatpickr-day.today {
  border-color: var(--eb-primary, #3b82f6) !important;
}

/* ===== P1.6 FullCalendar ===== */
body.eb-has-topbar-v2 .fc {
  font-family: inherit !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .fc .fc-toolbar-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .fc .fc-button,
body.eb-has-topbar-v2 .fc .fc-button-primary {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  color: var(--eb-text, #0f172a) !important;
  border-radius: var(--eb-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-transform: none !important;
}
body.eb-has-topbar-v2 .fc .fc-button:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-primary, #3b82f6) !important;
  border-color: var(--eb-border, #e2e8f0) !important;
}
body.eb-has-topbar-v2 .fc .fc-button-primary.fc-button-active,
body.eb-has-topbar-v2 .fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--eb-primary, #3b82f6) !important;
  border-color: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 .fc .fc-col-header-cell {
  background: var(--eb-bg, #f8fafc) !important;
}
body.eb-has-topbar-v2 .fc .fc-col-header-cell-cushion {
  color: var(--eb-text-secondary, #64748b) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 4px;
}
body.eb-has-topbar-v2 .fc .fc-daygrid-day.fc-day-today {
  background: rgba(59,130,246,0.05) !important;
}
body.eb-has-topbar-v2 .fc .fc-daygrid-day-number {
  color: var(--eb-text, #0f172a);
  font-size: 13px;
  padding: 6px 8px;
}
body.eb-has-topbar-v2 .fc .fc-event {
  border-radius: 6px !important;
  border: none !important;
  padding: 2px 6px;
  font-size: 12px !important;
  font-weight: 500;
}
body.eb-has-topbar-v2 .fc-theme-standard td,
body.eb-has-topbar-v2 .fc-theme-standard th {
  border-color: var(--eb-border, #e2e8f0) !important;
}

/* ===== P2.1 Login / auth screens =====
   login.php / change_password.php add body.eb-login-v2 OR use a
   centered form; style via the .login-form wrapper if present. */
body.eb-has-topbar-v2 .login-form,
body.eb-has-topbar-v2 .auth-card {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-lg) !important;
  box-shadow: 0 20px 50px rgba(15,23,42,0.15) !important;
  padding: 36px !important;
  max-width: 420px;
  margin: 48px auto;
}

/* ===== P2.2 File upload zones (dropzone + native inputs) ===== */
body.eb-has-topbar-v2 .dropzone,
body.eb-has-topbar-v2 .dz-default,
body.eb-has-topbar-v2 .upload-zone {
  border: 2px dashed var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius) !important;
  background: var(--eb-bg, #f8fafc) !important;
  padding: 32px 24px !important;
  text-align: center;
  color: var(--eb-text-secondary, #64748b);
  transition: border-color 0.15s ease, background 0.15s ease !important;
}
body.eb-has-topbar-v2 .dropzone:hover,
body.eb-has-topbar-v2 .dropzone.dz-drag-hover {
  border-color: var(--eb-primary, #3b82f6) !important;
  background: rgba(59,130,246,0.04) !important;
}
body.eb-has-topbar-v2 input[type="file"] {
  padding: 6px 0 !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 input[type="file"]::file-selector-button {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text, #0f172a) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-right: 12px;
  cursor: pointer;
}
body.eb-has-topbar-v2 input[type="file"]::file-selector-button:hover {
  background: var(--eb-bg, #f1f5f9) !important;
}

/* ===== P2.3 Tooltips & popovers ===== */
body.eb-has-topbar-v2 .tooltip.show {
  opacity: 1 !important;
}
body.eb-has-topbar-v2 .tooltip-inner {
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.20) !important;
}
body.eb-has-topbar-v2 .bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before,
body.eb-has-topbar-v2 .bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #0f172a !important;
}
body.eb-has-topbar-v2 .popover {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-md) !important;
  box-shadow: var(--eb-shadow-lg) !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .popover-header {
  background: var(--eb-surface, #ffffff) !important;
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .popover-body {
  padding: 12px 14px !important;
  color: var(--eb-text, #0f172a) !important;
}

/* ===== Bootstrap-table : zéro scroll horizontal =====
   Répète les règles clés de bootstrap-table-overrides.css avec le sélecteur
   body.eb-has-topbar-v2 pour battre d'éventuels overrides du dashboard. */
body.eb-has-topbar-v2 .fixed-table-header,
body.eb-has-topbar-v2 .fixed-table-body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
/* table-layout: fixed élimine le scroll horizontal. Texte tronqué avec ellipsis.
   Colonnes utilitaires et bouton reçoivent des largeurs fixes. */
body.eb-has-topbar-v2 .fixed-table-header > table,
body.eb-has-topbar-v2 .fixed-table-body > table,
body.eb-has-topbar-v2 .fixed-table-body table.table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
body.eb-has-topbar-v2 .fixed-table-body td,
body.eb-has-topbar-v2 .fixed-table-body th {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* #10418 — Colonnes Fonction / Equipe : padding gauche réduit (16px→4px) pour
   coller le crayon d'édition au bord et rendre le maximum de place au libellé. */
body.eb-has-topbar-v2 .bootstrap-table td[data-field="fonction"],
body.eb-has-topbar-v2 .bootstrap-table td[data-field="equipe"],
body.eb-has-topbar-v2 .bootstrap-table th[data-field="fonction"],
body.eb-has-topbar-v2 .bootstrap-table th[data-field="equipe"] {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
/* Largeurs fixes pour colonnes utilitaires compactes */
body.eb-has-topbar-v2 .fixed-table-body th[data-field="checkbox"]   { width: 38px !important; }
body.eb-has-topbar-v2 .fixed-table-body th[data-field="photo"]      { width: 70px !important; }
body.eb-has-topbar-v2 .fixed-table-body th[data-field="grade"]      { width: 50px !important; }
body.eb-has-topbar-v2 .fixed-table-body th[data-field="distinction"] { width: 70px !important; }
/* Couvre aussi les checkbox bootstrap-table (data-checkbox="true") qui
   n'ont pas data-field="checkbox" — la classe .bs-checkbox est ajoutée
   par le plugin sur th + td et permet une largeur stable. */
body.eb-has-topbar-v2 .fixed-table-body th.bs-checkbox,
body.eb-has-topbar-v2 .fixed-table-body td.bs-checkbox { width: 44px !important; }
/* Colonne checkbox : pas de truncation (widget interactif).
   Inclut th[data-field="state"] (alias bootstrap-table pour data-checkbox)
   et th:first-child pour couvrir tous les cas où la colonne checkbox est
   en première position sans data-field explicite. Hauteur minimale pour
   éviter que la case (16px) soit coupée verticalement par un parent à
   line-height/padding réduit (table-sm). */
body.eb-has-topbar-v2 .fixed-table-body th[data-field="checkbox"],
body.eb-has-topbar-v2 .fixed-table-body th[data-field="state"],
body.eb-has-topbar-v2 .fixed-table-body th.bs-checkbox,
body.eb-has-topbar-v2 .fixed-table-body td.bs-checkbox,
body.eb-has-topbar-v2 .fixed-table-body th:first-child,
body.eb-has-topbar-v2 .fixed-table-body td:first-child {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  vertical-align: middle !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1 !important;
}
/* Bootstrap-table emballe le contenu de chaque <th> dans <div class="th-inner">
   et <div class="fht-cell"> qui héritent overflow:hidden + line-height court
   → la case à cocher (16px) est tronquée à mi-hauteur. On rend ces wrappers
   visibles et on leur donne assez d'espace vertical pour la checkbox. */
body.eb-has-topbar-v2 .fixed-table-body th .th-inner,
body.eb-has-topbar-v2 .fixed-table-body th .fht-cell {
  overflow: visible !important;
  min-height: 20px;
  line-height: 1.2 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.eb-has-topbar-v2 .fixed-table-body th input[type="checkbox"],
body.eb-has-topbar-v2 .fixed-table-body td input[type="checkbox"] {
  vertical-align: middle;
  margin: 0;
}
/* Colonnes drag/drop (fa-bars) : icône < largeur cellule mais
   text-overflow:ellipsis du parent ajoute "..." parasites à droite de
   l'icône quand la cellule a du padding > 0. On désactive l'ellipsis
   pour ces colonnes utilitaires. Couvre tous les data-field utilisés
   pour le drag handle dans l'app. */
body.eb-has-topbar-v2 .fixed-table-body th[data-field="move"],
body.eb-has-topbar-v2 .fixed-table-body td[data-field="move"],
body.eb-has-topbar-v2 .fixed-table-body th[data-field="daragDrop"],
body.eb-has-topbar-v2 .fixed-table-body td[data-field="daragDrop"],
body.eb-has-topbar-v2 .fixed-table-body th[data-field="dragDropIcon"],
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragDropIcon"],
body.eb-has-topbar-v2 .fixed-table-body th[data-field="dragIcon"],
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragIcon"],
body.eb-has-topbar-v2 .fixed-table-body td:has(> #dragDropIcon),
body.eb-has-topbar-v2 .fixed-table-body td:has(> .fa-bars[id="dragDropIcon"]) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
/* Curseur "main qui empoigne" sur l'icône drag/drop (signaler que la
   ligne est déplaçable au survol). Couvre l'icône isolée + son td hôte
   pour que le hover marche partout dans la cellule. */
#dragDropIcon,
i#dragDropIcon,
body.eb-has-topbar-v2 #dragDropIcon,
body.eb-has-topbar-v2 .fixed-table-body td:has(> #dragDropIcon),
body.eb-has-topbar-v2 .fixed-table-body td[data-field="move"],
body.eb-has-topbar-v2 .fixed-table-body td[data-field="daragDrop"],
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragDropIcon"],
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragIcon"] {
  cursor: grab;
}
body.eb-has-topbar-v2 .fixed-table-body td[data-field="move"] .fa-bars ~ .fa-bars,
body.eb-has-topbar-v2 .fixed-table-body td[data-field="daragDrop"] .fa-bars ~ .fa-bars,
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragDropIcon"] .fa-bars ~ .fa-bars,
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragIcon"] .fa-bars ~ .fa-bars,
body.eb-has-topbar-v2 .fixed-table-body td[data-field="move"] .eb-drag-handle ~ .eb-drag-handle,
body.eb-has-topbar-v2 .fixed-table-body td[data-field="daragDrop"] .eb-drag-handle ~ .eb-drag-handle,
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragDropIcon"] .eb-drag-handle ~ .eb-drag-handle,
body.eb-has-topbar-v2 .fixed-table-body td[data-field="dragIcon"] .eb-drag-handle ~ .eb-drag-handle {
  display: none !important;
}
#dragDropIcon:active,
body.eb-has-topbar-v2 #dragDropIcon:active,
body.eb-has-topbar-v2 .fixed-table-body td:has(> #dragDropIcon):active {
  cursor: grabbing;
}
/* Colonne bouton : largeur pilotée par le style scopé de BootstrapTablePerso. */
body.eb-has-topbar-v2 .fixed-table-body th.eb-col-button,
body.eb-has-topbar-v2 .fixed-table-body td.eb-col-button {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}
/* overflow:visible sur .fixed-table-container laisserait les tables déborder —
   on le bloque ici pour garantir que le conteneur agit comme clip. */
body.eb-has-topbar-v2 .fixed-table-container {
  overflow: hidden;
}
/* Scrollbar fine sur le body de table (webkit + firefox). */
body.eb-has-topbar-v2 .fixed-table-body {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
body.eb-has-topbar-v2 .fixed-table-body::-webkit-scrollbar {
  height: 10px;
}
body.eb-has-topbar-v2 .fixed-table-body::-webkit-scrollbar-track {
  background: transparent;
}
body.eb-has-topbar-v2 .fixed-table-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.eb-has-topbar-v2 .fixed-table-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  background-clip: padding-box;
  border: 2px solid transparent;
}
/* Generic fallback for any <table.table> not wrapped by bootstrap-table
   (the legacy detail pages build their own scroll wrappers or inline
   tables). Same pattern: min-width on the table, overflow on the
   nearest .table-responsive wrapper. */
body.eb-has-topbar-v2 .table-responsive {
  overflow-x: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
body.eb-has-topbar-v2 .table-responsive > table:not(.widget-table) {
  min-width: max-content;
}
/* Les tableaux de widget (tableau de bord) doivent tenir dans leur colonne
   et passer à la ligne, jamais défiler horizontalement : on annule le
   min-width:max-content générique pour eux (ex. widget « Statistique » dont
   la colonne titre + lieu débordait et forçait un scroll horizontal). */
body.eb-has-topbar-v2 .table-responsive > table.widget-table {
  min-width: 0;
  width: 100%;
}
body.eb-has-topbar-v2 .table-responsive::-webkit-scrollbar {
  height: 10px;
}
body.eb-has-topbar-v2 .table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* ===== P2.4 Dropdowns (generic) =====
   IMPORTANT: bootstrap-select uses a nested structure where the
   *outer* .dropdown-menu is the popover but *inside* it wraps a
   second .dropdown-menu.inner that must stay position:static and
   must not get padding/border-radius from our override — otherwise
   the inner layer ends up at (0,0) with position:fixed (because it
   gets our absolute fallback) and the whole popover renders invisibly
   at viewport origin. Exclude both .bootstrap-select descendants
   and the .inner helper class from every generic rule below. */
body.eb-has-topbar-v2 .dropdown-menu:not(.inner):not(.bootstrap-select .dropdown-menu):not(.bootstrap-select .dropdown-menu *) {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-md) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.12) !important;
  padding: 6px !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .dropdown-menu:not(.inner) > .dropdown-item,
body.eb-has-topbar-v2 .dropdown-menu:not(.inner) > li > .dropdown-item {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  color: var(--eb-text, #0f172a) !important;
}
body.eb-has-topbar-v2 .dropdown-menu:not(.inner) > .dropdown-item:hover,
body.eb-has-topbar-v2 .dropdown-menu:not(.inner) > .dropdown-item:focus,
body.eb-has-topbar-v2 .dropdown-menu:not(.inner) > li > .dropdown-item:hover,
body.eb-has-topbar-v2 .dropdown-menu:not(.inner) > li > .dropdown-item:focus {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .dropdown-divider {
  border-top: 1px solid var(--eb-border, #e2e8f0) !important;
  margin: 6px 0 !important;
}

/* ===== Bootstrap-select popover styling =====
   Scope everything under .bootstrap-select so we don't touch the
   internal .dropdown-menu.inner helper layer. */
body.eb-has-topbar-v2 .bootstrap-select > .dropdown-menu {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-md) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.12) !important;
  padding: 6px !important;
  font-size: 13px !important;
  overflow: hidden;
}
body.eb-has-topbar-v2 .bootstrap-select > .dropdown-menu > .inner {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,0.45) transparent;
}
body.eb-has-topbar-v2 .bootstrap-select > .dropdown-menu > .inner::-webkit-scrollbar {
  width: 8px;
}
body.eb-has-topbar-v2 .bootstrap-select > .dropdown-menu > .inner::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.45);
  border-radius: 8px;
}
body.eb-has-topbar-v2 .bootstrap-select > .dropdown-menu .dropdown-menu.inner {
  /* Let the ul flow naturally; bootstrap-select scrolls the parent div.inner. */
  position: static !important;
  float: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  max-height: none !important;
}
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu .dropdown-item,
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu li a {
  border-radius: 6px !important;
  padding: 3px 12px !important;
  color: var(--eb-text, #0f172a) !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu .dropdown-item:hover,
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu li a:hover,
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu li a:focus,
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu .dropdown-item.active,
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu li.active a {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .bootstrap-select .bs-searchbox {
  padding: 6px 8px 4px !important;
}
body.eb-has-topbar-v2 .bootstrap-select .bs-searchbox input {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .bootstrap-select .no-results {
  padding: 10px 14px !important;
  color: var(--eb-text-secondary, #64748b) !important;
  background: transparent !important;
  font-style: normal !important;
}

/* ===== Flatpickr datepicker + timepicker polish ===== */
body.eb-has-topbar-v2 .flatpickr-calendar {
  border-radius: var(--eb-radius) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: var(--eb-shadow-lg) !important;
  background: var(--eb-surface, #ffffff) !important;
  font-family: inherit !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .flatpickr-months,
body.eb-has-topbar-v2 .flatpickr-innerContainer,
body.eb-has-topbar-v2 .flatpickr-weekdays,
body.eb-has-topbar-v2 .flatpickr-weekday {
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text-secondary, #64748b) !important;
  font-weight: 600 !important;
}
body.eb-has-topbar-v2 .flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #0f172a) !important;
  padding-top: 6px !important;
}
body.eb-has-topbar-v2 .flatpickr-current-month .cur-month,
body.eb-has-topbar-v2 .flatpickr-current-month input.cur-year {
  color: var(--eb-text, #0f172a) !important;
  font-weight: 600 !important;
}
body.eb-has-topbar-v2 .flatpickr-prev-month,
body.eb-has-topbar-v2 .flatpickr-next-month {
  color: var(--eb-text-secondary, #64748b) !important;
  fill: var(--eb-text-secondary, #64748b) !important;
  padding: 10px !important;
}
body.eb-has-topbar-v2 .flatpickr-prev-month:hover,
body.eb-has-topbar-v2 .flatpickr-next-month:hover {
  color: var(--eb-primary, #3b82f6) !important;
  fill: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .flatpickr-day {
  border-radius: var(--eb-radius-sm) !important;
  color: var(--eb-text, #0f172a) !important;
  /* Pas de max-width custom : flatpickr dimensionne le jour (~39px) en accord
     avec la largeur fixe du .dayContainer (307.875px). Une valeur inférieure
     à 307.875/8 (38.48px) laissait 8 jours passer par ligne au lieu de 7. */
  height: 34px;
  line-height: 34px;
}
/* main.css force .dayContainer { justify-content: flex-start } : les jours
   (39px) se tassent à gauche au lieu d'être centrés dans leur colonne (~44px),
   désalignés des libellés lun…dim. On rétablit le space-around natif de
   flatpickr qui centre chaque jour sous son en-tête de jour de semaine. */
body.eb-has-topbar-v2 .dayContainer {
  justify-content: space-around !important;
}
body.eb-has-topbar-v2 .flatpickr-day:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  border-color: transparent !important;
}
body.eb-has-topbar-v2 .flatpickr-day.selected,
body.eb-has-topbar-v2 .flatpickr-day.startRange,
body.eb-has-topbar-v2 .flatpickr-day.endRange,
body.eb-has-topbar-v2 .flatpickr-day.selected:hover {
  background: var(--eb-primary, #3b82f6) !important;
  border-color: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
}
body.eb-has-topbar-v2 .flatpickr-day.today:not(.selected) {
  border-color: var(--eb-primary, #3b82f6) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .flatpickr-day.inRange,
body.eb-has-topbar-v2 .flatpickr-day.prevMonthDay.inRange,
body.eb-has-topbar-v2 .flatpickr-day.nextMonthDay.inRange {
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(59, 130, 246, 0.20) !important;
  color: var(--eb-primary, #3b82f6) !important;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .flatpickr-day.flatpickr-disabled,
body.eb-has-topbar-v2 .flatpickr-day.prevMonthDay,
body.eb-has-topbar-v2 .flatpickr-day.nextMonthDay {
  color: var(--eb-text-muted, #94a3b8) !important;
}

/* Time picker (flatpickr time-only + hour/minute inputs) */
body.eb-has-topbar-v2 .flatpickr-time {
  border-top: 1px solid var(--eb-border, #e2e8f0) !important;
  background: var(--eb-surface, #ffffff) !important;
  border-radius: 0 0 12px 12px !important;
  height: 44px !important;
}
body.eb-has-topbar-v2 .flatpickr-time input,
body.eb-has-topbar-v2 .flatpickr-time .flatpickr-time-separator,
body.eb-has-topbar-v2 .flatpickr-time .flatpickr-am-pm {
  color: var(--eb-text, #0f172a) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: transparent !important;
}
body.eb-has-topbar-v2 .flatpickr-time input:hover,
body.eb-has-topbar-v2 .flatpickr-time input:focus,
body.eb-has-topbar-v2 .flatpickr-time .flatpickr-am-pm:hover,
body.eb-has-topbar-v2 .flatpickr-time .flatpickr-am-pm:focus {
  background: var(--eb-bg, #f1f5f9) !important;
}
body.eb-has-topbar-v2 .flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--eb-primary, #3b82f6) !important;
}

/* Legacy bootstrap-datepicker popover (still used in activity swal) */
body.eb-has-topbar-v2 .datepicker.dropdown-menu {
  padding: 10px !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .datepicker table {
  border-collapse: separate !important;
  border-spacing: 2px !important;
}
body.eb-has-topbar-v2 .datepicker table tr td,
body.eb-has-topbar-v2 .datepicker table tr th {
  border-radius: var(--eb-radius-sm) !important;
  width: 34px;
  height: 34px;
  color: var(--eb-text, #0f172a) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body.eb-has-topbar-v2 .datepicker table tr td.day:hover,
body.eb-has-topbar-v2 .datepicker table tr td span:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .datepicker table tr td.active.day,
body.eb-has-topbar-v2 .datepicker table tr td.active.day:hover,
body.eb-has-topbar-v2 .datepicker table tr td span.active {
  background: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}
body.eb-has-topbar-v2 .datepicker table tr td.today:not(.active) {
  background: rgba(59, 130, 246, 0.10) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .datepicker table tr td.old,
body.eb-has-topbar-v2 .datepicker table tr td.new {
  color: var(--eb-text-muted, #94a3b8) !important;
}
body.eb-has-topbar-v2 .datepicker-switch,
body.eb-has-topbar-v2 .datepicker .prev,
body.eb-has-topbar-v2 .datepicker .next {
  color: var(--eb-text, #0f172a) !important;
  font-weight: 600 !important;
  border-radius: var(--eb-radius-sm) !important;
}
body.eb-has-topbar-v2 .datepicker-switch:hover,
body.eb-has-topbar-v2 .datepicker .prev:hover,
body.eb-has-topbar-v2 .datepicker .next:hover {
  background: var(--eb-bg, #f1f5f9) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .datepicker .datepicker-days thead tr:last-child th {
  color: var(--eb-text-secondary, #64748b) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* BUG: vues mois / année / décennie. Ces vues placent leurs 12 libellés
   dans un unique <td colspan="7">. La règle générique td/th { width:34px }
   ci-dessus écrase ce conteneur ET .datepicker-switch { width:145px } de la
   lib, ce qui réduit la grille : les span (width:23%) ne font plus ~25px et
   les libellés se chevauchent (janv/févr…, 2019/2020…). On redonne sa
   largeur au conteneur + à l'en-tête et on dimensionne les cellules. */
body.eb-has-topbar-v2 .datepicker-months .datepicker-switch,
body.eb-has-topbar-v2 .datepicker-years .datepicker-switch,
body.eb-has-topbar-v2 .datepicker-decades .datepicker-switch,
body.eb-has-topbar-v2 .datepicker-centuries .datepicker-switch {
  width: auto !important;
}
body.eb-has-topbar-v2 .datepicker-months table tr td,
body.eb-has-topbar-v2 .datepicker-years table tr td,
body.eb-has-topbar-v2 .datepicker-decades table tr td,
body.eb-has-topbar-v2 .datepicker-centuries table tr td {
  width: 224px !important;
  height: auto !important;
}
body.eb-has-topbar-v2 .datepicker-months table tr td span,
body.eb-has-topbar-v2 .datepicker-years table tr td span,
body.eb-has-topbar-v2 .datepicker-decades table tr td span,
body.eb-has-topbar-v2 .datepicker-centuries table tr td span {
  width: 48px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 3px !important;
}

/* ===== Top-of-page spacing =====
   Many legacy pages (module_page.php, documents, gmaps, …) drop their
   first card directly under #space-left which only gets padding-top:
   52px from the V2 topbar rule. Visually the card feels glued to the
   topbar. Add a little breathing room wherever the first child of
   #space-left is a full-width card / row / stepper container. */
body.eb-has-topbar-v2 #space-left > .row:first-of-type,
body.eb-has-topbar-v2 #space-left > .container:first-of-type,
body.eb-has-topbar-v2 #space-left > .container-fluid:first-of-type,
body.eb-has-topbar-v2 #space-left > form:first-of-type,
body.eb-has-topbar-v2 .space-left > .row:first-of-type,
body.eb-has-topbar-v2 .space-left > .container:first-of-type,
body.eb-has-topbar-v2 .space-left > .container-fluid:first-of-type {
  margin-top: 16px;
}
/* Cards lazily appended to #space-left also need a top gap */
body.eb-has-topbar-v2 #space-left > .card:first-of-type {
  margin-top: 20px !important;
}

/* ===== Modern stepper (import page & onboarding flows) =====
   Legacy markup: .stepper.stepper-pills.stepper-column > .stepper-nav
     > .stepper-item > .stepper-icon > .stepper-number
   Default look was flat blue square icons. Modernize to match the V2
   card language: circle icons with soft primary tint, bigger gap,
   dashed connector line in primary color, bold titles. */
body.eb-has-topbar-v2 .stepper.stepper-pills.stepper-column .stepper-nav {
  gap: 14px;
}
body.eb-has-topbar-v2 .stepper.stepper-pills.stepper-column .stepper-item {
  padding-bottom: 18px !important;
}
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: var(--eb-primary, #3b82f6) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
  margin-right: 18px !important;
}
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-icon .stepper-number {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-item.current .stepper-icon,
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-item.pending .stepper-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--eb-primary, #3b82f6) !important;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-item.current .stepper-number,
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-item.pending .stepper-number {
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-label .stepper-title {
  color: var(--eb-text, #0f172a) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin-bottom: 2px !important;
}
body.eb-has-topbar-v2 .stepper.stepper-pills .stepper-label .stepper-desc {
  color: var(--eb-text-secondary, #64748b) !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 .stepper.stepper-pills.stepper-column .stepper-line {
  border-left: 2px dashed rgba(59, 130, 246, 0.30) !important;
  width: 44px;
}

/* ===== Gmaps personnel — left column card row polish =====
   Legacy markup is a series of .personnel-card / .cartographie-item
   divs stacked in a scrollable column. Give them the modern card
   chrome (radius, border, sm shadow, hover lift), tighter spacing. */
body.eb-has-topbar-v2 #div_gmaps_personnel .cartographie-personnel,
body.eb-has-topbar-v2 #div_gmaps_personnel .personnel-card,
body.eb-has-topbar-v2 #div_gmaps_personnel .eb-gmaps-card,
body.eb-has-topbar-v2 .gmaps-personnel-list > div,
body.eb-has-topbar-v2 #div_gmaps_personnel > div > div {
  background: var(--eb-surface, #ffffff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius-md);
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(15,23,42,0.04));
  padding: 12px;
  margin-bottom: 10px;
  transition: all 0.15s ease;
}
body.eb-has-topbar-v2 #div_gmaps_personnel .cartographie-personnel:hover,
body.eb-has-topbar-v2 #div_gmaps_personnel .personnel-card:hover,
body.eb-has-topbar-v2 .gmaps-personnel-list > div:hover {
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(15,23,42,0.08));
  transform: translateY(-1px);
}

/* ================================================================
   #9730 — Notification activité (toast Swal3)
   Remplace l'ancien bandeau fixé en haut (#9695/#9730). Affiché via
   toast() de sweetalert2_tools.js quand une activité à laquelle
   l'utilisateur est inscrit démarre dans l'heure ou est en cours.
   ================================================================ */
.eb-activity-toast {
  text-align: left;
  line-height: 1.35;
  min-width: 240px;
}
.eb-activity-toast__head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--eb-primary, #2563EB);
  margin-bottom: 4px;
}
.eb-activity-toast__title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
  word-break: break-word;
}
.eb-activity-toast__meta {
  font-size: 12px;
  color: #475569;
  margin-top: 2px;
}
.eb-activity-toast__meta i {
  width: 14px;
  margin-right: 4px;
  opacity: 0.8;
}
.eb-activity-toast__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.eb-activity-toast__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  min-height: 36px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}
.eb-activity-toast__btn:hover,
.eb-activity-toast__btn:focus {
  transform: translateY(-1px);
  text-decoration: none !important;
}
.eb-activity-toast__btn--primary {
  background: var(--eb-primary, #2563EB);
  color: #ffffff !important;
}
.eb-activity-toast__btn--primary:hover,
.eb-activity-toast__btn--primary:focus {
  background: #1d4ed8;
}
.eb-activity-toast__btn--ghost {
  background: #f1f5f9;
  color: #0f172a !important;
  border: 1px solid #e2e8f0;
}
.eb-activity-toast__btn--ghost:hover,
.eb-activity-toast__btn--ghost:focus {
  background: #e2e8f0;
}
:root.dark .eb-activity-toast__title { color: #f1f5f9; }
:root.dark .eb-activity-toast__meta { color: #cbd5e1; }
:root.dark .eb-activity-toast__btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.14);
}
:root.dark .eb-activity-toast__btn--ghost:hover,
:root.dark .eb-activity-toast__btn--ghost:focus {
  background: rgba(255,255,255,0.16);
}
@media print {
  .swal3-container { display: none !important; }
}

/* ================================================================
   CHAT PAGE — Modern UI (#9716)
   ================================================================ */
/* La hauteur du chat dépend de TOUT ce qui est au-dessus de lui dans .space-left :
   topbar v2, fil d'Ariane, et un éventuel bandeau (imitation, alerte…). Coder en
   dur `calc(100dvh - 64px)` laissait l'input sous la ligne de flottaison dès que
   l'offset réel dépassait 64px (cas desktop avec bandeau → ~87px). On contraint
   plutôt le parent à la hauteur du viewport et on laisse le chat remplir sa boîte
   de contenu : l'offset (= padding-top du parent) est alors pris en compte
   automatiquement, quelle que soit sa valeur. Le :has() ne cible que la page chat
   (seul endroit où .eb-chat-layout existe). */
.space-left:has(> .eb-chat-layout) {
  height: 100dvh;
  overflow: hidden;
}
.eb-chat-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  /* Une seule rangée bornée à la hauteur du conteneur. Sans `minmax(0, 1fr)` la
     rangée implicite vaut `auto` et grandit avec le contenu (tous les messages) :
     la zone de saisie est alors poussée hors de la grille et clippée par
     `overflow:hidden`, et la liste de messages ne scrolle jamais. */
  grid-template-rows: minmax(0, 1fr);
  /* Remplit la boîte de contenu de .space-left (= viewport - padding-top du
     parent). Fallback dvh pour les rares moteurs sans :has(). */
  height: calc(100dvh - 64px);
  height: 100%;
  background: var(--eb-bg);
  border-radius: var(--eb-radius);
  overflow: hidden;
}
.eb-chat-layout.eb-chat-layout--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}
.eb-chat-layout.eb-chat-layout--no-sidebar .eb-chat-toggle-sidebar {
  display: none !important;
}
/* Sidebar */
.eb-chat-sidebar {
  background: var(--eb-surface);
  border-right: 1px solid var(--eb-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.eb-chat-sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--eb-border);
}
.eb-chat-sidebar-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--eb-text);
}
.eb-chat-online-badge {
  background: var(--eb-success-light);
  color: var(--eb-success);
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}
.eb-chat-search {
  position: relative;
}
body.eb-has-topbar-v2 .eb-chat-layout .eb-chat-sidebar .eb-chat-search input,
.eb-chat-search input {
  width: 100%;
  padding: 10px 14px 10px 38px !important;
  background: var(--eb-surface-hover) !important;
  border: 1px solid var(--eb-border) !important;
  border-radius: var(--eb-radius) !important;
  color: var(--eb-text) !important;
  font-size: 0.875rem !important;
  outline: none;
  transition: border-color 0.2s;
}
.eb-chat-search input:focus { border-color: var(--eb-primary); }
.eb-chat-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--eb-text-muted);
  font-size: 0.85rem;
}
.eb-chat-user-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--eb-scrollbar) transparent;
}
.eb-chat-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--eb-radius);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none !important;
  color: inherit !important;
  position: relative;
}
.eb-chat-user-item:hover { background: var(--eb-surface-hover); }
.eb-chat-user-avatar {
  /* 56px = plancher réel de ebNormalizeAvatarSize() : renderPersonnelAvatar()
     pose un style inline width/height qui gagne toujours sur ce conteneur,
     donc ce dernier doit matcher exactement pour éviter tout débordement
     (cercle qui déborde du cadre, pastille "en ligne" désalignée). */
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
}
.eb-chat-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.eb-chat-user-avatar .eb-chat-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--eb-success);
  border: 2px solid var(--eb-surface);
}
/* Membre d'un groupe hors-ligne : avatar atténué, pas de pastille verte. */
.eb-chat-user-offline .eb-chat-user-avatar { opacity: 0.55; }
.eb-chat-user-info { flex: 1; min-width: 0; }
.eb-chat-user-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--eb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-chat-user-section {
  font-size: 0.75rem;
  color: var(--eb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-chat-user-actions {
  /* position:absolute : sort ces icônes (email/whatsapp, visibles au survol
     seulement) du flux flex — sinon elles réservaient leur largeur en
     permanence (même invisibles), grignotant l'espace dispo pour le nom/
     l'organisation et forçant une troncature plus agressive que nécessaire. */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.eb-chat-user-item:hover .eb-chat-user-actions { opacity: 1; pointer-events: auto; }
.eb-chat-user-actions a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--eb-radius-sm);
  color: var(--eb-text-secondary);
  text-decoration: none !important;
  transition: all 0.15s;
  font-size: 0.85rem;
}
.eb-chat-user-actions a:hover { background: var(--eb-surface); color: var(--eb-primary); }
/* Main chat area */
.eb-chat-main {
  display: flex;
  flex-direction: column;
  background: var(--eb-bg);
  min-width: 0;
  /* Indispensable : sans `min-height:0`, ce flex/grid-item refuse de descendre
     sous la hauteur de son contenu, donc `.eb-chat-messages` ne scrolle pas et
     la zone de saisie déborde sous l'écran. */
  min-height: 0;
}
.eb-chat-header {
  padding: 16px 24px 0;
  background: var(--eb-surface);
  display: flex;
  flex-direction: column;
}
.eb-chat-header h3 {
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--eb-text);
}
.eb-chat-messages {
  flex: 1;
  overflow-y: auto;
  /* Sans cette ligne, overflow-x vaut `visible` en CSS, mais la règle « si un
     axe est visible et l'autre non, visible devient auto » le transforme en
     `auto` : la liste devient alors un conteneur scrollable HORIZONTALEMENT.
     Le moindre contenu trop large (sur iOS, le contrôle <audio> natif ignore
     max-width et garde une largeur min intrinsèque) crée un scroll horizontal
     interdit. On le coupe explicitement : ce qui déborde est clippé, jamais
     scrollé. */
  overflow-x: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--eb-scrollbar) transparent;
}
/* Message groups */
.eb-msg-group {
  display: flex;
  gap: 10px;
  max-width: 70%;
  margin-bottom: 16px;
}
.eb-msg-group.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.eb-msg-avatar {
  /* 56px : même plancher réel que .eb-chat-user-avatar (ebNormalizeAvatarSize).
     L'avatar JS de l'écho optimiste (buildMsgAvatar, sans style inline) doit
     matcher la même taille que l'avatar serveur, sinon le sien "rapetissit"
     dès que l'historique recharge la conversation. */
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  object-fit: cover;
  align-self: flex-end;
}
.eb-msg-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eb-msg-group.sent .eb-msg-content { align-items: flex-end; }
.eb-msg-meta {
  font-size: 0.7rem;
  color: var(--eb-text-muted);
  padding: 0 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.eb-msg-author { font-weight: 600; color: var(--eb-text-secondary); }
.eb-msg-bubble {
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.45;
  position: relative;
  word-break: break-word;
}
.eb-msg-group:not(.sent) .eb-msg-bubble {
  background: var(--eb-surface);
  border: 1px solid var(--eb-border);
  border-bottom-left-radius: 6px;
  color: var(--eb-text);
}
.eb-msg-group.sent .eb-msg-bubble {
  background: var(--eb-primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.eb-msg-time {
  font-size: 0.65rem;
  opacity: 0.5;
  margin-top: 4px;
  text-align: right;
}
.eb-msg-delete {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--eb-danger);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px;
  opacity: 0.6;
}
.eb-msg-group:not(.sent) .eb-msg-delete { right: -24px; }
.eb-msg-group.sent .eb-msg-delete { left: -24px; }
.eb-msg-bubble:hover .eb-msg-delete { display: block; }
.eb-msg-delete:hover { opacity: 1; }
.eb-msg-date-sep {
  text-align: center;
  margin: 20px 0;
  position: relative;
}
.eb-msg-date-sep span {
  background: var(--eb-bg);
  padding: 0 16px;
  font-size: 0.75rem;
  color: var(--eb-text-muted);
  position: relative;
  z-index: 1;
}
.eb-msg-date-sep::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: var(--eb-border);
}
/* Input zone */
.eb-chat-input-zone {
  padding: 16px 24px;
  border-top: 1px solid var(--eb-border);
  background: var(--eb-surface);
  flex-shrink: 0;
}
.eb-chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--eb-surface-hover);
  border: 1px solid var(--eb-border);
  border-radius: 28px;
  padding: 6px 8px 6px 20px;
  transition: border-color 0.2s;
}
.eb-chat-input-wrap:focus-within { border-color: var(--eb-primary); }
.eb-chat-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--eb-text);
  font-size: 0.9rem;
  outline: none;
  padding: 8px 0;
}
.eb-chat-input-wrap input::placeholder { color: var(--eb-text-muted); }
.eb-chat-send-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--eb-primary);
  border: none;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  font-size: 1rem;
}
.eb-chat-send-btn:hover { transform: scale(1.05); background: var(--eb-primary-hover); }
/* Mobile */
@media (max-width: 768px) {
  .eb-chat-layout { grid-template-columns: 1fr; }
  .eb-chat-sidebar { display: none; }
  .eb-chat-sidebar.mobile-open { display: flex; position: fixed; inset: 0; z-index: 100; width: 100%; }
  .eb-msg-group { max-width: 85%; }
  .eb-chat-header .eb-chat-toggle-sidebar { display: inline-flex; }
}
.eb-chat-toggle-sidebar {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--eb-radius-sm);
  border: 1px solid var(--eb-border);
  background: var(--eb-surface-hover);
  color: var(--eb-text-secondary);
  place-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}
.eb-chat-toggle-sidebar:hover { color: var(--eb-primary); }

/* ===== Emoji picker ===== */
.eb-chat-emoji-btn {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: var(--eb-radius-md);
  background: transparent;
  border: none;
  color: var(--eb-text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all 0.2s ease;
}
.eb-chat-emoji-btn:hover {
  color: var(--eb-primary);
  background: rgba(var(--eb-primary-rgb, 59,130,246), 0.08);
}
.eb-emoji-picker {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: var(--eb-surface, #fff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  padding: 12px;
  margin-bottom: 8px;
  z-index: 50;
}
.eb-emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
}
.eb-emoji-item {
  font-size: 1.4rem;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--eb-radius-sm);
  transition: background 0.12s;
  line-height: 1;
}
.eb-emoji-item:hover {
  background: var(--eb-bg, #f1f5f9);
  transform: scale(1.15);
}

/* ===== @mention autocomplete ===== */
.eb-chat-input-zone { position: relative; }
.eb-mention-dropdown {
  display: none;
  position: absolute; bottom: 100%; left: 16px; right: 16px;
  background: var(--eb-surface, #fff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  margin-bottom: 4px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 60;
}
.eb-mention-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--eb-text);
  transition: background 0.12s;
}
.eb-mention-item:first-child { border-radius: 12px 12px 0 0; }
.eb-mention-item:last-child { border-radius: 0 0 12px 12px; }
.eb-mention-item:only-child { border-radius: var(--eb-radius); }
.eb-mention-item:hover,
.eb-mention-item.active {
  background: var(--eb-bg, #f1f5f9);
}
.eb-mention-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
/* ===== Chat channel tabs ===== */
.eb-chat-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--eb-border);
}
/* Hide header-top border when channel tabs are visible (they have their own border) */
.eb-chat-header:has(.eb-chat-channels[style*="flex"]) .eb-chat-header-top {
  border-bottom: none;
  padding-bottom: 8px;
}
.eb-chat-channels {
  display: none;
  gap: 0;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
  /* Scroll horizontal réactif (molette + drag JS, tactile natif) */
  overscroll-behavior-x: contain;
}
/* Barre de défilement fine et discrète (visible sur desktop, cachée sur mobile) */
.eb-chat-channels::-webkit-scrollbar { height: 4px; }
.eb-chat-channels::-webkit-scrollbar-track { background: transparent; }
.eb-chat-channels::-webkit-scrollbar-thumb {
  background: var(--eb-border, #cbd5e1);
  border-radius: 2px;
}
.eb-chat-channels:hover::-webkit-scrollbar-thumb {
  background: var(--eb-text-muted, #94a3b8);
}
.eb-chat-channels.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.eb-channel-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--eb-text-secondary, #64748b);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  /* Ne jamais se comprimer : la barre déborde et devient scrollable */
  flex: 0 0 auto;
}
.eb-channel-sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 8px;
  background: var(--eb-border, #e2e8f0);
}
.eb-channel-tab:hover {
  color: var(--eb-text);
  background: transparent;
}
.eb-channel-tab.active {
  color: var(--eb-primary, #3b82f6);
  border-bottom-color: var(--eb-primary, #3b82f6);
  font-weight: 600;
  background: transparent;
}
.eb-channel-tab.active:hover {
  background: transparent;
}
.eb-channel-tab i {
  font-size: 0.7rem;
}

/* ===== GIF picker ===== */
.eb-chat-gif-btn {
  height: 36px; min-width: 36px;
  border-radius: var(--eb-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--eb-text-muted, #94a3b8);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
  padding: 0 8px;
}
.eb-chat-gif-btn:hover {
  color: var(--eb-primary);
  background: rgba(var(--eb-primary-rgb, 59,130,246), 0.08);
}
.eb-gif-picker {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: var(--eb-surface, #fff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  margin-bottom: 8px;
  z-index: 55;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.eb-gif-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
}
.eb-gif-search-wrap i { color: var(--eb-text-muted); font-size: 0.85rem; }
.eb-gif-search-wrap input {
  flex: 1; border: none; outline: none;
  font-size: 0.85rem; background: transparent;
  color: var(--eb-text);
}
.eb-gif-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  align-content: flex-start;
}
.eb-gif-item {
  height: 100px;
  flex: 1 1 auto;
  min-width: 80px;
  max-width: 180px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.12s, opacity 0.12s;
}
.eb-gif-item:hover {
  transform: scale(1.03);
  opacity: 0.85;
}
.eb-gif-powered {
  text-align: center;
  font-size: 0.7rem;
  color: var(--eb-text-muted);
  padding: 4px;
  border-top: 1px solid var(--eb-border, #e2e8f0);
}

/* ===== File upload — attach button ===== */
.eb-chat-attach-btn {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: var(--eb-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--eb-text-muted, #94a3b8);
  font-size: 1.05rem;
  transition: all 0.2s ease;
}
.eb-chat-attach-btn:hover {
  color: var(--eb-primary);
  background: rgba(var(--eb-primary-rgb, 59,130,246), 0.08);
}

/* ===== File preview bar ===== */
.eb-chat-file-preview {
  display: flex;
  padding: 8px 16px;
  background: var(--eb-bg, #f1f5f9);
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
  border-radius: 12px 12px 0 0;
}
.eb-chat-file-preview-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--eb-surface, #fff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius-sm);
  padding: 8px 12px;
  max-width: 100%;
  min-width: 0;
}
.eb-chat-file-preview-inner img {
  max-height: 48px;
  max-width: 80px;
  border-radius: 4px;
  object-fit: cover;
}
.eb-chat-file-preview-inner i {
  font-size: 1.5rem;
  color: var(--eb-primary, #3b82f6);
}
.eb-chat-file-preview-inner span {
  font-size: 0.85rem;
  color: var(--eb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.eb-chat-file-remove {
  background: none; border: none; cursor: pointer;
  color: var(--eb-text-muted, #94a3b8);
  font-size: 0.9rem;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.eb-chat-file-remove:hover {
  color: var(--eb-danger, #ef4444);
  background: rgba(239,68,68,0.1);
}

/* ===== File attachment in message bubble ===== */
.eb-msg-file {
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--eb-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eb-msg-file a {
  color: var(--eb-primary, #3b82f6);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.eb-msg-file a:hover { text-decoration: underline; }
.eb-msg-file i { font-size: 1.2rem; }
.eb-msg-file-img {
  margin-top: 6px;
}
.eb-msg-file-img img {
  max-width: min(280px, 100%);
  max-height: 200px;
  height: auto;
  border-radius: var(--eb-radius-sm);
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.15s;
}
.eb-msg-file-img img:hover {
  transform: scale(1.02);
}

/* ===== Drag & drop overlay ===== */
.eb-chat-messages.eb-drag-over {
  background: rgba(59, 130, 246, 0.05);
  outline: 2px dashed var(--eb-primary, #3b82f6);
  outline-offset: -4px;
}

/* @mention highlight in messages */
.eb-mention {
  background: rgba(59, 130, 246, 0.12);
  color: var(--eb-primary, #3b82f6);
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
}

/* FORUM — styles déplacés dans modules/forum/css/main.css (chargé par le module) */

/* ===== Configuration page modernization (#9725) ===== */
/* Restyle .newTableAll on configuration pages to match card-based mockup */
body.eb-has-topbar-v2 .newTableAll {
  border-radius: var(--eb-radius-lg, 16px);
  border: 1px solid var(--eb-border, #2d3140);
  overflow: hidden;
}
body.eb-has-topbar-v2 .eb-cfg-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--eb-text-secondary, #94a3b8);
  border-bottom: 1px solid var(--eb-border, #2d3140);
  padding: 12px 20px;
}
body.eb-has-topbar-v2 .eb-cfg-section-title td {
  padding: 12px 20px;
}
body.eb-has-topbar-v2 .newTableAll tr:not(:first-child):last-child {
  border-bottom: none;
}
body.eb-has-topbar-v2 .newTableAll:not(.newTableAllFeatures) tr:not(:first-child):hover {
  background: var(--bkg-color142, rgba(0,0,0,0.02));
}
/* Fonctionnalité tab: no row hover — toggles only */
body.eb-has-topbar-v2 .newTableAllFeatures tr:not(:first-child):hover {
  background: transparent !important;
  cursor: default;
}
/* Category section headers on Fonctionnalité tab */
body.eb-has-topbar-v2 .subTitleFonctionnalite {
  background: var(--eb-bg, #f8fafc) !important;
  color: var(--eb-text-secondary, #64748b) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 10px 20px !important;
  text-align: left !important;
  border-top: 1px solid var(--eb-border, #e2e8f0);
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
}
body.eb-has-topbar-v2 .subTitleFonctionnalite:hover {
  background: var(--eb-bg, #f8fafc) !important;
}
body.eb-has-topbar-v2 .subTitleFonctionnalite i {
  margin-right: 6px;
  opacity: 0.6;
}
body.eb-has-topbar-v2 .newTableAll tr:not(:first-child) td {
  padding: 12px 20px;
  vertical-align: middle;
}
body.eb-has-topbar-v2 .eb-cfg-pl30 {
  padding-left: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}
/* Slider/toggle switch modernization
   Styles factorisés dans main.css (.switchconfig / .slider.config) pour que
   tous les toggles de l'app aient la même géométrie (44x24, rond 18px,
   translateX(20), fond var(--eb-primary)), sans override par page. */

/* ===== Comptabilité dashboard modernization (#9718) ===== */
/* Chart cards in the compta module — rounded, subtle shadow, proper spacing */
body.eb-has-topbar-v2 .chart_medium {
  min-width: 280px;
  flex: 1 1 280px;
}
body.eb-has-topbar-v2 .chart_large {
  min-width: 400px;
  min-height: 300px;
  flex: 2 1 400px;
}
/* write_card() output: .card.card-default.graycarddefault */
body.eb-has-topbar-v2 .card.card-default {
  border-radius: var(--eb-radius-lg, 16px);
  border: 1px solid var(--eb-border, #e2e8f0);
  box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.eb-has-topbar-v2 .card.card-default:hover {
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
}
body.eb-has-topbar-v2 .card.card-default .card-header.graycard {
  background: var(--eb-surface, #ffffff);
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
  padding: 14px 20px;
}
body.eb-has-topbar-v2 .card.card-default .card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--eb-text-primary, #1e293b);
  margin: 0;
  flex: 1 !important;
  width: 100% !important;
}
body.eb-has-topbar-v2 .card.card-default .card-body.graycard {
  background: var(--eb-surface, #ffffff);
  padding: 16px;
}
/* Compta toolbar — compact filter bar */
body.eb-has-topbar-v2 .toolbar {
  background: var(--eb-surface, #ffffff);
  border-radius: var(--eb-radius-lg, 16px);
  border: 1px solid var(--eb-border, #e2e8f0);
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* ===== Don dashboard modernization (#9719) ===== */
/* Stat cards on the donation listing — already use .stats-container-new
   which is modernized above. Additional refinements: */
body.eb-has-topbar-v2 [data-w-function="don"] .card.card-default {
  border-radius: var(--eb-radius-lg, 16px);
}

/* ===== CRM modernization (#9720) ===== */
/* CRM config cards in upd_section — same card treatment */
/* ===== Addons page modernization (#9724) ===== */
body.eb-has-topbar-v2 .addons-module-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0;
}
body.eb-has-topbar-v2 .addons-module-grid > .addon-card {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.eb-has-topbar-v2 .addon-card {
  border-radius: var(--eb-radius-lg, 16px) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.06)) !important;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.eb-has-topbar-v2 .addon-card:hover {
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(0,0,0,0.1)) !important;
  transform: translateY(-2px);
}
body.eb-has-topbar-v2 .addon-card .addon-card-media {
  border-radius: var(--eb-radius-lg, 16px) var(--eb-radius-lg, 16px) 0 0;
  overflow: hidden;
  aspect-ratio: 16/10;
}
body.eb-has-topbar-v2 .addon-card .addon-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.eb-has-topbar-v2 .addon-card .description {
  padding: 14px 16px !important;
}
body.eb-has-topbar-v2 .addon-card .description h1 {
  font-size: 0.95rem !important;
  font-weight: 600;
  margin: 6px 0 4px;
  line-height: 1.3;
}
body.eb-has-topbar-v2 .addon-badge {
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
  line-height: 1.5;
}
body.eb-has-topbar-v2 .addon-badge--free {
  background: rgba(34,197,94,0.12);
  color: #16a34a;
}
body.eb-has-topbar-v2 .addon-badge--installed {
  background: rgba(37,99,235,0.1);
  color: var(--eb-primary, #3b82f6);
}
body.eb-has-topbar-v2 .addon-card-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--eb-border, #e2e8f0);
}
body.eb-has-topbar-v2 .addon-card-actions-row .version-module {
  font-size: 0.72rem;
  color: var(--eb-text-muted);
}
/* Search bar modernization */
body.eb-has-topbar-v2 .moduleSearchBar-pill {
  border-radius: 20px !important;
  padding: 8px 18px !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  font-size: 0.85rem;
  width: 280px;
  max-width: 100%;
}
body.eb-has-topbar-v2 .moduleSearchBar-pill:focus {
  border-color: var(--eb-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
}
body.eb-has-topbar-v2 .row-module-search {
  display: flex !important;
  justify-content: flex-end;
  padding-bottom: 8px !important;
}
@media (max-width: 640px) {
  body.eb-has-topbar-v2 .addons-module-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Filter toolbar layout fix ===== */
/* display_toolbar() adds Bootstrap d-flex on .filter-area. Allow wrapping
   so filters can flow to the next line when there isn't enough space. */
body.eb-has-topbar-v2 .filter-area {
  flex-wrap: wrap !important;
  gap: 6px 0;
}
/* #9813 — Les .filterAreaDiv contiennent un mix de contrôles de hauteurs
   différentes : dropdowns ~35px vs labels bootstrap (.btn display:block)
   ~54px. Sans align-items explicite, les items courts se retrouvent calés
   en haut et les longs étirent le conteneur → effet visuel de label
   « Anomalie » trop haut par rapport aux dropdowns. On centre tout. */
body.eb-has-topbar-v2 .filter-area .filterAreaDiv {
  align-items: center !important;
}
body.eb-has-topbar-v2 .filter-area,
body.eb-has-topbar-v2 .filter-area-2,
body.eb-has-topbar-v2 .filter-area .filterAreaDiv,
body.eb-has-topbar-v2 .filter-area-2 .filterAreaDiv,
body.eb-has-topbar-v2 .bootstrap-select,
body.eb-has-topbar-v2 .dropdown.bootstrap-select,
body.eb-has-topbar-v2 #toolbar .bootstrap-select {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* #9813 — Alignement vertical de la toolbar bootstrap-table (filtres à gauche,
   bouton Colonnes + champ Recherche à droite). Causes cumulées :
   - .form-group enveloppe les dropdowns avec margin-bottom:16px (défaut Bootstrap)
     → .filterAreaDiv parent étiré de 38→54px et décalé.
   - #toolbar (dans .bs-bars) a padding:8px 0.
   - .search et .columns conservent margin-top/bottom:10px de bootstrap-table.min.css.
   Correctif global : forcer align-items:center sur toute la chaîne et neutraliser
   les marges/paddings verticaux parasites sur les sous-blocs. */
body.eb-has-topbar-v2 .fixed-table-toolbar {
  align-items: center !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar #toolbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar .filter-area {
  align-items: center !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar .filter-area .filterAreaDiv {
  align-items: center !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar .filter-area .form-group {
  margin-bottom: 0 !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar > .search,
body.eb-has-topbar-v2 .fixed-table-toolbar > .columns {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Export page: each filterAreaDiv should be on its own line (section/export,
   template, dates are separate logical rows with 3-5 items total). */
body.eb-has-topbar-v2 .eb-export-page .filter-area > .filterAreaDiv {
  flex: 0 0 100%;
  max-width: 100%;
}
/* When Bootstrap Table moves #toolbar into .bs-bars, put filters + search
   + columns on ONE row. The toolbar uses flex with bs-bars taking available
   space and search/columns staying at the end. */
body.eb-has-topbar-v2 .fixed-table-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 8px;
}
body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars {
  float: none !important;
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
  margin: 0 !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars #toolbar {
  margin: 0;
}
body.eb-has-topbar-v2 .fixed-table-toolbar > .search {
  float: none !important;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Pousse la recherche + les boutons d'action (.float-right d'origine)
     contre le bord droit de la toolbar — sans cette auto-margin, .bs-bars
     (flex 1 1 auto) ne grandit pas systématiquement et il reste un trou
     visible entre la carte et le bouton (+Véhicule, +Personnel, etc.). */
  margin-left: auto !important;
}
body.eb-has-topbar-v2 .fixed-table-toolbar > .search .search-input,
body.eb-has-topbar-v2 .fixed-table-toolbar > .search .form-control {
  min-width: 0;
  max-width: 100% !important;
  box-sizing: border-box;
}
body.eb-has-topbar-v2 .fixed-table-toolbar > .columns {
  float: none !important;
  flex: 0 0 auto;
}
body.eb-has-topbar-v2 .eb-audit-table .fixed-table-toolbar {
  gap: 10px !important;
}
body.eb-has-topbar-v2 .eb-audit-table .fixed-table-toolbar > .search {
  margin-left: 0 !important;
}
body.eb-has-topbar-v2 .eb-audit-table .fixed-table-toolbar > .columns {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body.eb-has-topbar-v2 .eb-audit-table .fixed-table-toolbar > .columns > .btn,
body.eb-has-topbar-v2 .eb-audit-table .fixed-table-toolbar > .columns > .btn-group,
body.eb-has-topbar-v2 .eb-audit-table .fixed-table-toolbar > .columns > .keep-open {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto;
}
/* Annule le padding-right de la toolbar pour aligner les boutons d'action
   avec le bord droit du card parent (la card .graycarddefault au-dessus
   utilise les mêmes 16px de marge horizontale, donc les bords coïncident). */
body.eb-has-topbar-v2 .fixed-table-toolbar {
  padding-right: 0 !important;
}
/* Neutralise le pseudo `::after` (clear:both fantôme du clearfix bootstrap-
   table) qui, dans la toolbar `display:flex; gap:8px`, devient un 4ème flex
   item de largeur 0 mais ajoute un gap de 8px après `.search` — ce qui
   décale le bouton d'action de 8px par rapport au bord droit du card.
   Une règle équivalente existait déjà en mobile (≤576px), on l'étend en
   desktop. */
body.eb-has-topbar-v2 .fixed-table-toolbar::after {
  display: none !important;
}
/* Espacement entre boutons d'action regroupés (toolbar bootstrap-table,
   toolbars de tabs activité, bandeaux d'action en haut de carte). Le
   `gap-1` Bootstrap (4px) rend les boutons visuellement collés ; on
   passe à 8px pour respirer un peu. */
body.eb-has-topbar-v2 .eb-buttons-container {
  gap: 8px !important;
}

/* ============================================================
   Drag & drop — onglet Équipe (child=4) et Affectation (child=3)
   Indicateur "Retirer de l'équipe" + zone de drop apparaissant
   pendant le drag d'un véhicule/pompier déjà affecté.
   ============================================================ */
.eb-drag-hint {
  display: none;
  font-size: 0.8rem;
  text-align: center;
  margin: 6px 0;
  color: var(--bs-warning, #f0ad4e);
}
.eb-drag-zone {
  display: none;
  margin: 6px auto;
  width: fit-content;
  border: 3px dashed var(--bs-warning, #f0ad4e);
  padding: 16px;
  border-radius: 0.25rem;
  color: var(--bs-warning, #f0ad4e);
}
.eb-drag-zone i { color: inherit; }
/* Variante "grand format" utilisée sur l'onglet Affectation (child=3)
   où l'icône user-minus est en `fa-6x`. */
.eb-drag-zone--lg {
  margin: 10px auto;
  padding: 8px;
  position: relative;
  height: auto;
}
/* Highlight de la carte Véhicule pendant un drag de véhicule affecté */
#containerVehicules.drop-target-active > #myVehicule > div {
  outline: 2px dashed var(--bs-warning, #f0ad4e);
  outline-offset: -2px;
  transition: outline-color 0.15s ease;
}
/* Hover état actif (jQuery UI) sur la carte Véhicule */
#containerVehicules.ui-state-active > #myVehicule > div,
#myVehicule.ui-state-active > div {
  background: rgba(240, 173, 78, 0.08) !important;
}
/* Personnel/Liste (et pages similaires) : la toolbar est imbriquée dans
   .tab-buttons-container > .container-fluid.p-0 > .container-fluid.col-12.
   Le `.col-12` interne ajoute 15px de padding gauche/droite alors que sur
   les autres pages le `.col-12` est à la racine de .tab-buttons-container
   (donc compensé par les negative margins du grid). On neutralise le
   padding horizontal du .col-12 imbriqué pour aligner le bord droit du
   toolbar (et donc des boutons d'action) avec celui de la card parent. */
body.eb-has-topbar-v2 .tab-buttons-container > .container-fluid.p-0 > .container-fluid.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Pages top-level (qualifications, astreintes, …) : la toolbar est wrappée
   dans `.container-fluid.col-12` directement enfant d'un FORM (lui-même
   enfant d'un `.container-fluid` ou `.div-decal-left`). Le `.col-12`
   ajoute 15px de padding gauche/droite alors que la structure parente
   ne propage pas de negative margin → la toolbar est inset de 15px par
   rapport aux cards stat.
   On neutralise UNIQUEMENT pour ce pattern précis (FORM > col-12), pour
   ne pas casser `personnel.php` qui imbrique un wrapper supplémentaire
   `.container-fluid.pr-0` autour du `.col-12`. */
body.eb-has-topbar-v2 form > .container-fluid.col-12:has(> .bootstrap-table) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* personnel.php : la toolbar est dans
   `.container-fluid.pr-0` (padding-left: 12px) > `.container-fluid.col-12`
   (padding-left: 15px par défaut). Total = 27px d'inset à gauche, alors
   que les cards `.stats-container-diviser` n'ont que 16px d'inset.
   Réduit le padding-left du `.col-12` interne à 4px → total 12+4=16px,
   bord gauche du toolbar et de la search aligné avec celui des cards. */
body.eb-has-topbar-v2 .container-fluid.pr-0 > .container-fluid.col-12:has(> .bootstrap-table) {
  padding-left: 4px !important;
}

/* duree_de_travail.php: la page peut commencer directement par les stats
   sous la topbar V2. On rétablit un vrai souffle au-dessus du premier
   groupe de stats sans impacter les autres écrans. */
body.eb-has-topbar-v2 .eb-horaires-stats {
  margin-top: 16px !important;
}

/* upd_personnel > duree de travail: harmonisation visuelle de l'onglet
   embarqué pour l'aligner avec la grammaire V2 eBrigade. */
body.eb-has-topbar-v2 .eb-horaires-embed {
  padding-top: 8px;
}

body.eb-has-topbar-v2 .eb-horaires-subtabs-wrap {
  background: transparent !important;
  border: 0 !important;
  margin-bottom: 12px;
  overflow: visible !important;
}

body.eb-has-topbar-v2 .eb-horaires-subtabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px !important;
  margin: 0 !important;
  width: auto !important;
  background: rgba(53, 99, 233, 0.08);
  border: 1px solid rgba(53, 99, 233, 0.12) !important;
  border-radius: 14px;
  border-bottom: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.eb-has-topbar-v2 .eb-horaires-subtabs .nav-item {
  margin-right: 0 !important;
  padding-top: 0 !important;
}

body.eb-has-topbar-v2 .eb-horaires-subtabs .nav-link {
  border: 0 !important;
  background: transparent !important;
  color: #5b6478 !important;
  min-height: 36px;
  padding: 8px 14px !important;
  font-weight: 600;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.eb-has-topbar-v2 .eb-horaires-subtabs .nav-link:hover,
body.eb-has-topbar-v2 .eb-horaires-subtabs .nav-link:focus {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--text-main) !important;
}

body.eb-has-topbar-v2 .eb-horaires-subtabs .nav-link.active {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  color: #3563e9 !important;
  box-shadow: 0 8px 18px rgba(53, 99, 233, 0.16) !important;
  transform: translateY(-1px);
}

body.eb-has-topbar-v2 .eb-horaires-period-shell {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Planning de travail : la card prend toute la place sous le toolbar */
body.eb-has-topbar-v2 .eb-horaires-planning-col {
  width: 100%;
}
body.eb-has-topbar-v2 .eb-horaires-planning-card {
  height: auto !important;
  margin: 0 0 8px 0 !important;
  width: 100%;
  display: flex;
  flex-direction: column;
}
body.eb-has-topbar-v2 .eb-horaires-planning-body {
  padding: 8px !important;
  overflow: hidden;
}
body.eb-has-topbar-v2 .eb-horaires-planning-body > #visualization {
  width: 100%;
}

body.eb-has-topbar-v2 .eb-horaires-period-toolbar {
  float: none !important;
  margin-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.eb-has-topbar-v2 .eb-horaires-period-toolbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

body.eb-has-topbar-v2 .eb-horaires-embed .bootstrap-select > .dropdown-toggle,
body.eb-has-topbar-v2 .eb-horaires-embed select.theme,
body.eb-has-topbar-v2 .eb-horaires-embed .eb-horaires-period-toolbar-form select {
  min-height: 40px;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: #fff !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

body.eb-has-topbar-v2 .eb-horaires-top-actions {
  margin-left: auto;
  flex-shrink: 0;
}

body.eb-has-topbar-v2 .eb-horaires-period-toolbar-form > trad,
body.eb-has-topbar-v2 .eb-horaires-period-toolbar-form > span {
  font-weight: 600;
  color: var(--text-main);
}

body.eb-has-topbar-v2 .eb-horaires-pointage-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.eb-has-topbar-v2 .eb-horaires-pointage-card,
body.eb-has-topbar-v2 .eb-horaires-embed .card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

body.eb-has-topbar-v2 .eb-horaires-pointage-card .card-header,
body.eb-has-topbar-v2 .eb-horaires-embed .card .card-header {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

body.eb-has-topbar-v2 .eb-horaires-pointage-meta {
  row-gap: 8px;
  column-gap: 12px !important;
}

body.eb-has-topbar-v2 .eb-horaires-pointage-meta .labeled-message {
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 6px 12px;
}

body.eb-has-topbar-v2 .eb-horaires-pointage-meta .badge {
  background: rgba(53, 99, 233, 0.12);
  color: #2445a6;
  border: 1px solid rgba(53, 99, 233, 0.16);
}

body.eb-has-topbar-v2 .eb-horaires-pointage-meta #statut {
  min-width: 180px;
  border-radius: 10px !important;
}

body.eb-has-topbar-v2 .eb-horaires-sheet {
  border-collapse: separate;
  border-spacing: 0;
}

body.eb-has-topbar-v2 .eb-horaires-sheet th {
  background: #f8fafc;
  color: var(--text-main);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-weight: 700;
}

body.eb-has-topbar-v2 .eb-horaires-sheet th,
body.eb-has-topbar-v2 .eb-horaires-sheet td {
  border-color: rgba(148, 163, 184, 0.14) !important;
}

body.eb-has-topbar-v2 .eb-horaires-row td {
  background: #fff;
  transition: background-color .15s ease;
}

body.eb-has-topbar-v2 .eb-horaires-row:hover td {
  background: rgba(248, 250, 252, 0.92);
}

body.eb-has-topbar-v2 .eb-horaires-row-weekend td {
  background: rgba(248, 250, 252, 0.88);
}

body.eb-has-topbar-v2 .eb-horaires-row-holiday td {
  background: rgba(255, 247, 237, 0.92);
}

body.eb-has-topbar-v2 .eb-horaires-sheet .form-control {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #fff;
  box-shadow: none;
}

body.eb-has-topbar-v2 .eb-horaires-sheet .form-control:focus {
  border-color: rgba(53, 99, 233, 0.35);
  box-shadow: 0 0 0 4px rgba(53, 99, 233, 0.08);
}

body.eb-has-topbar-v2 .eb-horaires-total-input {
  background: rgba(248, 250, 252, 0.92) !important;
  color: var(--text-main);
}

body.eb-has-topbar-v2 .eb-horaires-total-input-weekend {
  background: rgba(241, 245, 249, 0.95) !important;
}

body.eb-has-topbar-v2 .eb-horaires-total-input-holiday {
  background: rgba(255, 237, 213, 0.92) !important;
}

body.eb-has-topbar-v2 .eb-horaires-embed .btn-action,
body.eb-has-topbar-v2 .eb-horaires-embed .write-buttons-band .btn {
  border-radius: 10px;
}

body.eb-has-topbar-v2 .eb-horaires-embed .fa-trash {
  color: #ef4444 !important;
}

@media (max-width: 991px) {
  body.eb-has-topbar-v2 .eb-horaires-subtabs {
    width: auto !important;
    max-width: 100%;
    padding: 4px !important;
  }

  body.eb-has-topbar-v2 .eb-horaires-period-toolbar {
    padding: 10px;
  }

  body.eb-has-topbar-v2 .eb-horaires-pointage-meta {
    justify-content: flex-start !important;
  }

  body.eb-has-topbar-v2 .eb-horaires-subtabs .nav-link {
    min-height: 34px;
    padding: 7px 12px !important;
  }
}

/* Default desktop padding for evenement_choice table wrapper */
.eb-choice-table-wrap.container-fluid { padding: 15px 10px; }

/* Mobile — Affiner icon + view toggles + search on single row, all 40px tall */
@media (max-width: 991px) {
  /* Reduce space-left top padding (topbar is only 48px on mobile, not 52) */
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left,
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) .space-left {
    padding-top: 48px !important;
  }
  /* Reduce container-fluid top padding on mobile */
  body.eb-has-topbar-v2 #space-left .container-fluid {
    padding-top: 4px !important;
  }
  /* evenement_choice_stats table wrapper — tight on mobile */
  body .eb-choice-table-wrap.container-fluid {
    padding: 4px 10px 15px !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    row-gap: 6px !important;
    padding: 4px 0 4px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 30 !important;
    overflow: visible !important;
  }
  /* Remove ::after pseudo flex item (clear:both) — adds a phantom 6px gap */
  body.eb-has-topbar-v2 .fixed-table-toolbar::after { display: none !important; }
  /* Par défaut sur mobile, .bs-bars (qui contient #toolbar) prend toute la
     largeur d'une ligne du toolbar : ça permet à n'importe quel contenu
     de toolbar (filtres directs, multilang_editor avec 2 selects + hint,
     etc.) d'être lisible sans débordement vertical chaotique. */
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
  }
  /* bs-bars vide (page sans display_toolbar, ex. Mission > Type) : masquer
     pour ne pas gaspiller une ligne à gauche de la barre de recherche. */
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:empty,
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(*)) {
    display: none !important;
  }
  /* Cas Affiner (icône bouton 40x40) : on garde le format compact d'origine. */
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:has(.affiner-btn) {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  /* Correctif #10167 : quand .filter-area est AUSSI présent dans .bs-bars,
     redonner la pleine largeur pour que les <select> filtres s'affichent
     correctement (sinon clampés à 40px par la règle ci-dessus). */
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:has(.affiner-btn):has(.filter-area) {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:has(.affiner-btn):has(.filter-area) #toolbar {
    width: 100% !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:has(.affiner-btn):has(.filter-area) .filter-area {
    width: 100% !important;
  }
  /* Toolbar interne pleine largeur quand bs-bars prend une ligne entière. */
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(.affiner-btn)) #toolbar,
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:has(.filter-area-2) .filter-area-2,
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:has(.filter-area-2) .filterAreaDiv {
    width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
  }
  /* Toolbar custom (multilang_editor : 2 selects + hint) : autorise le
     wrap interne pour que les selects se mettent l'un sous l'autre si
     besoin et que le texte d'aide ne déborde pas hors de la card. */
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(.affiner-btn)) #toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    row-gap: 6px !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(.affiner-btn)) #toolbar > .small,
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(.affiner-btn)) #toolbar > .text-muted,
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(.affiner-btn)) #toolbar > span {
    flex: 1 1 100% !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.3;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars:not(:has(.affiner-btn)) #toolbar > .bootstrap-select {
    flex: 1 1 auto !important;
    min-width: 140px;
  }
  /* multilang_editor (#trad-table) : la cellule "category" contient un
     <span class="badge"> dont le fond ne se réduit pas avec
     text-overflow:ellipsis du td → le pill bleu "Mots-clés" déborde
     visuellement sur la colonne FRANÇAIS. On contraint le badge à la
     largeur de sa cellule et on tronque proprement. */
  body.eb-has-topbar-v2 .fixed-table-body td > .badge,
  body.eb-has-topbar-v2 .fixed-table-body td > span.badge {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle;
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  /* Augmente la colonne CATÉGORIE de #trad-table sur mobile pour que le
     badge "Mots-clés" tienne en entier (sinon tronqué à "M…"). On compense
     en réduisant les colonnes de texte adjacentes. */
  body.eb-has-topbar-v2 #trad-table th[data-field="category"] {
    width: 22% !important;
  }
  body.eb-has-topbar-v2 #trad-table th[data-field="expression"],
  body.eb-has-topbar-v2 #trad-table th[data-field="expression_en"],
  body.eb-has-topbar-v2 #trad-table th[data-field="translation"] {
    width: 26% !important;
  }
  /* L'input de traduction de #trad-table a un style inline `width: 37vw`
     qui déborde la colonne (30% du tableau ≈ 155px alors que 37vw ≈ 199px
     sur un écran de 538px). Force la largeur à celle de la cellule. */
  body.eb-has-topbar-v2 #trad-table input.val,
  body.eb-has-topbar-v2 .multilang-translation-cell input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.eb-has-topbar-v2 .multilang-translation-cell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars .bootstrap-select,
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars .bootstrap-select.fit-width,
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars .bootstrap-select > .dropdown-toggle {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars .bootstrap-select .filter-option-inner-inner {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar .bs-bars #toolbar {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar > .columns .viewFilter:not(.eb-view-bookmark) {
    gap: 6px !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar > .columns .viewFilter:not(.eb-view-filter--duo) .btn,
  body.eb-has-topbar-v2 .fixed-table-toolbar > .columns .viewFilter:not(.eb-view-filter--duo) .eb-view-btn {
    height: 40px !important;
    width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar > .columns .viewFilter.eb-view-filter--duo .eb-view-btn {
    width: auto !important;
    min-width: 40px !important;
    padding: 0 12px !important;
  }
  /* Search : input grandit, boutons d'action collés à droite sur la MÊME
     ligne que la recherche (pas de wrap interne dédié aux boutons). */
  body.eb-has-topbar-v2 .fixed-table-toolbar > .search {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar > .search > #buttons_container {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  body.eb-has-topbar-v2 .fixed-table-toolbar > .search .form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
  }
  /* Colonne bouton compacte sur mobile — une icône 40px sans crop
     La classe .eb-col-button est sur le <th> mais pas le <td>, donc on cible
     le dernier td du tbody (la colonne action est toujours la dernière visible). */
  body.eb-has-topbar-v2 .fixed-table-body th.eb-col-button,
  body.eb-has-topbar-v2 .fixed-table-body td.eb-col-button,
  body.eb-has-topbar-v2 .fixed-table-body tbody tr > td:last-child {
    width: 56px !important;
    padding: 8px 6px !important;
  }
  body.eb-has-topbar-v2 .fixed-table-body tbody tr > td:last-child .eb-buttons-container,
  body.eb-has-topbar-v2 .fixed-table-body tbody tr > td:last-child .GroupHideChild {
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  /* Alignements colonnes mobile : activité à gauche, date centrée */
  body.eb-has-topbar-v2 .fixed-table-body td[class=""]:nth-child(2),
  body.eb-has-topbar-v2 .fixed-table-body tr td:nth-child(2) {
    text-align: left !important;
    padding-left: 10px !important;
  }
  body.eb-has-topbar-v2 .fixed-table-body tr th:nth-child(2) {
    text-align: left !important;
    padding-left: 10px !important;
  }
  /* Léger espace toolbar ↔ tableau */
  body.eb-has-topbar-v2 .fixed-table-container {
    margin-top: 8px !important;
  }
  /* Colonne d'action — header vide sur mobile (icône parlante suffit) */
  body.eb-has-topbar-v2 .fixed-table-body th.eb-col-button .th-inner {
    visibility: hidden;
  }
}

/* ===== Export page modernization (#9721) ===== */
/* The export wrapper (.eb-export-page) lives as a direct child of <body>
   (not inside #space-left) — it already sits at y=52 thanks to the
   #div_principale flow space. Remove the inherited 52px padding-top
   from .space-left so content isn't pushed to y=104. */
body.eb-has-topbar-v2 .eb-export-page {
  padding-top: 0 !important;
}
/* No card wrapper around the table — same as other pages (personnel, etc.).
   Just ensure the toolbar layout works and filters stack properly. */
body.eb-has-topbar-v2 .eb-export-page .fixed-table-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}
body.eb-has-topbar-v2 .eb-export-page .fixed-table-toolbar > .bs-bars {
  flex: 1 1 100%;
  order: 1;
}
body.eb-has-topbar-v2 .eb-export-page .fixed-table-toolbar > .search {
  float: none !important;
  order: 2;
}
body.eb-has-topbar-v2 .eb-export-page .fixed-table-toolbar > .columns {
  float: none !important;
  order: 3;
}
/* Table body: horizontal scroll for wide exports */
body.eb-has-topbar-v2 .eb-export-page .fixed-table-container {
  overflow-x: auto;
}
/* Placeholder card (no export selected) */
body.eb-has-topbar-v2 .eb-export-page .eb-export-placeholder {
  background: var(--eb-surface, #ffffff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius-lg, 16px);
  padding: 40px 24px;
  text-align: center;
  box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
/* Download/print buttons */
body.eb-has-topbar-v2 .eb-export-page .buttons-container {
  margin-bottom: 12px;
}
body.eb-has-topbar-v2 .eb-export-page .buttons-container .btn {
  border-radius: var(--eb-radius-sm);
}

/* ===================================================================
   #9738 — Mobile responsive : tableaux Bootstrap Table
   =================================================================== */

/* --- Pagination compacte sur petit écran (375px) --- */
@media (max-width: 480px) {
  .fixed-table-pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0 !important;
  }
  .fixed-table-pagination .pagination {
    flex-wrap: wrap !important;
    gap: 2px;
    margin: 0 !important;
  }
  .fixed-table-pagination .page-item .page-link {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    min-width: 28px;
    text-align: center;
  }
  .fixed-table-pagination .pagination-detail {
    font-size: 0.75rem !important;
  }
  /* Masque les boutons de navigation "Précédent"/"Suivant" textuel,
     garde uniquement les flèches */
  .fixed-table-pagination .page-pre .page-link::before { content: "‹"; }
  .fixed-table-pagination .page-next .page-link::after  { content: "›"; }
}

/* --- Toolbar search input responsive --- */
@media (max-width: 576px) {
  .fixed-table-toolbar .search {
    max-width: 100% !important;
    width: 100% !important;
  }
  .fixed-table-toolbar .search .search-input {
    width: 100% !important;
    max-width: none !important;
  }
  /* Empêche le toolbar de provoquer un scroll horizontal */
  .fixed-table-toolbar {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* --- Conteneur Bootstrap Table — empêche tout débordement du viewport --- */
.bootstrap-table .fixed-table-container {
  max-width: 100%;
}

/* Scroll indicator subtil sur mobile (shadow droite si scrollable) */
@media (max-width: 768px) {
  .fixed-table-body {
    background:
      linear-gradient(to right, transparent 0%, transparent 85%, rgba(0,0,0,.04) 100%)
      local,
      linear-gradient(to right, rgba(0,0,0,.04) 0%, transparent 15%, transparent 100%)
      local;
  }
}

/* ===================================================================
   #9733 — Refonte UI Inventaire
   =================================================================== */

/* ── Toolbar / Filtres sélection ── */
body.eb-has-topbar-v2 #toolbar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}
body.eb-has-topbar-v2 #toolbar .selectpicker,
body.eb-has-topbar-v2 #toolbar .bootstrap-select {
  min-width: 180px;
}
body.eb-has-topbar-v2 #toolbar .bootstrap-select .btn {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  background: var(--eb-surface, #fff) !important;
  font-size: 13px !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
body.eb-has-topbar-v2 #toolbar .bootstrap-select .btn:hover,
body.eb-has-topbar-v2 #toolbar .bootstrap-select .btn:focus {
  border-color: var(--eb-primary, #2563eb) !important;
}

/* ── Table conteneur ── */
body.eb-has-topbar-v2 #div_tab {
  background: var(--eb-surface, #ffffff);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius-lg, 16px);
  box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  overflow: hidden;
  margin-top: 8px;
}

/* ── En-tête du tableau ── */
body.eb-has-topbar-v2 #tableData thead tr.widget-title th {
  background: var(--eb-bg, #f8fafc) !important;
  color: var(--eb-text-secondary, #64748b) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--eb-border, #e2e8f0) !important;
  white-space: nowrap;
}

/* ── Lignes de données ── */
body.eb-has-topbar-v2 #tableData tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  font-size: 13px;
  border-bottom: 1px solid var(--eb-border, #f1f5f9);
}
body.eb-has-topbar-v2 #tableData tbody tr:hover {
  background: var(--eb-bg, #f8fafc) !important;
}

/* ── Boutons stock +/- ── */
body.eb-has-topbar-v2 .champIncrementableTexte {
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  max-width: 64px !important;
  height: 32px !important;
  padding: 2px 4px !important;
}
body.eb-has-topbar-v2 .champIncrementableTexte:focus {
  border-color: var(--eb-primary, #2563eb) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15) !important;
  outline: none !important;
}
body.eb-has-topbar-v2 .plus-minus-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  transition: all 0.15s ease !important;
}
body.eb-has-topbar-v2 .plus-minus-btn:hover {
  transform: scale(1.1);
}
body.eb-has-topbar-v2 .champIncrementableMoins,
body.eb-has-topbar-v2 .champIncrementablePlus {
  display: flex;
  align-items: center;
  margin: 0 3px;
}

/* ── Badges péremption (consommables) ── */
body.eb-has-topbar-v2 .eb-badge-danger-alt {
  background: rgba(239,68,68,0.12) !important;
  color: #dc2626 !important;
  font-weight: 600;
  border-radius: 6px !important;
  padding: 3px 10px !important;
}

/* ── Boutons action (historique, détail) ── */
body.eb-has-topbar-v2 #tableData .btn-action {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  background: var(--eb-surface, #fff) !important;
  color: var(--eb-text-secondary, #64748b) !important;
  transition: all 0.15s ease !important;
  font-size: 13px !important;
}
body.eb-has-topbar-v2 #tableData .btn-action:hover {
  background: var(--eb-primary, #2563eb) !important;
  color: #fff !important;
  border-color: var(--eb-primary, #2563eb) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37,99,235,0.25) !important;
}
body.eb-has-topbar-v2 #tableData .btn-action:has(> .fa-arrow-alt-circle-right) {
  color: var(--eb-primary, #2563eb) !important;
}
body.eb-has-topbar-v2 .eb-inventory-history-timeline .activity-container::before,
body.eb-has-topbar-v2 .eb-inventory-history-timeline .activity::before {
  background: var(--eb-primary, #2563eb) !important;
}

/* ── Onglets inventaire (carrousel) ── */
body.eb-has-topbar-v2 #menu .active-color {
  color: var(--eb-primary, #2563eb) !important;
}
body.eb-has-topbar-v2 #menu .bord {
  border-bottom: 2px solid var(--eb-primary, #2563eb) !important;
  padding-bottom: 4px;
}
body.eb-has-topbar-v2 #menu .inactive-color {
  color: var(--eb-text-secondary, #64748b) !important;
}
body.eb-has-topbar-v2 #menu .inactive-color:hover {
  color: var(--eb-text, #1e293b) !important;
}

/* ── Recherche dans le tableau ── */
body.eb-has-topbar-v2 #tableData ~ .fixed-table-toolbar .search-input,
body.eb-has-topbar-v2 .fixed-table-toolbar .search .search-input {
  border-radius: var(--eb-radius-sm) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  transition: border-color 0.15s ease;
}
body.eb-has-topbar-v2 .fixed-table-toolbar .search .search-input:focus {
  border-color: var(--eb-primary, #2563eb) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1) !important;
}

/* ── Responsive inventaire ── */
@media (max-width: 768px) {
  body.eb-has-topbar-v2 #toolbar {
    gap: 6px;
  }
  body.eb-has-topbar-v2 #toolbar .bootstrap-select {
    min-width: 140px !important;
    flex: 1 1 auto;
  }
  body.eb-has-topbar-v2 .champIncrementableTexte {
    max-width: 48px !important;
  }
  body.eb-has-topbar-v2 #div_tab {
    border-radius: var(--eb-radius-md);
    margin: 0 -4px;
  }
}

/* ===================================================================
   #9575 — Dark theme: overrides pour composants modernes
   =================================================================== */

/* ── Swal2 popups dark ── */
:root.dark body.eb-has-topbar-v2 .swal2-popup,
:root.dark .swal2-popup {
  background: var(--eb-surface, #1C1C1C) !important;
}
:root.dark body.eb-has-topbar-v2 .swal2-popup table td,
:root.dark body.eb-has-topbar-v2 .swal2-popup table th {
  color: var(--eb-text, #E2E8F0) !important;
}
:root.dark body.eb-has-topbar-v2 .swal2-styled.swal2-cancel {
  background: var(--eb-surface-hover, #252525) !important;
  border-color: var(--eb-border, #333) !important;
}

/* ── Modals dark ── */
:root.dark body.eb-has-topbar-v2 .modal-content {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .modal-header {
  border-bottom-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .modal-footer {
  border-top-color: var(--eb-border, #333) !important;
}

/* ── Bootstrap Table dark ── */
:root.dark body.eb-has-topbar-v2 .bootstrap-table .fixed-table-container {
  background: var(--eb-surface, #1C1C1C);
}
:root.dark body.eb-has-topbar-v2 #tableData thead tr.widget-title th,
:root.dark body.eb-has-topbar-v2 .bootstrap-table thead th {
  background: var(--eb-surface-hover, #252525) !important;
  color: var(--eb-text-secondary, #94A3B8) !important;
  border-bottom-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .bootstrap-table tbody td {
  border-bottom-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .bootstrap-table tbody tr:hover {
  background: var(--eb-surface-hover, #252525) !important;
}

/* ── Selectpicker / Dropdown dark ── */
:root.dark body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .bootstrap-select .dropdown-item,
:root.dark body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu li a {
  color: var(--eb-text, #E2E8F0) !important;
}
:root.dark body.eb-has-topbar-v2 .bootstrap-select .dropdown-item:hover,
:root.dark body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu li a:hover {
  background: var(--eb-surface-hover, #252525) !important;
}
:root.dark body.eb-has-topbar-v2 .bootstrap-select .bs-searchbox .form-control {
  background: var(--eb-bg, #0F0F0F) !important;
  color: var(--eb-text, #E2E8F0) !important;
  border-color: var(--eb-border, #333) !important;
}

/* ── Cards et conteneurs dark ── */
:root.dark body.eb-has-topbar-v2 #div_tab,
:root.dark body.eb-has-topbar-v2 .addon-card {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .addon-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

/* ── Boutons action dark ── */
:root.dark body.eb-has-topbar-v2 #tableData .btn-action,
:root.dark body.eb-has-topbar-v2 .btn-default.btn-action {
  background: var(--eb-surface-hover, #252525) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text-secondary, #94A3B8) !important;
}
:root.dark body.eb-has-topbar-v2 #tableData .btn-action:hover,
:root.dark body.eb-has-topbar-v2 .btn-default.btn-action:hover {
  background: var(--eb-primary, #3B82F6) !important;
  color: #fff !important;
  border-color: var(--eb-primary, #3B82F6) !important;
}

/* ── Inputs dark ── */
:root.dark body.eb-has-topbar-v2 .champIncrementableTexte {
  background: var(--eb-bg, #0F0F0F) !important;
  color: var(--eb-text, #E2E8F0) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .fixed-table-toolbar .search .search-input {
  background: var(--eb-bg, #0F0F0F) !important;
  color: var(--eb-text, #E2E8F0) !important;
  border-color: var(--eb-border, #333) !important;
}

/* ── Toolbar dark ── */
:root.dark body.eb-has-topbar-v2 #toolbar .bootstrap-select .btn {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text, #E2E8F0) !important;
}

/* ── Pagination dark ── */
:root.dark body.eb-has-topbar-v2 .page-item .page-link {
  background: var(--eb-surface, #1C1C1C) !important;
  color: var(--eb-text-secondary, #94A3B8) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .page-item.active .page-link {
  background: var(--eb-primary, #3B82F6) !important;
  color: #fff !important;
  border-color: var(--eb-primary, #3B82F6) !important;
}

/* ── Topbar search dark ── */
:root.dark .eb-topbar-search i {
  background: var(--eb-surface-hover, #252525) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark .eb-topbar-search input {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text, #E2E8F0) !important;
}

/* ── Recherche avancée dark (#9735) ── */
:root.dark .search-filter-bar {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark .search-type-btn {
  background: var(--eb-surface-hover, #252525) !important;
  color: var(--eb-text, #E2E8F0) !important;
}
:root.dark .adv-search-dropdown {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark .adv-search-dropdown-item:hover {
  background: var(--eb-surface-hover, #252525) !important;
}

/* ── Export page dark (#9721) ── */
:root.dark body.eb-has-topbar-v2 .eb-export-placeholder {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
}

   #TAB5 — DOTATION CARDS & SWAL MODALS
   ================================================================ */

/* ── Dotation: "Ajouter" buttons in card headers ── */
/* #B14 — sélecteur scopé à `body.mon-compte-modern` (page Mon compte où
   les cards de dotation vivent — voir js/upd_personnel_modern.js:186).
   Avant : `body.eb-has-topbar-v2 .card-header.graycard .btn-success` →
   matched TOUS les btn-success dans une card-header.graycard du produit
   (Document automatique, paramétrage, etc.) → bouton vert "+ Document"
   passait en bleu (et bleu-foncé au hover) au lieu de garder le vert
   btn-success natif. */
body.mon-compte-modern .card-header.graycard .btn-success {
  background: var(--eb-primary, #3b82f6) !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: var(--eb-radius, 10px) !important;
  box-shadow: none !important;
  transition: background 0.2s, box-shadow 0.2s !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
body.mon-compte-modern .card-header.graycard .btn-success:hover {
  background: var(--eb-primary-hover, #2563eb) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.1)) !important;
}
body.mon-compte-modern .card-header.graycard .btn-success i {
  font-size: 12px;
}

/* ── Dotation: card body .graycard (no .card-body class) ── */
body.eb-has-topbar-v2 .card.card-default .graycard:not(.card-header):not(.card-body) {
  background: var(--eb-surface, #ffffff) !important;
  padding: 0 !important;
}
/* Bootstrap-table inside dotation cards */
body.eb-has-topbar-v2 .card.card-default .graycard .bg-white {
  background: var(--eb-surface, #ffffff) !important;
}

/* ── Dotation: divExterne layout ── */
body.eb-has-topbar-v2 #divExterne {
  gap: 8px;
  padding: 0 16px 16px !important;
}

/* ================================================================
   SWAL MODALS — Dotation (Animal, Véhicule, Matériel, Tenue)
   ================================================================ */

/* ── Swal popup: general V2 overrides ── */
body.eb-has-topbar-v2 .swal-modal {
  border-radius: var(--eb-radius-lg, 16px) !important;
  background: var(--eb-surface, #ffffff) !important;
  padding: 24px !important;
}

/* ── Swal title ── */
body.eb-has-topbar-v2 .swal-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #1e293b) !important;
  padding: 0 0 16px !important;
  margin: 0 !important;
}

/* ── Swal content area ── */
body.eb-has-topbar-v2 .swal-content {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ── Selectpicker inside swal: width + visual fix ── */
body.eb-has-topbar-v2 .swal-modal .bootstrap-select {
  width: 100% !important;
}
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .btn {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius, 10px) !important;
  color: var(--eb-text, #1e293b) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  height: auto !important;
  min-height: 38px;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
}
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .btn:focus,
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .btn:active {
  border-color: var(--eb-primary, #3b82f6) !important;
  outline: none !important;
  box-shadow: var(--eb-shadow-focus) !important;
}
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .dropdown-toggle .filter-option {
  color: var(--eb-text, #1e293b) !important;
}
/* Dropdown menu inside swal */
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .dropdown-menu,
body.eb-has-topbar-v2 .bootstrap-select .dropdown-menu[style*="z-index"] {
  border-radius: var(--eb-radius, 10px) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  box-shadow: var(--eb-shadow-md, 0 4px 12px rgba(0,0,0,0.1)) !important;
  padding: 4px !important;
  background: var(--eb-surface, #ffffff) !important;
}
/* Bootstrap Select rendu à body level (data-container='body') doit passer
   au-dessus du swal2-container (z-index 1060). */
.bs-container .dropdown-menu {
  z-index: 1070 !important;
}
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .dropdown-menu .dropdown-item,
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .dropdown-menu li a {
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: var(--eb-text, #1e293b) !important;
}
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .dropdown-menu .active a,
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .dropdown-menu li.selected a {
  background: var(--eb-primary-light, #eff6ff) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .swal-modal .bootstrap-select .dropdown-menu li a:hover {
  background: var(--eb-surface-hover, #f8fafc) !important;
}

/* ── Swal: form-control inputs ── */
body.eb-has-topbar-v2 .swal-modal .form-control {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius, 10px) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text, #1e293b) !important;
  transition: border-color 0.2s !important;
}
body.eb-has-topbar-v2 .swal-modal .form-control:focus {
  border-color: var(--eb-primary, #3b82f6) !important;
  box-shadow: var(--eb-shadow-focus) !important;
  outline: none !important;
}

/* ── Swal: form labels (if present) ── */
body.eb-has-topbar-v2 .swal-modal label,
body.eb-has-topbar-v2 .swal-modal .form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--eb-text-secondary, #64748b);
  margin-bottom: 4px;
}

/* ── Swal: table inside modal (tenue) ── */
body.eb-has-topbar-v2 .swal-modal table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body.eb-has-topbar-v2 .swal-modal table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--eb-text-secondary, #64748b);
  padding: 8px 10px;
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
  background: var(--eb-bg, #f8fafc);
}
body.eb-has-topbar-v2 .swal-modal table td {
  font-size: 13px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--eb-border-light, #f1f5f9);
  color: var(--eb-text, #1e293b);
}

/* ── Swal: action buttons (Annuler / Sauver) ── */
body.eb-has-topbar-v2 .swal-modal .btn-swal,
body.eb-has-topbar-v2 .swal-modal .btn-secondary.btn-swal {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  color: var(--eb-text, #1e293b) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
  border-radius: var(--eb-radius, 10px) !important;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s !important;
}
body.eb-has-topbar-v2 .swal-modal .btn-swal:hover,
body.eb-has-topbar-v2 .swal-modal .btn-secondary.btn-swal:hover {
  background: var(--eb-surface-hover, #f8fafc) !important;
  border-color: var(--eb-text-muted, #94a3b8) !important;
}
body.eb-has-topbar-v2 .swal-modal .btn-success {
  background: var(--eb-primary, #3b82f6) !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
  border-radius: var(--eb-radius, 10px) !important;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s !important;
}
body.eb-has-topbar-v2 .swal-modal .btn-success:hover:not(:disabled) {
  background: var(--eb-primary-hover, #2563eb) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 3px rgba(0,0,0,0.1)) !important;
}
body.eb-has-topbar-v2 .swal-modal .btn-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Swal: form row spacing ── */
body.eb-has-topbar-v2 .swal-modal form > .row,
body.eb-has-topbar-v2 .swal-modal form > div > .row {
  margin-bottom: 12px;
}
body.eb-has-topbar-v2 .swal-modal form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Swal: image preview (animal/vehicule) ── */
body.eb-has-topbar-v2 .swal-modal img[id*="pic"],
body.eb-has-topbar-v2 .swal-modal img[id*="image"] {
  border-radius: var(--eb-radius, 10px);
  max-width: 100%;
  height: auto;
  margin-top: 8px;
}

/* ── Swal: z-index for selectpicker dropdown (appended to body) ── */
body.eb-has-topbar-v2 .bootstrap-select.btn-group .dropdown-menu {
  z-index: 10600 !important;
}

/* ================================================================
   DARK MODE — Dotation & Swal
   ================================================================ */
:root.dark body.eb-has-topbar-v2 .swal-modal,
:root.dark .swal-modal {
  background: var(--eb-surface, #1C1C1C) !important;
}
:root.dark body.eb-has-topbar-v2 .swal-title,
:root.dark .swal-title {
  color: var(--eb-text, #e2e8f0) !important;
}
:root.dark body.eb-has-topbar-v2 .swal-modal .bootstrap-select .btn {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}
:root.dark body.eb-has-topbar-v2 .swal-modal .form-control {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}
:root.dark body.eb-has-topbar-v2 .swal-modal .btn-swal,
:root.dark body.eb-has-topbar-v2 .swal-modal .btn-secondary.btn-swal {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}
:root.dark body.eb-has-topbar-v2 .swal-modal .btn-swal:hover,
:root.dark body.eb-has-topbar-v2 .swal-modal .btn-secondary.btn-swal:hover {
  background: var(--eb-surface-hover, #252525) !important;
}
:root.dark body.eb-has-topbar-v2 .swal-modal table th {
  background: var(--eb-surface-hover, #252525);
  color: var(--eb-text-secondary, #94a3b8);
  border-color: var(--eb-border, #333);
}
:root.dark body.eb-has-topbar-v2 .swal-modal table td {
  color: var(--eb-text, #e2e8f0);
  border-color: var(--eb-border, #333);
}
:root.dark body.eb-has-topbar-v2 .card.card-default .graycard .bg-white {
  background: var(--eb-surface, #1C1C1C) !important;
}

/* ================================================================
   #9734 — Dashboard customizer button & panel
   ================================================================ */

/* ── Bouton « Personnaliser » ── */
.eb-customize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--eb-primary, #2563EB);
  border: 1.5px solid var(--eb-primary, #2563EB);
  border-radius: 20px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
  white-space: nowrap;
  font-family: inherit;
  align-self: center;
}
.eb-customize-btn:hover {
  background: var(--eb-primary-hover, #1D4ED8);
  border-color: var(--eb-primary-hover, #1D4ED8);
  color: #fff;
  transform: scale(1.03);
}
.eb-customize-btn i { font-size: 0.85rem; }
@media (max-width: 576px) {
  .eb-customize-btn span { display: none; }
  .eb-customize-btn { min-width: 44px; padding: 10px 14px; }
}

/* ── Overlay ── */
#ebCustomizerOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1200;
  opacity: 0;
  transition: opacity 0.25s;
}
#ebCustomizerOverlay.open { opacity: 1; }

/* ── Panel ── */
#ebCustomizerPanel {
  position: fixed;
  top: 0; right: 0;
  width: 340px; max-width: 95vw;
  height: 100%;
  background: var(--eb-surface, #fff);
  border-left: 1px solid var(--eb-border, #E2E8F0);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px 0 0 16px;
}
#ebCustomizerPanel.open { transform: translateX(0); }

/* ── Panel — header ── */
.eb-cust-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--eb-border, #E2E8F0);
  flex-shrink: 0;
}
.eb-cust-header-icon {
  width: 36px; height: 36px;
  border-radius: var(--eb-radius-md);
  background: var(--eb-primary, #2563EB);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.88rem; flex-shrink: 0;
}
.eb-cust-header h3 {
  margin: 0;
  font-size: 1rem; font-weight: 600;
  color: var(--eb-text, #1E293B);
  flex: 1; min-width: 0;
}
.eb-cust-close {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-shrink: 0;
  border-radius: var(--eb-radius-sm); border: none;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--eb-text-secondary, #64748B);
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.eb-cust-close:hover { background: rgba(0, 0, 0, 0.12); color: var(--eb-text, #1E293B); }

/* ── Panel — hint bar ── */
.eb-cust-hint {
  padding: 9px 20px;
  font-size: 0.79rem;
  color: var(--eb-text-secondary, #64748B);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--eb-bg, #F1F5F9);
  line-height: 1.6;
  flex-shrink: 0;
}
.eb-cust-hint i { margin-right: 4px; }

/* ── Panel — widget list ── */
.eb-cust-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.eb-cust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  transition: background 0.14s;
}
.eb-cust-item:hover { background: var(--eb-surface-hover, #F8FAFC); }
.eb-cust-item-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--eb-radius-sm);
  background: var(--eb-primary-light, #EFF6FF);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
  color: var(--eb-primary, #2563EB);
}
.eb-cust-item-name {
  flex: 1; min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--eb-text, #1E293B);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.15s;
  text-transform: capitalize;
}
.eb-cust-item-name.muted { color: var(--eb-text-muted, #94A3B8); }

/* #9728 — Section labels for grouped widgets */
.eb-cust-section-label {
  padding: 10px 20px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--eb-text-muted, #94A3B8);
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--eb-border, #E2E8F0);
  margin-top: 4px;
}
.eb-cust-section-label:first-child { border-top: none; margin-top: 0; }
.eb-cust-section-label i { font-size: 0.75rem; }

/* ── Toggle switch ── */
.eb-cust-toggle {
  position: relative;
  width: 40px; height: 22px; flex-shrink: 0;
  cursor: pointer; margin: 0;
}
.eb-cust-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.eb-cust-toggle-slider {
  position: absolute; inset: 0;
  background: var(--eb-border, #E2E8F0);
  border-radius: 22px;
  transition: background 0.2s;
}
.eb-cust-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.eb-cust-toggle input:checked + .eb-cust-toggle-slider { background: var(--eb-primary, #2563EB); }
.eb-cust-toggle input:checked + .eb-cust-toggle-slider::before { transform: translateX(18px); }
.eb-cust-toggle input:disabled + .eb-cust-toggle-slider { opacity: 0.45; cursor: not-allowed; }

/* ── Panel — footer ── */
.eb-cust-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--eb-border, #E2E8F0);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.eb-cust-arrange {
  background: var(--eb-primary, #2563EB);
  border: 1px solid var(--eb-primary, #2563EB);
  min-height: 42px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 9px 20px;
  border-radius: var(--eb-radius-sm);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.eb-cust-arrange:hover {
  background: var(--eb-primary-dark, #1D4ED8);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32);
}
.eb-cust-arrange:active { transform: translateY(1px); }
.eb-cust-arrange i { font-size: 0.86rem; }
/* Avec le bouton « Organiser », le reset devient une action secondaire discrète */
.eb-cust-footer .eb-cust-reset { align-self: center; }
.eb-cust-reset {
  background: var(--eb-danger-light, #FEF2F2);
  border: 1px solid rgba(239, 68, 68, 0.2);
  min-height: 40px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--eb-danger, #EF4444);
  cursor: pointer;
  padding: 8px 20px;
  border-radius: var(--eb-radius-sm);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eb-cust-reset:hover {
  background: var(--eb-danger, #EF4444);
  color: #fff;
  border-color: var(--eb-danger, #EF4444);
}
.eb-cust-reset i { font-size: 0.78rem; }


/* ================================================================
   #9725 — REFONTE GRAPHIQUE : PAGES CONFIGURATION
   ================================================================ */

/* ── Configuration: table containers (.newTableAll) ── */
body.eb-has-topbar-v2 .newTableAll {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius, 12px) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  margin-bottom: 16px;
}
/* Quand .newTableAll est imbriquée dans une .card, la card fournit déjà
   le cadre et l'ombre : on neutralise le cadre du tableau pour éviter
   l'effet "card dans une card". Cible toute .card (body `.card-body` ou
   `.graycard` selon les pages). */
body.eb-has-topbar-v2 .card .newTableAll {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0;
  /* Annule le table-layout: fixed imposé par .flexTable : en layout auto,
     la 1re colonne peut s'auto-sizer sur la largeur naturelle du label
     (avec width:1%+nowrap) sans que le texte ne wrap ou soit tronqué. */
  table-layout: auto !important;
}
/* Colonnes form-like : label à gauche auto-sizé sur sa largeur naturelle
   (astuce width:1%+nowrap), contrôle à droite prend tout le reste. */
body.eb-has-topbar-v2 .card .newTableAll tr td:first-child {
  width: 1%;
  white-space: nowrap;
}
/* Mobile : labels longs (« Nombre minimum de chiffres du numéro de
   téléphone » par ex.) débordent en `white-space: nowrap` et poussent la
   colonne input hors de la card → contenu coupé à droite. Sur mobile on
   stacke label/input verticalement et on laisse le texte des labels
   wrapper sur plusieurs lignes. */
@media (max-width: 767.98px) {
  body.eb-has-topbar-v2 .card .newTableAll,
  body.eb-has-topbar-v2 .card .newTableAll > tbody,
  body.eb-has-topbar-v2 .card .newTableAll > tbody > tr,
  body.eb-has-topbar-v2 .card .newTableAll > tbody > tr > td,
  body.eb-has-topbar-v2 .card .newTableAll > tr,
  body.eb-has-topbar-v2 .card .newTableAll > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }
  body.eb-has-topbar-v2 .card .newTableAll > tbody > tr > td:first-child,
  body.eb-has-topbar-v2 .card .newTableAll > tr > td:first-child {
    padding-bottom: 4px !important;
    font-weight: 500;
    color: var(--eb-text-muted, #64748b) !important;
  }
  body.eb-has-topbar-v2 .card .newTableAll > tbody > tr > td:not(:first-child),
  body.eb-has-topbar-v2 .card .newTableAll > tr > td:not(:first-child) {
    padding-top: 0 !important;
  }
  /* Inputs/selects pleine largeur sur la ligne en dessous du label. */
  body.eb-has-topbar-v2 .card .newTableAll input.form-control,
  body.eb-has-topbar-v2 .card .newTableAll select.form-control,
  body.eb-has-topbar-v2 .card .newTableAll textarea.form-control,
  body.eb-has-topbar-v2 .card .newTableAll .bootstrap-select,
  body.eb-has-topbar-v2 .card .newTableAll .bootstrap-select > .dropdown-toggle {
    width: 100% !important;
    max-width: 100% !important;
  }
}
body.eb-has-topbar-v2 .newTableAll2 {
  background: var(--eb-surface, #ffffff) !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius, 12px) !important;
  box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Fix global "liseré blanc" autour des cellules : tous les <table> Bootstrap
   et bootstrap-table héritent du défaut user-agent (border-spacing: 2px),
   ce qui laisse passer la couleur blanche du table-bg entre les cellules
   et donne un effet "grille blanche". On force border-spacing 0 sur tout
   ce qui est rendu via bootstrap-table ou avec la classe .table / .new-table. */
body.eb-has-topbar-v2 .bootstrap-table table,
body.eb-has-topbar-v2 .fixed-table-container table,
body.eb-has-topbar-v2 .new-table,
body.eb-has-topbar-v2 table.table {
  border-spacing: 0 !important;
}

/* ── Configuration: section title rows ── */
body.eb-has-topbar-v2 .eb-cfg-section-title {
  border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  background: var(--eb-bg, #f8fafc) !important;
}
body.eb-has-topbar-v2 .eb-cfg-section-title td {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--eb-text, #1e293b) !important;
  padding: 12px 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Ligne header : uniquement si <th> ou <thead>, pas sur n'importe quel
   premier <tr> (sinon les cartes à 1-2 lignes de formulaire prennent
   l'allure d'une "card dans une card"). */
body.eb-has-topbar-v2 .newTableAll thead tr td,
body.eb-has-topbar-v2 .newTableAll thead tr th,
body.eb-has-topbar-v2 .newTableAll tr:first-child th {
  background: var(--eb-bg, #f8fafc);
  border-bottom: 1px solid var(--eb-border, #e2e8f0);
}

/* ── Configuration: data rows (toutes les lignes de données) ── */
body.eb-has-topbar-v2 .newTableAll tr td {
  padding: 10px 20px !important;
  font-size: 13px !important;
  color: var(--eb-text, #1e293b) !important;
  border-bottom: 1px solid var(--eb-border-light, #f1f5f9);
  background: var(--eb-surface, #ffffff);
  vertical-align: middle;
}
body.eb-has-topbar-v2 .newTableAll tr:last-child td {
  border-bottom: none;
}
body.eb-has-topbar-v2 .newTableAll tr:hover td {
  background: var(--eb-surface-hover, #f8fafc) !important;
}

/* ── Bootstrap Table dans les cards : surface unifiée ── */
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--eb-surface, #ffffff) !important;
}
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .bootstrap-table,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-container,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-header,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-body,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-pagination,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-header thead,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-header th,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-body table,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-body tbody,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-body tbody tr,
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-body tbody td {
  background: var(--eb-surface, #ffffff) !important;
}
body.eb-has-topbar-v2 .card .eb-bootstrap-table-wrap .fixed-table-body tbody tr:hover td {
  background: var(--eb-surface-hover, #f8fafc) !important;
}

/* Popup Type des compétences : ce tableau est affiché dans SweetAlert, pas dans
   une card de page. On neutralise les surfaces grises héritées des tables V2. */
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .bootstrap-table,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-container,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-body,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-body table,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-body tbody,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-body tbody tr,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-body tbody td {
  background: var(--eb-surface, #ffffff) !important;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 12px;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar::before,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar::after {
  display: none;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar .search {
  order: 1;
  float: none !important;
  margin: 0 !important;
  flex: 0 1 240px;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar .search input {
  width: 100% !important;
  min-width: 0;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar .columns {
  order: 2;
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar [name="addType"] {
  margin-left: 4px;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-container,
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-body {
  padding-bottom: 0 !important;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table table.table-striped-2 tbody tr:nth-child(even) > td {
  background: var(--eb-surface-hover, #f8fafc) !important;
}
body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-body tbody tr:hover > td {
  background: rgba(59,130,246,0.04) !important;
}
@media (max-width: 768px) {
  body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar {
    flex-wrap: wrap;
  }
  body.eb-has-topbar-v2 :is(.swal2-content, .swal2-html-container, .swal3-content, .swal3-html-container) .eb-equipe-modal-table .fixed-table-toolbar .search {
    flex-basis: 100%;
  }
}

/* Popup Hierarchie des competences : meme rendu que les tables Bootstrap de page. */
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .bootstrap-table,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-container,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-body,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-body table,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-body tbody,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-body tbody tr,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-body tbody td {
  background: var(--eb-surface, #ffffff) !important;
}
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-container,
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-body {
  padding-bottom: 0 !important;
}
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table table.table-striped-2 tbody tr:nth-child(even) > td {
  background: var(--eb-surface-hover, #f8fafc) !important;
}
body.eb-has-topbar-v2 .swal2-content .eb-hierarchie-modal-table .fixed-table-body tbody tr:hover > td {
  background: rgba(59,130,246,0.04) !important;
}

/* ── Configuration: subsection titles ── */
body.eb-has-topbar-v2 .subTitleFonctionnalite {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--eb-text-secondary, #64748b) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left !important;
  width: auto !important;
  padding: 14px 20px 8px !important;
}
body.eb-has-topbar-v2 .subTitleFonctionnalite i {
  margin-right: 6px;
  color: var(--eb-primary, #3b82f6);
}

/* ── Configuration: toggle buttons (Activé/Désactivé) ── */
body.eb-has-topbar-v2 .inscriptionBtnGroup {
  border-radius: var(--eb-radius-sm) !important;
  overflow: hidden;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .inscriptionBtnGroup .btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .inscriptionBtnGroup .btn.btn-success {
  background: var(--eb-success, #10b981) !important;
  border-color: var(--eb-success, #10b981) !important;
  color: #fff !important;
}
body.eb-has-topbar-v2 .inscriptionBtnGroup .btn.btn-secondary {
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text-secondary, #64748b) !important;
}
body.eb-has-topbar-v2 .inscriptionBtnGroup .btn.btn-secondary:hover {
  background: var(--eb-surface-hover, #f8fafc) !important;
}

/* ── Configuration: form controls ──
   On exclut .bootstrap-select car c'est un wrapper : c'est son <button>
   interne qui porte déjà le cadre (règle .bootstrap-select .btn plus bas).
   Appliquer la bordure aux 2 niveaux crée un double entourage. */
body.eb-has-topbar-v2 .newTableAll .form-control:not(.bootstrap-select),
body.eb-has-topbar-v2 .newTableAll .form-control-sm:not(.bootstrap-select) {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-sm) !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text, #1e293b) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
body.eb-has-topbar-v2 .newTableAll .form-control:not(.bootstrap-select):focus,
body.eb-has-topbar-v2 .newTableAll .form-control-sm:not(.bootstrap-select):focus {
  border-color: var(--eb-primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12) !important;
  outline: none !important;
}
/* Neutraliser tout résidu de style wrapper sur les selectpickers */
body.eb-has-topbar-v2 .newTableAll .bootstrap-select.form-control,
body.eb-has-topbar-v2 .newTableAll .bootstrap-select.form-control-sm {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  /* Laisse le bouton prendre sa taille naturelle pour afficher le texte
     complet. Annule le width:60% imposé par main.css qui tronque les
     libellés longs type "Pas de clôture automatique". */
  width: auto !important;
  min-width: 200px;
  max-width: 100%;
}

/* ── Configuration: selectpicker within tables ── */
body.eb-has-topbar-v2 .newTableAll .bootstrap-select .btn {
  border: 1px solid var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-sm) !important;
  background: var(--eb-surface, #ffffff) !important;
  color: var(--eb-text, #1e293b) !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}
body.eb-has-topbar-v2 .newTableAll .bootstrap-select .btn:focus {
  border-color: var(--eb-primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12) !important;
}

/* ── Configuration: checkboxes & switches ── */
body.eb-has-topbar-v2 .newTableAll input[type="checkbox"] {
  accent-color: var(--eb-primary, #3b82f6);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Configuration: alerts ── */
body.eb-has-topbar-v2 .newTableAll .alert,
body.eb-has-topbar-v2 .eb-export-page .alert {
  border-radius: var(--eb-radius-md) !important;
  border: none !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
}
body.eb-has-topbar-v2 .alert-info {
  background: var(--eb-primary-light, #eff6ff) !important;
  color: var(--eb-primary, #3b82f6) !important;
}
body.eb-has-topbar-v2 .alert-success {
  background: rgba(16,185,129,0.1) !important;
  color: var(--eb-success, #10b981) !important;
}
body.eb-has-topbar-v2 .alert-danger {
  background: rgba(239,68,68,0.1) !important;
  color: var(--eb-danger, #ef4444) !important;
}

/* ── Configuration: info icons ── */
body.eb-has-topbar-v2 .newTableAll .fa-question-circle {
  color: var(--eb-text-muted, #94a3b8) !important;
  font-size: 14px;
  transition: color 0.2s;
}
body.eb-has-topbar-v2 .newTableAll .fa-question-circle:hover {
  color: var(--eb-primary, #3b82f6) !important;
}

/* ── Configuration: menu personalization (tab 12) ── */
body.eb-has-topbar-v2 .menu-group-item .border {
  border-color: var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius-md) !important;
  transition: box-shadow 0.2s, border-color 0.2s;
}
body.eb-has-topbar-v2 .menu-group-item .border:hover {
  border-color: var(--eb-primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}
body.eb-has-topbar-v2 .eb-drag-handle {
  color: var(--eb-text-muted, #94a3b8) !important;
  cursor: grab;
}
body.eb-has-topbar-v2 .menu-group-item .btn-outline-primary {
  border-color: var(--eb-primary, #3b82f6) !important;
  color: var(--eb-primary, #3b82f6) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}
body.eb-has-topbar-v2 .menu-group-item .btn-outline-danger {
  border-color: var(--eb-danger, #ef4444) !important;
  color: var(--eb-danger, #ef4444) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

/* ── Configuration: utility spacing ── */
body.eb-has-topbar-v2 .eb-cfg-section-title td {
  border-top: none !important;
}

/* ================================================================
   Configuration tab 4 — IMAGE card stacked layout (#9575-ish)
   Targets the card containing #row71 (logo) via :has().
   Stacks each row's label above its content full-width.
   ================================================================ */
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) > table > tbody > tr:not(.eb-cfg-section-title):not([style*="display:none"]):not([style*="display: none"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) > table > tbody > tr:not(.eb-cfg-section-title):not([style*="display:none"]):not([style*="display: none"]) > td {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 6px 24px !important;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) > table > tbody > tr:not(.eb-cfg-section-title) > td:first-child {
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--eb-text-secondary, #64748B) !important;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) > table > tbody > tr:not(.eb-cfg-section-title):last-child > td:last-child {
  padding-bottom: 20px !important;
}
/* Row75's inner content (toggle, url input, preview) */
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #row75 ~ tr > td {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 4px 24px !important;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #selectedOption {
  display: none !important;
}
/* Logo dropzone visual container */
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #row71 > td:last-child {
  padding-top: 4px !important;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #row71 > td:last-child > .d-flex {
  border: 2px dashed var(--eb-border, #e2e8f0) !important;
  border-radius: var(--eb-radius) !important;
  padding: 20px !important;
  background: var(--eb-bg, #f8fafc) !important;
  transition: border-color 0.2s, background 0.2s;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #row71 > td:last-child > .d-flex:hover {
  border-color: var(--eb-primary, #3b82f6) !important;
  background: var(--eb-surface, #ffffff) !important;
}
/* URL input + preview in row75 */
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #bgVideo {
  margin-top: 8px;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #bgVideo .mb-3 input {
  max-width: 100% !important;
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #bgVideo iframe {
  max-height: 220px;
  border-radius: var(--eb-radius-sm);
}
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) #bgImage {
  margin-top: 8px;
}
/* Toggle Image/Vidéo buttons spacing */
body.eb-has-topbar-v2 .col-sm.mx-auto:has(> table > tbody > tr#row71) .inscriptionBtnGroup {
  margin-top: 4px;
}

/* ================================================================
   DARK MODE — Configuration pages
   ================================================================ */
:root.dark body.eb-has-topbar-v2 .newTableAll,
:root.dark body.eb-has-topbar-v2 .newTableAll2 {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .newTableAll tr:not(:first-child) td {
  background: var(--eb-surface, #1C1C1C) !important;
  color: var(--eb-text, #e2e8f0) !important;
  border-color: var(--eb-border, #333);
}
:root.dark body.eb-has-topbar-v2 .newTableAll tr:not(:first-child):hover td {
  background: var(--eb-surface-hover, #252525) !important;
}
:root.dark body.eb-has-topbar-v2 .eb-cfg-section-title td,
:root.dark body.eb-has-topbar-v2 .newTableAll tr:first-child td {
  background: var(--eb-surface-hover, #252525) !important;
  color: var(--eb-text-secondary, #94a3b8) !important;
  border-color: var(--eb-border, #333) !important;
}
:root.dark body.eb-has-topbar-v2 .subTitleFonctionnalite {
  color: var(--eb-text-secondary, #94a3b8) !important;
}
:root.dark body.eb-has-topbar-v2 .newTableAll .form-control,
:root.dark body.eb-has-topbar-v2 .newTableAll .form-control-sm {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}
:root.dark body.eb-has-topbar-v2 .newTableAll .bootstrap-select .btn {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text, #e2e8f0) !important;
}
:root.dark body.eb-has-topbar-v2 .inscriptionBtnGroup .btn.btn-secondary {
  background: var(--eb-surface, #1C1C1C) !important;
  border-color: var(--eb-border, #333) !important;
  color: var(--eb-text-secondary, #94a3b8) !important;
}
:root.dark body.eb-has-topbar-v2 .menu-group-item .border {
  border-color: var(--eb-border, #333) !important;
}

/* #9813 — Garantit que les liens stylés en btn-success (et autres .btn colorés)
   gardent leur couleur de texte définie par Bootstrap quelle que soit la
   couleur "inherit" imposée par les règles de .card-title. */
a.btn.btn-success,
a.btn.btn-success:hover,
a.btn.btn-success:focus {
  color: #fff !important;
}
a.btn.btn-primary,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus {
  color: #fff !important;
}
a.btn.btn-danger,
a.btn.btn-danger:hover,
a.btn.btn-danger:focus {
  color: #fff !important;
}

/* ============================================================
 * #9703 — Réserve un espace bas pour que la barre flottante
 *         #band-container / .band-buttons ne masque pas la
 *         dernière ligne du contenu.
 *
 * La barre est position:fixed (hors flux) → sans ce padding,
 * le dernier contenu (ligne de tableau, bas de formulaire…)
 * passe sous la barre et devient invisible.
 *
 * Hauteur réservée = barre (~50px) + offset bas (4px) + air (16px).
 * S'applique globalement à toutes les pages V2 (body.eb-has-topbar-v2).
 * ============================================================ */
body.eb-has-topbar-v2 {
  --eb-band-height: 70px;
  padding-bottom: var(--eb-band-height) !important;
}
body.eb-has-topbar-v2 #space-left,
body.eb-has-topbar-v2 .space-left {
  padding-bottom: var(--eb-band-height) !important;
}
/* Conteneurs bootstrap-table à scroll interne : un peu d'air en bas */
body.eb-has-topbar-v2 .fixed-table-body,
body.eb-has-topbar-v2 .fixed-table-container {
  padding-bottom: 12px;
}

/* Impression : on annule la réserve (la barre est masquée via .noprint) */
@media print {
  body.eb-has-topbar-v2,
  body.eb-has-topbar-v2 #space-left,
  body.eb-has-topbar-v2 .space-left {
    padding-bottom: 0 !important;
  }
}

/* Si la page n'a PAS de barre d'actions, on retire la réserve d'espace
   via :has() (Chrome 105+, Firefox 121+, Safari 15.4+) pour ne pas laisser
   un blanc inutile en bas. */
@supports selector(:has(*)) {
  body.eb-has-topbar-v2:not(:has(#band-container)):not(:has(.band-buttons)) {
    padding-bottom: 0 !important;
  }
  body.eb-has-topbar-v2:not(:has(#band-container)):not(:has(.band-buttons)) #space-left,
  body.eb-has-topbar-v2:not(:has(#band-container)):not(:has(.band-buttons)) .space-left {
    padding-bottom: 0 !important;
  }
}

/* =========================================================================
 * Mobile fixes for Statistique > Graphique (repo_events.php) and
 * Statistique > Export (export.php) — keeps these pages usable at 360–414px.
 * ========================================================================= */

/* Generic safe wrapping */
.card, .card *, [class*="col-"] { min-width: 0; }
.card .card-body,
.card h2, .card h3,
.card .card-title,
.card .text-muted {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Drop the desktop sidebar offset on small screens */
@media (max-width: 992px) {
  .space-left {
    margin-left: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Graphique (repo_events.php) KPI cards: 1 per row below 480px so numbers
   like "1059" or "2026" don't wrap mid-digit */
@media (max-width: 575.98px) {
  #repo-events-content .row > .col-6 { flex: 0 0 100%; max-width: 100%; }
  #repo-events-content .card.card-default.text-center,
  #repo-events-content .card.text-center { padding: 8px 6px !important; }
  #repo-events-content .card.text-center > div:first-child {
    font-size: 22px !important; line-height: 1.1; margin: 0;
  }
  #repo-events-content .card.text-center .text-muted {
    font-size: 12px; line-height: 1.2; white-space: normal;
  }
}

/* Chart canvases shrink with their card */
@media (max-width: 992px) {
  #repo-events-content canvas,
  .eb-group-page canvas,
  .eb-bilan-page canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  .eb-group-page #eb-group-charts > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Export page category cards: 1 col below 576px, defensive over Bootstrap's md break */
@media (max-width: 575.98px) {
  .eb-export-home .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .eb-export-home { padding: 12px 8px !important; max-width: 100% !important; }
  .eb-export-home .card-body { padding: 12px !important; }
  .eb-export-home ul.list-unstyled li a { white-space: normal; word-break: normal; overflow-wrap: break-word; }
}

/* "Créer un export personnalisé" hero card: stack + centre on phone */
@media (max-width: 575.98px) {
  .eb-export-home > .card:first-child .card-body {
    flex-wrap: wrap;
    text-align: center;
  }
  .eb-export-home > .card:first-child .card-body > div:first-child {
    flex-direction: column;
    text-align: center;
  }
  .eb-export-home > .card:first-child .btn { width: 100%; }
}

/* Toolbar dropdowns full-width on small screens (selectpicker wrapper included) */
@media (max-width: 768px) {
  .space-left .form-control,
  .space-left select.form-control,
  #repo-events-content .form-control,
  #repo-events-content select.form-control,
  .space-left .bootstrap-select,
  #repo-events-content .bootstrap-select {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 6px;
  }
  .space-left .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn),
  #repo-events-content .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100% !important;
  }
  #repo-events-content form.d-flex,
  .space-left form.d-flex {
    flex-wrap: wrap !important;
  }
}

/* Statistique group page (was inline <style> in repo_events.php) */
.eb-group-page { --eb-accent: var(--eb-group-accent, #64748b); }
.eb-group-page .eb-group-banner {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem; border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--eb-accent) 15%, transparent),
    color-mix(in srgb, var(--eb-accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--eb-accent) 25%, transparent);
}
.eb-group-page .eb-group-banner-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--eb-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--eb-accent) 50%, transparent);
  flex-shrink: 0;
}
.eb-group-page .eb-group-banner h2 { margin: 0; font-size: 1.3rem; font-weight: 700; color: #0f172a; }
.eb-group-page .eb-group-banner p  { margin: 0.15rem 0 0; font-size: 0.85rem; color: #64748b; }
.eb-group-page .eb-kpi-card {
  border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 12px;
  padding: 0.9rem 1rem; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; align-items: center; gap: 0.75rem; height: 100%;
}
.eb-group-page .eb-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.eb-group-page .eb-kpi-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: color-mix(in srgb, var(--eb-accent) 18%, transparent);
  color: var(--eb-accent); flex-shrink: 0;
}
.eb-group-page .eb-kpi-value { font-size: 1.4rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
.eb-group-page .eb-kpi-label { font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 500; }
.eb-group-page .card.card-default {
  border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden; transition: box-shadow .15s ease;
}
.eb-group-page .card.card-default:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.eb-group-page .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  padding: 0.65rem 1rem !important;
  font-weight: 600; font-size: 0.88rem; color: #0f172a; letter-spacing: -0.01em;
}
.eb-group-page .card-body { padding: 0.75rem 1rem !important; }
/* Hauteur des graphiques pilotée par --eb-chart-h (calculé en PHP selon le
   nombre de cards) afin d'afficher l'ensemble du groupe sans scroll, surtout
   sur les pages à 4 cards. Override des hauteurs inline de print_graphic. */
.eb-group-page #eb-group-charts .container-fluid,
.eb-group-page #eb-group-charts .eb-chart-empty {
  height: var(--eb-chart-h, min(42vh, 420px)) !important;
  max-height: var(--eb-chart-h, min(42vh, 420px)) !important;
}
/* Le conteneur de graphique porte un fond gris (thème) masqué par le canvas
   blanc quand il y a des données. À vide, le canvas est retiré et ce gris
   apparaissait comme une boîte (incohérent avec l'état vide des doughnuts).
   Fond transparent → l'état « aucune donnée » est propre dans tous les cas. */
.eb-group-page #eb-group-charts .container-fluid { background: transparent !important; }
@media (max-width: 767px) {
  /* sur mobile les charts s'empilent : hauteur plus compacte pour limiter le scroll */
  .eb-group-page #eb-group-charts .container-fluid,
  .eb-group-page #eb-group-charts .eb-chart-empty {
    height: min(40vh, 300px) !important;
    max-height: min(40vh, 300px) !important;
  }

  .eb-group-page .eb-group-banner { padding: 0.75rem 0.9rem; }
  .eb-group-page .eb-group-banner h2 { font-size: 1.05rem; }
  .eb-group-page .eb-kpi-value { font-size: 1.15rem; }
}

/* Répartition (tableau_garde, onglet 3) : les 3 bilans Général / Participation
   / Garde affichés 2 par ligne (demi-largeur, équivalent col-6) au lieu d'être
   empilés plein écran. align-items:start → chaque carte garde sa propre hauteur
   (un bilan court ne s'étire pas à la taille de son voisin). */
.eb-bilan-multi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
@media (max-width: 991.98px) {
  /* sur tablette/mobile on repasse en pleine largeur (1 colonne) */
  .eb-bilan-multi { grid-template-columns: 1fr; }
}

/* Statistique bilan page (was inline <style> in bilan_participation.php) */
.eb-bilan-page { --eb-accent: var(--eb-bilan-accent, #3b82f6); }
.eb-bilan-page .eb-bilan-banner {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; margin: 0.5rem 0 1rem; border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--eb-accent) 15%, transparent),
    color-mix(in srgb, var(--eb-accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--eb-accent) 25%, transparent);
}
.eb-bilan-page .eb-bilan-banner-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--eb-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--eb-accent) 50%, transparent);
  flex-shrink: 0;
}
.eb-bilan-page .eb-bilan-banner h2 { margin: 0; font-size: 1.3rem; font-weight: 700; color: #0f172a; }
.eb-bilan-page .eb-bilan-banner p  { margin: 0.15rem 0 0; font-size: 0.85rem; color: #64748b; }
.eb-bilan-page .card.card-default {
  border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden;
}
.eb-bilan-page .card-header {
  background: transparent; border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  padding: 0.65rem 1rem !important;
  font-weight: 600; font-size: 0.88rem; color: #0f172a;
}
.eb-bilan-page .card-body { padding: 0.75rem 1rem !important; }

/* Bandeau de synthèse « en un coup d'œil » du bilan (garde Répartition +
   Statistiques). Rendu par repo_bilan_participations() → classe non scopée
   à .eb-bilan-page pour fonctionner dans les deux contextes. Chiffres clés,
   pas un bandeau héros décoratif (ceux-ci ont été retirés à la demande
   client, cf. .eb-bilan-banner display:none plus haut). */
.eb-bilan-kpis {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 2px 0 16px;
}
.eb-bilan-kpi {
  flex: 1 1 150px; min-width: 130px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px;
  background: var(--eb-surface-muted, #f8fafc);
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius-md, 10px);
}
.eb-bilan-kpi-val {
  font-size: 1.4rem; font-weight: 700; line-height: 1.1;
  color: var(--eb-text, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eb-bilan-kpi-val .eb-bilan-kpi-sep { font-size: 0.95rem; font-weight: 600; color: var(--eb-text-muted, #94a3b8); }
.eb-bilan-kpi-lbl {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--eb-text-secondary, #64748b);
}
/* Carte « total » mise en avant à l'accent de la page (--eb-bilan-accent
   posé en inline sur .eb-bilan-page : teal garde / vert participation…). */
.eb-bilan-page .eb-bilan-kpi--accent {
  background: color-mix(in srgb, var(--eb-bilan-accent, #3b82f6) 10%, transparent);
  border-color: color-mix(in srgb, var(--eb-bilan-accent, #3b82f6) 30%, transparent);
}
.eb-bilan-page .eb-bilan-kpi--accent .eb-bilan-kpi-val { color: var(--eb-bilan-accent, #2563eb); }
/* Repli hors contexte .eb-bilan-page (pas d'accent défini) → bleu primaire. */
.eb-bilan-kpi--accent {
  background: var(--eb-primary-light, #eff6ff);
  border-color: var(--eb-primary-dim, #dbeafe);
}
.eb-bilan-kpi--accent .eb-bilan-kpi-val { color: var(--eb-primary, #2563eb); }
/* Carte texte (nom de l'agent en tête) : valeur plus petite pour tenir. */
.eb-bilan-kpi--text .eb-bilan-kpi-val { font-size: 1rem; font-weight: 600; }
@media (max-width: 575.98px) {
  .eb-bilan-kpi { flex-basis: calc(50% - 5px); min-width: 0; }
  .eb-bilan-kpi-val { font-size: 1.15rem; }
}

@media (max-width: 767px) {
  .eb-bilan-page .eb-bilan-banner { padding: 0.75rem 0.9rem; }
  .eb-bilan-page .eb-bilan-banner h2 { font-size: 1.05rem; }
}

@media (max-width: 575.98px) {
  .eb-bilan-page .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .eb-bilan-page table { font-size: 0.78rem; }
  .eb-bilan-page table th, .eb-bilan-page table td { padding: 4px 6px !important; white-space: nowrap; }
}

@media (max-width: 414px) {
  #repo-events-content .card.text-center { min-height: 48px; }
}

@media (max-width: 575.98px) {
  /* overflow-x:auto supprimé — table-layout:fixed + width:100% contient la table.
     .table-responsive garde son auto (tableaux legacy non-bootstrap-table). */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive > table.table {
    min-width: max-content;
  }
}

/* navLateral off-canvas below 992px */
@media (max-width: 991.98px) {
  #navLateral.collapse.show,
  #navLateral.collapsing {
    display: block !important;
    width: 240px !important;
    max-width: 80vw !important;
    /* Le drawer doit démarrer SOUS le topbar (.eb-topbar fait 48px en mobile)
       et tenir dans la hauteur restante — sinon top:44px chevauchait le topbar
       (Personnel masqué) et height:100vh débordait sous l'écran (Espace client
       coupé). calc + dvh = pile la zone visible sous le topbar. */
    top: 48px !important;
    height: calc(100dvh - 48px) !important;
    position: fixed !important;
    left: 0 !important;
    z-index: 1045 !important;
    background: #fff !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.15) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  /* En impersonation (ghost-superadmin via monitor2), la bande de test décale
     le topbar de +30px -> le drawer doit suivre, sinon ses 1ers items
     (Personnel…) passent sous le bandeau. */
  body.eb-impersonating #navLateral.collapse.show,
  body.eb-impersonating #navLateral.collapsing {
    top: 78px !important;
    height: calc(100dvh - 78px) !important;
  }
  #navLateral.collapse:not(.show) {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 575.98px) {
  .no-result-img,
  body.eb-has-topbar-v2 .no-result-img {
    margin-top: 56px !important;
    position: relative;
    z-index: 1;
  }
  .fc-toolbar-chunk .fc-button-group,
  .calendar-view-toggle,
  [data-view-toggle] {
    position: static !important;
    margin: 8px auto 12px !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* Toolbar stacking on phone */
@media (max-width: 575.98px) {
  #toolbar {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 4px !important;
  }
  #toolbar .filter-area,
  #toolbar .filter-area-2 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #toolbar .filterAreaDiv,
  #toolbar .filterAreaDiv.eb-filter-area-div-mobile {
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
  }
  #toolbar .bootstrap-select,
  #toolbar .bootstrap-select[data-width],
  #toolbar .bootstrap-select[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #toolbar .bootstrap-select > .dropdown-toggle.btn,
  #toolbar .bootstrap-select > .btn {
    width: 100% !important;
    text-align: left;
  }
  body > .bootstrap-select.show > .dropdown-menu,
  .bootstrap-select.show > .dropdown-menu.inner.show {
    max-width: 92vw !important;
  }
  #toolbar input.search-input,
  #toolbar .form-control.search-input,
  #toolbar .search-input {
    width: 100% !important;
    max-width: 100% !important;
  }
  .eb-view-bookmarks,
  .view-bookmarks,
  .view-bookmarks-pill,
  [data-view-bookmarks] {
    width: 100% !important;
    justify-content: center !important;
    margin: 6px 0 8px !important;
    flex-wrap: wrap !important;
  }
  #toolbar .affiner-toggle,
  #toolbar .bs-bars,
  #toolbar [aria-label*="affiner" i] {
    align-self: flex-end !important;
    width: auto !important;
    min-width: 38px !important;
  }
  .input-group.w-auto,
  #toolbar .input-group.w-auto {
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  body .fixed-table-toolbar #toolbar .filter-area:not(.active),
  body.eb-has-topbar-v2 .fixed-table-toolbar #toolbar .filter-area:not(.active) {
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body .fixed-table-toolbar #toolbar .filter-area.active,
  body.eb-has-topbar-v2 .fixed-table-toolbar #toolbar .filter-area.active {
    height: auto !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }
}

/* B1: filter-area static below 576px */
@media (max-width: 575.98px) {
  body .fixed-table-toolbar .filter-area,
  body.eb-has-topbar-v2 .fixed-table-toolbar .filter-area {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: auto !important;
  }
  /* B2 */
  .filter-position,
  .filter-position .filter-area,
  .filter-position .filterAreaDiv {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* B3: hide empty card-view rows */
.card-view td:has(> .card-view-value:empty),
.fixed-table-body .card-view td:empty,
.fixed-table-body td:has(> div.card-view-value:empty) {
  display: none !important;
}

/* B5: Colonnes image/logo — taille fixe sur mobile */
@media (max-width: 575.98px) {
  table.table th[data-field="image"],
  table.table td[data-field="image"],
  table.table th[data-field="logo"],
  table.table td[data-field="logo"],
  table.table th[data-field="picture"],
  table.table td[data-field="picture"] {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 4px !important;
  }
  table.table th[data-field="image"] img,
  table.table td[data-field="image"] img,
  table.table th[data-field="logo"] img,
  table.table td[data-field="logo"] img {
    max-width: 32px !important;
    height: auto !important;
  }
}

/* B7: restore Fournisseur action column on mobile */
@media (max-width: 767.98px) {
  body[data-page="fournisseur"] table.table th[data-field="bouton"],
  body[data-page="fournisseur"] table.table td[data-field="bouton"],
  table.table th[data-field="bouton"],
  table.table td[data-field="bouton"] {
    display: table-cell !important;
    width: auto !important;
    min-width: 84px !important;
    padding: 4px !important;
    text-align: right !important;
  }
  table.table td[data-field="bouton"] .btn-action,
  table.table td[data-field="bouton"] a.btn,
  table.table td[data-field="bouton"] button.btn {
    padding: 4px 6px !important;
    font-size: 13px !important;
  }
}

/* B12: stat cards 2-up below 480px */
@media (max-width: 480px) {
  .stats-wrapper,
  .stats-container-diviser {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .stats-wrapper > .stats-container,
  .stats-container-diviser > ul,
  .stats-container-diviser > .stats-container {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  .stats-wrapper > .stats-container .counter,
  .stats-container-diviser .counter {
    font-size: 16px !important;
  }
  .stats-wrapper > .stats-container .stats-title,
  .stats-container-diviser .stats-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}


@media (max-width: 575.98px) {
  #toolbar,
  #toolbar.w-100,
  #toolbar .filter-position,
  #toolbar .filter-area-2,
  #toolbar .filterAreaDiv {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
    box-sizing: border-box !important;
  }
  /* #10167 — filter-area : toggle via .active (était toujours visible) */
  #toolbar .filter-area {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
  }
  #toolbar .filter-area.active {
    height: auto !important;
    max-height: 700px !important;
    overflow: visible !important;
  }
  #toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 8px !important;
  }
  /* #10167 — Nouveau layout (bs-bars sur ligne 2 a déjà son padding 0 8px) :
     pas de double padding ni de margin résiduelle quand filter-area collapsed */
  body .fixed-table-toolbar:has(.bs-bars .filter-area) #toolbar,
  body.eb-has-topbar-v2 .fixed-table-toolbar:has(.bs-bars .filter-area) #toolbar {
    padding: 0 !important;
    margin: 0 !important;
  }
  #toolbar .filter-position,
  #toolbar .filter-area,
  #toolbar .filter-area-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }
  #toolbar .filterAreaDiv {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  /* Affiner button shouldn't overlay the cards */
  #toolbar .eb-filter-mobile-wrap,
  #toolbar .affiner-btn,
  #toolbar .filter-button {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
  }
  /* Bouton filtre garde sa taille d'icône même en layout colonne */
  #toolbar .eb-filter-mobile-wrap { width: auto !important; }
  #toolbar .affiner-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
  /* Each filter input/selectpicker fills its row */
  #toolbar .filterAreaDiv > .bootstrap-select,
  #toolbar .filterAreaDiv > .bootstrap-select[data-width],
  #toolbar .filterAreaDiv > .bootstrap-select[style*="width"],
  #toolbar .filterAreaDiv > input,
  #toolbar .filterAreaDiv > .form-control,
  #toolbar .filterAreaDiv > select,
  #toolbar .filterAreaDiv > .input-group {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Bootstrap-select toggle inside filter rows */
  #toolbar .filterAreaDiv .bootstrap-select > .btn,
  #toolbar .filterAreaDiv .bootstrap-select > .dropdown-toggle.btn {
    width: 100% !important;
    text-align: left !important;
  }
  /* Ensure the bootstrap-table list starts below the toolbar */
  #toolbar + .bootstrap-table,
  #toolbar + .fixed-table-toolbar,
  #toolbar ~ .bootstrap-table,
  #toolbar ~ #table {
    clear: both !important;
    margin-top: 4px !important;
  }
}

/* Hide card-view rows that render only an em-dash / hyphen placeholder.
   Bootstrap-table emits <td><b class="card-view-title">LABEL</b><div
   class="card-view-value">—</div></td>. CSS can't match text directly,
   but the value's :only-child non-element + its lone-character width gives
   us a workable signal: combine :empty (already done) with a width-based
   heuristic on phone to also collapse near-empty rows. */
/* Breakpoint aligne sur le JS qui bascule le cardView auto
   (isPhoneViewport = `(max-width: 768px), (pointer: coarse)` dans
   bootstrap-table-ebrigade.js). En 576-768px le cardView etait actif mais
   ce style ne s'appliquait pas -> la grille legacy .table.cards (200px)
   reprenait la main = cartes ecrasees. */
@media (max-width: 768px), (pointer: coarse) {
  table.eb-mobile-card-table.cards {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    width: 100% !important;
    display: block !important;
  }
  /* Neutralise le tbody flex legacy (.table.cards tbody { display:flex }) qui,
     combine a `tr { flex: 0 1 240px }`, figeait chaque carte a 240px de large
     (la regle width:100% du tr etait ignoree car flex-basis l'emporte). */
  table.eb-mobile-card-table.cards tbody {
    display: block !important;
    width: 100% !important;
  }
  table.eb-mobile-card-table.cards tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--eb-border, #e2e8f0) !important;
    border-radius: 12px !important;
    background: var(--eb-surface, #fff) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
    box-sizing: border-box !important;
  }
  table.eb-mobile-card-table.cards tr + tr {
    margin-top: 10px !important;
  }
  /* Neutralise deux regles legacy qui retrecissaient la cellule-conteneur
     unique (td colspan) du card-view :
       - `table.cards tr td { width: 50% }` (main.css)
       - `.fixed-table-body tbody tr > td:last-child { width: 56px }` (colonne
         bouton) qui matchait aussi le td unique du card-view (lui aussi
         :last-child). Specificite remontee pour battre ces deux selecteurs. */
  body table.eb-mobile-card-table.cards tbody tr > td,
  body.eb-has-topbar-v2 table.eb-mobile-card-table.cards tbody tr > td:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }
  table.eb-mobile-card-table.cards .card-views {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  table.eb-mobile-card-table.cards .card-view {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
  }
  table.eb-mobile-card-table.cards .card-view-title {
    display: block !important;
    flex: 0 0 96px !important;
    min-width: 96px !important;
    max-width: 42% !important;
    color: var(--eb-muted, #64748b) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
  }
  table.eb-mobile-card-table.cards .card-view-value {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  table.eb-mobile-card-table.cards .card-view-value,
  table.eb-mobile-card-table.cards .card-view-value > * {
    max-width: 100% !important;
  }
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value .btn),
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value button),
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value a.btn) {
    justify-content: flex-end !important;
    padding-top: 6px !important;
  }
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value .btn) .card-view-title,
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value button) .card-view-title,
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value a.btn) .card-view-title {
    display: none !important;
  }
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value .btn) .card-view-value,
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value button) .card-view-value,
  table.eb-mobile-card-table.cards .card-view:has(.card-view-value a.btn) .card-view-value {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .card-view td:has(> .card-view-value:empty),
  .card-view td:has(> .card-view-value:not(:has(*))[data-empty]),
  .fixed-table-body .card-view td:empty {
    display: none !important;
  }
  /* Tighten card-view rows so they don't take a full screen height each */
  .card-view td {
    padding: 4px 8px !important;
    line-height: 1.3 !important;
  }
  .card-view .card-view-title {
    min-width: 90px !important;
    font-size: 11px !important;
    color: var(--eb-muted, #64748b) !important;
  }
  .card-view .card-view-value {
    font-size: 13px !important;
  }
}

/* Mobile containment for legacy card/form screens.
   Several pages still render forms through table-based markup or inline-width
   controls. On phone, those widths must be capped by the card/modal instead of
   pushing the whole panel outside the viewport. */
@media (max-width: 768px), (pointer: coarse) {
  body.eb-has-topbar-v2 #content .card,
  body.eb-has-topbar-v2 #content .card-body,
  body.eb-has-topbar-v2 .modal-dialog,
  body.eb-has-topbar-v2 .modal-content,
  body.eb-has-topbar-v2 .modal-body,
  body.eb-has-topbar-v2 .swal3-popup,
  body.eb-has-topbar-v2 .swal3-html-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.eb-has-topbar-v2 #content .card-body,
  body.eb-has-topbar-v2 .modal-body,
  body.eb-has-topbar-v2 .swal3-html-container {
    overflow-x: clip;
  }

  body.eb-has-topbar-v2 #content .card input:not([type="checkbox"]):not([type="radio"]),
  body.eb-has-topbar-v2 #content .card select,
  body.eb-has-topbar-v2 #content .card textarea,
  body.eb-has-topbar-v2 #content .card .form-control,
  body.eb-has-topbar-v2 #content .card .bootstrap-select,
  body.eb-has-topbar-v2 .modal-body input:not([type="checkbox"]):not([type="radio"]),
  body.eb-has-topbar-v2 .modal-body select,
  body.eb-has-topbar-v2 .modal-body textarea,
  body.eb-has-topbar-v2 .modal-body .form-control,
  body.eb-has-topbar-v2 .modal-body .bootstrap-select,
  body.eb-has-topbar-v2 .swal3-html-container input:not([type="checkbox"]):not([type="radio"]),
  body.eb-has-topbar-v2 .swal3-html-container select,
  body.eb-has-topbar-v2 .swal3-html-container textarea,
  body.eb-has-topbar-v2 .swal3-html-container .form-control,
  body.eb-has-topbar-v2 .swal3-html-container .bootstrap-select {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.eb-has-topbar-v2 #content .card .input-group,
  body.eb-has-topbar-v2 #content .card .bootstrap-select > .dropdown-toggle,
  body.eb-has-topbar-v2 .modal-body .input-group,
  body.eb-has-topbar-v2 .modal-body .bootstrap-select > .dropdown-toggle,
  body.eb-has-topbar-v2 .swal3-html-container .input-group,
  body.eb-has-topbar-v2 .swal3-html-container .bootstrap-select > .dropdown-toggle {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.eb-has-topbar-v2 #content .card table.noBorder,
  body.eb-has-topbar-v2 #content .card table.noBorder tbody,
  body.eb-has-topbar-v2 #content .card table.noBorder tr,
  body.eb-has-topbar-v2 #content .card table.noBorder td,
  body.eb-has-topbar-v2 .modal-body table.noBorder,
  body.eb-has-topbar-v2 .modal-body table.noBorder tbody,
  body.eb-has-topbar-v2 .modal-body table.noBorder tr,
  body.eb-has-topbar-v2 .modal-body table.noBorder td,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder tbody,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder tr,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder td {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.eb-has-topbar-v2 #content .card table.noBorder,
  body.eb-has-topbar-v2 #content .card table.noBorder > tbody,
  body.eb-has-topbar-v2 .modal-body table.noBorder,
  body.eb-has-topbar-v2 .modal-body table.noBorder > tbody,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder > tbody {
    display: block !important;
    width: 100% !important;
  }

  body.eb-has-topbar-v2 #content .card table.noBorder > tbody > tr,
  body.eb-has-topbar-v2 .modal-body table.noBorder > tbody > tr,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder > tbody > tr {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  body.eb-has-topbar-v2 #content .card table.noBorder > tbody > tr > td,
  body.eb-has-topbar-v2 .modal-body table.noBorder > tbody > tr > td,
  body.eb-has-topbar-v2 .swal3-html-container table.noBorder > tbody > tr > td {
    display: block !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Stronger phone-view layout for inventaire-style pages (.eb-inv).
   These pages stack a standalone #toolbar (display_toolbar output) and the
   bootstrap-table inside .eb-inv. main.css line 11938 absolute-positions
   .fixed-table-toolbar .filter-area for ≤414px — and the kebab columns
   toggle (.bs-bars > .columns) escapes its container, ending up mid-card.
   Force the entire toolbar subtree to a clean column-flow on phone. */
@media (max-width: 575.98px) {
  /* Standalone display_toolbar() #toolbar — block flow, no escape */
  body .eb-inv #toolbar,
  body.eb-has-topbar-v2 .eb-inv #toolbar {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 8px !important;
    overflow: visible !important;
  }
  body .eb-inv #toolbar > *,
  body.eb-has-topbar-v2 .eb-inv #toolbar > * {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 6px !important;
    float: none !important;
  }
  /* #10167 — Bootstrap-table's own fixed-table-toolbar : on s'aligne sur le
     layout universel evenement_choice (search row 1 avec bouton filtre,
     bs-bars row 2 avec filter-area déployable). flex-wrap: wrap + order. */
  body .eb-inv .bootstrap-table > .fixed-table-toolbar,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 0 8px !important;
    overflow: visible !important;
    position: static !important;
  }
  body .eb-inv .bootstrap-table > .fixed-table-toolbar > *,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar > * {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  /* Search row : ligne 1 (avec le bouton filtre prepended via filter_area.js) */
  body .eb-inv .bootstrap-table > .fixed-table-toolbar > .search,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar > .search {
    order: 1 !important;
  }
  /* bs-bars (avec #toolbar > filter-area) : ligne 2, déployable */
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .bs-bars,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar .bs-bars {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    position: static !important;
  }
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .columns,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar .columns,
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .columns-right {
    position: static !important;
    float: none !important;
    width: auto !important;
    margin-left: auto !important;
  }
  /* Search input full width on its own row */
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .search,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar .search {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .search > input,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar .search > input {
    width: 100% !important;
  }
  /* #10167 — voir bloc @media (max-width: 991px) en bas du fichier pour le
     toggle filter-area sur les pages .eb-inv (display: none/flex selon .active). */

  /* #10167 — Pour .filter-area on aligne sur le comportement standard
     (toggle via .active). On garde filter-area-2 et filter-position toujours
     visibles (pas de bouton Affiner pour les déployer). */
  body .eb-inv #toolbar .filter-area-2,
  body .eb-inv #toolbar .filter-position,
  body.eb-has-topbar-v2 .eb-inv #toolbar .filter-area-2,
  body.eb-has-topbar-v2 .eb-inv #toolbar .filter-position {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  /* Ensure the bootstrap-table wrapper starts on a new row below #toolbar */
  body .eb-inv .bootstrap-table,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 4px !important;
  }
}

/* Card-view ACTIONS row: the kebab/edit buttons in data-field="bouton"
   should render with the column label (or none) in line, not float.
   Meme breakpoint que le cardView auto (cf. bloc principal ci-dessus). */
@media (max-width: 768px), (pointer: coarse) {
  .card-view td[data-field="bouton"],
  .card-view td[data-field="actions"] {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 6px 8px !important;
  }
  .card-view td[data-field="bouton"] .card-view-title,
  .card-view td[data-field="actions"] .card-view-title {
    display: none !important;
  }
  .card-view td[data-field="bouton"] .card-view-value,
  .card-view td[data-field="actions"] .card-view-value {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

/* Align selects, search, columns-toggle and cards to identical horizontal
   bounds on phone: same left/right padding, same width, same border radius. */
@media (max-width: 575.98px) {
  body .eb-inv,
  body.eb-has-topbar-v2 .eb-inv,
  body .eb-inv #toolbar,
  body.eb-has-topbar-v2 .eb-inv #toolbar,
  body .eb-inv .bootstrap-table,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table,
  body .eb-inv .bootstrap-table > .fixed-table-toolbar,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-toolbar,
  body .eb-inv .bootstrap-table > .fixed-table-container,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Match the Liste/Activité tab bar's outer rail: ~6px from each viewport
     edge. Apply on the page-level wrappers, not the toolbar itself, so
     selects/cards reach the same bounds as the tab strip above. */
  body .eb-inv,
  body.eb-has-topbar-v2 .eb-inv,
  body #vehicule_stats_wrap,
  body.eb-has-topbar-v2 #vehicule_stats_wrap {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Each filter control + each card uses the same width = 100% of its parent */
  body .eb-inv #toolbar > *,
  body.eb-has-topbar-v2 .eb-inv #toolbar > *,
  body .eb-inv #toolbar .filter-area > *,
  body .eb-inv #toolbar .filterAreaDiv,
  body .eb-inv #toolbar .filterAreaDiv > *,
  body .eb-inv .bootstrap-table > .fixed-table-toolbar > *,
  body .eb-inv .bootstrap-table .card-views,
  body .eb-inv .bootstrap-table .card-view,
  body .eb-inv .bootstrap-table table.cards,
  body .eb-inv .bootstrap-table table.cards > tbody > tr {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Card row: each card is a <tr> with bottom margin and rounded corners */
  body .eb-inv .bootstrap-table table.cards > tbody > tr {
    display: block !important;
    background: var(--eb-surface, #fff) !important;
    border: 1px solid var(--eb-border, rgba(148,163,184,0.18)) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    margin-bottom: 10px !important;
    padding: 8px 12px !important;
  }
  /* Bootstrap-select toggle, search input, columns toggle — same look */
  body .eb-inv #toolbar .bootstrap-select > .btn,
  body .eb-inv #toolbar .bootstrap-select > .dropdown-toggle.btn,
  body .eb-inv .bootstrap-table .search > input,
  body .eb-inv .bootstrap-table .columns .btn,
  body .eb-inv .bootstrap-table .columns-right .btn {
    border-radius: 12px !important;
    border: 1px solid var(--eb-border, rgba(148,163,184,0.25)) !important;
    background: var(--eb-surface, #fff) !important;
    height: 44px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }
  /* #10167 — Columns toggle masqué en mobile (inutile) */
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .columns,
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .columns-right {
    display: none !important;
  }
  /* Search row: same height/radius as selects */
  body .eb-inv .bootstrap-table > .fixed-table-toolbar .search {
    width: 100% !important;
  }
  /* Réformé toggle row aligned with the rest */
  body .eb-inv > .eb-reforme-row,
  body .eb-inv #vehicule_stats_wrap > div:has(input#mad) {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
  }
}

/* Drop the outer wrapper background/border around the card list on phone.
   main.css L3259 paints .fixed-table-container with bkg-color1 which reads
   as a frame around the cards; we want only the per-card borders to show. */
@media (max-width: 575.98px) {
  body .eb-inv .bootstrap-table,
  body .eb-inv .bootstrap-table > .fixed-table-container,
  body .eb-inv .bootstrap-table .fixed-table-body,
  body .eb-inv .bootstrap-table .table-responsive,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table > .fixed-table-container,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table .fixed-table-body,
  body.eb-has-topbar-v2 .eb-inv .bootstrap-table .table-responsive {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Same for the inner table element */
  body .eb-inv .eb-inventory-table,
  body .eb-inv .eb-inventory-table tbody,
  body.eb-has-topbar-v2 .eb-inv .eb-inventory-table,
  body.eb-has-topbar-v2 .eb-inv .eb-inventory-table tbody {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* The per-card border still wins (set in inventory_responsive.css L411) */
}

/* Lock select/card horizontal bounds to the same gutter as the #menu tab bar.
   #menu uses padding: 0 16px on its inner content, so the visible white
   panel hugs the viewport. Mirror that on the inventaire surface so the
   selects, search input, columns toggle and card rows all share the same
   left/right edge as the Liste/Activité strip. */
@media (max-width: 575.98px) {
  /* Kill any stray padding on the parent containers between the tab bar
     and the toolbar so the rail is uniform top-to-bottom. */
  body.eb-has-topbar-v2 #vehicule_tabs_content,
  body.eb-has-topbar-v2 #materiel_tabs_content,
  body.eb-has-topbar-v2 #tenue_stats,
  body.eb-has-topbar-v2 #vehicule_stats {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Stat-cards / Réformé toggle row also align to the same rail */
  body .eb-inv .stats-wrapper,
  body .eb-inv .stats-container-diviser,
  body.eb-has-topbar-v2 .eb-inv .stats-wrapper,
  body.eb-has-topbar-v2 .eb-inv .stats-container-diviser {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Selects + cards use the full inner width of their (now 6px-padded) parent */
  body .eb-inv #toolbar .filterAreaDiv,
  body .eb-inv #toolbar .bootstrap-select,
  body .eb-inv #toolbar .filterAreaDiv > *,
  body .eb-inv .bootstrap-table > .fixed-table-toolbar > .search,
  body .eb-inv .bootstrap-table > .fixed-table-toolbar > .columns,
  body .eb-inv .bootstrap-table > .fixed-table-toolbar > .columns-right,
  body .eb-inv .eb-inventory-table tbody > tr {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Vehicle detail page (upd_vehicule.php): align hero card and tab-content
   cards (Généralité etc.) to the SAME left/right rail as the #menu strip.
   #menu uses padding: 0 16px. Hero is wrapped in .container-fluid with
   inline padding: 0 12px, and tab content cards sit at viewport edge.
   Match all of them on the strip's 16px gutter on phone. */
@media (max-width: 575.98px) {
  body:has(#vehHero) > .container-fluid:has(#vehHero),
  body.eb-has-topbar-v2:has(#vehHero) > .container-fluid:has(#vehHero) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  body:has(#vehHero) #upd_vehicule_tabs_content,
  body.eb-has-topbar-v2:has(#vehHero) #upd_vehicule_tabs_content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Inside #upd_vehicule_tabs_content drop any nested padding so cards
     don't gain a second gutter and end up narrower than the strip. */
  body:has(#vehHero) #upd_vehicule_tabs_content > .container-fluid,
  body:has(#vehHero) #upd_vehicule_tabs_content > .row,
  body:has(#vehHero) #upd_vehicule_tabs_content > form,
  body:has(#vehHero) #upd_vehicule_tabs_content .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Hero + every card in the tab content takes the full inner width */
  body:has(#vehHero) #vehHero,
  body:has(#vehHero) #upd_vehicule_tabs_content .card,
  body:has(#vehHero) #upd_vehicule_tabs_content .eb-card,
  body:has(#vehHero) #upd_vehicule_tabs_content .form-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* #menu has padding 0 16px from L1453 — make sure no extra side margin */
  body:has(#vehHero) > #menu,
  body.eb-has-topbar-v2:has(#vehHero) > #menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Hard-pin the three siblings (#menu strip, hero card wrapper, tab content)
   to identical outer bounds on phone. The strip's mc-tabs-bar rule from
   tab-scroll.css L231 sets margin: 0 16px 16px / width: auto — that is the
   reference. Match the same gutter on hero + form cards. Override needs
   beat both `body.eb-has-topbar-v2 #menu` (L1453) and
   `html body.eb-has-topbar-v2 #menu.mc-tabs-bar` (tab-scroll L221) so
   we use a higher-specificity selector with the same html-prefix trick. */
@media (max-width: 575.98px) {
  html body:has(#vehHero) > #menu.mc-tabs-bar,
  html body.eb-has-topbar-v2:has(#vehHero) > #menu.mc-tabs-bar,
  html body:has(#vehHero) > #menu,
  html body.eb-has-topbar-v2:has(#vehHero) > #menu,
  html body:has(#vehHero) > .container-fluid,
  html body.eb-has-topbar-v2:has(#vehHero) > .container-fluid,
  html body:has(#vehHero) > #upd_vehicule_tabs_content,
  html body.eb-has-topbar-v2:has(#vehHero) > #upd_vehicule_tabs_content {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  /* Restore inner padding for #menu's tab pill row only — the OUTER bg
     stays at the same rail as the hero/cards; pills get their breathing
     room via the .menu-mobile child instead. */
  body:has(#vehHero) > #menu .carousel,
  body:has(#vehHero) > #menu .carousel-inner,
  body:has(#vehHero) > #menu .carousel-item,
  body:has(#vehHero) > #menu .menu-mobile,
  body.eb-has-topbar-v2:has(#vehHero) > #menu .carousel,
  body.eb-has-topbar-v2:has(#vehHero) > #menu .carousel-inner,
  body.eb-has-topbar-v2:has(#vehHero) > #menu .carousel-item,
  body.eb-has-topbar-v2:has(#vehHero) > #menu .menu-mobile {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Hero + Généralité + every form card take 100% of the (now equal) parent */
  body:has(#vehHero) #vehHero,
  body:has(#vehHero) > .container-fluid > *,
  body:has(#vehHero) #upd_vehicule_tabs_content > *,
  body:has(#vehHero) #upd_vehicule_tabs_content .card,
  body:has(#vehHero) #upd_vehicule_tabs_content .eb-card,
  body:has(#vehHero) #upd_vehicule_tabs_content .form-card,
  body.eb-has-topbar-v2:has(#vehHero) #vehHero,
  body.eb-has-topbar-v2:has(#vehHero) > .container-fluid > *,
  body.eb-has-topbar-v2:has(#vehHero) #upd_vehicule_tabs_content > *,
  body.eb-has-topbar-v2:has(#vehHero) #upd_vehicule_tabs_content .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* DEBUG-STRENGTH: Last-resort rail enforcement on the upd_vehicule.php
   detail page. Uses 100vw + html body prefix + multiple selector forms
   to beat tab-scroll.css L221 specificity AND any inline style. The strip
   reference is 16px from each viewport edge. */
@media (max-width: 575.98px) {
  html body:has(#vehHero) #menu,
  html body.eb-has-topbar-v2:has(#vehHero) #menu,
  html body:has(#vehHero) #menu.mc-tabs-bar,
  html body.eb-has-topbar-v2:has(#vehHero) #menu.mc-tabs-bar {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  html body:has(#vehHero) #vehHero,
  html body.eb-has-topbar-v2:has(#vehHero) #vehHero {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  html body:has(#vehHero) > .container-fluid,
  html body.eb-has-topbar-v2:has(#vehHero) > .container-fluid,
  html body:has(#vehHero) .container-fluid:has(#vehHero),
  html body.eb-has-topbar-v2:has(#vehHero) .container-fluid:has(#vehHero) {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  html body:has(#vehHero) #upd_vehicule_tabs_content,
  html body.eb-has-topbar-v2:has(#vehHero) #upd_vehicule_tabs_content {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Inner cards (Généralité etc.) fill 100% of #upd_vehicule_tabs_content */
  html body:has(#vehHero) #upd_vehicule_tabs_content > *,
  html body.eb-has-topbar-v2:has(#vehHero) #upd_vehicule_tabs_content > *,
  html body:has(#vehHero) #upd_vehicule_tabs_content .card,
  html body:has(#vehHero) #upd_vehicule_tabs_content .eb-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Symmetric gutters: stop horizontal overflow that lets cards spill toward
   the right edge. .space-left under 991px has margin-right: -5px (main.css
   L640-643) which extends content past the viewport on the right. Pin
   body to no horizontal overflow on phone so calc(100% - 32px)/auto-widths
   honor the visible viewport bounds. */
@media (max-width: 575.98px) {
  html body:has(#vehHero),
  html body.eb-has-topbar-v2:has(#vehHero) {
    overflow-x: hidden !important;
  }
  html body:has(#vehHero) #div_principale,
  html body.eb-has-topbar-v2:has(#vehHero) #div_principale,
  html body:has(#vehHero) .space-left,
  html body.eb-has-topbar-v2:has(#vehHero) .space-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

/* Personnel page content padding under V2 topbar (#10085) */
body.eb-has-topbar-v2 .eb-personnel-page-content { padding-top: 8px; }

/* #10167 — Desktop : .filterAreaDiv en width auto pour que plusieurs filtres
   tiennent sur la même ligne (au lieu de chaque .filterAreaDiv prenant 100%
   de largeur avec ses 2-3 enfants espacés via space-between).
   S'applique à toutes les pages avec display_toolbar (tableau_garde, etc.). */
@media (min-width: 992px) {
    body .filter-area > .filterAreaDiv,
    body.eb-has-topbar-v2 .filter-area > .filterAreaDiv {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
}

/* #10167 — Pages .eb-inv (vehicule, materiel, consommable, tenue) :
   filter-area cachée par défaut (display: none), visible uniquement quand .active.
   Couvre tout le range mobile/tablette (≤991px) pour que les filtres ne s'affichent
   pas sans clic préalable sur le bouton Affiner. */
/* ===== Paramétrage — layout #parametrage-content ===== */
#parametrage-content { padding: 12px 16px 16px !important; }
#parametrage-content > .table-responsive.table-nav.sub-tabs:first-of-type,
#parametrage-content > div.sub-tabs:first-of-type {
    margin-top: -12px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
}
#parametrage-content > .row { row-gap: 12px; }
#parametrage-content > .container-fluid { padding-left: 0; padding-right: 0; }
#parametrage-content > .container-fluid > .row { row-gap: 12px; }
#parametrage-content .row:not(.g-0):not(.gx-0) { --bs-gutter-x: 1.5rem; }
#parametrage-content .row:not([class*='align-items-']) { align-items: stretch; }
#parametrage-content .row > [class^='col-'],
#parametrage-content .row > [class*=' col-'] { display: flex; flex-direction: column; }
#parametrage-content .row > [class^='col-'] > .card,
#parametrage-content .row > [class*=' col-'] > .card { flex: 1 1 auto; }
#parametrage-content .row > [class^='col-'] > form,
#parametrage-content .row > [class*=' col-'] > form { display: contents; }
#parametrage-content .row > [class^='col-'] > form > .card,
#parametrage-content .row > [class*=' col-'] > form > .card { flex: 1 1 auto; }
#parametrage-content .card { margin-bottom: 12px; }
/* Les sous-onglets directs de #parametrage_tabs_content ont leur propre
   margin: 0 16px (tab-scroll.css). Depuis que #parametrage_tabs_content
   a lui-même margin: 0 16px, ce double margin les décale de 32px au lieu
   de 16px par rapport au menu. On annule le margin horizontal ici. */
#parametrage_tabs_content > .table-responsive.table-nav.sub-tabs,
#parametrage_tabs_content > .table-responsive.table-nav.table-tabs.sub-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Module > Paramétrage (tab=5) : #menu.mc-tabs-bar est rendu À L'INTÉRIEUR
   de #parametrage_tabs_content (contrairement aux autres tabs où #menu est
   un sibling extérieur, géré par parametrage.php). Sans correction, le
   margin: 0 16px hérité de mc-tabs-bar + le margin: 0 16px du container
   parent donnent 32px d'offset horizontal → la barre des modules est
   décalée par rapport au sous-menu Liste/Historique en dessous (qui lui
   est annulé par la règle ci-dessus). On aligne ici sur la même base. */
#parametrage_tabs_content > #menu.mc-tabs-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Module > Paramétrage : le sous-onglet Liste/Historique du module est
   rendu À L'INTÉRIEUR de #parametrage-content (via Module::getNavBar()),
   donc :has(.sub-tabs) sur body fonctionne mais le sous-onglet n'est pas
   un sibling direct du #menu — l'illusion "une seule carte" repose sur
   le margin-top:-12px du sub-tabs:first-of-type (ligne 10659) qui annule
   le padding-top:12px de #parametrage-content. Sans bottom-radius/border
   nuls sur #menu et top-radius nuls sur sub-tabs, on voit deux cartes
   séparées qui se chevauchent visuellement (cf. ticket QA Module). */
#parametrage_tabs_content > #menu.mc-tabs-bar:has(~ #parametrage-content > .table-responsive.table-nav.sub-tabs),
#parametrage_tabs_content > #menu.mc-tabs-bar:has(~ #parametrage-content > div.sub-tabs) {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-width: 0 !important;
}

@media (max-width: 991px) {
    body .eb-inv #toolbar .filter-area:not(.active),
    body.eb-has-topbar-v2 .eb-inv #toolbar .filter-area:not(.active),
    body .eb-inv .fixed-table-toolbar .filter-area:not(.active),
    body.eb-has-topbar-v2 .eb-inv .fixed-table-toolbar .filter-area:not(.active) {
        display: none !important;
    }
    body .eb-inv #toolbar .filter-area.active,
    body.eb-has-topbar-v2 .eb-inv #toolbar .filter-area.active,
    body .eb-inv .fixed-table-toolbar .filter-area.active,
    body.eb-has-topbar-v2 .eb-inv .fixed-table-toolbar .filter-area.active {
        display: flex !important;
        flex-direction: column !important;
        max-height: 700px !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Dark-mode : les rowStyle() de bootstrap-table (astreintes "Terminé",
   evenement_display "warning_icon") posent un inline background #fff3cd
   sur tr.another-class — illisible sur fond sombre. On repasse sur un
   tint ambre translucide qui marche dans les deux thèmes via :root.dark. */
:root.dark tr.another-class,
:root.dark tr.another-class > td {
    background-color: rgba(255, 193, 7, 0.10) !important;
    color: var(--eb-text, #e2e8f0) !important;
}

/* =========================================================================
   DARK-MODE FIXES (audit #ebrigade 2026-05) — couleurs en dur dépassant le
   design system. On ne touche pas aux styles inline existants ; on les
   neutralise via :root.dark + sélecteurs ciblés. La classe .eb-hero est la
   factorisation à utiliser pour les nouveaux bandeaux d'en-tête.
   ========================================================================= */

/* --- .eb-hero : bandeau d'en-tête réutilisable (light + dark safe) ----- */
.eb-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1rem;
    border-radius: var(--eb-radius, 12px);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--eb-primary) 8%, var(--eb-surface)),
        color-mix(in srgb, var(--eb-primary) 3%, var(--eb-surface)));
    border: 1px solid color-mix(in srgb, var(--eb-primary) 22%, transparent);
}
.eb-hero__icon {
    width: 52px; height: 52px; border-radius: var(--eb-radius, 12px);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--eb-primary), color-mix(in srgb, var(--eb-primary) 70%, #000));
    color: #fff; flex-shrink: 0;
}
.eb-hero__title { font-weight: 700; font-size: 15px; color: var(--eb-text); }
.eb-hero__subtitle { font-size: 12px; color: var(--eb-text-secondary); margin-top: 2px; }
.eb-hero__features { display: flex; gap: 1.25rem; flex-shrink: 0; }
.eb-hero__feature { text-align: center; }
.eb-hero__feature-icon {
    width: 36px; height: 36px; border-radius: 50%;
    margin: 0 auto 4px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, currentColor 15%, transparent);
}
.eb-hero__feature-label { font-weight: 600; font-size: 12px; color: var(--eb-text); }
.eb-hero__feature-desc { font-size: 11px; color: var(--eb-text-secondary); line-height: 1.2; }
@media (max-width: 767px) {
    .eb-hero { flex-direction: column; align-items: flex-start; }
    .eb-hero__features { width: 100%; justify-content: space-around; gap: 0.5rem; }
}

/* --- Overrides bannières existantes (textes hardcodés #0f172a / #64748b) - */
:root.dark .eb-group-banner h2,
:root.dark .eb-bilan-banner h2,
:root.dark .eb-group-page .eb-kpi-value,
:root.dark .eb-group-page .card-header,
:root.dark .eb-bilan-page .card-header {
    color: var(--eb-text) !important;
}
:root.dark .eb-group-banner p,
:root.dark .eb-bilan-banner p,
:root.dark .eb-group-page .eb-kpi-label {
    color: var(--eb-text-secondary) !important;
}
:root.dark .eb-group-page .eb-kpi-card {
    background: var(--eb-surface) !important;
    border-color: var(--eb-border) !important;
}
:root.dark .eb-group-page .card.card-default,
:root.dark .eb-bilan-page .card.card-default {
    background: var(--eb-surface);
    border-color: var(--eb-border) !important;
}

/* --- Inline-styles audit : textes foncés hardcodés en dark = illisibles.
   Le substring match suffit : aucune autre couleur hex valide ne contient
   ces préfixes (#1E293B12 serait du CSS invalide). */
:root.dark [style*="color:#1e3a8a"],
:root.dark [style*="color: #1e3a8a"],
:root.dark [style*="color:#1E293B"],
:root.dark [style*="color: #1E293B"],
:root.dark [style*="color:#1e293b"],
:root.dark [style*="color: #1e293b"],
:root.dark [style*="color:#0f172a"],
:root.dark [style*="color: #0f172a"],
:root.dark [style*="color:#334155"],
:root.dark [style*="color: #334155"],
:root.dark [style*="color:#2d3748"],
:root.dark [style*="color: #2d3748"] {
    color: var(--eb-text) !important;
}

/* Em-dash placeholders (evenement_display_info_summary.php × 8+) :
   `color:#CBD5E1` est trop pâle sur dark → invisible. Bascule sur muted. */
:root.dark [style*="color:#CBD5E1"],
:root.dark [style*="color: #CBD5E1"] {
    color: var(--eb-text-muted) !important;
}

/* Backgrounds clairs hardcodés sur tooltips/cards inline. On cible des
   séquences spécifiques (terminées par `;` ou `,`) pour éviter de matcher
   #fff3cd / white-space dans des positions ambiguës. Pour `white`, on garde
   le terminateur `;` car `whitesmoke` ou `whitespace` existent. */
:root.dark [style*="background:white;"],
:root.dark [style*="background: white;"],
:root.dark [style*="background:#ffffff;"],
:root.dark [style*="background: #ffffff;"],
:root.dark [style*="background:#fff;"],
:root.dark [style*="background: #fff;"],
:root.dark [style*="background:#f8f9fa"],
:root.dark [style*="background: #f8f9fa"],
:root.dark [style*="background-color:#f8f9fa"],
:root.dark [style*="background-color: #f8f9fa"],
:root.dark [style*="background:#e5e7eb"],
:root.dark [style*="background: #e5e7eb"],
:root.dark [style*="background:#fafafa"],
:root.dark [style*="background: #fafafa"] {
    background: var(--eb-surface-hover) !important;
    background-color: var(--eb-surface-hover) !important;
}

/* Bordures claires hardcodées inline (modal_inscription, index SSO buttons, etc.) */
:root.dark [style*="border:1px solid #ddd"],
:root.dark [style*="border: 1px solid #ddd"],
:root.dark [style*="border:1px solid #dee2e6"],
:root.dark [style*="border: 1px solid #dee2e6"],
:root.dark [style*="border:1px solid #c7d9f8"],
:root.dark [style*="border:1px solid #c8dff8"],
:root.dark [style*="border:1px solid #dde6f7"],
:root.dark [style*="border-bottom:solid 1px #ebedf3"],
:root.dark [style*="border-bottom: solid 1px #ebedf3"],
:root.dark [style*="border-bottom:1px solid #ebedf3"],
:root.dark [style*="border-top:1px solid #ebedf3"],
:root.dark [style*="border:1px solid #e0e0e0"],
:root.dark [style*="border: 1px solid #e0e0e0"] {
    border-color: var(--eb-border) !important;
}

/* ===================================================================
   Bande d'impersonation (SSO monitor2 — "Connecté en tant que…")
   Barre pleine largeur fixée tout en haut, AU-DESSUS de la topnav et de
   la sidebar. La classe body.eb-impersonating (ajoutée par le JS de
   build_impersonation_banner_script, fonctions_menu.php) décale topbar +
   sidebar + contenu de 30px vers le bas pour que la barre ne recouvre
   ni le logo ni la topnav.
   =================================================================== */
#eb-impersonation-banner {
  position: fixed; top: 0; left: 0; right: 0;
  height: 30px; z-index: 2000;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
  color: #fff; font-family: sans-serif; font-size: 13px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  padding: 0 14px;
}
#eb-impersonation-banner .eb-imp-label { display: inline-flex; align-items: center; }
#eb-impersonation-banner .eb-imp-btn {
  background: #fff; color: #6c5ce7; padding: 3px 10px; border-radius: 4px;
  text-decoration: none; font-weight: 600; font-size: 12px; white-space: nowrap;
}
#eb-impersonation-banner .eb-imp-btn:hover { background: #f1eefe; }

/* Décalage global de 30px (hauteur de la bande) */
body.eb-impersonating .eb-sidebar { top: 30px; }
body.eb-impersonating.eb-has-topbar-v2:not(.eb-dashboard-v2) .eb-topbar { top: 30px !important; }
body.eb-impersonating.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left,
body.eb-impersonating.eb-has-topbar-v2:not(.eb-dashboard-v2) .space-left { padding-top: 94px !important; }
body.eb-impersonating.eb-has-topbar-v2 .test-label-container { top: 82px; }
/* Dashboard : la topbar est sticky dans .eb-main → on pousse .eb-main et
   on relève le seuil de collage de la topbar. */
body.eb-impersonating.eb-dashboard-v2 .eb-main { padding-top: 30px; }
body.eb-impersonating.eb-dashboard-v2 .eb-topbar { top: 30px; }

/* ===================================================================
   Visualiseur de liens externes in-app (js/bootstrap_table_hide.js,
   eb_open_external_panel). Charge l'URL dans une iframe au lieu d'un
   nouvel onglet, avec repli auto si le site bloque l'embedding.
   =================================================================== */
.eb-ext-panel {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.eb-ext-card {
  background: var(--eb-surface, #fff);
  width: min(1200px, 96vw); height: min(860px, 92vh);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.eb-ext-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--eb-border, #e6e6e6);
  background: var(--eb-surface, #fff);
}
.eb-ext-url {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--eb-text-muted, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eb-ext-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.eb-ext-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--eb-border, #e6e6e6);
  background: var(--eb-surface, #fff); color: var(--eb-text, #333); cursor: pointer;
}
.eb-ext-btn:hover { background: var(--eb-hover, #f3f4f6); }
.eb-ext-close { padding: 6px 9px; }
.eb-ext-body { position: relative; flex: 1; background: #fff; }
.eb-ext-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eb-ext-spinner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; color: var(--eb-text-muted, #6b7280); font-size: 14px;
}

/* ===== Sidebar redimensionnable (drag bordure droite) — #menu-resize =====
   La largeur de la sidebar et le décalage du contenu sont pilotés par une
   seule variable CSS (--eb-sidebar-w, défaut 240px). Le JS (fonctions_menu.php)
   met à jour cette variable au glissement de la poignée droite et la persiste
   dans localStorage. On scope au desktop (>768px) : en mobile la sidebar est
   off-canvas et les marges sont remises à 0 (cf. @media max-width:768px). */
:root { --eb-sidebar-w: 240px; }

/* ════════════════════════════════════════════════════════════════════════
   #align — CONTENT GUTTER (gouttière de contenu produit-wide)
   ────────────────────────────────────────────────────────────────────────
   Problème historique : chaque page émettait son propre wrapper Bootstrap
   (.container vs .container-fluid vs .row, marges utilitaires m-3, px-3…),
   si bien que le bord gauche du contenu flottait de page en page (245px ici,
   272px là) et créait des décalages visibles (cartes trop à gauche, cartes
   trop loin du menu).
   Standard unique : tout le contenu démarre à --eb-content-gutter (24px) du
   bord de la colonne (qui commence elle-même à --eb-sidebar-w). La topbar
   (.eb-topbar) et le tableau de bord (.eb-dashboard) utilisent la MÊME
   constante, donc le fil d'Ariane, les cartes du dashboard et le contenu de
   toutes les pages partagent un seul bord gauche vertical.
   La marge gauche (largeur sidebar, redimensionnable) reste pilotée par
   .space-left { margin-left: var(--eb-sidebar-w) } ci-dessous — on n'ajoute
   ici QUE le padding horizontal + on neutralise le legacy body{padding:0 5px}
   qui décalait le contenu en flux de 5px par rapport à la topbar fixe.
   Scopé desktop (≥769px) : en mobile la sidebar est off-canvas et les marges
   sont déjà remises à 0.
   ════════════════════════════════════════════════════════════════════════ */
:root { --eb-content-gutter: 24px; }

@media (min-width: 769px) {
  /* Le legacy body{padding:0 5px} décalait le contenu en flux de 5px alors
     que la topbar (position:fixed) l'ignore → 5px de désalignement. On le
     supprime sur les pages V2 ; la gouttière vient désormais de #space-left. */
  body.eb-has-topbar-v2 { padding-left: 0 !important; padding-right: 0 !important; }
  /* Gouttière canonique appliquée au conteneur de contenu de niveau racine
     (#space-left = id, donc uniquement le wrapper de page, jamais les
     .space-left imbriqués type export.php). margin-left reste géré plus bas
     par var(--eb-sidebar-w).
     :not(.eb-dashboard-v2) — sur le tableau de bord, #space-left enveloppe
     TOUTE la mise en page (.eb-layout > .eb-sidebar + .eb-main) et non le
     contenu : il ne doit pas recevoir la gouttière (sinon .eb-main est
     poussé de 24px). Le dashboard gère sa propre gouttière via .eb-dashboard. */
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left {
    padding-left: var(--eb-content-gutter) !important;
    padding-right: var(--eb-content-gutter) !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* ── Grilles legacy : aligner le bord externe sur la gouttière ──────────
     Pattern produit-wide : .container-fluid > .row > .col-*. Deux scories
     legacy empêchaient la grille de s'aligner sur la gouttière de page :
       1) .container-fluid garde son padding Bootstrap (12px) — redondant
          maintenant que #space-left fournit déjà la gouttière de 24px ;
       2) `.row:not(.accueil){width:100%}` (main.css) neutralise les marges
          négatives natives de Bootstrap, si bien que la colonne 1 s'enfonçait
          de container.pad(12)+col.pad(15)=27px et que la grille devenait
          asymétrique (bord droit qui ne touchait pas la gouttière).
     Correctif : on retire le padding redondant du conteneur et on rend la
     largeur des rows automatique avec marges nulles → les colonnes reprennent
     leur gouttière interne (15px) symétrique de chaque côté, et le bloc s'aligne
     proprement dans la colonne de contenu. On épargne .stats-container-new
     (composant flex à part) et .row.accueil (grille widgets du dashboard). */
  /* #11451 — exclure la barre d'actions flottante (#band-container.bandResponsive
     et sa pill interne) : cette regle d'alignement de grille de contenu ecrasait
     le padding lateral de la pill (padding:0), collant les boutons aux bords.
     La pill n'est pas une colonne de contenu → on la sort du selecteur. */
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left .container-fluid:not(.stats-container-new):not(.bandResponsive):not(.bandResponsive *) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left .container-fluid > .row:not(.accueil) {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Bandeaux de stats (.stats-container-new, présents sur quasi toutes les
     pages de liste) : leur `margin: 16px` les enfonçait de 16px par rapport
     au reste du contenu (tableau, filtres) → léger décalage. On neutralise
     la marge HORIZONTALE pour qu'ils s'alignent pile sur la gouttière, tout
     en gardant la marge verticale (séparation avec le bloc suivant). */
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left .stats-container-new {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Famille de composants « en-tête » (barre d'onglets .mc-tabs-bar, héros
     d'activité .evd-hero, grille d'intervention .evi-layout-grid) : ils
     fournissaient leur PROPRE marge horizontale de 16px, pensée pour un
     conteneur SANS gouttière. Maintenant que #space-left fournit déjà la
     gouttière de 24px, cette marge fait doublon et les décale de 16px
     (280px au lieu de 264px) par rapport aux tableaux et cartes pleine
     largeur. On neutralise la marge horizontale (vertical conservé) pour que
     ces en-têtes pleine largeur partagent le bord gauche du reste.
     #11426 — #parametrage_tabs_content (conteneur sous-menu + contenu de
     Configuration > Paramétrage) gardait sa marge de 16px (bord à 280px)
     alors que #menu.mc-tabs-bar était déjà ramené à 264px : les "div" du
     menu et du sous-menu n'étaient plus alignées. On le neutralise aussi
     pour que menu, sous-menu et contenu partagent la même gouttière (264px). */
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left #menu.mc-tabs-bar,
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left #parametrage_tabs_content,
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left .evd-hero,
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) #space-left .evi-layout-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 769px) {
  .eb-sidebar { width: var(--eb-sidebar-w) !important; min-width: var(--eb-sidebar-w) !important; }
  .eb-main { margin-left: var(--eb-sidebar-w) !important; }
  .space-left { margin-left: var(--eb-sidebar-w) !important; }
  .breadcrumb-responsive { margin-left: var(--eb-sidebar-w) !important; }
  /* Les barres fixes (topbars V1/V2, barre d'actions) suivent aussi la largeur. */
  .navbar.fixed-top { left: var(--eb-sidebar-w) !important; width: calc(100% - var(--eb-sidebar-w)) !important; }
  body.eb-has-topbar-v2:not(.eb-dashboard-v2) .eb-topbar { left: var(--eb-sidebar-w) !important; }
  body.eb-has-topbar-v2 #band-container.bandResponsive { left: var(--eb-sidebar-w) !important; }
  /* Transition douce hors glissement (snap en mode icônes, reset double-clic) :
     contenu ET barres fixes animent ensemble pour rester alignés. */
  .eb-sidebar, .eb-main, .space-left, .breadcrumb-responsive,
  .navbar.fixed-top, .eb-topbar, #band-container.bandResponsive {
    transition: width 0.12s ease, min-width 0.12s ease, margin-left 0.12s ease, left 0.12s ease;
  }
}

/* Poignée de redimensionnement collée à la bordure droite de la sidebar */
.eb-sidebar-resizer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 20;
  background: transparent; transition: background 0.15s;
}
.eb-sidebar-resizer:hover,
.eb-sidebar-resizer.dragging { background: var(--eb-primary, #2563EB); }
@media (max-width: 768px) { .eb-sidebar-resizer { display: none; } }

/* Pendant le glissement : curseur global, pas de sélection ni de transition */
body.eb-sidebar-resizing { cursor: col-resize !important; user-select: none !important; }
body.eb-sidebar-resizing .eb-sidebar,
body.eb-sidebar-resizing .eb-main,
body.eb-sidebar-resizing .space-left,
body.eb-sidebar-resizing .breadcrumb-responsive,
body.eb-sidebar-resizing .navbar.fixed-top,
body.eb-sidebar-resizing .eb-topbar,
body.eb-sidebar-resizing #band-container.bandResponsive { transition: none !important; }

/* Mode étroit (icônes seules) sous le seuil — réplique l'état .collapsed mais
   en laissant la largeur pilotée par --eb-sidebar-w (pas de width forcée). */
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-version,
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-version-small,
html.eb-sidebar-is-narrow .eb-sidebar .eb-nav-section-title,
html.eb-sidebar-is-narrow .eb-sidebar .eb-nav-item span,
html.eb-sidebar-is-narrow .eb-sidebar .eb-chevron,
html.eb-sidebar-is-narrow .eb-sidebar .eb-nav-sub,
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-user-info,
html.eb-sidebar-is-narrow .eb-sidebar .eb-logo-custom-name,
html.eb-sidebar-is-narrow .eb-sidebar .eb-espace-client-btn span,
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-user .fa-ellipsis-v,
html.eb-sidebar-is-narrow .eb-sidebar .eb-dispo-live-reset { display: none !important; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-nav-item { justify-content: center; padding: 10px; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-nav-item i:first-child { margin: 0; width: auto; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-logo { justify-content: center; padding: 16px 8px; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-logo a img { height: 24px !important; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-bottom { padding: 10px 6px; justify-content: center; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-sidebar-user { padding: 4px; justify-content: center; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-espace-client-btn { font-size: 0; padding: 9px; }
html.eb-sidebar-is-narrow .eb-sidebar .eb-espace-client-btn i { font-size: 14px; }

/* Menu utilisateur (clic sur l'avatar) : en mode étroit il déborderait,
   tronqué par overflow:hidden de la sidebar. On le sort en position fixed,
   ancré à droite du rail et en bas — largeur lisible. position:fixed échappe
   au clip overflow de l'ancêtre (aucun transform sur .eb-sidebar). */
html.eb-sidebar-is-narrow .eb-sidebar .eb-user-menu {
  position: fixed !important;
  left: var(--eb-sidebar-w) !important;
  right: auto !important;
  bottom: 10px !important;
  margin: 0 0 0 6px !important;
  min-width: 232px; max-width: 270px;
}

/* ===== Flyout des sous-menus (sidebar réduite) — #menu-resize ===== */
.eb-nav-flyout {
  position: fixed; display: none; z-index: 3000;
  min-width: 196px; max-width: 280px;
  background: var(--eb-sidebar-menu-bg);
  border: 1px solid var(--eb-sidebar-menu-border);
  border-radius: 8px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  overflow-y: auto; overflow-x: hidden;
}
.eb-nav-flyout.show { display: block; }
.eb-nav-flyout-title {
  font-size: 12px; font-weight: 600; color: var(--eb-sidebar-text-bright);
  padding: 5px 10px 7px; display: block; text-decoration: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.eb-nav-flyout-link { border-radius: 6px; cursor: pointer; }
a.eb-nav-flyout-link:hover { background: var(--eb-sidebar-nav-hover-bg); color: var(--eb-primary); }
a.eb-nav-flyout-link i { margin-right: 8px; opacity: 0.7; }
.eb-nav-flyout-items { border-top: 1px solid var(--eb-sidebar-border); padding-top: 4px; margin-top: 2px; }
/* Les sous-items conservent leur style mais toujours visibles dans le flyout */
.eb-nav-flyout .eb-nav-sub-item {
  display: block; padding: 7px 10px; border-radius: 6px;
  font-size: 13px; color: var(--eb-sidebar-nav-text);
  text-decoration: none !important; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background 0.12s, color 0.12s;
}
.eb-nav-flyout .eb-nav-sub-item:hover { background: var(--eb-sidebar-nav-hover-bg); color: var(--eb-sidebar-nav-hover-text); }
.eb-nav-flyout .eb-nav-sub-item i.fas { width: 18px; text-align: center; margin-right: 6px; font-size: 12px; opacity: 0.55; }
.eb-nav-flyout::-webkit-scrollbar { width: 4px; }
.eb-nav-flyout::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ============================================================
   Pointeuse popup (#dropdownBadgeuse) — refonte UI/UX
   Carte épurée + boutons aux couleurs sémantiques :
   Arrivée / Début / Reprendre = vert · Pause = orange · Fin = rouge.
   Positionnement (top/left/right) géré en JS (togglePointeusePopup).
   ============================================================ */
.eb-dashboard-v2 #dropdownBadgeuse.show,
.navbar #dropdownBadgeuse.show,
#dropdownBadgeuse.show {
  min-width: 300px !important;
  width: 322px !important;
  max-width: 92vw !important;
  padding: 18px 22px 22px !important;
  border: 1px solid var(--eb-border) !important;
  border-radius: 16px !important;
  background: var(--eb-surface) !important;
  box-shadow: 0 16px 44px rgba(15,23,42,0.18), 0 3px 10px rgba(15,23,42,0.08) !important;
  /* Dropdown du topbar : au-dessus des dropdowns de page (z-index:1000) et du
     topbar (z-index:40), mais SOUS les modales (Bootstrap 1050) et SweetAlert2
     (swal2-container z-index:1060) — sinon le popup recouvre la swal de
     confirmation (superposition dans le mauvais ordre). */
  z-index: 1045 !important;
}
#dropdownBadgeuse #badgeuseNowDate {
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--eb-text-secondary);
  text-transform: capitalize;
}
#dropdownBadgeuse #badgeuseNowHour {
  font-size: 58px !important;
  font-weight: 700;
  line-height: 1.05;
  color: var(--eb-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
#dropdownBadgeuse #pointeuse-title {
  width: 100% !important;
  margin: 16px 0 0 !important;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--eb-border);
  background: var(--eb-surface-hover);
  padding: 0 14px;
  font-size: 14px;
  color: var(--eb-text);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#dropdownBadgeuse #pointeuse-title::placeholder { color: var(--eb-text-muted); }
#dropdownBadgeuse #pointeuse-title:focus {
  outline: none;
  border-color: var(--eb-primary);
  background: var(--eb-surface);
  box-shadow: 0 0 0 3px var(--eb-primary-dim);
}
#dropdownBadgeuse #badgeuseGeoStatus {
  font-size: 12px !important;
  color: var(--eb-text-muted) !important;
  margin-top: 10px !important;
  min-height: 18px;
}
/* Boutons — base */
#dropdownBadgeuse .eb-pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  height: 44px;
  margin: 18px 5px 0 !important;
  padding: 0 22px;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,23,42,0.12);
  transition: transform 0.08s ease, box-shadow 0.15s, background-color 0.15s, filter 0.15s;
}
/* L'affichage des boutons est piloté par un style inline (display:block/none
   pose par le PHP/JS), qui ecrase le `display:inline-flex` -> le `gap` ne
   s'applique pas. On espace donc le picto via une marge sur l'icone, robuste
   quel que soit le mode d'affichage. */
#dropdownBadgeuse .eb-pt-btn > i { margin-right: 8px; }
#dropdownBadgeuse .eb-pt-btn:hover { filter: brightness(1.04); box-shadow: 0 5px 14px rgba(15,23,42,0.18); }
#dropdownBadgeuse .eb-pt-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(15,23,42,0.12); }
#dropdownBadgeuse .eb-pt-btn:disabled { opacity: 0.55; cursor: default; filter: none; box-shadow: none; transform: none; }
/* Couleurs sémantiques (modificateurs pilotés par le JS) */
#dropdownBadgeuse .eb-pt-start { background: var(--eb-success); }
#dropdownBadgeuse .eb-pt-start:hover { background: var(--eb-success-hover); }
#dropdownBadgeuse .eb-pt-pause { background: var(--eb-warning); }
#dropdownBadgeuse .eb-pt-pause:hover { background: var(--eb-warning-hover); }
#dropdownBadgeuse .eb-pt-end { background: var(--eb-danger); }
#dropdownBadgeuse .eb-pt-end:hover { background: var(--eb-danger-hover); }
#dropdownBadgeuse .eb-pt-ghost {
  background: var(--eb-surface-hover);
  color: var(--eb-text);
  border: 1px solid var(--eb-border);
  box-shadow: none;
}
#dropdownBadgeuse .eb-pt-ghost:hover { background: var(--eb-surface); filter: none; box-shadow: 0 2px 6px rgba(15,23,42,0.08); }
/* Alertes internes resserrées */
#dropdownBadgeuse .alert {
  width: auto !important;
  border-radius: 10px;
  margin: 16px 0 0 !important;
  font-size: 13px;
}
#dropdownBadgeuse #alertBadgeuseCompleted { margin-top: 16px !important; }

/* =================================================================
   SOCLE UX MOBILE — modales swal (lot 1, faible risque)
   -----------------------------------------------------------------
   Améliorations transverses, additives et bornées au mobile, qui
   profitent à toutes les pages utilisant des modales/toasts swal :
   - on borne la largeur pour ne plus déborder horizontalement du
     viewport (sans toucher à overflow:visible, volontaire pour ne
     pas rogner les dropdowns/selectpicker à l'intérieur des modales) ;
   - cibles tactiles des boutons d'action à 44px (recommandation iOS) ;
   - toasts maintenus dans l'écran.
   NB : on n'impose PAS de max-height/scroll interne ici — ça
   entrerait en conflit avec overflow:visible et couperait les listes
   déroulantes ; à traiter au cas par cas si une modale précise déborde.
   ================================================================= */
@media (max-width: 768px) {
  .swal2-popup:not(.swal2-toast) {
    width: min(640px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .swal2-actions .swal2-styled,
  .swal2-actions .btn,
  .swal2-actions button {
    min-height: 44px;
  }
  .swal2-popup.swal2-toast {
    max-width: 92vw !important;
  }
  /* Footer des modales swal : les boutons « Fermer »/« Enregistrer »
     perdent leur libellé (.hide_mobile) et il ne reste qu'une icône ;
     sans hauteur minimale ils s'aplatissaient (~20px). On garantit une
     cible tactile correcte sans jamais rétrécir un bouton existant. */
  .swal2-content .btn-swal,
  .swal2-content .btn.btn-success,
  .swal2-content .btn.btn-primary,
  .swal2-content .btn.btn-secondary,
  .swal2-content .btn.btn-danger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ────────────────────────────────────────────────────────────
     Pas de scroll INTERNE (boîte-dans-boîte) dans les modales sur
     mobile. Par défaut .swal2-content / .swal2-html-container ont
     overflow:auto + max-height (70vh / 90vh, cf. main.css #9680, et
     documents.js qui les pose aussi en inline) → une barre de
     défilement interne (l'orange) apparaissait dans le modal.
     Sur mobile : le contenu coule (overflow visible, pas de max-height),
     le popup grandit avec son contenu, et c'est le CONTENEUR (backdrop)
     qui défile naturellement si le formulaire dépasse l'écran — une
     seule scroll, sans barre interne. Les petites modales (confirm)
     restent centrées (margin:auto) et sans aucune scroll. */
  .swal2-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start !important;
  }
  /* margin-block auto : centre verticalement quand ça tient, et ne
     clippe pas le haut quand le popup est plus grand que l'écran
     (les marges auto se réduisent à 0 dans ce cas). */
  .swal2-popup:not(.swal2-toast) {
    max-height: none !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .swal2-popup:not(.swal2-toast) .swal2-content,
  .swal2-popup:not(.swal2-toast) .swal2-html-container {
    width: 100% !important;
    overflow: visible !important;
    max-height: none !important;
  }
  .swal2-popup:not(.swal2-toast) form,
  .swal2-popup:not(.swal2-toast) .table-responsive,
  .swal2-popup:not(.swal2-toast) .bootstrap-select,
  .swal2-popup:not(.swal2-toast) .bootstrap-select > .dropdown-toggle,
  .swal2-popup:not(.swal2-toast) .form-control,
  .swal2-popup:not(.swal2-toast) select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Aucune barre de défilement visible dans les modales sur mobile : le
     défilement reste tactile (overlay), comme une feuille native. Évite
     l'artefact de scrollbar (4px orange de l'app) dans le modal. */
  .swal2-container {
    scrollbar-width: none !important;
  }
  .swal2-container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .swal2-popup.eb-swal-scrollable:not(.swal2-toast) {
    max-height: 90vh !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  .swal2-popup.eb-swal-scrollable:not(.swal2-toast) .swal2-content.swal2-scrollable,
  .swal2-popup.eb-swal-scrollable:not(.swal2-toast) .swal2-content.swal2-scrollable .swal2-html-container {
    overflow-y: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .swal2-popup.eb-swal-scrollable:not(.swal2-toast) .swal2-content.swal2-scrollable {
    flex: 1 1 auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .swal2-popup.eb-swal-scrollable:not(.swal2-toast) .swal2-actions {
    flex: 0 0 auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Formulaires d'ajout/édition dans les swal — rendu mobile.
   La plupart des modales (Document, Dossier, Société, Matériel,
   Véhicule, Habilitation, Absence…) bâtissent leur formulaire avec une
   <table.noBorder> à 2 colonnes (label | champ). Sur mobile la moitié
   droite écrase les champs (dropzone illisible, libellés coupés, selects
   tronqués). On empile chaque ligne : label au-dessus, champ pleine
   largeur.

   Ciblage : seulement les tables qui CONTIENNENT un contrôle de saisie
   (:has(select, .form-control, …)) pour ne pas toucher les tables de
   DONNÉES (listes, inscriptions, .TableListOfFiles, qui restent en grille).
   Variable CSS --eb-swal-form-table = ce sélecteur, répété faute de pouvoir
   le factoriser en CSS pur.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select),
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) tbody,
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td {
    display: block !important;
    width: 100% !important;
  }
  /* tr empilé SANS !important : sinon on écrase le display:none que des
     scripts (ex. reloadWeblink() jQuery .show()/.hide() pour les lignes
     .doc_url / .doc_pc du modal Document) appliquent en inline pour basculer
     l'affichage. L'inline display:none l'emporte sur cette règle
     non-important ; .show() vide l'inline → block reprend. */
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) tr {
    display: block;
    width: 100%;
    margin-bottom: 14px;
  }
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td {
    padding: 0 !important;
    text-align: left !important;
  }
  /* 1re cellule = le libellé, posé au-dessus du champ. */
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) td:first-child {
    font-weight: 600;
    margin-bottom: 5px;
  }
  /* Champs et zone de dépôt en pleine largeur. */
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .bootstrap-select,
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .form-control,
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) .dropzone {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Ligne d'un interrupteur (toggle) : on garde switch + libellé en ligne. */
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) tr:has(.switch) {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  .swal2-content table.noBorder:not(.TableListOfFiles):has(select, textarea, .form-control, .bootstrap-select) tr:has(.switch) td {
    width: auto !important;
    margin-bottom: 0;
    font-weight: 400;
  }
  /* Spécifique Document : le dropzone n'a plus besoin d'être démesurément
     haut une fois en pleine largeur. */
  table.eb-doc-form-table .dropzone {
    min-height: 140px;
  }
}

/* Barre de défilement horizontale parasite dans les modales swal de
   formulaire (Document, Dossier, Société, Matériel…). Le wrapper
   .table-responsive est en overflow-x:auto pour les vraies tables larges,
   mais ici il enveloppe un formulaire : le <select> NATIF caché des
   bootstrap-select (positionné en absolu, dimensionné sur l'option la plus
   large, ws:nowrap) déborde du modal et déclenche le scroll, sur mobile
   ET desktop. On neutralise le scroll de ce wrapper précis avec
   overflow-x:clip (pas de scroll-container, donc l'axe Y reste visible et
   les menus déroulants — data-container'd — ne sont pas piégés).
   NB : on N'IMBRIQUE PAS :has() dans :has() (sélecteur invalide, ignoré par
   le navigateur) — un seul niveau de :has avec descendant suffit. */
.swal2-content .table-responsive:has(table.noBorder:not(.TableListOfFiles) select),
.swal2-content .table-responsive:has(table.noBorder:not(.TableListOfFiles) textarea),
.swal2-content .table-responsive:has(table.noBorder:not(.TableListOfFiles) .form-control),
.swal2-content .table-responsive:has(table.noBorder:not(.TableListOfFiles) .bootstrap-select) {
  /* !important obligatoire : body.eb-has-topbar-v2 .table-responsive force
     overflow-x:auto !important, ce qui battait le précédent
     .swal2-popup .table-responsive{overflow-x:visible !important}. */
  overflow-x: clip !important;
}

/* #10646 — Cibles tactiles des liens d'action de cartes dashboard.
   a.eb-card-action ("Modifier", "Planifier", "Voir tout") mesurait
   ~50-70 x 19px : sous le minimum recommandé. On force une zone
   tactile d'au moins 40px en hauteur via inline-flex + padding vertical.
   On exclut .btn pour ne pas écraser les boutons stylés (badges PDF). */
a.eb-card-action:not(.btn),
.card.card-default .card-header.graycard a.eb-card-action:not(.btn),
.eb-group-panel-footer .eb-card-action:not(.btn) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 8px;
}

@media (max-width: 768px) {
  a.eb-card-action:not(.btn),
  .card.card-default .card-header.graycard a.eb-card-action:not(.btn),
  .eb-group-panel-footer .eb-card-action:not(.btn) {
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* #10533 — Cible tactile du bouton hamburger (topbar mobile).
   button.eb-burger mesurait ~32-34 x 30px (padding 6px 8px,
   font-size 18px) : sous le minimum WCAG 2.5.5 (44x44). On force
   sur mobile un min de 44x44 et un padding centré, sans changer
   le rendu desktop (ou le bouton reste display:none). */
@media (max-width: 768px) {
  .eb-burger {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
    justify-content: center;
  }
}

/* ================================================================
   TABLEAUX DE BORD LOGISTIQUE — bandeau de stats compact (#evenement_display tab logistique)
   Remplace les gros radialBar ApexCharts (140-180px) par un bandeau horizontal
   plat, calqué sur le hero d'activité (.evd-stats) : libellé en petites majuscules,
   gros chiffre, sous-texte, fine barre. Utilisé par display_vehicule_event /
   display_materiel_event / display_consommable_event (renderLogiStat,
   js/chartInfoRapide.js).
   ================================================================ */
.eb-logi-stats {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--eb-border, #e2e8f0);
  border-radius: var(--eb-radius, 12px);
  background: var(--eb-surface, #fff);
  overflow: hidden;
}
.eb-logi-stat {
  flex: 1 1 110px;
  min-width: 0;
  padding: 9px 16px;
  border-right: 1px solid var(--eb-border, #e2e8f0);
}
.eb-logi-stat:last-child { border-right: none; }
.eb-logi-stat-label {
  font-size: 10.5px;
  color: var(--eb-text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-logi-stat-value {
  margin-top: 3px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.eb-logi-num {
  font-family: 'Poppins', Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--eb-text, #1e293b);
}
.eb-logi-sub { font-size: 11.5px; color: var(--eb-text-muted, #94a3b8); }
.eb-logi-bar {
  margin-top: 6px;
  height: 3px;
  background: var(--eb-border, #e2e8f0);
  border-radius: 2px;
  overflow: hidden;
}
.eb-logi-bar > div {
  height: 100%;
  width: 0;
  background: var(--eb-success, #10b981);
  border-radius: 2px;
  transition: width .3s;
}

@media (max-width: 768px) {
  .eb-logi-stat { flex: 1 1 50%; border-bottom: 1px solid var(--eb-border, #e2e8f0); }
  .eb-logi-stat:nth-child(even) { border-right: none; }
}

/* =========================================================================
   Vue cartes "engagement" (tableaux Activite vehicule / materiel /
   consommable) — design moderne factorise. Active par la classe marqueur
   `eb-engagement-cards` (cf. BootstrapTablePerso::addClassTable) quand
   l'utilisateur bascule en vue cartes (classe `.cards` ajoutee au toggle).
   Scope desktop (min-width:769px) : en <=768px ces tables passent en
   cardView auto pleine largeur (.eb-mobile-card-table.cards, voir plus haut).
   La structure card-view de bootstrap-table n'expose pas de data-field, donc
   on stylise par paire label/valeur (le label vient de .card-view-title que
   le legacy main.css masquait) + detection :has() pour l'entete image et le
   pied de boutons. Robuste a l'ordre/au nom des colonnes.
   Applique a TOUTES les largeurs : la grille flex-wrap donne 1 colonne sur
   telephone (via min-width) et plusieurs sur tablette/desktop. Ces tables
   passent en cardView AUTO en <=768px/coarse, donc le design doit aussi
   couvrir le mobile (sinon la carte generique reaffiche le compteur parasite
   et une surbrillance criarde). Specificite > .eb-mobile-card-table.cards.
   ========================================================================= */
  /* Grille de cartes */
  .table.eb-engagement-cards.cards {
    border: 0 !important;
    background: transparent !important;
  }
  .table.eb-engagement-cards.cards tbody {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 16px !important;
    padding: 4px !important;
  }
  /* Une carte = une ligne */
  .table.eb-engagement-cards.cards tbody tr {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 300px !important;
    min-width: 260px !important;
    max-width: 420px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 16px 18px 12px !important;
    background: var(--eb-surface, #fff) !important;
    border: 1px solid var(--eb-border, #e2e8f0) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06) !important;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important;
    box-sizing: border-box !important;
  }
  .table.eb-engagement-cards.cards tbody tr:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .10) !important;
    border-color: var(--eb-primary, #2563eb) !important;
  }
  /* Ligne surlignee (conflit d'horaire, rowStyle cpt==1) : liseré ambre */
  .table.eb-engagement-cards.cards tbody tr.text-nowrap,
  .table.eb-engagement-cards.cards tbody tr[style*="fff3cd"] {
    border-color: #f59e0b !important;
    box-shadow: 0 1px 3px rgba(245, 158, 11, .18) !important;
    background: #fffdf5 !important;
  }
  /* Cellule conteneur unique (td colspan) */
  .table.eb-engagement-cards.cards tbody tr > td {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .table.eb-engagement-cards.cards .card-views {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 7px !important;
    width: 100% !important;
  }
  /* Paire label / valeur par defaut */
  .table.eb-engagement-cards.cards .card-view {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .table.eb-engagement-cards.cards .card-view-title {
    display: block !important;
    flex: 0 0 auto !important;
    color: var(--eb-muted, #64748b) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
  }
  .table.eb-engagement-cards.cards .card-view-value {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: right !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--eb-text, #1e293b) !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  .table.eb-engagement-cards.cards .card-view-value a {
    color: inherit !important;
    text-decoration: none !important;
  }
  .table.eb-engagement-cards.cards .card-view-value .badge {
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  /* Masque les lignes vides (valeurs absentes). Deux cas :
     - valeur totalement vide (:empty)
     - valeur dont le seul contenu est un wrapper vide (ex. km :
       `<div style=""></div>` — le sort-div masque le :empty du parent). */
  .table.eb-engagement-cards.cards .card-view:has(> .card-view-value:empty),
  .table.eb-engagement-cards.cards .card-view:has(> .card-view-value > div:only-child:empty) {
    display: none !important;
  }
  /* Masque les colonnes compteur techniques (cpt/duplication : libelle vide,
     valeur numerique « 0/1 » servant a rowStyle) qui sinon affichent un nombre
     parasite en haut de carte. On cible « libelle vide ET ni image ni bouton »
     pour ne jamais masquer l'entete image (logo a nom vide en materiel) ni le
     pied d'actions. */
  .table.eb-engagement-cards.cards .card-view:has(> .card-view-title:empty):not(:has(img)):not(:has(.btn)):not(:has(button)) {
    display: none !important;
  }
  /* TITRE : la 1re ligne apres l'entete image = le nom de l'activite (vrai
     dans les 4 tables : le compteur cpt est AVANT l'image, et `duplication`
     n'est pas rendu). On la promeut en titre de carte (centre, gras, sans le
     label « Activite » redondant) au lieu d'une simple paire label/valeur. */
  .table.eb-engagement-cards.cards .card-view:has(img) + .card-view {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 5px !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--eb-border, #e2e8f0) !important;
  }
  .table.eb-engagement-cards.cards .card-view:has(img) + .card-view .card-view-title {
    display: none !important;
  }
  .table.eb-engagement-cards.cards .card-view:has(img) + .card-view .card-view-value {
    flex: 0 0 auto !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--eb-text, #1e293b) !important;
  }
  /* badges (statut Ouvert/Fermé, « En cours », chip conflit) sous le nom */
  .table.eb-engagement-cards.cards .card-view:has(img) + .card-view .card-view-value .badge,
  .table.eb-engagement-cards.cards .card-view:has(img) + .card-view .card-view-value .btn {
    margin-top: 4px !important;
  }
  /* ENTETE : ligne contenant l'image (icone type d'activite) -> centree, sans label */
  .table.eb-engagement-cards.cards .card-view:has(img) {
    justify-content: center !important;
    margin: 0 0 4px !important;
  }
  .table.eb-engagement-cards.cards .card-view:has(img) .card-view-title { display: none !important; }
  .table.eb-engagement-cards.cards .card-view:has(img) .card-view-value {
    flex: 0 0 auto !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .table.eb-engagement-cards.cards .card-view:has(img) img {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    padding: 6px !important;
    background: var(--eb-surface-hover, #f8fafc) !important;
    border-radius: 50% !important;
  }
  /* PIED : ligne contenant des boutons d'action -> centree, separateur haut */
  .table.eb-engagement-cards.cards .card-view:has(.btn),
  .table.eb-engagement-cards.cards .card-view:has(button) {
    justify-content: center !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    margin-bottom: 0 !important;
    border-top: 1px solid var(--eb-border, #e2e8f0) !important;
  }
  .table.eb-engagement-cards.cards .card-view:has(.btn) .card-view-title,
  .table.eb-engagement-cards.cards .card-view:has(button) .card-view-title { display: none !important; }
  .table.eb-engagement-cards.cards .card-view:has(.btn) .card-view-value,
  .table.eb-engagement-cards.cards .card-view:has(button) .card-view-value {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .table.eb-engagement-cards.cards .card-view:has(.btn) .btn {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: var(--eb-surface-hover, #f8fafc) !important;
    border: 1px solid var(--eb-border, #e2e8f0) !important;
    transition: background .15s ease, border-color .15s ease !important;
  }
  .table.eb-engagement-cards.cards .card-view:has(.btn) .btn:hover {
    background: var(--eb-primary-light, #eff6ff) !important;
    border-color: var(--eb-primary, #2563eb) !important;
  }
  /* Neutralise la surbrillance Bootstrap `table-warning` (ajoutee par le
     handler all.bs.table sur les lignes en conflit) : le box-shadow inset
     remplissait la carte + les libelles d'un jaune/rose criard. Le conflit
     reste signale par le liseré ambre du tr (ci-dessus). */
  .table.eb-engagement-cards.cards tbody tr.table-warning,
  .table.eb-engagement-cards.cards tbody tr.table-warning > td,
  .table.eb-engagement-cards.cards tbody td.table-warning,
  .table.eb-engagement-cards.cards tbody .table-warning > *,
  .table.eb-engagement-cards.cards .card-views,
  .table.eb-engagement-cards.cards .card-view {
    --bs-table-bg-state: transparent !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  /* Mobile/tablette (<=768px) : DENSITE optimisee (la carte consommait trop de
     hauteur). On resserre gaps/padding/icone/titre/pied et on place l'icone EN
     LIGNE avec le titre (gagne une rangee entiere). Le passage en 1 colonne est
     reserve au telephone (<=575.98px, plus bas). */
  @media (max-width: 768px) {
    .table.eb-engagement-cards.cards tbody {
      gap: 10px !important;
      padding: 0 !important;
    }
    .table.eb-engagement-cards.cards tbody tr {
      position: relative !important;
      padding: 10px 14px 8px !important;
    }
    .table.eb-engagement-cards.cards .card-views {
      gap: 3px !important;
    }
    .table.eb-engagement-cards.cards .card-view {
      min-height: 0 !important;
    }
    /* Icone + titre sur UNE rangee : l'entete image est sortie du flux (absolue
       en haut a gauche) et le titre est decale a droite -> on gagne la rangee
       icone entiere (flexbox ignore `float`, d'ou le position:absolute). */
    .table.eb-engagement-cards.cards .card-view:has(img) {
      position: absolute !important;
      top: 10px !important;
      left: 14px !important;
      margin: 0 !important;
    }
    .table.eb-engagement-cards.cards .card-view:has(img) img {
      width: 38px !important;
      height: 38px !important;
      padding: 5px !important;
    }
    .table.eb-engagement-cards.cards .card-view:has(img) + .card-view {
      align-items: flex-start !important;
      text-align: left !important;
      gap: 3px !important;
      margin: 0 0 7px !important;
      padding: 0 0 7px 48px !important;
      min-height: 38px !important;
      justify-content: center !important;
    }
    .table.eb-engagement-cards.cards .card-view:has(img) + .card-view .card-view-value {
      text-align: left !important;
      font-size: 14px !important;
    }
    /* Rangees meta plus compactes */
    .table.eb-engagement-cards.cards .card-view-title { font-size: 10px !important; }
    .table.eb-engagement-cards.cards .card-view-value { font-size: 13px !important; line-height: 1.3 !important; }
    /* Pied d'actions resserre */
    .table.eb-engagement-cards.cards .card-view:has(.btn),
    .table.eb-engagement-cards.cards .card-view:has(button) {
      padding-top: 8px !important;
    }
    .table.eb-engagement-cards.cards .card-view:has(.btn) .btn {
      width: 34px !important;
      height: 34px !important;
    }
  }
  /* Telephone strict : 1 carte par ligne (en tablette 576-768px on garde la
     grille 2 colonnes, plus dense en hauteur car 2 cartes par rangee). */
  @media (max-width: 575.98px) {
    .table.eb-engagement-cards.cards tbody tr {
      flex: 1 1 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
  }