/** PERSONNALISATION DE LA PRIMARY COLOR */
      .activerMenu{
        color: #0284c7 !important;
        font-weight: bold;
      }

      /* Amélioration des états actifs du menu */
      .nav-main-link.active {
        background-color: rgba(2, 132, 199, 0.1) !important;
        color: #0284c7 !important;
        font-weight: 600;
        border-left: 3px solid #0284c7;
      }

      .nav-main-link.active .nav-main-link-icon {
        color: #0284c7 !important;
        transform: scale(1.1);
        transition: all 0.2s ease;
      }
      
      
      .nav-main-submenu .nav-main-link.active, .nav-main-submenu .nav-main-link:focus, .nav-main-submenu .nav-main-link:hover {
          padding-left: 5px;
      }

      .nav-main-link:focus .nav-main-link-icon, 
      .nav-main-link:hover .nav-main-link-icon {
          color: #0284c7;
          transition: color 0.2s ease;
      }

      .nav-main-link:hover:not(.active) {
        background-color: rgba(2, 132, 199, 0.05);
        transition: background-color 0.2s ease;
      }

      /* Animation pulse améliorée pour le badge de notification */
      @keyframes pulse {
        0%, 100% {
          opacity: 1;
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
        }
        50% {
          opacity: 1;
          transform: scale(1.15);
          box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
        }
      }

      @keyframes bellRing {
        0%, 100% {
          transform: rotate(0deg);
        }
        10%, 30%, 50%, 70%, 90% {
          transform: rotate(-10deg);
        }
        20%, 40%, 60%, 80% {
          transform: rotate(10deg);
        }
      }

      /* Badge de notification amélioré */
      #notification-badge {
        animation: pulse 2s ease-in-out infinite;
        font-size: 0.6rem;
        font-weight: 700;
        min-width: 20px;
        height: 20px;
        line-height: 1.2;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
        z-index: 10;
      }

      /* Animation de l'icône de cloche quand il y a des notifications */
      #page-header-notifications:has(#notification-badge) i.fa-bell,
      #page-header-notifications i.fa-bell.bell-animated {
        animation: bellRing 1s ease-in-out infinite;
        animation-delay: 0.5s;
      }

      /* Amélioration du bouton de notification */
      #page-header-notifications {
        transition: all 0.3s ease;
      }

      #page-header-notifications:hover {
        transform: scale(1.1);
      }

      #page-header-notifications:has(#notification-badge):hover #notification-badge {
        animation-duration: 1s;
        transform: scale(1.2);
      }

      /* Responsive pour mobile - Notifications */
      @media (max-width: 767.98px) {
        /* Badge de notification adapté pour mobile */
        #notification-badge {
          font-size: 0.65rem;
          min-width: 18px;
          height: 18px;
          padding: 0.2rem 0.4rem;
          border-width: 1.5px;
          top: -5px;
          right: -5px;
        }

        /* Bouton de notification adapté pour mobile */
        #page-header-notifications {
          padding: 0.375rem 0.5rem;
        }

        #page-header-notifications i.fa-bell {
          font-size: 1rem;
        }

        /* Désactiver l'animation de la cloche sur mobile pour les performances */
        #page-header-notifications i.fa-bell.bell-animated {
          animation: bellRing 1.5s ease-in-out infinite;
        }

        /* Dropdown de notifications adapté pour mobile */
        #notifications-dropdown {
          min-width: calc(100vw - 2rem) !important;
          max-width: calc(100vw - 2rem) !important;
          right: 0 !important;
          left: auto !important;
          margin-top: 0.5rem;
        }

      }

      @media (max-width: 575.98px) {
        /* Badge encore plus petit sur très petits écrans */
        #notification-badge {
          font-size: 0.6rem;
          min-width: 16px;
          height: 16px;
          padding: 0.15rem 0.35rem;
          border-width: 1px;
        }

        /* Position du badge ajustée pour très petits écrans */
        #notification-badge {
          top: -3px;
          right: -3px;
        }
      }

      /* ============================================
         SYSTÈME DE TYPOGRAPHIE STANDARDISÉ
         ============================================ */
      
      /* Hiérarchie des titres - Standardisation */
      .content-header h1,
      .content-header .h1 {
        font-size: 1.5rem; /* h3 par défaut */
        font-weight: 800; /* fw-extrabold */
        line-height: 1.25;
        margin-bottom: 0.5rem;
      }
      
      @media (min-width: 1200px) {
        .content-header h1,
        .content-header .h1 {
          font-size: 1.5rem; /* h3 */
        }
      }
      
      .content-header h2,
      .content-header .h2 {
        font-size: 0.875rem; /* fs-sm */
        font-weight: 500; /* fw-medium */
        line-height: 1.5;
        color: var(--bs-text-muted, #6c757d);
      }
      
      /* Standardisation des titres de blocs */
      .block-title {
        font-size: 1.125rem; /* fs-5 */
        font-weight: 600; /* fw-semibold */
        line-height: 1.25;
      }
      
      /* Standardisation des noms dans les cartes */
      .fw-semibold.text-capitalize {
        font-size: 1rem; /* fs-base */
        font-weight: 600; /* fw-semibold */
        line-height: 1.5;
      }
      
      /* Standardisation des montants */
      .fw-bold.text-success,
      .fw-bold.text-danger,
      .fw-bold.text-primary {
        font-size: 0.875rem; /* fs-sm */
        font-weight: 700; /* fw-bold */
        line-height: 1.5;
      }
      
      /* Standardisation des descriptions */
      .fs-sm.text-muted {
        font-size: 0.875rem; /* fs-sm */
        font-weight: 400; /* fw-normal */
        line-height: 1.5;
      }
      
      /* Standardisation des labels */
      .fs-xs.text-muted {
        font-size: 0.75rem; /* fs-xs */
        font-weight: 400; /* fw-normal */
        line-height: 1.5;
      }
      
      /* Standardisation des labels avec poids moyen */
      .fs-xs.fw-medium {
        font-size: 0.75rem; /* fs-xs */
        font-weight: 500; /* fw-medium */
        line-height: 1.5;
      }
      
      /* Responsive - Ajustements pour mobile */
      @media (max-width: 767.98px) {
        .content-header h1,
        .content-header .h1 {
          font-size: 1.25rem; /* h4 sur mobile */
        }
        
        .block-title {
          font-size: 1rem; /* fs-base sur mobile */
        }
      }

      /* ============================================
         SYSTÈME D'ESPACEMENTS STANDARDISÉ
         ============================================ */
      
      /* Standardisation des espacements pour les cartes */
      .list-card .block-content {
        padding: 1rem; /* p-3 par défaut */
      }
      
      .list-card .block-content-sm {
        padding: 0.5rem; /* p-2 pour les sections compactes */
      }
      
      /* Standardisation des espacements entre sections de cartes */
      .list-card .row.items-push {
        margin-bottom: 0;
      }
      
      .list-card .row.items-push > div {
        margin-bottom: 1rem; /* mb-3 */
      }
      
      /* Standardisation des espacements pour les informations dans les cartes */
      .list-card .fs-xs.text-muted {
        margin-top: 0.5rem; /* mt-2 */
        padding: 0.5rem; /* p-2 */
      }
      
      /* Standardisation des espacements pour les boutons groupés */
      .btn-group-vertical,
      .d-flex.gap-2,
      .d-flex.gap-3 {
        gap: 0.5rem; /* gap-2 par défaut */
      }
      
      /* Standardisation des espacements pour les formulaires */
      .form-label {
        margin-bottom: 0.5rem; /* mb-2 */
      }
      
      .form-select {
        margin-bottom: 1rem; /* mb-3 */
      }
      
      /* Standardisation des espacements pour les sections de page */
      .content > .block {
        margin-bottom: 1.5rem; /* mb-4 */
      }
      
      .content > .block:last-child {
        margin-bottom: 0;
      }
      
      /* Standardisation des espacements pour les titres */
      .content-header {
        margin-bottom: 1.5rem; /* mb-4 */
      }
      
      /* Standardisation des espacements pour les filtres */
      .space-x-1 {
        display: flex;
        gap: 0.5rem; /* gap-2 */
        align-items: center;
      }
      
      /* Standardisation des espacements pour les badges dans les titres */
      .content-header h1 .badge,
      .content-header .h1 .badge {
        margin-left: 0.5rem; /* ms-2 */
      }
      
      /* Responsive - Ajustements pour mobile */
      @media (max-width: 767.98px) {
        .content > .block {
          margin-bottom: 1rem; /* mb-3 sur mobile */
        }
        
        .list-card .block-content {
          padding: 0.75rem; /* Réduction légère sur mobile */
        }
        
        .space-x-1 {
          gap: 0.25rem; /* gap-1 sur mobile */
        }
      }

      /* Styles pour le menu mobile hamburger */
      #mobile-menu-toggle {
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
        transition: all 0.3s ease;
      }

      #mobile-menu-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(2, 132, 199, 0.5);
      }

      #mobile-menu-toggle:active {
        transform: scale(0.95);
      }

      /* Styles pour l'offcanvas mobile */
      .offcanvas-start {
        width: 280px;
      }

      @media (max-width: 576px) {
        .offcanvas-start {
          width: 85%;
        }
      }

      /* Animation pour l'ouverture du menu mobile */
      .offcanvas.show {
        animation: slideInLeft 0.3s ease-out;
      }

      @keyframes slideInLeft {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0);
        }
      }
      .nav-main-item.open>.nav-main-link-submenu>.nav-main-link-icon {
          color: #0284c7;
      }

      .bg-secondary{
        background-color: #6c757d !important;
      }

      .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: .25rem .25rem .25rem 0;
        height: 1.375rem;
        line-height: 1.375rem;
        color: #fff;
        font-size: .875rem;
        font-weight: 600;
        background-color: #0284c7;
        border: none;
        border-radius: .375rem;
      }

      .empty-state {
        min-height: 240px;
        background: #fff;
      }

      .empty-state__icon span {
        width: 72px;
        height: 72px;
      }

      /** Styles pour les cartes KPI du dashboard */
      .kpi-card-primary {
        border-left: 4px solid #0284c7 !important;
      }
      .kpi-card-info {
        border-left: 4px solid #0dcaf0 !important;
      }
      .kpi-card-warning {
        border-left: 4px solid #ffc107 !important;
      }
      .kpi-card-danger {
        border-left: 4px solid #dc3545 !important;
      }
      .kpi-card-success {
        border-left: 4px solid #198754 !important;
      }
      .kpi-card-secondary {
        border-left: 4px solid #6c757d !important;
      }

      /** Styles pour les actions rapides du dashboard */
      .quick-actions-wrapper {
        gap: 0.5rem;
      }
      
      .quick-actions-wrapper .btn {
        font-weight: 600;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      .quick-actions-wrapper .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      .quick-actions-wrapper .btn-primary {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        border: none;
      }
      
      .quick-actions-wrapper .btn-success {
        background: linear-gradient(135deg, #198754 0%, #146c43 100%);
        border: none;
      }
      
      .quick-actions-wrapper .btn-info {
        background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
        border: none;
      }
      
      @media (max-width: 767.98px) {
        .quick-actions-wrapper {
          width: 100%;
          justify-content: center !important;
        }
        
        .quick-actions-wrapper .btn {
          flex: 1;
          min-width: 0;
        }
        
        .quick-actions-wrapper .btn span {
          display: none;
        }
      }

      /** Styles pour les graphiques responsives */
      .chart-container {
        position: relative;
        width: 100%;
        min-height: 200px;
        height: auto;
      }
      
      .chart-container-large {
        min-height: 320px;
        height: clamp(250px, 40vw, 400px);
      }
      
      .chart-container-medium {
        min-height: 260px;
        height: clamp(220px, 35vw, 350px);
      }
      
      .chart-container canvas {
        max-width: 100%;
        height: 100% !important;
      }
      
      .chart-loader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.95);
        z-index: 10;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(2px);
      }
      
      .chart-loader.hidden {
        opacity: 0;
        pointer-events: none;
      }
      
      /** Skeleton loaders pour les tableaux et listes */
      .skeleton-loader {
        animation: skeleton-loading 1.5s ease-in-out infinite;
      }
      
      @keyframes skeleton-loading {
        0% {
          background-position: -200px 0;
        }
        100% {
          background-position: calc(200px + 100%) 0;
        }
      }
      
      .skeleton-line {
        height: 12px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200px 100%;
        border-radius: 4px;
        margin-bottom: 8px;
      }
      
      .skeleton-line.short {
        width: 60%;
      }
      
      .skeleton-line.medium {
        width: 80%;
      }
      
      .skeleton-line.long {
        width: 100%;
      }
      
      .skeleton-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200px 100%;
        animation: skeleton-loading 1.5s ease-in-out infinite;
      }
      
      .skeleton-card {
        background: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);
        background-size: 200px 100%;
        animation: skeleton-loading 1.5s ease-in-out infinite;
        border-radius: 8px;
        padding: 1rem;
        min-height: 100px;
      }
      
      /** Animations pour les cartes KPI */
      .kpi-card-primary,
      .kpi-card-info,
      .kpi-card-warning,
      .kpi-card-danger,
      .kpi-card-success {
        animation: fadeInUp 0.5s ease-out;
      }
      
      /** Animations pour tous les éléments de la page */
      .animate-fade-in-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      
      .animate-fade-in-up.visible {
        opacity: 1;
        transform: translateY(0);
      }
      
      .animate-fade-in {
        opacity: 0;
        transition: opacity 0.5s ease-out;
      }
      
      .animate-fade-in.visible {
        opacity: 1;
      }
      
      .animate-slide-in-left {
        opacity: 0;
        transform: translateX(-20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
      }
      
      .animate-slide-in-left.visible {
        opacity: 1;
        transform: translateX(0);
      }
      
      .animate-slide-in-right {
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
      }
      
      .animate-slide-in-right.visible {
        opacity: 1;
        transform: translateX(0);
      }
      
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      
      @keyframes slideInLeft {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      @keyframes slideInRight {
        from {
          opacity: 0;
          transform: translateX(20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      /** Animation pour les cartes secondaires */
      .block-link-rotate {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      
      .block-link-rotate:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
      }
      
      /** Indicateur de chargement pour les données */
      .data-loading {
        position: relative;
      }
      
      .data-loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
      }
      
      .data-loading::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #0284c7;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 6;
      }
      
      @keyframes spin {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
      }
      
      /** Animations pour les barres de progression */
      .progress-bar {
        transition: width 0.6s ease;
      }
      
      .progress {
        overflow: hidden;
      }
      
      .progress-bar-animated {
        animation: progress-bar-stripes 1s linear infinite;
      }
      
      @keyframes progress-bar-stripes {
        0% {
          background-position: 1rem 0;
        }
        100% {
          background-position: 0 0;
        }
      }
      
      /** Transitions pour les boutons */
      .btn {
        transition: all 0.2s ease;
      }
      
      .btn:not(:disabled):not(.disabled):active {
        transform: scale(0.98);
      }
      
      /** Animation pour les badges */
      .badge {
        transition: transform 0.2s ease;
      }
      
      .badge:hover {
        transform: scale(1.1);
      }
      
      /** Animation pour les listes */
      .list-group-item {
        transition: background-color 0.15s ease, transform 0.15s ease;
      }
      
      .list-group-item:hover {
        transform: translateX(4px);
      }
      
    /** Styles pour l'état vide de recherche */
    .empty-search-state {
      animation: fadeIn 0.3s ease-in;
    }
    .empty-search-state .empty-state-card {
      border: 1px solid #e9ecef;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }
    .empty-search-state .empty-state-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /** Styles pour les filtres de véhicules */
    .filter-tag {
      transition: all 0.2s ease;
    }
    .filter-tag:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    #activeFilters .badge {
      font-size: 0.75rem;
      padding: 0.4rem 0.6rem;
      cursor: default;
    }
    #activeFilters .badge .fa-times {
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s ease;
    }
    #activeFilters .badge .fa-times:hover {
      opacity: 1;
    }
    /* Correction z-index pour les dropdowns de filtres */
    .block.block-rounded:has(.dropdown) {
      position: relative;
      z-index: 1000;
    }
    .dropdown {
      position: relative;
      z-index: 1001;
    }
    .dropdown-menu {
      max-height: 300px;
      overflow-y: auto;
      z-index: 1050 !important;
      position: absolute !important;
    }
    .dropdown-item.filter-tag {
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    .dropdown-item.filter-tag:hover {
      background-color: #f8f9fa;
    }
    /* S'assurer que les cartes ne passent pas au-dessus des dropdowns */
    .list-card {
      position: relative;
      z-index: 1;
    }
    /* Conteneur des filtres avec z-index élevé */
    .block:has(#activeFilters) {
      position: relative;
      z-index: 1000;
    }
    
    /** Styles pour les actions rapides sur les cartes de véhicules */
    .vehicle-card-wrapper {
      position: relative;
    }
    
    /* Overlay desktop (hover) */
    .vehicle-actions-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 10;
      border-radius: 0.375rem;
    }
    .vehicle-card-wrapper:hover .vehicle-actions-overlay {
      opacity: 1;
      visibility: visible;
    }
    .vehicle-actions-content {
      padding: 1rem;
    }
    .vehicle-actions-content .btn-group-vertical {
      gap: 0.5rem;
    }
    .vehicle-actions-content .btn {
      min-width: 140px;
      justify-content: flex-start;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.2s ease;
    }
    .vehicle-actions-content .btn:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .vehicle-actions-content .btn i {
      width: 20px;
      text-align: center;
    }
    
    /* Bouton actions mobile */
    .vehicle-actions-mobile {
      z-index: 20;
    }
    .vehicle-actions-mobile-btn {
      background: rgba(255, 255, 255, 0.95) !important;
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .vehicle-actions-mobile-btn:hover,
    .vehicle-actions-mobile-btn:focus {
      background: rgba(255, 255, 255, 1) !important;
      transform: scale(1.1);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    .vehicle-actions-mobile-btn i {
      color: #495057;
      font-size: 1rem;
    }
    .vehicle-actions-mobile .dropdown-menu {
      min-width: 200px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border: none;
      margin-top: 0.5rem;
    }
    .vehicle-actions-mobile .dropdown-item {
      padding: 0.75rem 1rem;
      transition: all 0.2s ease;
    }
    .vehicle-actions-mobile .dropdown-item:hover {
      background-color: #f8f9fa;
      padding-left: 1.25rem;
    }
    .vehicle-actions-mobile .dropdown-item i {
      width: 20px;
      text-align: center;
    }
    
    /** Styles pour les actions rapides sur les cartes de réservations */
    .reservation-card-wrapper {
      position: relative;
    }
    
    /* Overlay desktop (hover) */
    .reservation-actions-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 10;
      border-radius: 0.375rem;
    }
    .reservation-card-wrapper:hover .reservation-actions-overlay {
      opacity: 1;
      visibility: visible;
    }
    .reservation-actions-content {
      padding: 1rem;
    }
    .reservation-actions-content .btn-group-vertical {
      gap: 0.5rem;
    }
    .reservation-actions-content .btn {
      min-width: 140px;
      justify-content: flex-start;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.2s ease;
    }
    .reservation-actions-content .btn:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .reservation-actions-content .btn i {
      width: 20px;
      text-align: center;
    }
    
    /* Bouton actions mobile */
    .reservation-actions-mobile {
      z-index: 20;
    }
    .reservation-actions-mobile-btn {
      background: rgba(255, 255, 255, 0.95) !important;
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .reservation-actions-mobile-btn:hover,
    .reservation-actions-mobile-btn:focus {
      background: rgba(255, 255, 255, 1) !important;
      transform: scale(1.1);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    .reservation-actions-mobile-btn i {
      color: #495057;
      font-size: 1rem;
    }
    .reservation-actions-mobile .dropdown-menu {
      min-width: 200px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border: none;
      margin-top: 0.5rem;
    }
    .reservation-actions-mobile .dropdown-item {
      padding: 0.75rem 1rem;
      transition: all 0.2s ease;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }
    .reservation-actions-mobile .dropdown-item:hover {
      background-color: #f8f9fa;
      padding-left: 1.25rem;
    }
    .reservation-actions-mobile .dropdown-item i {
      width: 20px;
      text-align: center;
    }
    
    /** Styles pour les filtres de réservations */
    #activeFilters .badge {
      font-size: 0.75rem;
      padding: 0.5rem 0.75rem;
      cursor: default;
    }
    #activeFilters .badge i.fa-times {
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s ease;
    }
    #activeFilters .badge i.fa-times:hover {
      opacity: 1;
    }
    
    /** Styles pour le calendrier */
    /* Personnalisation des couleurs FullCalendar selon les statuts */
    .fc-event {
      border-radius: 4px;
      font-weight: 500;
      padding: 2px 4px;
    }
    
    /* Responsive pour mobile */
    @media (max-width: 767.98px) {
      .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
      }
      .fc-toolbar-chunk {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .fc-button-group {
        flex-wrap: wrap;
        justify-content: center;
      }
      .fc-button {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
      }
      .fc-toolbar-title {
        font-size: 1.25rem;
        margin: 0.5rem 0;
      }
    }
    
    /* Amélioration du modal de calendrier */
    #reservationModal .modal-lg {
      max-width: 600px;
    }
    #reservationModal .block-content {
      max-height: 70vh;
      overflow-y: auto;
    }
    @media (max-width: 767.98px) {
      #reservationModal .modal-lg {
        max-width: 95%;
        margin: 1rem auto;
      }
      #modalActions .btn {
        flex: 1;
        min-width: 120px;
      }
    }

    .chart-empty-state {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
      }

      /** Styles pour les tableaux du dashboard */
      .table-hover tbody tr {
        transition: background-color 0.15s ease;
      }
      
      .table-hover tbody tr:hover {
        background-color: rgba(2, 132, 199, 0.05);
        cursor: pointer;
      }
      
      .table thead.table-light th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      @media (max-width: 767.98px) {
        .table-responsive {
          font-size: 0.875rem;
        }
        
        .table thead th {
          padding: 0.5rem;
        }
        
        .table tbody td {
          padding: 0.5rem;
        }
      }
      
      @media (max-width: 991.98px) {
        .chart-container-large {
          min-height: 250px;
          height: clamp(220px, 50vh, 300px);
        }
        
        .chart-container-medium {
          min-height: 220px;
          height: clamp(200px, 45vh, 280px);
        }
      }
      
      @media (max-width: 575.98px) {
        .chart-container-large {
          min-height: 220px;
          height: clamp(200px, 40vh, 250px);
        }
        
        .chart-container-medium {
          min-height: 200px;
          height: clamp(180px, 35vh, 220px);
        }
      }
      
      /** Amélioration des cartes clients et réservations */
      .list-card .block {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      
      .list-card:hover .block {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
      }
      
      /** Badges améliorés */
      .badge-lg {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
        font-weight: 600;
      }
      
      /** Amélioration des bordures colorées */
      .border-start.border-4 {
        border-left-width: 4px !important;
      }
      
      /** Amélioration des menus déroulants */
      .dropdown-menu h6.dropdown-header {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        margin-bottom: 0.25rem;
      }
      
      .dropdown-item {
        transition: background-color 0.15s ease, transform 0.15s ease;
      }
      
      .dropdown-item:hover {
        transform: translateX(4px);
      }
      
      /** Amélioration des cartes de réservation */
      .block-link-shadow {
        transition: all 0.2s ease;
      }
      
      .block-link-shadow:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      }
      
      /** Amélioration des cartes clients - Différenciation visuelle */
      .list-card[data-type_client="particulier"] .block {
        border-left-color: #0dcaf0 !important;
      }
      
      .list-card[data-type_client="entreprise"] .block {
        border-left-color: #ffc107 !important;
      }
      
      /** Icônes distinctives dans les cartes */
      .list-card .fa-user-circle,
      .list-card .fa-building {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      }
      
      /** Badges de type client améliorés */
      .list-card .badge {
        letter-spacing: 0.3px;
        text-transform: uppercase;
        font-size: 0.7rem !important;
      }
      
      /** Amélioration des cercles d'icônes */
      .list-card .bg-info.bg-opacity-10,
      .list-card .bg-warning.bg-opacity-10 {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      
      .list-card:hover .bg-info.bg-opacity-10,
      .list-card:hover .bg-warning.bg-opacity-10 {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      /** Amélioration des icônes de statistiques */
      .list-card .bg-info.bg-opacity-10.rounded-circle,
      .list-card .bg-warning.bg-opacity-10.rounded-circle,
      .list-card .bg-primary.bg-opacity-10.rounded-circle {
        transition: all 0.2s ease;
      }
      
      .list-card:hover .bg-info.bg-opacity-10.rounded-circle,
      .list-card:hover .bg-warning.bg-opacity-10.rounded-circle,
      .list-card:hover .bg-primary.bg-opacity-10.rounded-circle {
        transform: scale(1.15);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      /** Styles pour les images de véhicules */
      .vehicle-image-container {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }
      
      .vehicle-image-container:hover {
        transform: scale(1.02);
      }
      
      .vehicle-image-overlay {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .vehicle-image-loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f0f2f5 0%, #e9ecef 100%);
        transition: opacity 0.3s ease;
        z-index: 1;
      }
      
      .vehicle-image-container.image-loaded .vehicle-image-loading {
        opacity: 0;
        pointer-events: none;
      }
      
      .vehicle-image-container .logo-dynamic {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease;
      }
      
      .vehicle-image-container:hover .logo-dynamic {
        transform: scale(1.1);
      }
      
      .modele-img.image-loaded {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      /** Styles améliorés pour la pagination (inspirés de Codebase) */
      #paginationContainer.pagination {
        gap: 0.25rem;
        margin: 0;
      }
      
      #paginationContainer .page-item {
        margin: 0;
      }
      
      #paginationContainer .page-link {
        min-width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: #2c3034;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        text-decoration: none;
      }
      
      #paginationContainer .page-link:hover:not(.disabled):not(.active) {
        color: #0284c7;
        background-color: #f0f2f5;
        border-color: #0284c7;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(2, 132, 199, 0.15);
      }
      
      #paginationContainer .page-item.active .page-link {
        color: #fff;
        background-color: #0284c7;
        border-color: #0284c7;
        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
        font-weight: 700;
      }
      
      #paginationContainer .page-item.disabled .page-link {
        color: #adb5bd;
        background-color: #f8f9fa;
        border-color: #e9ecef;
        cursor: not-allowed;
        opacity: 0.6;
      }
      
      #paginationContainer .page-link i {
        font-size: 0.875rem;
      }
      
      #paginationContainer .page-item:first-child .page-link,
      #paginationContainer .page-item:last-child .page-link {
        padding: 0.5rem 1rem;
        min-width: auto;
      }
      
      #paginationContainer .page-item.disabled .page-link:hover {
        transform: none;
        box-shadow: none;
      }
      
      @media (max-width: 576px) {
        #paginationContainer .page-link {
          min-width: 2rem;
          height: 2rem;
          font-size: 0.875rem;
          padding: 0.25rem 0.5rem;
        }
        
        #paginationContainer .page-item:first-child .page-link,
        #paginationContainer .page-item:last-child .page-link {
          padding: 0.25rem 0.75rem;
          font-size: 0.75rem;
        }
        
        #paginationContainer .page-link i {
          font-size: 0.75rem;
        }
      }
      
      /** Styles pour le workflow visuel (stepper) des fiches */
      .fiche-workflow {
        margin: 0;
      }
      /* -------------------------------------- */
      /* --- 1. Conteneur et Alignement Global --- */
      /* -------------------------------------- */

      .stepper-container {
        display: flex;
        justify-content: space-between; /* Répartit les étapes sur toute la largeur */
        align-items: flex-start; /* Alignement en haut pour les labels */
        padding: 20px 0;
        margin-bottom: 20px;
      }

      .stepper-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1; /* Permet aux étapes de prendre une part égale de l'espace */
        text-align: center;
      }

      /* -------------------------------------- */
      /* --- 2. Icône et Étiquette --- */
      /* -------------------------------------- */

      .step-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        z-index: 10; /* Assure que l'icône est au-dessus de la ligne */
        border: 2px solid #ccc; /* Bordure par défaut */
        background-color: #f8f9fa; /* Arrière-plan clair */
      }

      .step-icon i {
        color: inherit;
      }

      .step-label {
        margin-top: 8px;
        font-size: 14px;
        color: #6c757d; /* Couleur du texte par défaut (muted) */
        font-weight: 500;
        white-space: nowrap; /* Empêche le texte de s'enrouler */
      }

      /* -------------------------------------- */
      /* --- 3. Lignes de Connexion (Le cœur du Stepper) --- */
      /* -------------------------------------- */

      .step-line {
        position: absolute;
        top: 19px; /* Centré verticalement (moitié de la hauteur de l'icône) */
        left: 50%;
        width: 100%; /* La ligne s'étendra sur la moitié du chemin vers l'étape suivante */
        height: 2px;
        background-color: #e9ecef; /* Couleur de la ligne par défaut (gris clair) */
        z-index: 5;
        transform: translateX(1px); /* Ajustement pour masquer la ligne sous l'icône */
      }

      /* Retirer la ligne après la dernière étape (Optionnel mais recommandé) */
      .stepper-step:last-child .step-line {
        display: none;
      }

      /* -------------------------------------- */
      /* --- 4. Styles des États Actifs et Terminés --- */
      /* -------------------------------------- */

      /* Étape Active (Diagnostic, dans votre exemple) */
      .stepper-step.step-active .step-icon {
        background-color: #007bff; /* Bleu Bootstrap (ou votre couleur principale) */
        border-color: #007bff;
        color: white;
      }

      .stepper-step.step-active .step-label {
        color: #000; /* Texte noir pour l'étape active */
        font-weight: bold;
      }

      /* Ligne "pending" (en attente/non complétée) */
      .step-line.line-pending {
        background-color: #e9ecef; /* Ligne en gris clair */
      }

      /* Ligne "completed" (Si vous ajoutez une classe .line-completed lorsque l'étape est passée) */
      /* Supposons que vous ayez une classe step-completed pour les étapes terminées */
      .stepper-step.step-completed .step-icon {
        background-color: #28a745; /* Vert (Success) */
        border-color: #28a745;
        color: white;
      }

      .stepper-step.step-completed + .stepper-step .step-line {
        background-color: #28a745; /* Ligne verte pour la connexion réussie */
      }

      /* -------------------------------------- */
      /* --- 5. Ajustements pour l'étape inactives --- */
      /* -------------------------------------- */

      .stepper-step.step-inactive .step-icon {
        color: #adb5bd; /* Couleur de l'icône inactive */
        border-color: #adb5bd;
      }

      /* -------------------------------------- */
      /* --- Remplacer les couleurs Bootstrap --- */
      /* -------------------------------------- */
      /* Pour votre exemple où l'icône utilise text-secondary pour l'étape active */

      .stepper-step.step-active .step-icon.text-secondary {
        /* Utilisez votre couleur principale ou un bleu plus foncé pour l'icône active */
        background-color: #17a2b8; /* Couleur cyan/teal de Bootstrap secondary */
        border-color: #17a2b8;
        color: white !important; /* Force la couleur de l'icône à être blanche */
      }
      @keyframes slow-blink {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.7; }
      }
      /* -------------------------------------- */
      /* --- 2. Styles Mis à Jour --- */
      /* -------------------------------------- */

      .stepper-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 0;
        margin-bottom: 20px;
      }

      .stepper-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1; 
        text-align: center;
        
        /* Ajoute un padding horizontal pour forcer une séparation minimale */
        padding: 0 5px; 
      }

      .step-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        z-index: 10;
        border: 2px solid #dee2e6;
        background-color: #ffffff;
        transition: all 0.3s ease;
        color: #6c757d;
      }

      .step-label {
        margin-top: 10px;
        font-size: 12px;
        color: #6c757d;
        font-weight: 500;
        white-space: normal;
        word-break: break-word;
        min-width: 60px;
        line-height: 1.3;
      }


      /* -------------------------------------- */
      /* --- 3. Styles Actifs et Animation --- */
      /* -------------------------------------- */

      /* Styles pour l'étape inactive */
      .stepper-step.step-inactive .step-icon {
        background-color: #ffffff;
        border-color: #dee2e6;
        color: #adb5bd;
      }

      .stepper-step.step-inactive .step-label {
        color: #adb5bd;
      }

      /* Styles pour l'étape active (en cours) */
      .stepper-step.step-active .step-icon {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: white !important;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
        animation: slow-blink 2s infinite alternate;
      }

      .stepper-step.step-active .step-label {
        color: #0d6efd;
        font-weight: 600;
      }

      /* Styles pour l'étape complétée (sans animation) */
      .stepper-step.step-completed .step-icon {
        background-color: #ffffff;
        border-color: #198754;
        color: #198754 !important;
        /* Pas d'animation pour les étapes complétées */
      }

      .stepper-step.step-completed .step-label {
        color: #495057;
        font-weight: 500;
      }


      /* -------------------------------------- */
      /* --- 4. Lignes de Connexion (Non modifié) --- */
      /* -------------------------------------- */

      .step-line {
        position: absolute;
        top: 19px;
        left: 50%;
        width: 100%; 
        height: 2px;
        background-color: #dee2e6;
        z-index: 5;
        transform: translateX(1px);
      }

      .step-line.line-completed {
        background-color: #198754;
      }

      .step-line.line-pending {
        background-color: #dee2e6;
      }

      .stepper-step:last-child .step-line {
        display: none;
      }
      /** Styles pour les suggestions de recherche fournisseurs */
      #searchSuggestions {
        top: 100%;
        left: 0;
      }
      
      #searchSuggestions .list-group-item {
        border: none;
        border-bottom: 1px solid #dee2e6;
        cursor: pointer;
        transition: background-color 0.2s;
      }
      
      #searchSuggestions .list-group-item:hover {
        background-color: #f8f9fa;
      }
      
      #searchSuggestions .list-group-item:last-child {
        border-bottom: none;
      }
      
      /** Styles pour les alertes de stock critique */
      .table-warning {
        background-color: rgba(255, 193, 7, 0.1) !important;
      }
      
      .table-warning:hover {
        background-color: rgba(255, 193, 7, 0.2) !important;
      }
      
      .table-danger {
        background-color: rgba(220, 53, 69, 0.1) !important;
      }
      
      .table-danger:hover {
        background-color: rgba(220, 53, 69, 0.2) !important;
      }
      
      /* Animation pour les badges d'alerte */
      .badge.bg-warning.text-white,
      .badge.bg-danger.text-white {
        animation: pulse 2s ease-in-out infinite;
      }
      
      @keyframes pulse {
        0%, 100% {
          opacity: 1;
        }
        50% {
          opacity: 0.8;
        }
      }
      
      /* Styles pour les indicateurs de progression */
      .step-indicator {
        position: relative;
        padding: 1rem;
        transition: all 0.3s ease;
      }
      
      .step-indicator::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: var(--bs-primary);
        transition: width 0.3s ease;
        z-index: 0;
      }
      
      .step-indicator.active::after {
        width: 100%;
        left: 0;
      }
      
      .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--bs-body-bg-dark);
        border: 2px solid var(--bs-border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin: 0 auto 0.5rem;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
      }
      
      .step-indicator.active .step-number {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: white;
        transform: scale(1.1);
      }
      
      .step-label {
        font-size: 0.65rem;
        color: var(--bs-body-color);
        transition: color 0.3s ease;
      }
      
      .step-indicator.active .step-label {
        color: var(--bs-primary);
        font-weight: 600;
      }

      @keyframes slow-blink {
          0% { 
              background-color: #17a2b8; /* Couleur initiale (Cyan/Teal) */
              color: white; 
          }
          50% { 
              background-color: #000000; /* Couleur intermédiaire (Noir) */
              color: white; /* Garder l'icône blanche pour contraste */
          }
          100% { 
              background-color: #17a2b8; /* Retour à la couleur initiale */
              color: white; 
          }
      }
      
      /* Animation pour les formulaires */
      .tab-pane.animate-fade-in {
        animation: fadeIn 0.3s ease-in;
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      /* Styles pour les cartes de véhicules */
      .vehicule-radio:checked + label .block {
        border-color: var(--bs-primary) !important;
        background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.15);
      }
      
      .vehicule-radio + label .block {
        cursor: pointer;
        border-color: var(--bs-border-color);
      }
      
      .vehicule-radio + label .block:hover {
        border-color: var(--bs-primary);
        transform: translateY(-2px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      .vehicule-radio {
        display: none;
      }
      
      /* Amélioration du select2 pour les services */
      .select2-container--default .select2-selection--single {
        border-color: var(--bs-border-color);
        height: auto;
        padding: 0.375rem 0.75rem;
      }
      
      .select2-container--default .select2-selection--single:focus {
        border-color: var(--bs-primary);
      }

      .nav-tabs-block .nav-item.show .nav-link, .nav-tabs-block .nav-link.active {
          color: white;
          background-color: var(--bs-primary);
          border-color: transparent;
      }

      /* Survol des onglets actifs : couleur noire (priorité élevée) */
      ul.nav-tabs-block .nav-item .nav-link.active:hover,
      ul.nav-tabs-block .nav-item button.nav-link.active:hover,
      ul.nav-tabs-block .nav-item a.nav-link.active:hover {
          color: #000 !important;
      }

      /* Cibler aussi les icônes dans les onglets actifs au survol */
      ul.nav-tabs-block .nav-item .nav-link.active:hover i.fa,
      ul.nav-tabs-block .nav-item button.nav-link.active:hover i.fa,
      ul.nav-tabs-block .nav-item a.nav-link.active:hover i.fa {
          color: #000 !important;
      }

      /* Styles pour la page de programmation d'entretien */
      .form-label i {
          opacity: 0.7;
          transition: opacity 0.2s ease;
      }

      .form-floating:focus-within .form-label i,
      .form-floating .form-control:not(:placeholder-shown) ~ .form-label i {
          opacity: 1;
      }

      /* Amélioration des cartes d'information véhicule */
      .bg-body-light {
          transition: all 0.2s ease;
      }

      .bg-body-light:hover {
          background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
          transform: translateY(-1px);
      }

    /* Transition douce pour l'apparition des lignes */
    .animate-fade-in {
        animation: fadeIn 0.3s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Style pour le total en bas de ligne */
    .row-total {
        font-family: 'Courier New', monospace; /* Look "Facture" */
        font-weight: bold;
    }

    /* Carte de groupe (Mode sous-titre) */
    .group-card {
        border: 1px solid #e6e6e6;
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    /* Nouveau style pour le bouton d'ajout */
    .btn-add-dashed {
      border: 2px dashed #dbe4ef; /* Bordure en pointillés gris/bleu */
      background-color: transparent;
      color: #6c757d;
      width: 100%; /* Prend toute la largeur */
      transition: all 0.2s;
    }

    .btn-add-dashed:hover {
      border-color: #3b82f6; /* Devient bleu au survol */
      color: #3b82f6;
      background-color: #f0f7ff;
    }

    /* Styles pour les groupes de notifications par date */
    .table-group-header {
      background-color: #f8f9fa !important;
      border-top: 2px solid #dee2e6;
      border-bottom: 2px solid #dee2e6;
    }

    .table-group-header td {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #495057;
      padding: 0.75rem 1rem !important;
    }

    .table-group-header:first-child {
      border-top: none;
    }

    .table-group-header + tr {
      border-top: 1px solid #dee2e6;
    }

    /* Amélioration visuelle des notifications groupées */
    .table tbody tr.table-group-header + tr {
      border-top: 2px solid #e9ecef;
    }

    /* Espacement entre les groupes */
    .table-group-header + tr td {
      padding-top: 1rem;
    }