/* Police Calibri Light (police système Windows) */
    /* Les @font-face pour Suisse Int'l ont été désactivés */
    
    :root {
      --bg: #CFEFF8;
      --bg-secondary: #FAF4D3;
      --text-primary: #0D3B0E;
      --text-secondary: #003B38;
      --text-muted: #666666;
      --border-subtle: rgba(0, 0, 0, 0.1);
      /* Palette Success (Vert) */
      --success-50: #edf7ee;
      --success-75: #b6deb7;
      --success-100: #97d19a;
      --success-200: #6abd6e;
      --success-300: #4caf50;
      --success-400: #357a38;
      --success-500: #2e6b31;
      --success: #4caf50; /* S300 par défaut */
      
      /* Palette Warning (Jaune/Orange) */
      --warning-50: #fff9e6;
      --warning-75: #ffe699;
      --warning-100: #ffdb6f;
      --warning-200: #ffcc31;
      --warning-300: #ffc107;
      --warning-400: #b38705;
      --warning-500: #9c7604;
      --warning: #ffc107; /* W300 par défaut */
      
      /* Palette Error (Rouge) */
      --error-50: #ffebee;
      --error-75: #ffcdd2;
      --error-100: #ef9a9a;
      --error-200: #e57373;
      --error-300: #ef5350;
      --error-400: #d32f2f;
      --error-500: #c62828;
      --error: #d32f2f; /* E400 par défaut */
      --primary-color: #FF6B00;
      --orange: #FF6B00;
      --orange-dark: #E55A00;
      --orange-light: #FF8C33;
      --black: #000000;
      --white: #FFFFFF;
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
      --teal-dark: #003B38;
      --cream: #FAF4D3;
      --blue-light: #CFEFF8;
      --pink-light: #FFB9C5;
      --brown-dark: #38091F;
      --spacing-xs: 0.5rem;
      --spacing-sm: 0.75rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 2.5rem;
      --spacing-3xl: 3rem;
      --font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --transition: 0.2s ease;
      --transition-base: 0.2s ease;
      --transition-smooth: 0.3s ease;
      /* Limite visible des tableaux : ~28 lignes, effet fade en bas */
      --table-visible-rows: 28;
      --table-row-height: 44px;
      --table-max-height: calc(var(--table-row-height) * var(--table-visible-rows));
      --table-fade-height: 100px;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html {
      -webkit-font-smoothing: antialiased;
    }
    
    body {
      margin: 0;
      padding: 0;
      font-family: var(--font-family);
      font-size: var(--font-size-base);
      line-height: 1.6;
      background: #fcf8f2;
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.6s ease-in-out;
    }
    
    /* Couleurs de fond pour chaque page */
    body.page-synthese {
      background: #fcf8f2;
    }
    
    body.page-planTravail {
      background: #fcf8f2;
    }
    
    body.page-declaration {
      background: #fcf8f2;
    }
    
    /* Page Déclaration : centrer les infos (barre métriques, barre du tableau) */
    #pageDeclaration #declarationMetricsBar {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5em;
    }
    #pageDeclaration #declarationTableCountBar {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    #pageDeclaration .declaration-pills-inline#declarationCheckboxFiltersBar {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    body.page-autresDeclarations {
      background: #fcf8f2;
    }
    
    body.page-tvaAnnuelle {
      background: #fcf8f2;
    }
    
    body.page-syntheseTVACombined {
      background: #fcf8f2;
    }
    
    body.page-suiviTemps {
      background: #fcf8f2;
    }
    
    body.page-administration {
      background: #fcf8f2;
    }
    
    body.page-baseClients {
      background: #fcf8f2;
    }
    
    body.page-controleHabilitations {
      background: #fcf8f2;
    }
    
    .layout {
      display: flex;
      min-height: 100vh;
    }
    
    /* ============================================
       SIDEBAR GAUCHE - Menu qui se découvre au survol
       ============================================ */
    
    .app-sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 56px;
      background: #003B38;
      border-right: 1px solid rgba(0, 0, 0, 0.15);
      z-index: 1001;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: width 0.2s ease;
    }
    
    .app-sidebar:hover {
      width: 300px;
    }
    
    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 56px;
      min-height: 56px;
      padding: 0 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
    }
    
    .sidebar-brand-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(250, 244, 211, 0.2);
      color: #FAF4D3;
      font-size: 18px;
      font-weight: 700;
      border-radius: 8px;
      flex-shrink: 0;
    }
    
    .sidebar-brand-text {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #FAF4D3;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    
    .app-sidebar:hover .sidebar-brand-text {
      opacity: 1;
    }
    
    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 12px 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .sidebar-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 14px;
      border: none;
      background: transparent;
      color: rgba(250, 244, 211, 0.85);
      font-size: 14px;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
      white-space: nowrap;
      text-transform: none;
      letter-spacing: 0;
    }
    
    .sidebar-nav-item:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #FAF4D3;
    }
    
    .sidebar-nav-item.active {
      background: rgba(250, 244, 211, 0.15);
      color: #FAF4D3;
      font-weight: 600;
    }
    
    .sidebar-icon {
      flex-shrink: 0;
      width: 24px;
      text-align: center;
      font-size: 16px;
      line-height: 1;
    }
    
    .sidebar-label {
      opacity: 0;
      max-width: 0;
      overflow: hidden;
      transition: opacity 0.15s ease, max-width 0.2s ease;
    }
    
    .app-sidebar:hover .sidebar-label {
      opacity: 1;
      max-width: none;
      white-space: nowrap;
    }
    
    .sidebar-version {
      padding: 10px 14px;
      font-size: 11px;
      color: rgba(250, 244, 211, 0.7);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    
    .app-sidebar:hover .sidebar-version {
      opacity: 1;
    }
    
    .app-main {
      margin-left: 56px;
      min-height: 100vh;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    
    /* Contenu : ne pas dépasser sous la sidebar (éviter 100vw / full-bleed à gauche) */
    .app-main .filters-bar {
      width: 100%;
      max-width: 100%;
      left: auto;
      right: auto;
      margin-left: 0;
      margin-right: 0;
    }
    
    .app-main .shell {
      margin-top: 0;
      min-height: calc(100vh);
      height: auto;
      padding-left: var(--spacing-md, 1rem);
    }
    
    /* ============================================
       TOP NAVBAR - (conservé pour sous-pages / compat)
       ============================================ */
    
    .top-navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 70px;
      background: #003B38;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      padding: 0 var(--spacing-xl);
      z-index: 1000;
      gap: var(--spacing-xl);
    }
    
    .navbar-brand {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      height: 100%;
    }
    
    .navbar-brand-text {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 70px;
      color: #FAF4D3;
      text-transform: uppercase;
      display: block;
      margin: 0;
      padding: 0;
    }
    
    .navbar-brand-subtitle {
      font-size: var(--font-size-xs);
      font-weight: 400;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #FAF4D3;
      opacity: 0.7;
    }
    
    .navbar-nav {
      display: flex;
      gap: 0;
      align-items: center;
      flex: 1;
    }
    
    .navbar-version {
      margin-left: auto;
      padding: 0 16px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: rgba(250, 244, 211, 0.9);
      white-space: nowrap;
    }
    
    .navbar-nav-item {
      position: relative;
      padding: 12px 20px;
      font-size: 16px;
      color: #FAF4D3;
      text-decoration: none;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: color var(--transition);
      white-space: nowrap;
      opacity: 0.8;
      text-transform: uppercase;
    }
    
    .navbar-nav-item:hover {
      color: #FAF4D3;
      opacity: 1;
    }
    
    .navbar-nav-item.active {
      color: #FAF4D3;
      font-weight: 600;
      opacity: 1;
    }
    
    .navbar-nav-item.active::after {
      display: none;
    }
    
    /* Masquer certains onglets uniquement en barre horizontale (pas dans la sidebar) */
    .top-navbar .navbar-nav-item[data-view="autresDeclarations"],
    .top-navbar .navbar-nav-item[data-view="tvaAnnuelle"] {
      display: none !important;
    }
    
    /* Styles spécifiques pour les onglets Suivi TVA */
    .suivi-cycles-nav .navbar-nav-item {
      padding: 12px 32px;
      border-bottom: none;
      background: #FFE4E1;
      color: #125158;
      transition: text-shadow 0.2s ease;
      font-size: 14px;
      font-weight: 400;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      letter-spacing: 0;
      text-transform: uppercase;
      text-align: left !important;
      justify-content: flex-start;
    }
    
    .suivi-cycles-nav .navbar-nav-item:hover {
      background: #FFE4E1;
      color: #125158;
      text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
    }
    
    .suivi-cycles-nav .navbar-nav-item.active::after {
      display: none;
    }
    
    .suivi-cycles-nav .navbar-nav-item.active {
      background: #FFE4E1;
      color: #125158;
      text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
      font-weight: 700;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* ============================================
       CONTENU PRINCIPAL - INSPIRÉ APPLE (Espacements généreux)
       ============================================ */
    
    .shell {
      margin-top: 70px;
      min-height: calc(100vh - 70px);
      height: calc(100vh - 70px);
      padding: var(--spacing-lg) var(--spacing-2xl);
      background: transparent;
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
    }
    
    .shell-header {
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-xs);
      border-bottom: none;
    }
    
    .shell-title {
      font-size: 48px;
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: #0D3B0E;
      margin: 0 0 var(--spacing-md) 0;
    }
    
    .shell-subtitle {
      font-size: 19px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: #003B38;
      line-height: 1.5;
    }
    
    /* ============================================
       FILTRES & MENUS DÉROULANTS - INSPIRÉ HUBLOT (Élégant et fluide)
       ============================================ */
    
    .filters-bar {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-lg);
      margin-bottom: var(--spacing-md);
      margin-left: calc(-1 * var(--spacing-2xl));
      margin-right: calc(-1 * var(--spacing-2xl));
      padding: 12px var(--spacing-xl);
      background: #e3dfda;
      border-radius: 0;
      border: none;
      border-top: 1px solid rgba(227, 223, 218, 0.3);
      border-bottom: 1px solid rgba(227, 223, 218, 0.3);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      flex-shrink: 0;
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      box-sizing: border-box;
    }
    
    .filters-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      padding: 0 20px;
    }
    
    .filter-group {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }
    
    .filter-label {
      font-size: var(--font-size-xs);
      font-weight: 500;
      letter-spacing: 0.02em;
      color: #125158;
      text-transform: uppercase;
      margin-bottom: var(--spacing-xs);
    }
    
    .period-select {
      padding: var(--spacing-sm) var(--spacing-md);
      font-size: var(--font-size-base);
      font-weight: 500;
      letter-spacing: -0.015em;
      color: #125158;
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all var(--transition-base);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23125158' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right var(--spacing-md) center;
      padding-right: calc(var(--spacing-md) * 2 + 12px);
    }
    
    .period-select:hover {
      background-color: var(--bg-secondary);
    }
    
    .period-select:focus {
      outline: none;
      background-color: var(--bg-secondary);
    }
    
    /* ============================================
       TABLEAUX & CARTES - INSPIRÉ APPLE (Espacements généreux)
       ============================================ */
    
    .table-wrapper {
      border-radius: 0;
      border: none;
      padding: 0;
      overflow-x: auto;
      overflow-y: auto;
      background: #fff9f1;
      box-shadow: none;
      margin-bottom: var(--spacing-3xl);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: all var(--transition-smooth);
      animation: tableFadeIn 0.7s ease-out;
      position: relative;
      width: 100%;
      max-width: 100%;
      max-height: var(--table-max-height);
      height: auto;
      display: block;
      flex: 1;
      min-height: 0;
    }
    
    /* Effet opacité en bas désactivé : provoquait un masquage des colonnes à droite. À réactiver avec positionnement corrigé si besoin. */
    .table-wrapper::after {
      content: none;
      display: none;
    }
    .table-wrapper.at-bottom::after {
      display: none;
    }
    
    /* Style spécifique pour les tableaux dans les pages actives avec flexbox */
    .page.active .table-wrapper {
      margin-bottom: 0;
      flex: 1;
      min-height: 0;
      width: 100%;
      min-width: 100%; /* empêche le tableau de se rapetisser au changement de page/onglet ou F5 */
      max-width: 100%;
      max-height: var(--table-max-height);
      box-sizing: border-box;
    }
    /* Plan de travail + Déclaration : tableau défilant horizontalement dans le wrapper (plus besoin de dézoomer) */
    #pagePlanTravail .table-wrapper,
    #pageDeclaration .table-wrapper {
      flex: none !important;
      min-height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
    #pagePlanTravail.active .table-wrapper,
    #pageDeclaration.active .table-wrapper {
      flex: none !important;
      min-height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
    }
    /* La page elle-même devient le seul conteneur de scroll (plus de double scroll) */
    #pagePlanTravail.active,
    #pageDeclaration.active {
      overflow-y: auto !important;
      overflow-x: hidden;
    }
    
    .table-wrapper table {
      width: 100%;
      min-width: 100%;
      display: table;
    }
    /* Plan de travail / Déclaration : tableau à 100% de la largeur, colonnes de tâches élastiques */
    #pagePlanTravail .table-wrapper table,
    #pageDeclaration .table-wrapper table {
      table-layout: fixed;
      width: 100% !important;
      min-width: 100%;
      box-sizing: border-box;
    }
    /* Uniquement les colonnes de tâches VISIBLES (classe ajoutée par JS) : largeur élastique pour remplir toute la page */
    #pagePlanTravail .table-wrapper #suiviTable th.task-col-elastic,
    #pagePlanTravail .table-wrapper #suiviTable td.task-col-elastic,
    #pageDeclaration .table-wrapper #declarationTable th.task-col-elastic,
    #pageDeclaration .table-wrapper #declarationTable td.task-col-elastic {
      width: auto !important;
      min-width: 56px;
      max-width: none !important;
    }
    
    /* Lignes devinées (pagination) : opacité 75 %, plus lisible au survol */
    tr[data-pagination-ghost] {
      transition: opacity 0.2s ease, background 0.2s ease;
    }
    tr[data-pagination-ghost]:hover {
      opacity: 1 !important;
      background: rgba(0, 0, 0, 0.06) !important;
    }
    
    /* Styliser la barre de défilement pour respecter les arrondis */
    .table-wrapper::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    .table-wrapper::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 0 12px 12px 0;
      margin: 0;
    }
    
    .table-wrapper::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 12px;
      border: 0;
    }
    
    .table-wrapper::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.3);
    }
    
    /* Pour Firefox */
    .table-wrapper {
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
    
    /* Masquer la barre de défilement horizontale si pas nécessaire */
    .table-wrapper::-webkit-scrollbar:horizontal {
      height: 8px;
    }
    
    .table-wrapper::before {
      display: none;
    }
    /* Ne pas masquer le ::after (fade en bas) */
    
    .table-wrapper:hover {
      box-shadow: none;
      transform: none;
    }
    
    .table-wrapper:hover::before {
      display: none;
    }
    
    @keyframes tableFadeIn {
      from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    /* ============================================
       TABLEAUX ULTRA-MINIMALISTES - INSPIRÉ APPLE/SPOTIFY
       ============================================ */
    
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: var(--font-size-base);
      font-weight: 400;
      letter-spacing: -0.013em;
      background: #fff9f1;
    }
    
    /* En-têtes fixes pour tous les tableaux */
    table thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }
    table thead th {
      position: sticky;
      top: 0;
      z-index: 21;
      background: #f5f5f5;
      box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
    }
    
    .client-table {
      width: 100%;
      min-width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff9f1;
      font-size: 14px;
      line-height: 1.5;
      table-layout: auto;
      border-radius: 0;
      overflow: visible;
    }
    
    .client-table thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }
    
    /* Styles pour le template calendrier fiscal (inspiré Excel) */
    .template-calendar-header {
      font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      font-size: 11px;
      font-weight: 300;
      text-align: left;
      padding: 8px 12px;
      background: #FFE4E1;
      color: #125158;
      border-bottom: 1px solid #e0e0e0;
      white-space: nowrap;
    }
    
    .template-calendar-dates {
      font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      font-size: 11px;
      font-weight: 300;
      text-align: left;
      padding: 8px 12px;
      background: #fff9f1;
      color: #666666;
      border-bottom: 1px solid #e0e0e0;
      white-space: nowrap;
    }
    
    .template-calendar-client {
      font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      font-size: 11px;
      font-weight: 300;
      text-align: left;
      padding: 8px 12px;
      background: #fff9f1;
      color: #000000;
      border-right: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
      white-space: nowrap;
    }
    
    .template-calendar-cell {
      font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      font-size: 11px;
      font-weight: 300;
      text-align: left;
      padding: 8px 12px;
      background: #fff9f1;
      color: #000000;
      border-bottom: 1px solid #e0e0e0;
      white-space: nowrap;
      position: relative;
    }
    
    .template-tax-cell-content {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    
    .template-tax-select {
      font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      font-size: 11px;
      font-weight: 300;
      padding: 4px 8px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      background: #fff9f1;
      color: #000000;
      cursor: pointer;
      min-width: 80px;
    }
    
    .template-tax-select.status-ok {
      background: #e8f5e9;
      color: #388e3c;
      border-color: #388e3c;
    }
    
    .template-tax-select.status-suspens {
      background: #fff3e0;
      color: #f57c00;
      border-color: #f57c00;
    }
    
    .template-tax-select.status-na {
      background: #f5f5f5;
      color: #757575;
      border-color: #757575;
    }
    
    .template-calendar-row:hover {
      background: #f5f5f5;
    }
    
    .template-calendar-row:hover .template-calendar-cell,
    .template-calendar-row:hover .template-calendar-client {
      background: #f5f5f5;
    }
    
    .template-status {
      display: inline-block;
      font-weight: 500;
      margin-right: 4px;
    }
    
    .template-status-na {
      color: #757575;
    }
    
    .template-status-ok {
      color: #388e3c;
    }
    
    .template-status-suspens {
      color: #f57c00;
    }
    
    .template-days {
      display: inline-block;
      font-size: 10px;
      opacity: 0.7;
      margin-left: 2px;
    }
    
    .template-days-normal {
      color: #666666;
    }
    
    .template-days-overdue {
      color: #d32f2f;
      font-weight: 500;
    }
    
    .template-overdue {
      color: #d32f2f !important;
      font-weight: 500;
    }
    
    .template-urgent {
      color: #f57c00 !important;
      font-weight: 500;
    }
    
    .template-approaching {
      color: #fbc02d !important;
    }
    
    .template-ok {
      color: #388e3c !important;
    }
    
    .client-table thead th {
      position: sticky;
      top: 0;
      background: #000000 !important;
      color: #ffffff !important;
      z-index: 21;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    }
    
    /* En-têtes tableau Plan de travail / Déclaration : gris discret (UX type suivi déclarations) */
    #pagePlanTravail .client-table thead th,
    body.page-planTravail .client-table thead th {
      background: #f5f5f5 !important;
      color: #666 !important;
    }
    
    #syntheseTable thead th {
      background: #FFE4E1 !important;
      color: #125158 !important;
    }
    
    #declarationTable thead th {
      background: #f5f5f5 !important;
      color: #666 !important;
    }
    
    /* Pas d'arrondis pour client-table */
    .client-table thead tr:first-child th:first-child {
      border-top-left-radius: 0;
    }
    
    .client-table thead tr:first-child th:last-child {
      border-top-right-radius: 0;
    }
    
    /* Pas d'arrondis en bas pour client-table */
    .client-table tbody tr:last-child td:first-child {
      border-bottom-left-radius: 0;
    }
    
    .client-table tbody tr:last-child td:last-child {
      border-bottom-right-radius: 0;
      border-bottom: none;
    }
    
    .client-table th {
      text-align: left;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: var(--black);
      color: var(--white);
      vertical-align: middle;
      white-space: nowrap;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .client-table th:hover {
      background: rgba(255, 107, 0, 0.2) !important;
    }
    
    .client-table td {
      padding: 8px 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      vertical-align: middle;
      color: #1a1a1a;
      font-size: 12px;
      transition: background-color 0.15s ease;
    }
    
    .client-table tbody tr:last-child td {
      border-bottom: none;
    }
    
    .client-table tbody tr {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .client-table tbody tr:hover {
      background-color: #fff3e0 !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transform: translateY(-1px);
      cursor: pointer;
    }
    
    .client-table tbody tr:hover td {
      background-color: #fff3e0 !important;
    }
    
    .client-table tbody tr:last-child td {
      border-bottom: none;
    }
    
    .admin-table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      min-width: 800px;
      font-size: 14px;
      table-layout: auto;
      background: #fff9f1;
      border-radius: 0;
      overflow: hidden;
    }
    
    /* Tableau Base clients (Administration) : plus compact */
    #baseClientsTable {
      font-size: 12px;
      min-width: 600px;
    }
    /* En-têtes sticky : .admin-table a overflow:hidden + collapse par défaut — neutraliser ici */
    #pageBaseClients #baseClientsTable {
      overflow: visible !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }
    #baseClientsTable th {
      padding: 4px 6px;
      font-size: 14px;
    }
    #baseClientsTable td {
      padding: 4px 6px;
      font-size: 12px;
    }
    #baseClientsTable input,
    #baseClientsTable select {
      padding: 4px 6px;
      font-size: 12px;
      min-height: 28px;
    }
    
    .admin-table thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }
    
    .admin-table thead th {
      position: sticky;
      top: 0;
      background: var(--black) !important;
      color: var(--white) !important;
      z-index: 21;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    }
    
    /* Pas d'arrondis pour admin-table */
    .admin-table thead tr:first-child th:first-child {
      border-top-left-radius: 0;
    }
    
    .admin-table thead tr:first-child th:last-child {
      border-top-right-radius: 0;
    }
    
    /* Pas d'arrondis en bas pour admin-table */
    .admin-table tbody tr:last-child td:first-child {
      border-bottom-left-radius: 0;
    }
    
    .admin-table tbody tr:last-child td:last-child {
      border-bottom-right-radius: 0;
      border-bottom: none;
    }
    
    .admin-table tbody tr:last-child td {
      border-bottom: none;
    }
    
    .admin-table th {
      text-align: left;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      box-sizing: border-box;
      vertical-align: middle;
      background: #000000;
      color: #ffffff;
    }
    
    .admin-table th:hover {
      background: #1a1a1a !important;
    }
    
    .admin-table td {
      padding: 8px 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      vertical-align: middle;
      box-sizing: border-box;
      color: #1a1a1a;
      font-size: 12px;
    }
    
    .admin-table input, 
    .admin-table select {
      width: 100%;
      padding: 6px 10px;
      font-size: 14px;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: #fff9f1;
      transition: all 0.2s ease;
    }
    
    .admin-table input:focus,
    .admin-table select:focus {
      outline: none;
      border-color: #000000;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }
    
    #baseClientsTable .task-input {
      min-height: 28px;
    }
    
    #baseClientsTable .btn.btn-danger {
      min-width: 24px;
      width: 24px;
      height: 24px;
      padding: 0;
      font-size: 14px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Tableau Suivi TVA - Design ultra-minimaliste */
    #suiviTable {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      min-width: 100%;
      border: none;
      border-radius: 0;
      overflow: visible;
      background: #fff9f1;
      box-shadow: none;
      font-family: var(--font-family);
      font-size: 14px;
      line-height: 1.4;
      table-layout: auto;
    }
    
    #suiviTable thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }
    
    /* Pas d'arrondis en haut - les onglets ont déjà les arrondis */
    #suiviTable thead tr:first-child th:first-child {
      border-top-left-radius: 0;
    }
    
    #suiviTable thead tr:first-child th:last-child {
      border-top-right-radius: 0;
    }
    
    /* Pas d'arrondis en bas */
    #suiviTable tbody tr:last-child td:first-child {
      border-bottom-left-radius: 0;
    }
    
    #suiviTable tbody tr:last-child td:last-child {
      border-bottom-right-radius: 0;
    }
    
    #suiviTable th,
    #suiviTable td {
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      padding: 4px 8px;
      text-align: left !important;
      position: relative;
      vertical-align: middle;
      white-space: nowrap;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #suiviTable td {
      white-space: normal;
      background-color: #fff9f1;
      font-size: 12px;
      color: #1a1a1a;
      line-height: 1.3;
      padding: 4px 8px;
    }
    
    #suiviTable th {
      background: #FFE4E1;
      color: #125158;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      user-select: none;
      padding: 4px 8px;
      border-bottom: 1px solid rgba(18, 81, 88, 0.15);
      border-top: none;
      text-align: left !important;
    }
    
    #suiviTable thead {
      background: #FFE4E1;
      border-radius: 0 0 0 0;
    }
    
    #suiviTable thead th {
      position: sticky;
      top: 0;
      background: #FFE4E1 !important;
      color: #125158 !important;
      z-index: 21;
      box-shadow: 0 1px 0 0 rgba(18, 81, 88, 0.15);
    }
    #suiviTable thead th.col-name {
      left: 0 !important;
      z-index: 22;
    }
    
    /* Conteneur Échéances fiscales : scroll vertical pour que sticky thead reste visible */
    #echeancesFiscalesContent {
      overflow: auto;
      max-height: var(--table-max-height);
      position: relative;
    }
    #echeancesFiscalesContent::after {
      content: none;
      display: none;
    }
    #echeancesFiscalesContent.at-bottom::after {
      display: none;
    }
    #echeancesFiscalesContent .table-wrapper {
      max-height: none;
      overflow: visible;
    }
    /* Tableau Échéances fiscales - format lisible, dates non tronquées, états bien visibles */
    #echeancesFiscalesTable {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      min-width: 900px;
      border: none;
      border-radius: 0;
      overflow: visible;
      background: #fff9f1;
      box-shadow: none;
      font-family: var(--font-family);
      font-size: 13px;
      line-height: 1.45;
      table-layout: auto;
    }
    #echeancesFiscalesTable thead {
      position: sticky;
      top: 0;
      z-index: 20;
      background: #FFE4E1;
    }
    #echeancesFiscalesTable th,
    #echeancesFiscalesTable td {
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding: 8px 10px;
      text-align: left;
      vertical-align: middle;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    #echeancesFiscalesTable th {
      background: #FFE4E1;
      color: #125158;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(18, 81, 88, 0.2);
    }
    #echeancesFiscalesTable thead tr:first-child th {
      position: sticky;
      top: 0;
      background: #FFE4E1 !important;
      color: #125158 !important;
      z-index: 21;
      box-shadow: 0 1px 0 rgba(18, 81, 88, 0.2);
    }
    #echeancesFiscalesTable thead tr:nth-child(2) th {
      position: sticky;
      top: 38px;
      background: #FFE4E1 !important;
      color: #125158 !important;
      z-index: 21;
      box-shadow: 0 1px 0 rgba(18, 81, 88, 0.2);
    }
    /* Cellules données : largeur min pour que les dates ne soient pas tronquées */
    #echeancesFiscalesTable td {
      background-color: #fff9f1;
      font-size: 12px;
      color: #1a1a1a;
      min-width: 0;
    }
    #echeancesFiscalesTable td:not(.col-name):not(.col-infos) {
      min-width: 108px;
    }
    #echeancesFiscalesTable tbody tr {
      transition: background-color 0.15s ease;
      background-color: #fff9f1 !important;
    }
    /* Surbrillance au survol ET quand une cellule de la ligne a le focus (navigation clavier) */
    #echeancesFiscalesTable tbody tr:hover td:not(.cell-status-ok):not(.cell-status-na):not([data-due-status]),
    #echeancesFiscalesTable tbody tr:focus-within td:not(.cell-status-ok):not(.cell-status-na):not([data-due-status]) {
      background-color: rgba(255, 228, 225, 0.4) !important;
    }
    #echeancesFiscalesTable tbody tr:hover td.cell-status-ok,
    #echeancesFiscalesTable tbody tr:hover td.cell-status-na,
    #echeancesFiscalesTable tbody tr:hover td[data-due-status],
    #echeancesFiscalesTable tbody tr:focus-within td.cell-status-ok,
    #echeancesFiscalesTable tbody tr:focus-within td.cell-status-na,
    #echeancesFiscalesTable tbody tr:focus-within td[data-due-status] {
      filter: brightness(0.96);
    }
    #echeancesFiscalesTable .col-name {
      min-width: 180px;
    }
    #echeancesFiscalesTable .col-infos {
      min-width: 82px;
    }
    #echeancesFiscalesTable .text-muted {
      color: var(--text-muted, #666);
    }
    /* Séparateur visuel entre les mois */
    #echeancesFiscalesTable th.echeances-month-sep,
    #echeancesFiscalesTable td.echeances-month-sep {
      border-left: 2px solid rgba(18, 81, 88, 0.4);
    }
    /* Menu déroulant : occupe la cellule, texte lisible, pas de troncature */
    #echeancesFiscalesTable .echeances-cell-select {
      width: 100%;
      min-width: 0;
      padding: 6px 8px;
      font-size: 13px;
      font-weight: 500;
      border: none;
      border-radius: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2312558' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      padding-right: 24px;
    }
    #echeancesFiscalesTable .echeances-cell-select:hover {
      background-color: rgba(0, 0, 0, 0.03);
    }
    #echeancesFiscalesTable .echeances-cell-select:focus {
      outline: none;
      background-color: rgba(0, 0, 0, 0.04);
      box-shadow: none;
    }
    /* Alerte dates : bien visibles (fond + bordure gauche marquée) */
    #echeancesFiscalesTable td.echeances-due-overdue {
      background: rgba(198, 40, 40, 0.12) !important;
      border-left: 3px solid #c62828;
      color: #b71c1c;
      font-weight: 600;
    }
    #echeancesFiscalesTable td.echeances-due-overdue .echeances-cell-select {
      color: inherit;
      font-weight: inherit;
    }
    #echeancesFiscalesTable td.echeances-due-urgent {
      background: rgba(211, 47, 47, 0.1) !important;
      border-left: 3px solid #d32f2f;
      color: #c62828;
      font-weight: 600;
    }
    #echeancesFiscalesTable td.echeances-due-urgent .echeances-cell-select {
      color: inherit;
      font-weight: inherit;
    }
    #echeancesFiscalesTable td.echeances-due-approaching {
      background: rgba(245, 124, 0, 0.1) !important;
      border-left: 3px solid #f57c00;
      color: #e65100;
      font-weight: 500;
    }
    #echeancesFiscalesTable td.echeances-due-approaching .echeances-cell-select {
      color: inherit;
      font-weight: inherit;
    }
    /* OK / NA : couleurs nettes et lisibles */
    #echeancesFiscalesTable td.cell-status-ok {
      background: rgba(46, 125, 50, 0.14) !important;
      color: #1b5e20;
      font-weight: 600;
    }
    #echeancesFiscalesTable td.cell-status-ok .echeances-cell-select {
      color: inherit;
      font-weight: inherit;
    }
    #echeancesFiscalesTable td.cell-status-na {
      background: rgba(97, 97, 97, 0.1) !important;
      color: #616161;
      font-style: italic;
      font-weight: 500;
    }
    #echeancesFiscalesTable td.cell-status-na .echeances-cell-select {
      color: inherit;
      font-style: inherit;
      font-weight: inherit;
    }
    
    /* Tableau Clôture annuelle - UX identique au Plan de travail (pas de contour, fond uni) */
    /* separate + spacing 0 : collapse casse position:sticky sur les <th> (Chrome / Safari) */
    #clotureAnnuelleTable {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      min-width: 900px;
      border: none;
      overflow: visible;
      background: transparent;
      box-shadow: none;
      font-family: var(--font-family);
      font-size: 14px;
      line-height: 1.4;
      table-layout: auto;
    }
    #clotureAnnuelleTable thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }
    #clotureAnnuelleTable thead th {
      position: sticky;
      top: 0;
      background: #FFE4E1 !important;
      color: #125158 !important;
      z-index: 21;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      padding: 8px 10px;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      vertical-align: middle;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #clotureAnnuelleTable thead th.col-name {
      left: 0 !important;
      z-index: 22;
      min-width: 180px;
    }
    #clotureAnnuelleTable th.col-infos,
    #clotureAnnuelleTable td.col-infos {
      min-width: 90px;
    }
    #clotureAnnuelleTable th.cloture-task-col,
    #clotureAnnuelleTable td.cloture-task-col {
      text-align: center !important;
      min-width: 100px;
    }
    #clotureAnnuelleTable th.cloture-task-sep,
    #clotureAnnuelleTable td.cloture-task-sep {
      border-left: 1px solid rgba(0, 0, 0, 0.04);
    }
    #clotureAnnuelleTable th,
    #clotureAnnuelleTable td {
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      padding: 8px 10px;
      text-align: left;
      position: relative;
      vertical-align: middle;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #clotureAnnuelleTable td {
      background-color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1.3;
    }
    #clotureAnnuelleTable td .task-input,
    #clotureAnnuelleTable td input.task-input,
    #clotureAnnuelleTable td select.task-input {
      font-weight: 700;
    }
    #clotureAnnuelleTable tbody tr {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: #ffffff !important;
    }
    #clotureAnnuelleTable tbody tr:hover td {
      background-color: rgba(0, 0, 0, 0.03) !important;
    }
    #clotureAnnuelleTable tbody tr:last-child td {
      border-bottom: none;
    }
    #clotureAnnuelleTable .task-select {
      width: 100%;
      padding: 4px 8px;
      border-radius: 0;
      border: none;
      min-width: 80px;
      font-size: 13px;
      font-weight: 700;
      background: transparent !important;
      color: #1a1a1a;
      cursor: pointer;
    }
    #clotureAnnuelleTable .task-select:focus {
      outline: none;
      background-color: rgba(0, 0, 0, 0.05) !important;
      box-shadow: none;
    }
    #clotureAnnuelleTable .task-select:hover {
      background-color: rgba(0, 0, 0, 0.04) !important;
    }
    #clotureAnnuelleTable .task-select[data-status="OK"],
    #clotureAnnuelleTable .task-select[data-status="ok"] {
      background-color: transparent !important;
      color: #2e7d32;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="Refus"],
    #clotureAnnuelleTable .task-select[data-status="refus"] {
      background-color: transparent !important;
      color: #b02a37;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="Supervisé"],
    #clotureAnnuelleTable .task-select[data-status="Supervise"],
    #clotureAnnuelleTable .task-select[data-status="supervisé"],
    #clotureAnnuelleTable .task-select[data-status="supervise"] {
      background-color: transparent !important;
      color: #14532d;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="Prête pour revue"],
    #clotureAnnuelleTable .task-select[data-status="Pret pour revue"],
    #clotureAnnuelleTable .task-select[data-status="prête pour revue"],
    #clotureAnnuelleTable .task-select[data-status="pret pour revue"] {
      background-color: transparent !important;
      color: #1d4ed8;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="A revoir"],
    #clotureAnnuelleTable .task-select[data-status="À revoir"],
    #clotureAnnuelleTable .task-select[data-status="a revoir"] {
      background-color: transparent !important;
      color: #b91c1c;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="Transmis"] {
      background-color: transparent !important;
      color: #1e40af;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="Reçu"],
    #clotureAnnuelleTable .task-select[data-status="recu"] {
      background-color: transparent !important;
      color: #0f766e;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="Validé"] {
      background-color: transparent !important;
      color: #2e7d32;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="A faire"],
    #clotureAnnuelleTable .task-select[data-status="À faire"] {
      background-color: transparent !important;
      color: #e65100;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="Suspens"],
    #clotureAnnuelleTable .task-select[data-status="suspens"] {
      background-color: transparent !important;
      color: #f57f17;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status="N/A"],
    #clotureAnnuelleTable .task-select[data-status="n/a"],
    #clotureAnnuelleTable .task-select[data-status="NA"],
    #clotureAnnuelleTable .task-select[data-status="na"] {
      background-color: rgba(0, 0, 0, 0.09) !important;
      color: #757575;
      font-style: italic;
      font-weight: 700;
    }
    #clotureAnnuelleTable .task-select[data-status=""] {
      background-color: transparent !important;
      color: #757575;
      font-style: normal;
      font-weight: 700;
    }
    
    #suiviTable thead th:hover {
      background: #FFE4E1 !important;
    }
    
    #suiviTable thead th:active {
      background: #FFE4E1 !important;
    }
    
    #suiviTable th.sortable,
    #declarationTable th.sortable,
    #clientTable th.sortable,
    #echeancesFiscalesTable th.sortable {
      padding-right: 44px;
    }
    
    #suiviTable th.sortable::after,
    #declarationTable th.sortable::after,
    #clientTable th.sortable::after,
    #echeancesFiscalesTable th.sortable::after {
      content: '';
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      background-size: 18px 18px;
      opacity: 0.7;
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }
    
    #suiviTable th.sortable:hover::after,
    #declarationTable th.sortable:hover::after,
    #clientTable th.sortable:hover::after,
    #echeancesFiscalesTable th.sortable:hover::after {
      opacity: 1;
    }
    
    #suiviTable th.sort-asc::after,
    #suiviTable th.sort-desc::after,
    #declarationTable th.sort-asc::after,
    #declarationTable th.sort-desc::after,
    #clientTable th.sort-asc::after,
    #clientTable th.sort-desc::after,
    #echeancesFiscalesTable th.sort-asc::after,
    #echeancesFiscalesTable th.sort-desc::after {
      opacity: 1;
    }
    
    #suiviTable th.sort-asc::after,
    #declarationTable th.sort-asc::after,
    #clientTable th.sort-asc::after,
    #echeancesFiscalesTable th.sort-asc::after {
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 1.5L9 4.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    
    #suiviTable th.sort-desc::after,
    #declarationTable th.sort-desc::after,
    #clientTable th.sort-desc::after,
    #echeancesFiscalesTable th.sort-desc::after {
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 10.5L9 7.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #echeancesFiscalesTable th.sort-asc::after {
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 1.5L9 4.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #echeancesFiscalesTable th.sort-desc::after {
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 10.5L9 7.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    
    /* Icônes de tri masquées : tri au clic sur l'en-tête uniquement (Déclaration, Plan de travail, Échéances) */
    #declarationTable th.sortable::after,
    #declarationTable th.sort-asc::after,
    #declarationTable th.sort-desc::after,
    #clientTable th.sortable::after,
    #clientTable th.sort-asc::after,
    #clientTable th.sort-desc::after,
    #suiviTable th.sortable::after,
    #suiviTable th.sort-asc::after,
    #suiviTable th.sort-desc::after,
    #echeancesFiscalesTable th.sortable::after,
    #echeancesFiscalesTable th.sort-asc::after,
    #echeancesFiscalesTable th.sort-desc::after,
    #clotureAnnuelleTable th.sortable::after,
    #clotureAnnuelleTable th.sort-asc::after,
    #clotureAnnuelleTable th.sort-desc::after {
      content: none !important;
      background-image: none !important;
      width: 0;
      height: 0;
      padding: 0;
    }
    #declarationTable th.sortable,
    #clientTable th.sortable,
    #suiviTable th.sortable,
    #echeancesFiscalesTable th.sortable,
    #clotureAnnuelleTable th.sortable {
      padding-right: 12px;
    }
    
    /* Tri générique (makeTableSortable) : tous les tableaux avec th.sortable */
    table th.sortable {
      cursor: pointer;
      padding-right: 44px;
    }
    table th.sortable::after {
      content: '';
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      background-size: 18px 18px;
      opacity: 0.8;
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }
    table th.sortable:hover::after {
      opacity: 1;
    }
    table th.sort-asc::after,
    table th.sort-desc::after {
      opacity: 1;
    }
    table th.sort-asc::after {
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 1.5L9 4.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    table th.sort-desc::after {
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 10.5L9 7.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    
    /* Base clients : annule le tri générique table th.sortable (icônes SVG) — tri au clic conservé */
    #baseClientsTable thead th.sortable,
    #baseClientsTable thead th.sortable.sort-asc,
    #baseClientsTable thead th.sortable.sort-desc {
      padding-right: 16px !important;
    }
    #baseClientsTable thead th.sortable::after,
    #baseClientsTable thead th.sort-asc::after,
    #baseClientsTable thead th.sort-desc::after,
    #baseClientsTable thead th.sortable:hover::after {
      content: none !important;
      display: none !important;
      background: none !important;
      background-image: none !important;
      width: 0 !important;
      height: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    
    #suiviTable tbody tr {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: #fff9f1 !important;
      position: relative;
    }
    
    #suiviTable tbody tr:last-child td {
      border-bottom: none;
    }
    
    /* S'assurer que la dernière cellule en bas à droite a l'arrondi visible */
    #suiviTable tbody tr:last-child td:last-child {
      border-bottom-right-radius: 12px;
    }
    
    #suiviTable tbody tr:active {
      background-color: #f0f0f0 !important;
    }
    
    #suiviTable tbody tr:first-child td {
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    /* Lignes grisées pour forme SCI, LMNP, GIE */
    #suiviTable tbody tr.row-forme-na,
    #declarationTable tbody tr.row-forme-na {
      background-color: #f5f5f5 !important;
      opacity: 0.6 !important;
    }
    
    #suiviTable tbody tr.row-forme-na td,
    #declarationTable tbody tr.row-forme-na td {
      background-color: #f5f5f5 !important;
      color: #999 !important;
    }
    
    /* Styles pour les lignes selon l'échéance - DÉSACTIVÉ : Toutes les couleurs de fond sont retirées */
    /* 
    #suiviTable tbody tr.row-overdue td,
    #suiviTable tbody tr[data-due-status="overdue"] td {
      background-color: rgba(255, 182, 193, 0.25) !important;
    }
    
    #suiviTable tbody tr.row-overdue td .task-select,
    #suiviTable tbody tr[data-due-status="overdue"] td .task-select {
      background-color: rgba(255, 182, 193, 0.25) !important;
    }
    
    #suiviTable tbody tr.row-overdue td[data-group="infos"],
    #suiviTable tbody tr[data-due-status="overdue"] td[data-group="infos"],
    #suiviTable tbody tr.row-overdue td.col-infos,
    #suiviTable tbody tr[data-due-status="overdue"] td.col-infos {
      background-color: rgba(255, 182, 193, 0.25) !important;
    }
    
    #suiviTable tbody tr.row-overdue,
    #suiviTable tbody tr[data-due-status="overdue"] {
      border-left: 4px solid #ff6b7a !important;
    }
    
    #suiviTable tbody tr.row-urgent td,
    #suiviTable tbody tr[data-due-status="urgent"] td {
      background-color: rgba(255, 223, 186, 0.30) !important;
    }
    
    #suiviTable tbody tr.row-urgent td .task-select,
    #suiviTable tbody tr[data-due-status="urgent"] td .task-select {
      background-color: rgba(255, 223, 186, 0.30) !important;
    }
    
    #suiviTable tbody tr.row-urgent td[data-group="infos"],
    #suiviTable tbody tr[data-due-status="urgent"] td[data-group="infos"],
    #suiviTable tbody tr.row-urgent td.col-infos,
    #suiviTable tbody tr[data-due-status="urgent"] td.col-infos {
      background-color: rgba(255, 223, 186, 0.30) !important;
    }
    
    #suiviTable tbody tr.row-urgent,
    #suiviTable tbody tr[data-due-status="urgent"] {
      border-left: 4px solid #ffb347 !important;
    }
    
    #suiviTable tbody tr.row-approaching td,
    #suiviTable tbody tr[data-due-status="approaching"] td {
      background-color: rgba(255, 248, 220, 0.35) !important;
    }
    
    #suiviTable tbody tr.row-approaching td .task-select,
    #suiviTable tbody tr[data-due-status="approaching"] td .task-select {
      background-color: rgba(255, 248, 220, 0.35) !important;
    }
    
    #suiviTable tbody tr.row-approaching td[data-group="infos"],
    #suiviTable tbody tr[data-due-status="approaching"] td[data-group="infos"],
    #suiviTable tbody tr.row-approaching td.col-infos,
    #suiviTable tbody tr[data-due-status="approaching"] td.col-infos {
      background-color: rgba(255, 248, 220, 0.35) !important;
    }
    
    #suiviTable tbody tr.row-approaching,
    #suiviTable tbody tr[data-due-status="approaching"] {
      border-left: 3px solid #ffd700 !important;
    }
    
    #suiviTable tbody tr.row-jpo-ok td,
    #suiviTable tbody tr[data-jpo-ok="true"] td {
      background-color: rgba(200, 255, 200, 0.30) !important;
    }
    
    #suiviTable tbody tr.row-jpo-ok,
    #suiviTable tbody tr[data-jpo-ok="true"] {
      border-left: 4px solid #90ee90 !important;
    }
    
    #suiviTable tbody tr.row-ap-na td,
    #suiviTable tbody tr[data-ap-na="true"] td {
      background-color: #ffffff !important;
      color: #1a1a1a !important;
    }
    
    #suiviTable tbody tr.row-ap-na,
    #suiviTable tbody tr[data-ap-na="true"] {
      border-left: 3px solid #999999 !important;
    }
    
    #suiviTable tbody tr.row-ap-na:hover,
    #suiviTable tbody tr[data-ap-na="true"]:hover {
      transform: none;
    }
    
    #suiviTable tbody tr:hover {
      transform: none;
    }
    
    #suiviTable tbody tr:not(.row-overdue):not(.row-urgent):not(.row-approaching):not([data-due-status="overdue"]):not([data-due-status="urgent"]):not([data-due-status="approaching"]):hover td {
      background-color: #f5f0e8 !important;
    }
    
    #suiviTable tbody tr.row-overdue:hover td,
    #suiviTable tbody tr[data-due-status="overdue"]:hover td {
      background-color: rgba(255, 182, 193, 0.40) !important;
    }
    
    #suiviTable tbody tr.row-urgent:hover td,
    #suiviTable tbody tr[data-due-status="urgent"]:hover td {
      background-color: rgba(255, 223, 186, 0.45) !important;
    }
    
    #suiviTable tbody tr.row-approaching:hover td,
    #suiviTable tbody tr[data-due-status="approaching"]:hover td {
      background-color: rgba(255, 248, 220, 0.50) !important;
    }
    */
    
    /* Ligne en retard : pas de fond, barre latérale rouge suffit */
    #suiviTable tbody tr.row-overdue td,
    #suiviTable tbody tr[data-due-status="overdue"] td,
    #declarationTable tbody tr.row-overdue td,
    #declarationTable tbody tr[data-due-status="overdue"] td {
      background: transparent !important;
    }

    /* Styles pour les cellules d'échéance */
    #suiviTable td.due-overdue {
      color: #c62828 !important;
    }
    
    #suiviTable td.due-urgent {
      color: #1a1a1a;
    }
    
    #suiviTable td.due-approaching {
      color: #1a1a1a;
    }
    
    /* Badges de jours avec fond coloré */
    .due-days-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      margin-left: 4px;
    }
    
    .due-days-overdue {
      background-color: rgba(200, 35, 51, 0.40);
      color: #c82333;
    }
    
    .due-days-urgent {
      background-color: rgba(255, 193, 7, 0.40);
      color: #b8860b;
    }
    
    .due-days-approaching {
      background-color: rgba(255, 193, 7, 0.25);
      color: #b8860b;
    }
    
    .due-days-ok {
      background-color: rgba(40, 167, 69, 0.25);
      color: #1d8650;
    }
    
    /* Échéance OK quand Date de dépôt est remplie : travail effectué */
    .echeance-depot-ok {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 6px;
      background-color: rgba(40, 167, 69, 0.2);
      color: #1d8650;
      font-weight: 600;
      font-size: 13px;
    }
    .echeance-depot-ok .echeance-ok-check {
      color: #1d8650;
      font-size: 16px;
      line-height: 1;
    }
    #suiviTable td.echeance-depot-ok-cell,
    #declarationTable td.echeance-depot-ok-cell {
      color: #1d8650;
    }
    #suiviTable tr.row-depot-ok td[data-sort="date_echeance"],
    #declarationTable tr.row-depot-ok td[data-sort="echeance"] {
      background-color: rgba(40, 167, 69, 0.08);
    }
    
    /* Cellule avec commentaire - Design épuré */
    .cell-with-comment {
      position: relative;
      padding-left: 40px !important;
    }
    
    .cell-with-comment .comment-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
    }
    
    .cell-with-comment .cell-content {
      display: block;
      width: 100%;
      color: #1d1d1f;
      font-size: 13px;
    }
    
    .cell-with-comment .cell-content select {
      width: 100%;
    }
    
    #suiviTable td:focus-within {
      background-color: #fafafa;
    }
    
    .comment-icon {
      cursor: pointer;
      color: #8e8e93;
      padding: 4px;
      border-radius: 50%;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      opacity: 0.4;
    }
    
    .comment-icon svg {
      width: 18px;
      height: 18px;
      transition: all 0.2s ease;
    }
    
    .comment-icon:hover {
      background-color: rgba(0, 0, 0, 0.04);
      color: #6b6b6b;
      opacity: 0.7;
    }
    
    .comment-icon:hover svg {
      transform: scale(1.2);
    }
    
    .comment-icon:active {
      transform: scale(0.95);
      background-color: rgba(0, 0, 0, 0.06);
    }
    
    .comment-icon.has-comment {
      color: #c82333;
      opacity: 1;
      background-color: rgba(200, 35, 51, 0.15);
    }
    
    .comment-icon.has-comment svg {
      transform: scale(1.1);
    }
    
    .comment-icon.has-comment:hover {
      background-color: rgba(200, 35, 51, 0.25);
      opacity: 1;
    }
    
    .comment-dropdown {
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      padding: 24px;
      min-width: 320px;
      max-width: 400px;
      z-index: 1000;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
      display: none;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-8px) scale(0.98);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .comment-dropdown.active {
      display: block;
      pointer-events: auto;
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    
    .comment-textarea {
      width: 100%;
      min-height: 120px;
      padding: 16px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      font-size: 14px;
      resize: vertical;
      font-family: inherit;
      line-height: 1.6;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-sizing: border-box;
      background: #fafafa;
      color: #1a1a1a;
    }
    
    .comment-textarea:focus {
      outline: none;
      border-color: rgba(0, 0, 0, 0.2);
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    
    .comment-textarea::placeholder {
      color: #8e8e93;
    }
    
    .comment-actions {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      justify-content: flex-end;
    }
    
    .comment-btn {
      padding: 10px 24px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      background: #f8f8f8;
      color: #1a1a1a;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      min-width: 90px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    
    .comment-btn:hover {
      background: #f0f0f0;
      border-color: rgba(0, 0, 0, 0.15);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      transform: translateY(-1px);
    }
    
    .comment-btn:active {
      transform: translateY(0) scale(0.98);
    }
    
    .comment-btn.save {
      background: #000000;
      color: #ffffff;
      border-color: #000000;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
    
    .comment-btn.save:hover {
      background: #1a1a1a;
      border-color: #1a1a1a;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      transform: translateY(-1px);
    }
    
    .comment-btn.save:active {
      background: #0d0d0d;
      transform: translateY(0) scale(0.98);
    }
    
    .comment-btn:not(.save):hover {
      background: #f0f0f0;
      color: #000;
    }
    
    .task-select {
      width: 100%;
      padding: 4px 8px;
      border-radius: 0;
      border: none;
      font-size: 13px;
      font-weight: 400;
      color: #1a1a1a;
      background: transparent;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      background-image: none;
      flex: 1;
      min-height: auto;
      box-sizing: border-box;
      position: relative;
    }
    
    .task-select:hover {
      background-color: transparent;
    }
    
    .task-select:focus {
      outline: none;
      background-color: transparent;
      box-shadow: none;
    }
    
    /* Styles colorés avec fond pastel sur toute la cellule - DÉSACTIVÉ : Toutes les couleurs sont retirées */
    /*
    .task-select[data-status="OK"],
    .task-select[data-status="ok"] {
      background: rgba(200, 255, 200, 0.25) !important;
      color: #1d8650;
      font-weight: 400;
      position: relative;
      border-radius: 4px;
    }
    
    .task-select[data-status="OK"]::before,
    .task-select[data-status="ok"]::before {
      display: none;
    }
    
    .task-select[data-status="OK"]::after,
    .task-select[data-status="ok"]::after {
      display: none;
    }
    
    .task-select[data-status="A faire"],
    .task-select[data-status="a faire"],
    .task-select[data-status="À faire"] {
      background: rgba(255, 248, 220, 0.35) !important;
      color: #b8860b;
      font-weight: 400;
      position: relative;
      border-radius: 4px;
    }
    
    .task-select[data-status="A faire"]::before,
    .task-select[data-status="a faire"]::before,
    .task-select[data-status="À faire"]::before {
      display: none;
    }
    
    .task-select[data-status="A faire"]::after,
    .task-select[data-status="a faire"]::after,
    .task-select[data-status="À faire"]::after {
      display: none;
    }
    
    .task-select[data-status="Suspens"],
    .task-select[data-status="suspens"] {
      background: rgba(255, 182, 193, 0.30) !important;
      color: #c82333;
      font-weight: 400;
      position: relative;
      border-radius: 4px;
    }
    
    .task-select[data-status="Suspens"]::before,
    .task-select[data-status="suspens"]::before {
      display: none;
    }
    
    .task-select[data-status="Suspens"]::after,
    .task-select[data-status="suspens"]::after {
      display: none;
    }
    
    .task-select[data-status="N/A"],
    .task-select[data-status="n/a"],
    .task-select[data-status=""] {
      background: transparent !important;
      color: #8e8e93;
      border-radius: 4px;
    }
    
    .task-select[data-status="Payé"],
    .task-select[data-status="payé"] {
      background: rgba(200, 220, 255, 0.30) !important;
      color: #0051D5;
      font-weight: 400;
      position: relative;
      border-radius: 4px;
    }
    
    .task-select[data-status="Payé"]::before,
    .task-select[data-status="payé"]::before {
      display: none;
    }
    
    .task-select[data-status="Payé"]::after,
    .task-select[data-status="payé"]::after {
      display: none;
    }
    
    .task-select[data-status="À payer"],
    .task-select[data-status="à payer"] {
      background: rgba(255, 248, 220, 0.35) !important;
      color: #b8860b;
      font-weight: 400;
      position: relative;
      border-radius: 4px;
    }
    
    .task-select[data-status="À payer"]::before,
    .task-select[data-status="à payer"]::before {
      display: none;
    }
    
    .task-select[data-status="À payer"]::after,
    .task-select[data-status="à payer"]::after {
      display: none;
    }
    
    .task-select[data-status="Crédit"] {
      background: rgba(200, 255, 200, 0.25) !important;
      color: #1d8650;
      font-weight: 400;
      position: relative;
      border-radius: 4px;
    }
    
    .task-select[data-status="Crédit"]::before {
      display: none;
    }
    
    .task-select[data-status="Crédit"]::after {
      display: none;
    }
    
    .task-select[data-status="En attente"] {
      background: transparent;
      color: #b8860b;
      font-weight: 400;
      position: relative;
    }
    
    .task-select[data-status="En attente"]::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 90px;
      bottom: 0;
      background-color: rgba(184, 134, 11, 0.40);
      border-radius: 4px;
      z-index: -1;
    }
    
    .task-select[data-status="En attente"]::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 2px;
      width: 85px;
      height: 2px;
      background: linear-gradient(90deg, rgba(184, 134, 11, 0.4) 0%, rgba(184, 134, 11, 0) 100%);
      pointer-events: none;
    }
    
    .task-select[data-status="Refus"] {
      background: rgba(255, 182, 193, 0.30) !important;
      color: #c82333;
      font-weight: 400;
      position: relative;
      border-radius: 4px;
    }
    
    .task-select[data-status="Refus"]::before {
      display: none;
    }
    
    .task-select[data-status="Refus"]::after {
      display: none;
    }
    */
    
    /* Refus (Validation) : rouge pour UX Plan de travail */
    .task-select[data-status="Refus"],
    .task-select[data-status="refus"] {
      background: rgba(220, 53, 69, 0.18) !important;
      color: #b02a37;
      font-weight: 500;
    }
    
    /* Montants négatifs (Déclaration) : rouge avec symboles <> */
    #declarationTable td.montant-negatif,
    .client-table td.montant-negatif {
      color: #b02a37;
      font-weight: 500;
    }
    
    .task-select option {
      padding: 8px 12px;
      background: #fff;
      font-size: 12px;
      color: #1d1d1f;
      font-weight: 400;
    }
    
    .task-select option:hover {
      background: #fafafa;
    }
    
    .task-input {
      width: 100%;
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: 6px;
      border: 1px solid var(--border-subtle);
      font-size: var(--font-size-sm);
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      background: transparent;
      transition: all var(--transition-base);
    }
    
    .task-input:hover {
      background-color: var(--bg-secondary);
      border-color: var(--border-medium);
    }
    
    .task-input:focus {
      outline: none;
      background-color: var(--bg-secondary);
      border-color: var(--accent);
    }
    
    /* ============================================
       BOUTONS - INSPIRÉ APPLE (Minimaliste et élégant)
       ============================================ */
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-sm) var(--spacing-lg);
      font-size: var(--font-size-base);
      font-weight: 500;
      letter-spacing: -0.015em;
      color: var(--text-primary);
      background: transparent;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all var(--transition-smooth);
      text-decoration: none;
      white-space: nowrap;
      box-shadow: none;
      position: relative;
      overflow: hidden;
      animation: btnFadeIn 0.5s ease-out backwards;
    }
    
    .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 0, 0, 0.1), transparent);
      transform: translate(-50%, -50%);
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                  height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), transparent);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      opacity: 0;
      transition: opacity var(--transition-fast);
    }
    
    .btn:hover::before {
      width: 400px;
      height: 400px;
    }
    
    .btn:hover {
      background: rgba(245, 245, 245, 0.8);
      transform: translateY(-2px) scale(1.02);
      box-shadow: var(--shadow-md);
    }
    
    .btn:hover::after {
      opacity: 1;
    }
    
    .btn:active {
      transform: translateY(0) scale(0.98);
      transition: transform 0.1s;
    }
    
    .btn-primary {
      background: #125158;
      color: var(--white);
      box-shadow: 0 2px 8px rgba(18, 81, 88, 0.3);
    }
    
    .btn-primary::before {
      background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
    }
    
    .btn-primary::after {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    }
    
    .btn-primary:hover {
      background: #0d3f45;
      color: var(--white);
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 4px 16px rgba(18, 81, 88, 0.4);
    }
    
    @keyframes btnFadeIn {
      from {
        opacity: 0;
        transform: translateY(5px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    .btn-danger {
      background: var(--surface);
      border: 1px solid var(--error);
      color: var(--error);
    }
    
    .btn-danger:hover {
      background: rgba(255, 59, 48, 0.1);
      border-color: var(--error);
    }
    
    /* Section admin */
    .admin-section-wrapper {
      margin-top: 2rem;
      border-top: 1px solid var(--border-subtle);
      padding-top: 1.5rem;
    }
    
    .admin-section-wrapper.collapsed {
      display: none;
    }
    
    .admin-section {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }
    
    .admin-block-title {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      margin-bottom: 0.4rem;
      color: var(--text-muted);
    }
    
    .admin-table-wrapper {
      border-radius: 12px;
      border: none;
      padding: 0;
      overflow-x: auto;
      overflow-y: auto;
      background: #fff9f1;
      box-shadow: none;
      margin-bottom: var(--spacing-3xl);
      max-height: var(--table-max-height);
      height: auto;
      position: relative;
    }
    .admin-table-wrapper::after {
      content: none;
      display: none;
    }
    .admin-table-wrapper.at-bottom::after {
      display: none;
    }
    
    /* Base clients : pas de plafond de hauteur (liste longue = scroll fenêtre, pas boîte ~28 lignes) */
    #pageBaseClients .base-clients-layout {
      max-height: none !important;
    }
    
    /* Colonne NOM fixe au scroll horizontal (Plan de travail + Déclaration) */
    .client-table th.col-name,
    .client-table td.col-name {
      position: sticky !important;
      left: 0;
      background: #fff9f1;
      text-align: left;
      padding: 12px 16px;
      min-width: 200px;
      width: 200px;
      max-width: 200px;
      white-space: nowrap;
      font-weight: 500;
      box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
    }
    /* En-tête Nom : ne doit pas bouger — fixe en haut ET à gauche (scroll vertical + horizontal) */
    .client-table thead th.col-name {
      position: sticky !important;
      left: 0 !important;
      top: 0 !important;
      z-index: 22;
    }
    .client-table tbody td.col-name {
      z-index: 1;
    }
    
    .client-table th.col-infos,
    .client-table td.col-infos {
      background: #fafafa;
    }
    
    #suiviTable th.col-name,
    #suiviTable td.col-name {
      background: #FFE4E1;
      color: #125158;
    }
    
    #suiviTable th.col-name:hover {
      background: #FFE4E1;
    }
    
    #suiviTable td.col-name {
      background: #fff9f1;
      color: #1a1a1a;
      font-weight: 500;
      padding: 6px 8px;
    }
    
    /* Colonne Nom fixe - Tableau Déclaration */
    #declarationTable th.col-name {
      background: #FFE4E1 !important;
      color: #125158 !important;
      text-align: left !important;
    }
    #declarationTable td.col-name {
      background: #fff9f1 !important;
      color: #1a1a1a;
      text-align: left !important;
    }
    #declarationTable tbody tr:hover td.col-name {
      background: #fff3e0 !important;
    }
    
    /* Colonnes informatives (identiques sur tous les onglets) - Exclure la colonne Nom - SANS séparations */
    #suiviTable th.col-infos,
    #suiviTable th[data-group="commentaire"],
    #suiviTable th[data-group="infos"]:not(.col-name) {
      background: #FFE4E1;
      color: #125158;
      font-style: normal;
      opacity: 0.9;
      position: relative;
    }
    
    /* Fond beige pour les colonnes infos - DÉSACTIVÉ : Toutes les couleurs sont retirées */
    /*
    #suiviTable tbody tr:not(.row-overdue):not(.row-urgent):not(.row-approaching):not([data-due-status="overdue"]):not([data-due-status="urgent"]):not([data-due-status="approaching"]) td.col-infos:not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]),
    #suiviTable tbody tr:not(.row-overdue):not(.row-urgent):not(.row-approaching):not([data-due-status="overdue"]):not([data-due-status="urgent"]):not([data-due-status="approaching"]) td[data-group="commentaire"],
    #suiviTable tbody tr:not(.row-overdue):not(.row-urgent):not(.row-approaching):not([data-due-status="overdue"]):not([data-due-status="urgent"]):not([data-due-status="approaching"]) td[data-group="infos"]:not(.col-name):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) {
      background: #fff9f1 !important;
      color: #1a1a1a;
      font-style: normal;
      opacity: 1;
      position: relative;
      text-align: center;
    }
    */
    
    /* Colonne Nom - pas d'italique, largeur fixe */
    #suiviTable th.col-name,
    #suiviTable td.col-name {
      font-style: normal;
      opacity: 1;
    }
    
    /* Colonnes informatives - en-têtes (même style que les autres en-têtes) */
    #suiviTable th.col-infos,
    #suiviTable th[data-group="commentaire"],
    #suiviTable th[data-group="infos"]:not(.col-name) {
      background: #FFE4E1 !important;
      color: #125158;
      font-weight: 500;
    }
    
    /* Colonnes informatives - cellules (fond blanc normal) */
    #suiviTable td.col-infos:not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]),
    #suiviTable td[data-group="commentaire"],
    #suiviTable td[data-group="infos"]:not(.col-name):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) {
      background: #fff9f1 !important;
      color: #1a1a1a;
      font-style: normal;
    }
    
    /* Centrer toutes les colonnes SAUF : NOM, COMMENTAIRE, FORME, PERIODICITE, REGIME IMPOSITION, COLLABORATEUR, DATE ECHEANCE */
    /* En-têtes - Plan de travail et Déclaration */
    #suiviTable th:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]),
    #declarationTable th:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]),
    .client-table th:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) {
      text-align: center !important;
    }
    
    /* Cellules - Plan de travail et Déclaration */
    #suiviTable td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]),
    #declarationTable td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]),
    .client-table td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) {
      text-align: center !important;
    }
    
    /* Colonnes spécifiques à centrer explicitement */
    #suiviTable th[data-sort="montant"],
    #suiviTable td[data-sort="montant"],
    #declarationTable th[data-sort="montant"],
    #declarationTable td[data-sort="montant"],
    #suiviTable th[data-sort="pdf"],
    #suiviTable td[data-sort="pdf"],
    #declarationTable th[data-sort="pdf"],
    #declarationTable td[data-sort="pdf"],
    #suiviTable th[data-sort="decl_date_depot"],
    #suiviTable td[data-sort="decl_date_depot"],
    #declarationTable th[data-sort="decl_date_depot"],
    #declarationTable td[data-sort="decl_date_depot"] {
      text-align: center !important;
    }
    
    /* Centrer aussi les inputs et selects dans les colonnes centrées */
    #suiviTable td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) .task-input,
    #suiviTable td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) .task-select,
    #declarationTable td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) .task-input,
    #declarationTable td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) .task-select,
    .client-table td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) .task-input,
    .client-table td:not([data-sort="name"]):not(.col-name):not([data-group="commentaire"]):not([data-sort="forme"]):not([data-sort="rythme_tva"]):not([data-sort="regime_imposition"]):not([data-sort="collaborateur"]):not([data-sort="date_echeance"]):not([data-sort="echeance"]):not([data-sort="date_tva"]) .task-select {
      text-align: center !important;
    }
    
    /* Centrer les colonnes de tâches (cycle, revision, tva, controle, declaration) */
    #suiviTable th[data-group="cycle"],
    #suiviTable td[data-group="cycle"],
    #suiviTable th[data-group="revision"],
    #suiviTable td[data-group="revision"],
    #suiviTable th[data-group="tva"],
    #suiviTable td[data-group="tva"],
    #suiviTable th[data-group="controle"],
    #suiviTable td[data-group="controle"],
    #suiviTable th[data-group="declaration"],
    #suiviTable td[data-group="declaration"],
    #declarationTable th[data-group="cycle"],
    #declarationTable td[data-group="cycle"],
    #declarationTable th[data-group="revision"],
    #declarationTable td[data-group="revision"],
    #declarationTable th[data-group="tva"],
    #declarationTable td[data-group="tva"],
    #declarationTable th[data-group="controle"],
    #declarationTable td[data-group="controle"],
    #declarationTable th[data-group="declaration"],
    #declarationTable td[data-group="declaration"] {
      text-align: center !important;
    }
    
    /* Centrer les inputs et selects dans les colonnes de tâches */
    #suiviTable td[data-group="cycle"] .task-input,
    #suiviTable td[data-group="cycle"] .task-select,
    #suiviTable td[data-group="revision"] .task-input,
    #suiviTable td[data-group="revision"] .task-select,
    #suiviTable td[data-group="tva"] .task-input,
    #suiviTable td[data-group="tva"] .task-select,
    #suiviTable td[data-group="controle"] .task-input,
    #suiviTable td[data-group="controle"] .task-select,
    #suiviTable td[data-group="declaration"] .task-input,
    #suiviTable td[data-group="declaration"] .task-select,
    #declarationTable td[data-group="cycle"] .task-input,
    #declarationTable td[data-group="cycle"] .task-select,
    #declarationTable td[data-group="revision"] .task-input,
    #declarationTable td[data-group="revision"] .task-select,
    #declarationTable td[data-group="tva"] .task-input,
    #declarationTable td[data-group="tva"] .task-select,
    #declarationTable td[data-group="controle"] .task-input,
    #declarationTable td[data-group="controle"] .task-select,
    #declarationTable td[data-group="declaration"] .task-input,
    #declarationTable td[data-group="declaration"] .task-select {
      text-align: center !important;
    }
    
    /* Séparations sur les colonnes de tâches (pas sur les colonnes informatives) */
    #suiviTable th[data-group="cycle"],
    #suiviTable td[data-group="cycle"],
    #suiviTable th[data-group="revision"],
    #suiviTable td[data-group="revision"],
    #suiviTable th[data-group="tva"],
    #suiviTable td[data-group="tva"],
    #suiviTable th[data-group="controle"],
    #suiviTable td[data-group="controle"],
    #suiviTable th[data-group="declaration"],
    #suiviTable td[data-group="declaration"] {
      border-left: 2px solid #d0d0d0;
      position: relative;
    }
    
    /* Première colonne de tâches : bordure plus marquée pour séparation */
    #suiviTable th[data-group="cycle"]:first-of-type,
    #suiviTable td[data-group="cycle"]:first-of-type,
    #suiviTable th[data-group="revision"]:first-of-type,
    #suiviTable td[data-group="revision"]:first-of-type,
    #suiviTable th[data-group="tva"]:first-of-type,
    #suiviTable td[data-group="tva"]:first-of-type,
    #suiviTable th[data-group="controle"]:first-of-type,
    #suiviTable td[data-group="controle"]:first-of-type,
    #suiviTable th[data-group="declaration"]:first-of-type,
    #suiviTable td[data-group="declaration"]:first-of-type {
      border-left: 3px solid #b0b0b0;
    }
    
    /* Largeurs fixes pour les colonnes informatives - identiques sur tous les onglets */
    #suiviTable th[data-group="commentaire"],
    #suiviTable td[data-group="commentaire"] {
      width: 200px;
      min-width: 200px;
      max-width: 200px;
    }
    
    #suiviTable th[data-sort="forme"],
    #suiviTable td:has(+ td[data-sort="rythme_tva"]) {
      width: 120px;
      min-width: 120px;
      max-width: 120px;
    }
    
    #suiviTable td[data-sort="forme"],
    #suiviTable td:has(+ td[data-sort="rythme_tva"]) {
      text-align: center;
    }
    
    #suiviTable th[data-sort="rythme_tva"],
    #suiviTable td[data-sort="rythme_tva"] {
      width: 130px;
      min-width: 130px;
      max-width: 130px;
      text-align: center;
    }
    
    #suiviTable th[data-sort="collaborateur"],
    #suiviTable td[data-sort="collaborateur"] {
      width: 150px;
      min-width: 150px;
      max-width: 150px;
      text-align: center;
    }
    
    /* Styles pour le tableau plan de travail mensuel (.client-table) */
    .client-table td[data-group="commentaire"],
    .client-table td[data-sort="commentaire"],
    .client-table td[data-sort="forme"],
    .client-table td[data-sort="rythme_tva"],
    .client-table td[data-sort="collaborateur"],
    .client-table td[data-sort="date_echeance"],
    .client-table td[data-sort="echeance"],
    .client-table td[data-sort="date_tva"],
    .client-table td[data-sort="decl_date_depot"] {
      background: #fff9f1 !important;
    }
    
    /* Colonne AP masquée (conservée pour filtres/tri) - Plan de travail uniquement */
    #clientTable th[data-sort="ap"],
    #clientTable td[data-sort="ap"] {
      display: none !important;
    }
    
    /* Fond de la section filtre Plan de travail mensuel - même que le reste de la page */
    #pagePlanTravail .filters-bar {
      background: #fcf8f2;
      border-top: none;
      border-bottom: none;
      box-shadow: none;
      margin-top: 0;
      padding-top: 0;
    }
    
    /* Aligner verticalement les filtres avec la slide bar et le tableau */
    #pagePlanTravail .filters-row {
      margin-top: 0;
      padding-top: 0;
    }
    
    /* Boutons de filtre - Typographie et charte visuelle COULEURS + */
    #pagePlanTravail .filter-button {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
      padding: 8px 12px;
      transition: none !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      gap: 12px;
      align-items: center;
    }
    
    #pagePlanTravail .filter-button-text {
      font-weight: 700 !important;
      font-size: 12px !important;
      color: #000000 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
    }
    
    #pagePlanTravail .filter-plus {
      font-weight: 700 !important;
      font-size: 18px !important;
      color: #000000 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      line-height: 1;
    }
    
    #pagePlanTravail .filter-button:hover {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      transform: none !important;
      transition: none !important;
    }
    
    #pagePlanTravail .filter-button:hover .filter-button-text,
    #pagePlanTravail .filter-button:hover .filter-plus {
      color: #000000 !important;
      opacity: 1 !important;
    }
    
    #pagePlanTravail .filter-button:focus {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      transition: none !important;
    }
    
    #pagePlanTravail .filter-button:active {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      transform: none !important;
      background: transparent !important;
      transition: none !important;
    }
    
    #pagePlanTravail .filter-button.active {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      transition: none !important;
    }
    
    #pagePlanTravail .filter-button.active .filter-button-text,
    #pagePlanTravail .filter-button.active .filter-plus {
      color: #000000 !important;
    }
    
    #pagePlanTravail .filter-button.active:hover {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      transition: none !important;
    }
    
    /* Supprimer tout effet sur les éléments enfants */
    #pagePlanTravail .filter-button:hover * {
      opacity: 1 !important;
    }
    
    #pagePlanTravail .filter-dropdown-wrapper:hover .filter-button {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    
    /* Masquer les flèches SVG si elles existent encore */
    #pagePlanTravail .filter-arrow {
      display: none !important;
    }
    
    /* Style pour le bouton Réinitialiser - gris clair et décalé à droite */
    #pagePlanTravail #resetSuiviFilters {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
      padding: 8px 12px !important;
      transition: none !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      margin-left: 0;
      display: inline-flex;
      align-items: center;
      height: auto;
    }
    
    #pagePlanTravail #resetSuiviFilters .filter-button-text {
      font-weight: 700 !important;
      font-size: 12px !important;
      color: #999999 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      line-height: 1;
    }
    
    /* Style pour le bouton "Mise à jour" - aligné avec RÉINITIALISER */
    #pagePlanTravail .mise-a-jour-button {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
      padding: 8px 12px !important;
      transition: none !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      height: auto;
      cursor: pointer;
    }
    
    #pagePlanTravail .mise-a-jour-button:hover {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      transform: none !important;
      transition: none !important;
    }
    
    #pagePlanTravail .mise-a-jour-text {
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #999999 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      line-height: 1;
    }
    
    #pagePlanTravail .mise-a-jour-button:hover .mise-a-jour-text {
      color: #999999 !important;
      opacity: 0.8 !important;
    }
    
    /* Styles pour les menus déroulants - Charte visuelle COULEURS - Affichage inline */
    #pagePlanTravail .filter-dropdown-wrapper {
      position: relative;
      display: inline-block;
    }
    
    /* Badge / indicateur filtre actif (valeur autre que "Tous") - plus petit */
    #pagePlanTravail .filter-dropdown-wrapper.has-active .filter-button::after,
    #pageDeclaration .filter-dropdown-wrapper.has-active .filter-button::after {
      content: '';
      position: absolute;
      top: 4px;
      right: 4px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--primary-color, #FF6B00);
      opacity: 0.95;
    }
    
    #pagePlanTravail .filter-dropdown-wrapper.has-active .filter-button,
    #pageDeclaration .filter-dropdown-wrapper.has-active .filter-button {
      position: relative;
    }
    
    #pagePlanTravail .filter-dropdown {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      display: none !important;
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      padding-top: 0 !important;
      min-width: 220px;
      z-index: 1000;
      margin-top: 0;
    }
    
    #pagePlanTravail .filter-dropdown-content {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    
    #pagePlanTravail .filter-dropdown.active {
      display: block !important;
      background: #fff !important;
      border: 1px solid #ddd !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Masquer la scrollbar bleue */
    #pagePlanTravail .filter-dropdown::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    
    #pagePlanTravail .filter-dropdown {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
    }
    
    /* Garder les filtres alignés horizontalement */
    #pagePlanTravail .filters-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      position: relative;
      min-height: 50px;
    }
    
    /* Ajouter un espace en bas de la barre de filtres quand un dropdown est ouvert */
    #pagePlanTravail .filters-bar:has(.filter-dropdown.active) {
      margin-bottom: 300px;
      transition: margin-bottom 0.3s ease;
    }
    
    /* Alternative si :has() n'est pas supporté - utiliser une classe JavaScript */
    #pagePlanTravail .filters-bar.has-open-dropdown {
      margin-bottom: 300px;
      transition: margin-bottom 0.3s ease;
    }
    
    #pagePlanTravail .filter-dropdown-content {
      padding: 16px 20px !important;
    }
    
    /* En-tête du dropdown avec nom du filtre - Masqué */
    #pagePlanTravail .filter-dropdown-header {
      display: none !important;
    }
    
    #pagePlanTravail .filter-dropdown-header-text {
      display: none !important;
    }
    
    #pagePlanTravail .filter-dropdown-header-dash {
      display: none !important;
    }
    
    /* Options de la liste */
    #pagePlanTravail .filter-option {
      display: flex;
      align-items: center;
      padding: 8px 0 !important;
      cursor: pointer;
      border-radius: 0 !important;
      transition: none !important;
      background: transparent !important;
      margin-left: 0;
    }
    
    #pagePlanTravail .filter-option:hover {
      background: transparent !important;
    }
    
    #pagePlanTravail .filter-option,
    #pagePlanTravail .filter-option label {
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #666666 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
    }
    
    #pagePlanTravail .filter-option label {
      cursor: pointer;
      margin: 0;
      padding: 0;
      width: 100%;
      text-decoration: none !important;
    }
    
    #pagePlanTravail .filter-option input[type="checkbox"],
    #pagePlanTravail .filter-option input[type="radio"] {
      display: none !important;
    }
    
    #pagePlanTravail .filter-option:hover,
    #pagePlanTravail .filter-option:hover label {
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #666666 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      text-decoration: underline !important;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
    }
    
    /* Forcer le gras sur tous les éléments texte dans les options */
    #pagePlanTravail .filter-option * {
      font-weight: 700 !important;
    }
    
    /* Option sélectionnée - gras, noir et souligné */
    #pagePlanTravail .filter-option.selected {
      background: transparent !important;
    }
    
    #pagePlanTravail .filter-option.selected label {
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #000000 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      text-decoration: underline !important;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
    }
    
    /* ============================================
       STYLES POUR LA PAGE DÉCLARATION - Identique à PLAN DE TRAVAIL MENSUEL
       ============================================ */
    
    /* Fond de la section filtre Déclaration - même que le reste de la page */
    #pageDeclaration .filters-bar {
      background: #fcf8f2;
      border-top: none;
      border-bottom: none;
      box-shadow: none;
      margin-top: 0;
      padding-top: 0;
    }
    
    /* Aligner verticalement les filtres avec la slide bar et le tableau */
    #pageDeclaration .filters-row {
      margin-top: 0;
      padding-top: 0;
    }
    
    /* Boutons de filtre - Typographie et charte visuelle COULEURS + */
    #pageDeclaration .filter-button {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
      padding: 8px 12px;
      transition: none !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      gap: 12px;
      align-items: center;
    }
    
    #pageDeclaration .filter-button-text {
      font-weight: 700 !important;
      font-size: 12px !important;
      color: #000000 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
    }
    
    #pageDeclaration .filter-plus {
      font-weight: 700 !important;
      font-size: 18px !important;
      color: #000000 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      line-height: 1;
    }
    
    #pageDeclaration .filter-button:hover {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      transform: none !important;
      transition: none !important;
    }
    
    #pageDeclaration .filter-button:hover .filter-button-text,
    #pageDeclaration .filter-button:hover .filter-plus {
      color: #000000 !important;
      opacity: 1 !important;
    }
    
    #pageDeclaration .filter-button:focus {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      transition: none !important;
    }
    
    #pageDeclaration .filter-button:active {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      transform: none !important;
      background: transparent !important;
      transition: none !important;
    }
    
    #pageDeclaration .filter-button.active {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      transition: none !important;
    }
    
    #pageDeclaration .filter-button.active .filter-button-text,
    #pageDeclaration .filter-button.active .filter-plus {
      color: #000000 !important;
    }
    
    #pageDeclaration .filter-button.active:hover {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      transition: none !important;
    }

    /* Filtre sélectionné : pas de fond, police en gras + couleur bien visible */
    #pageDeclaration .filter-dropdown-wrapper.has-active .filter-button {
      background: #000000 !important;
      border-color: #000000 !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    #pageDeclaration .filter-dropdown-wrapper.has-active .filter-button .filter-button-text {
      font-weight: 700 !important;
      color: #ffffff !important;
    }
    #pageDeclaration .filter-dropdown-wrapper.has-active .filter-button:hover {
      background: #000000 !important;
      border-color: #000000 !important;
      color: #ffffff !important;
      opacity: 0.9;
    }
    
    /* Supprimer tout effet sur les éléments enfants */
    #pageDeclaration .filter-button:hover * {
      opacity: 1 !important;
    }
    
    #pageDeclaration .filter-dropdown-wrapper:hover .filter-button {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    
    /* Masquer les flèches SVG si elles existent encore */
    #pageDeclaration .filter-arrow {
      display: none !important;
    }
    
    /* Style pour le bouton Réinitialiser - gris clair et décalé à droite */
    #pageDeclaration #resetDeclarationFilters {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
      padding: 8px 12px !important;
      transition: none !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      margin-left: 0;
      display: inline-flex;
      align-items: center;
      height: auto;
    }
    
    #pageDeclaration #resetDeclarationFilters .filter-button-text {
      font-weight: 700 !important;
      font-size: 12px !important;
      color: #999999 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      line-height: 1;
    }
    
    /* Styles pour les menus déroulants - Charte visuelle COULEURS - Affichage inline */
    #pageDeclaration .filter-dropdown-wrapper {
      position: relative;
      display: inline-block;
    }
    
    #pageDeclaration .filter-dropdown {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      display: none !important;
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      padding-top: 0 !important;
      min-width: 220px;
      z-index: 1000;
      margin-top: 0;
    }
    
    #pageDeclaration .filter-dropdown-content {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    
    #pageDeclaration .filter-dropdown.active {
      display: block !important;
    }
    
    /* Masquer la scrollbar bleue */
    #pageDeclaration .filter-dropdown::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    
    #pageDeclaration .filter-dropdown {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
    }
    
    /* Garder les filtres alignés horizontalement */
    #pageDeclaration .filters-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      position: relative;
      min-height: 50px;
    }
    
    /* Ajouter un espace en bas de la barre de filtres quand un dropdown est ouvert */
    #pageDeclaration .filters-bar:has(.filter-dropdown.active) {
      margin-bottom: 300px;
      transition: margin-bottom 0.3s ease;
    }
    
    /* Alternative si :has() n'est pas supporté - utiliser une classe JavaScript */
    #pageDeclaration .filters-bar.has-open-dropdown {
      margin-bottom: 300px;
      transition: margin-bottom 0.3s ease;
    }
    
    #pageDeclaration .filter-dropdown-content {
      padding: 16px 20px !important;
    }
    
    /* En-tête du dropdown avec nom du filtre - Masqué */
    #pageDeclaration .filter-dropdown-header {
      display: none !important;
    }
    
    #pageDeclaration .filter-dropdown-header-text {
      display: none !important;
    }
    
    #pageDeclaration .filter-dropdown-header-dash {
      display: none !important;
    }
    
    /* Options de la liste */
    #pageDeclaration .filter-option {
      display: flex;
      align-items: center;
      padding: 8px 0 !important;
      cursor: pointer;
      border-radius: 0 !important;
      transition: none !important;
      background: transparent !important;
      margin-left: 0;
    }
    
    #pageDeclaration .filter-option:hover {
      background: transparent !important;
    }
    
    #pageDeclaration .filter-option,
    #pageDeclaration .filter-option label {
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #666666 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
    }
    
    #pageDeclaration .filter-option label {
      cursor: pointer;
      margin: 0;
      padding: 0;
      width: 100%;
      text-decoration: none !important;
    }
    
    #pageDeclaration .filter-option input[type="checkbox"],
    #pageDeclaration .filter-option input[type="radio"] {
      display: none !important;
    }
    
    #pageDeclaration .filter-option:hover,
    #pageDeclaration .filter-option:hover label {
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #666666 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      text-decoration: underline !important;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
    }
    
    /* Forcer le gras sur tous les éléments texte dans les options */
    #pageDeclaration .filter-option * {
      font-weight: 700 !important;
    }
    
    /* Option sélectionnée - gras, noir et souligné */
    #pageDeclaration .filter-option.selected {
      background: transparent !important;
    }
    
    #pageDeclaration .filter-option.selected label {
      font-weight: 700 !important;
      font-size: 14px !important;
      color: #000000 !important;
      text-transform: uppercase !important;
      letter-spacing: 0 !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif !important;
      text-decoration: underline !important;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
    }
    
    /* Tableau Déclaration - Styles identiques à suiviTable pour sticky headers */
    #declarationTable {
      border-collapse: separate !important;
      border-spacing: 0;
      width: 100%;
      min-width: 100%;
      border: none;
      border-radius: 0;
      overflow: visible !important;
      background: #fff9f1;
      box-shadow: none;
      font-family: var(--font-family);
      font-size: 14px;
      line-height: 1.4;
      table-layout: auto;
    }
    
    #declarationTable thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }
    
    #declarationTable th,
    #declarationTable td {
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      padding: 4px 8px;
      text-align: center !important;
      vertical-align: middle;
      white-space: nowrap;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #declarationTable th:not(.col-name),
    #declarationTable td:not(.col-name) {
      position: relative;
    }
    
    #declarationTable td {
      white-space: normal;
      background-color: #fff9f1;
      font-size: 12px;
      color: #1a1a1a;
      line-height: 1.3;
      padding: 4px 8px;
    }
    
    #declarationTable th {
      background: #FFE4E1;
      color: #125158;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      user-select: none;
      padding: 12px 8px;
      border-bottom: 1px solid rgba(18, 81, 88, 0.15);
      border-top: none;
      text-align: center !important;
    }
    
    #declarationTable thead {
      background: #FFE4E1;
      border-radius: 0 0 0 0;
    }
    
    #declarationTable thead th {
      position: sticky;
      top: 0;
      background: #FFE4E1 !important;
      color: #125158 !important;
      z-index: 21;
      box-shadow: 0 1px 0 0 rgba(18, 81, 88, 0.15);
    }
    #declarationTable thead th.col-name {
      left: 0 !important;
      z-index: 22;
    }
    
    #declarationTable thead th:hover {
      background: #FFE4E1 !important;
    }
    
    #declarationTable thead th:active {
      background: #FFE4E1 !important;
    }
    
    /* Colonnes Valid. revue, Paiement, Valid. client, EDI, Impots.gouv : forcer le centrage */
    #declarationTable th[data-group="infos"],
    #declarationTable td[data-group="infos"],
    #declarationTable th[data-group="declaration"],
    #declarationTable td[data-group="declaration"] {
      text-align: center !important;
    }
    #declarationTable td[data-group="infos"] .task-select,
    #declarationTable td[data-group="infos"] .task-input,
    #declarationTable td[data-group="declaration"] .task-select,
    #declarationTable td[data-group="declaration"] .task-input {
      margin-left: auto;
      margin-right: auto;
      display: block;
      text-align: center;
    }
    
    /* Effet de survol pour le tableau Déclaration */
    #declarationTable tbody tr {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #declarationTable tbody tr:hover {
      background-color: #fff3e0 !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transform: translateY(-1px);
      cursor: pointer;
    }
    
    #declarationTable tbody tr:hover td {
      background-color: #fff3e0 !important;
    }
    
    /* Cellules du tableau Déclaration - même taille que PLAN DE TRAVAIL MENSUEL */
    #pageDeclaration .client-table td,
    body.page-declaration .client-table td,
    #declarationTable td {
      font-size: 12px !important;
    }
    
    /* Alternative : utiliser les classes col-infos avec des largeurs spécifiques */
    #suiviTable th.col-infos:nth-of-type(1),
    #suiviTable td.col-infos:nth-of-type(1) {
      width: 120px;
      min-width: 120px;
      max-width: 120px;
    }
    
    #suiviTable th.col-infos:nth-of-type(2),
    #suiviTable td.col-infos:nth-of-type(2) {
      width: 130px;
      min-width: 130px;
      max-width: 130px;
    }
    
    #suiviTable th.col-infos:nth-of-type(3),
    #suiviTable td.col-infos:nth-of-type(3) {
      width: 150px;
      min-width: 150px;
      max-width: 150px;
    }
    
    #suiviTable th.col-infos:nth-of-type(4),
    #suiviTable td.col-infos:nth-of-type(4) {
      width: 140px;
      min-width: 140px;
      max-width: 140px;
    }
    
    /* Scrollbars */
    ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }
    
    ::-webkit-scrollbar-track {
      background: #CFEFF8;
      border-radius: 10px;
      margin: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #38091F, rgba(56, 9, 31, 0.8));
      border-radius: 10px;
      border: 2px solid transparent;
      background-clip: padding-box;
      transition: all var(--transition-smooth);
      position: relative;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #38091F, rgba(56, 9, 31, 0.9));
      background-clip: padding-box;
      transform: scale(1.1);
    }
    
    /* ============================================
       ONGLETS DE GROUPES - INSPIRÉ APPLE
       ============================================ */
    
    .group-tabs {
      display: flex;
      gap: var(--spacing-xs);
      margin-bottom: var(--spacing-lg);
      padding: var(--spacing-sm);
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
    }
    
    .group-tab {
      padding: var(--spacing-sm) var(--spacing-lg);
      font-size: var(--font-size-sm);
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all var(--transition-smooth);
      white-space: nowrap;
      position: relative;
      overflow: hidden;
    }
    
    .group-tab::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), transparent);
      opacity: 0;
      transition: opacity var(--transition-fast);
      border-radius: 10px;
    }
    
    .group-tab:hover {
      background: rgba(245, 245, 245, 0.8);
      color: var(--text-primary);
      transform: translateY(-1px);
    }
    
    .group-tab:hover::before {
      opacity: 1;
    }
    
    .group-tab.active {
      background: linear-gradient(135deg, var(--accent) 0%, rgba(0, 0, 0, 0.9) 100%);
      color: #ffffff;
      box-shadow: var(--shadow-md);
      font-weight: 600;
    }
    
    .group-tab.active::before {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
      opacity: 1;
    }
    
    /* Navigation par catégories (Gestion clients) */
    .page-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-lg);
      margin: var(--spacing-3xl) 0;
      padding: 0;
    }
    
    .page-nav-btn {
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: #ffffff;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 18px;
      color: #1a1a1a;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .page-nav-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 0, 0, 0.1), transparent);
      opacity: 0;
      transition: opacity var(--transition-base);
    }
    
    .page-nav-btn:hover {
      background: #000000;
      color: #ffffff;
      border-color: #000000;
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .page-nav-btn:hover::before {
      opacity: 1;
    }
    
    .page-nav-btn:active {
      transform: scale(1.05) rotate(0deg);
      transition: transform 0.1s;
    }
    
    .page-nav-label {
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #1a1a1a;
      min-width: 200px;
      text-align: center;
    }
    
    /* Onglets Suivi TVA - Design minimaliste */
    .suivi-tabs-container {
      margin-bottom: 0;
      margin-top: var(--spacing-3xl);
      flex-shrink: 0;
    }
    
    /* Réduire les marges dans les pages actives pour optimiser l'espace */
    .page.active .suivi-tabs-container {
      margin-bottom: 0;
      margin-top: 0;
    }
    
    /* Aligner verticalement les onglets avec les filtres et le tableau */
    #pagePlanTravail .suivi-tabs-container {
      margin-top: 0;
    }
    
    .suivi-cycles-nav {
      border-bottom: none;
      padding-bottom: 0;
      display: flex;
      gap: 0;
      background: #FFE4E1;
      border-radius: 12px 12px 0 0;
      justify-content: flex-start;
    }
    
    .suivi-tabs {
      display: flex;
      gap: 0;
      padding: 0;
    }
    
    .suivi-tab {
      padding: 16px 32px;
      font-size: 20px;
      font-weight: 400;
      color: #6b6b6b;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }
    
    .suivi-tab:hover {
      background: transparent;
      color: #1a1a1a;
    }
    
    .suivi-tab.active {
      background: transparent;
      color: #ffffff;
      border-bottom-color: transparent;
      font-weight: 500;
    }
    
    .suivi-tab.active::after {
      display: none;
    }
    
    /* ============================================
       BOUTON PDF - Style moderne
       ============================================ */
    
    .pdf-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 500;
      color: #ffffff;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
      position: relative;
      overflow: hidden;
    }
    
    .pdf-button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    
    .pdf-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    }
    
    .pdf-button:hover::before {
      width: 300px;
      height: 300px;
    }
    
    .pdf-button:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    }
    
    .pdf-button svg {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }
    
    .pdf-button:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
    }
    
    /* ============================================
       MODAL PDF - Aperçu des PDFs TVA
       ============================================ */
    
    .pdf-modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 10000;
      animation: fadeIn 0.2s ease;
    }
    
    .pdf-modal-overlay.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .pdf-modal-container {
      position: relative;
      width: 90%;
      max-width: 1200px;
      height: 90%;
      max-height: 900px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      animation: slideUp 0.3s ease;
    }
    
    .pdf-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background: #fafafa;
      border-radius: 12px 12px 0 0;
    }
    
    .pdf-modal-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
    }
    
    .pdf-modal-close {
      background: transparent;
      border: none;
      font-size: 24px;
      color: #6b6b6b;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.2s;
      line-height: 1;
    }
    
    .pdf-modal-close:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #1a1a1a;
    }
    
    .pdf-modal-body {
      flex: 1;
      padding: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .pdf-modal-iframe {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 8px;
      background: #f5f5f5;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Styles de tableaux supprimés - tableaux sans mise en forme */
    
    /* ============================================
       RESPONSIVE DESIGN - ADAPTATION À L'ÉCRAN
       ============================================ */
    
    @media (max-width: 1400px) {
      .shell {
        padding: var(--spacing-2xl) var(--spacing-xl);
      }
      
      .client-table th,
      .client-table td {
        padding: 10px 12px;
        font-size: 12px;
      }
      
      #suiviTable th,
      #suiviTable td {
        padding: 10px 12px;
        font-size: 12px;
      }
      
      .admin-table th,
      .admin-table td {
        padding: 8px 12px;
        font-size: 12px;
      }
    }
    
    @media (max-width: 1024px) {
      .shell {
        padding: var(--spacing-xl) var(--spacing-lg);
      }
      
      .shell-title {
        font-size: 36px;
      }
      
      .client-table th,
      .client-table td {
        padding: 10px 12px;
        font-size: 12px;
      }
      
      #suiviTable th,
      #suiviTable td {
        padding: 10px 12px;
        font-size: 12px;
      }
      
      .client-table th.col-name,
      .client-table td.col-name {
        min-width: 180px;
        padding: 10px 12px;
      }
    }
    
    @media (max-width: 768px) {
      .shell {
        padding: var(--spacing-lg) var(--spacing-md);
      }
      
      .shell-title {
        font-size: 28px;
      }
      
      .shell-subtitle {
        font-size: 16px;
      }
      
      .table-wrapper {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        width: calc(100% + 2 * var(--spacing-md));
        max-width: calc(100% + 2 * var(--spacing-md));
      }
      
      .client-table th,
      .client-table td {
        padding: 8px 10px;
      }
      .client-table th { font-size: 14px; }
      .client-table td { font-size: 12px; }
      
      #suiviTable th,
      #suiviTable td {
        padding: 8px 10px;
      }
      #suiviTable th { font-size: 14px; }
      #suiviTable td { font-size: 12px; }
      
      .admin-table th,
      .admin-table td {
        padding: 8px 10px;
      }
      .admin-table th { font-size: 14px; }
      .admin-table td { font-size: 12px; }
      
      .client-table th.col-name,
      .client-table td.col-name {
        min-width: 150px;
        padding: 8px 10px;
      }
      
      .page-nav {
        flex-wrap: wrap;
        gap: var(--spacing-md);
      }
      
      .page-nav-btn {
        width: 40px;
        height: 40px;
      }
      
      .filters-bar {
        flex-direction: column;
      }
      
      .filters-row {
        flex-direction: column;
        gap: var(--spacing-sm);
      }
    }
    
    @media (max-width: 480px) {
      .shell {
        padding: var(--spacing-md) var(--spacing-sm);
      }
      
      .shell-title {
        font-size: 24px;
      }
      
      .top-navbar {
        padding: 0 var(--spacing-md);
      }
      
      .navbar-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .navbar-nav-item {
        padding: 12px 16px;
        font-size: 18px;
      }
    }

    /* ============================================
       SAISIE DE TEMPS - CALENDRIER
       ============================================ */
    
    :root {
      --primary-color: #007AFF;
    }

    .page {
      display: none !important; /* Force le masquage pour éviter les chevauchements */
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease-in-out,
                  transform 0.3s ease-in-out;
    }

    .page.active {
      display: flex !important; /* Force l'affichage pour la page active */
      flex-direction: column;
      opacity: 1;
      transform: translateY(0);
      animation: pageSlideIn 0.4s ease-out;
      flex: 1;
      min-height: 0;
      min-width: 0; /* permet au tableau de scroller dans .table-wrapper au lieu de dilater la page */
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }

    #pageTemps {
      padding: var(--spacing-lg);
      box-sizing: border-box;
    }
    
    @keyframes pageSlideIn {
      0% {
        opacity: 0;
        transform: translateY(15px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    
    @keyframes pageSlideOut {
      0% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(-10px);
      }
    }

    .time-entry-container {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      padding: var(--spacing-xl);
      box-shadow: var(--shadow-lg);
    }

    /* Onglet Saisie de temps : layout pour que le calendrier ait de la place */
    #pageSuiviTemps #tempsTabSaisie {
      display: flex !important;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }
    #timeCalendarContainer {
      width: 100%;
      min-height: 420px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #pageSuiviTemps #timeCalendarContainer.cal {
      display: grid;
      flex-direction: unset;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .time-entry-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-lg);
    }

    .time-entry-title {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--text-primary);
    }

    .time-entry-controls {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
    }

    .time-view-btn {
      padding: var(--spacing-xs) var(--spacing-md);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      font-size: var(--font-size-sm);
      transition: all var(--transition-base);
    }

    .time-view-btn.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .time-nav-btn {
      padding: var(--spacing-xs) var(--spacing-md);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      font-size: var(--font-size-sm);
      transition: all var(--transition-base);
    }

    .time-nav-btn:hover {
      background: var(--bg-secondary);
    }

    .time-week-range {
      font-size: var(--font-size-base);
      font-weight: 500;
      color: var(--text-primary);
    }

    .time-today-btn {
      padding: var(--spacing-xs) var(--spacing-md);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      font-size: var(--font-size-sm);
      transition: all var(--transition-base);
    }

    .time-calendar-wrapper {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      flex: 1;
      min-height: 0;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      background: white;
      position: relative;
      height: 100%;
    }
    
    /* Effet fade à la fin du tableau */
    .time-calendar-wrapper::after {
      content: '';
      position: sticky;
      right: 0;
      top: 0;
      bottom: 0;
      width: 40px;
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95));
      pointer-events: none;
      z-index: 5;
    }

    .time-hours-column {
      min-width: 80px;
      border-right: 1px solid var(--border-subtle);
      background: #fafafa;
      position: sticky;
      left: 0;
      z-index: 16;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    /* Espace vide en haut pour l'en-tête */
    .time-hours-column::before {
      content: '';
      display: block;
      height: 60px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
      background: #2c2c2e;
      position: sticky;
      top: 0;
      z-index: 17;
    }

    .time-hour-label {
      flex: 1;
      min-height: 0;
      padding: var(--spacing-xs);
      border-bottom: 1px solid var(--border-subtle);
      font-size: var(--font-size-xs);
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      background: #fafafa;
      position: relative;
      z-index: 16;
    }
    
    /* Première ligne d'heures sticky */
    .time-hour-label:first-of-type {
      position: sticky;
      top: 60px;
      z-index: 18;
      background: #fafafa;
      border-bottom: 2px solid var(--border-subtle);
    }

    .time-hour-label.selected {
      background: rgba(128, 128, 128, 0.15);
      border-left: 3px solid rgba(100, 100, 100, 0.5);
      font-weight: 500;
    }

    .time-hour-label.half-hour {
      flex: 1;
      min-height: 0;
      font-size: 0.65rem;
      color: var(--text-muted);
    }

    .time-days-container {
      display: flex;
      flex: 1;
      min-height: 0;
      height: 100%;
    }

    .time-day-column {
      min-width: 150px;
      border-right: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .time-day-column:last-child {
      border-right: none;
    }

    .time-day-header {
      position: sticky;
      top: 0;
      z-index: 15;
      background: #2c2c2e;
      backdrop-filter: blur(8px);
      padding: var(--spacing-sm);
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
      text-align: center;
      height: 60px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    /* S'assurer que les en-têtes ne passent pas sur la colonne des heures */
    .time-day-column {
      position: relative;
      z-index: 1;
    }

    .time-day-name {
      font-size: var(--font-size-sm);
      color: #ffffff;
      font-weight: 500;
      text-align: center;
    }

    .time-slots-container {
      position: relative;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .time-slot {
      flex: 1;
      min-height: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: background var(--transition-fast);
      position: relative;
    }
    
    /* Effet fade sur les dernières lignes du tableau */
    .time-day-column:last-child .time-slots-container::after,
    .time-month-day:last-child .time-month-day-slots::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
      pointer-events: none;
      z-index: 1;
    }

    .time-slot:hover {
      background: rgba(0, 122, 255, 0.1);
    }

    .time-slot.selected {
      background: rgba(128, 128, 128, 0.2);
      border: 1px solid rgba(100, 100, 100, 0.4);
      box-shadow: inset 0 0 0 1px rgba(150, 150, 150, 0.2);
    }

    .time-entry {
      position: absolute;
      left: 2px;
      right: 2px;
      padding: 1px 3px;
      border-radius: 4px;
      font-size: 8px;
      color: white;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      z-index: 10;
    }

    .time-entry-title-text {
      font-weight: 600;
      font-size: 10px;
    }

    .time-entry-time {
      font-size: 8px;
      opacity: 0.9;
    }

    /* Modal */
    .time-entry-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .time-entry-modal.active {
      display: flex;
    }

    .time-entry-modal-content {
      background: white;
      border-radius: 20px;
      width: 90%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-2xl);
    }

    .time-entry-modal-header {
      padding: var(--spacing-lg);
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .time-entry-modal-title {
      font-size: var(--font-size-xl);
      font-weight: 700;
    }

    .time-entry-modal-close {
      background: none;
      border: none;
      font-size: var(--font-size-2xl);
      cursor: pointer;
      color: var(--text-secondary);
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: all var(--transition-base);
    }

    .time-entry-modal-close:hover {
      background: var(--bg-secondary);
    }

    .time-entry-modal-body {
      padding: var(--spacing-lg);
    }

    .time-entry-modal-field {
      margin-bottom: var(--spacing-lg);
    }

    .time-entry-modal-label {
      display: block;
      font-size: var(--font-size-sm);
      font-weight: 600;
      margin-bottom: var(--spacing-xs);
      color: var(--text-primary);
    }

    .time-entry-modal-input,
    .time-entry-modal-select,
    .time-entry-modal-textarea {
      width: 100%;
      padding: var(--spacing-sm);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      font-size: var(--font-size-base);
      font-family: var(--font-family);
    }

    .time-entry-modal-textarea {
      min-height: 100px;
      resize: vertical;
    }

    .time-entry-modal-footer {
      padding: var(--spacing-lg);
      border-top: 1px solid var(--border-subtle);
      display: flex;
      gap: var(--spacing-md);
      justify-content: flex-end;
    }

    .time-entry-modal-btn {
      padding: var(--spacing-sm) var(--spacing-lg);
      border: none;
      border-radius: 8px;
      font-size: var(--font-size-base);
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-base);
    }

    .time-entry-modal-btn-cancel {
      background: transparent;
      color: var(--text-secondary);
    }

    .time-entry-modal-btn-cancel:hover {
      background: var(--bg-secondary);
    }

    .time-entry-modal-btn-save {
      background: var(--primary-color);
      color: white;
    }

    .time-entry-modal-btn-save:hover {
      background: #0051D5;
    }

    .time-entry-modal-btn-delete {
      background: var(--error);
      color: white;
    }

    .time-entry-modal-btn-delete:hover {
      background: #C02D2D;
    }

    /* Vue mois */
    .time-month-view-wrapper {
      overflow-x: auto;
      overflow-y: hidden;
      flex: 1;
      min-height: 0;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      background: white;
      position: relative;
      height: 100%;
    }
    
    /* Effet fade à la fin du tableau */
    .time-month-view-wrapper::after {
      content: '';
      position: sticky;
      right: 0;
      top: 0;
      bottom: 0;
      width: 40px;
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95));
      pointer-events: none;
      z-index: 5;
    }

    .time-month-view {
      display: flex;
      min-width: max-content;
      height: 100%;
    }

    .time-month-day {
      min-width: 120px;
      border-right: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .time-month-day:last-child {
      border-right: none;
    }

    .time-month-day-header {
      position: sticky;
      top: 0;
      z-index: 15;
      background: #2c2c2e;
      backdrop-filter: blur(8px);
      padding: var(--spacing-sm);
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
      text-align: center;
      height: 60px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    /* S'assurer que les en-têtes ne passent pas sur la colonne des heures */
    .time-month-day {
      position: relative;
      z-index: 1;
    }

    .time-month-day-name {
      font-size: var(--font-size-sm);
      color: #ffffff;
      font-weight: 500;
      text-align: center;
    }

    .time-month-day-slots {
      position: relative;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    /* ============================================
       CONSULTATION TEMPS
       ============================================ */

    .consultation-stats {
      display: flex;
      gap: var(--spacing-xl);
      margin-bottom: var(--spacing-lg);
      padding: var(--spacing-lg);
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      box-shadow: var(--shadow-lg);
    }

    .consultation-stat {
      display: flex;
      flex-direction: column;
    }

    .consultation-stat-label {
      font-size: var(--font-size-xs);
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: var(--spacing-xs);
    }

    .consultation-stat-value {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--text-primary);
    }

    /* ============================================
       DASHBOARD
       ============================================ */

    .dashboard-container {
      padding: 0;
    }

    .dashboard-title {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      margin-bottom: var(--spacing-lg);
      color: var(--text-primary);
    }

    .dashboard-filters-bar {
      margin-bottom: var(--spacing-xl);
    }

    .dashboard-table-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      padding: var(--spacing-lg);
      box-shadow: var(--shadow-lg);
      margin-bottom: var(--spacing-lg);
    }

    .dashboard-dossier-row {
      cursor: pointer;
      transition: background var(--transition-base);
    }

    .dashboard-dossier-row:hover {
      background: rgba(0, 122, 255, 0.05);
    }

    .dashboard-detail-table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-md);
    }

    .dashboard-detail-close {
      background: none;
      border: none;
      font-size: var(--font-size-xl);
      cursor: pointer;
      color: var(--text-secondary);
      padding: var(--spacing-xs);
      border-radius: 8px;
      transition: all var(--transition-base);
    }

    .dashboard-detail-close:hover {
      background: var(--bg-secondary);
    }

    .filter-button {
      padding: 8px 16px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      background: #ffffff;
      cursor: pointer;
      font-size: 13px;
      font-weight: 400;
      color: #1d1d1f;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .filter-button:hover {
      background: #fafafa;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }
    
    .filter-button:active {
      transform: scale(0.98);
    }
    
    .filter-button.active {
      background: #125158;
      color: var(--white);
      border-color: #125158;
    }
    
    .filter-button.active:hover {
      background: #0d3f45;
    }
    
    .filter-arrow {
      width: 12px;
      height: 8px;
      opacity: 0.7;
      transition: opacity 0.2s ease;
    }
    
    .filter-button:hover .filter-arrow {
      opacity: 0.8;
    }
    
    .filter-button-text {
      font-weight: 400;
    }

    .filter-dropdown-wrapper {
      position: relative;
    }

    .filter-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      background: white;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      box-shadow: var(--shadow-lg);
      z-index: 1000;
      min-width: 200px;
      max-height: 300px;
      overflow-y: auto;
    }
    
    .filter-dropdown-wrapper {
      z-index: 1000;
    }

    .filter-dropdown.active {
      display: block;
    }

    .filter-dropdown-content {
      padding: var(--spacing-xs);
    }

    .filter-option {
      display: flex;
      align-items: center;
      padding: var(--spacing-sm);
      cursor: pointer;
      border-radius: 8px;
      transition: background var(--transition-base);
    }

    .filter-option:hover {
      background: var(--bg-secondary);
    }

    .filter-option input {
      margin-right: var(--spacing-sm);
    }

    .filter-arrow {
      transition: transform var(--transition-base);
    }

    .filter-dropdown-wrapper.active .filter-arrow {
      transform: rotate(180deg);
    }

    /* ============================================
       NOTIFICATIONS / TOASTS - UX MODERNE
       ============================================ */

    .toast-container {
      position: fixed;
      top: var(--spacing-xl);
      right: var(--spacing-xl);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      pointer-events: none;
    }

    .toast {
      min-width: 320px;
      max-width: 420px;
      padding: var(--spacing-md) var(--spacing-lg);
      background: rgba(255, 255, 255, 0.98);
      border-radius: 16px;
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.05);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 2px solid transparent;
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      pointer-events: auto;
      animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: top right;
      position: relative;
      overflow: hidden;
    }
    
    .toast::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: var(--accent);
      box-shadow: 0 0 12px currentColor;
    }
    
    .toast.success {
      border-color: rgba(40, 167, 69, 0.3);
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(40, 167, 69, 0.1), 0 0 20px rgba(40, 167, 69, 0.15);
    }
    
    .toast.success::before {
      background: linear-gradient(180deg, #28a745 0%, #20c997 100%);
      box-shadow: 0 0 16px rgba(40, 167, 69, 0.6), 0 0 8px rgba(40, 167, 69, 0.4);
    }
    
    .toast.error {
      border-color: rgba(220, 53, 69, 0.3);
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(220, 53, 69, 0.1), 0 0 20px rgba(220, 53, 69, 0.15);
    }
    
    .toast.error::before {
      background: linear-gradient(180deg, #dc3545 0%, #c82333 100%);
      box-shadow: 0 0 16px rgba(220, 53, 69, 0.6), 0 0 8px rgba(220, 53, 69, 0.4);
    }
    
    .toast.warning {
      border-color: rgba(255, 193, 7, 0.3);
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 193, 7, 0.1), 0 0 20px rgba(255, 193, 7, 0.15);
    }
    
    .toast.warning::before {
      background: linear-gradient(180deg, #ffc107 0%, #ffb300 100%);
      box-shadow: 0 0 16px rgba(255, 193, 7, 0.6), 0 0 8px rgba(255, 193, 7, 0.4);
    }
    
    .toast.info {
      border-color: rgba(0, 122, 255, 0.3);
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 122, 255, 0.1), 0 0 20px rgba(0, 122, 255, 0.15);
    }
    
    .toast.info::before {
      background: linear-gradient(180deg, #007AFF 0%, #0056b3 100%);
      box-shadow: 0 0 16px rgba(0, 122, 255, 0.6), 0 0 8px rgba(0, 122, 255, 0.4);
    }

    .toast-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: var(--font-size-lg);
    }

    .toast.success .toast-icon {
      background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%, rgba(40, 167, 69, 0.1) 100%);
      color: var(--success);
      box-shadow: 0 0 12px rgba(40, 167, 69, 0.3);
    }
    
    .toast.error .toast-icon {
      background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(220, 53, 69, 0.1) 100%);
      color: var(--error);
      box-shadow: 0 0 12px rgba(220, 53, 69, 0.3);
    }
    
    .toast.warning .toast-icon {
      background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%);
      color: var(--warning);
      box-shadow: 0 0 12px rgba(255, 193, 7, 0.3);
    }
    
    .toast.info .toast-icon {
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.2) 0%, rgba(0, 122, 255, 0.1) 100%);
      color: var(--primary-color);
      box-shadow: 0 0 12px rgba(0, 122, 255, 0.3);
    }

    .toast-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }

    .toast-title {
      font-size: var(--font-size-base);
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.4;
    }

    .toast-message {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .toast-close {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-size-lg);
      transition: all var(--transition-base);
      padding: 0;
    }

    .toast-close:hover {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

    .toast-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: var(--accent);
      animation: toastProgress linear;
    }

    .toast.success .toast-progress {
      background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
      box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
    }
    
    /* Surbrillance courte après sauvegarde d'une cellule (Com. revue, statut, etc.) */
    .cell-saved-highlight {
      animation: cellSavedHighlight 1.5s ease-out;
    }
    .cell-saving {
      box-shadow: inset 0 -2px 0 rgba(33, 150, 243, 0.45);
    }
    .cell-error {
      box-shadow: inset 0 -2px 0 rgba(220, 53, 69, 0.55);
    }
    .task-select.has-history-log {
      background-image: radial-gradient(circle, rgba(18, 81, 88, 0.55) 0, rgba(18, 81, 88, 0.55) 2px, transparent 3px);
      background-repeat: no-repeat;
      background-position: right 7px center;
      background-size: 8px 8px;
      padding-right: 16px;
    }
    .density-toggle-btn {
      border-radius: 6px;
      color: var(--text-secondary);
      transition: all 0.16s ease;
    }
    .density-toggle-btn:hover {
      border-color: rgba(18, 81, 88, 0.45);
      color: var(--text-primary);
    }
    .filter-chip-btn {
      border: 1px solid var(--dv-line, #ddd);
      background: #fff;
      color: var(--text-secondary);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.16s ease;
    }
    .filter-chip-btn:hover {
      border-color: rgba(18, 81, 88, 0.45);
      color: var(--text-primary);
    }
    .filter-chip-btn.on {
      border-color: rgba(18, 81, 88, 0.65);
      color: #125158;
      background: rgba(18, 81, 88, 0.08);
    }
    body.density-compact #suiviTable th,
    body.density-compact #suiviTable td,
    body.density-compact #declarationTable th,
    body.density-compact #declarationTable td,
    body.density-compact #clotureAnnuelleTable th,
    body.density-compact #clotureAnnuelleTable td {
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      line-height: 1.2;
    }
    body.density-compact #suiviTable .task-select,
    body.density-compact #declarationTable .task-select,
    body.density-compact #clotureAnnuelleTable .task-select,
    body.density-compact #suiviTable .task-input,
    body.density-compact #declarationTable .task-input,
    body.density-compact #clotureAnnuelleTable .task-input {
      min-height: 28px;
      font-size: 12px;
      padding-top: 4px;
      padding-bottom: 4px;
    }
    @keyframes cellSavedHighlight {
      0% { background-color: rgba(40, 167, 69, 0.35); }
      100% { background-color: transparent; }
    }
    
    /* Overlay de chargement sur les tableaux (Plan de travail, Déclaration) */
    .table-wrapper.table-loading {
      position: relative;
    }
    .table-loading-overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(255, 249, 241, 0.85);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      z-index: 10;
      font-size: 13px;
      color: var(--text-muted);
    }
    .table-wrapper.table-loading .table-loading-overlay {
      display: flex !important;
    }
    .table-loading-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid rgba(0, 0, 0, 0.1);
      border-top-color: var(--primary-color, #125158);
      border-radius: 50%;
      animation: tableLoadingSpin 0.8s linear infinite;
    }
    @keyframes tableLoadingSpin {
      to { transform: rotate(360deg); }
    }
    
    .toast.error .toast-progress {
      background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
      box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
    }
    
    .toast.warning .toast-progress {
      background: linear-gradient(90deg, #ffc107 0%, #ffb300 100%);
      box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
    }
    
    .toast.info .toast-progress {
      background: linear-gradient(90deg, #007AFF 0%, #0056b3 100%);
      box-shadow: 0 0 8px rgba(0, 122, 255, 0.6);
    }

    @keyframes toastSlideIn {
      from {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    @keyframes toastProgress {
      from {
        width: 100%;
      }
      to {
        width: 0%;
      }
    }

    .toast.fade-out {
      animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes toastSlideOut {
      to {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
      }
    }

    /* ============================================
       CONFIRMATION MODAL - UX MODERNE
       ============================================ */

    .confirm-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      animation: fadeIn 0.2s ease-out;
    }

    .confirm-modal.active {
      display: flex;
    }

    .confirm-modal-content {
      background: white;
      border-radius: 20px;
      width: 90%;
      max-width: 400px;
      box-shadow: var(--shadow-2xl);
      animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      overflow: hidden;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes modalSlideUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .confirm-modal-header {
      padding: var(--spacing-lg);
      border-bottom: 1px solid var(--border-subtle);
    }

    .confirm-modal-title {
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--text-primary);
    }

    .confirm-modal-body {
      padding: var(--spacing-lg);
    }

    .confirm-modal-message {
      font-size: var(--font-size-base);
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .confirm-modal-footer {
      padding: var(--spacing-lg);
      border-top: 1px solid var(--border-subtle);
      display: flex;
      gap: var(--spacing-md);
      justify-content: flex-end;
    }

    .confirm-modal-btn {
      padding: var(--spacing-sm) var(--spacing-lg);
      border: none;
      border-radius: 8px;
      font-size: var(--font-size-base);
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-base);
    }

    .confirm-modal-btn-cancel {
      background: transparent;
      color: var(--text-secondary);
    }

    .confirm-modal-btn-cancel:hover {
      background: var(--bg-secondary);
    }

    .confirm-modal-btn-confirm {
      background: var(--error);
      color: white;
    }

    .confirm-modal-btn-confirm:hover {
      background: #C02D2D;
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    /* ============================================
       LOADING STATES
       ============================================ */

    .loading-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, 0.9);
      z-index: 5000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .loading-overlay.active {
      display: flex !important;
    }

    .loading-overlay {
      flex-direction: column;
      gap: 1.25rem;
    }

    .loading-overlay .loading-message {
      font-size: 15px;
      color: var(--text-secondary, #003B38);
      font-weight: 500;
    }

    .loading-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid var(--border-subtle);
      border-top-color: var(--primary-color);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Overlay de progression pour import Mise à jour Date échéance / Date de dépôt */
    .import-progress-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, 0.92);
      z-index: 6000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .import-progress-overlay.active {
      display: flex !important;
    }
    .import-progress-overlay .import-progress-box {
      min-width: 320px;
      max-width: 90vw;
      padding: 1.75rem 2rem;
      background: var(--white);
      border-radius: 12px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .import-progress-overlay .import-progress-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .import-progress-overlay .import-progress-message {
      font-size: 0.95rem;
      color: var(--text-secondary);
    }
    .import-progress-overlay .import-progress-bar-wrap {
      height: 8px;
      background: var(--border-subtle);
      border-radius: 4px;
      overflow: hidden;
    }
    .import-progress-overlay .import-progress-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--primary-color), var(--orange-light));
      border-radius: 4px;
      transition: width 0.25s ease;
    }
    .import-progress-overlay .import-progress-detail {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    /* ============================================
       AMÉLIORATIONS UX GLOBALES
       ============================================ */

    /* Focus visible amélioré */
    *:focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Amélioration des inputs */
    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    }

    /* États de survol améliorés */
    button:not(:disabled):hover {
      transform: translateY(-1px);
    }

    button:not(:disabled):active {
      transform: translateY(0);
    }

    /* Disabled states */
    button:disabled,
    input:disabled,
    select:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Smooth scrolling */
    html {
      scroll-behavior: smooth;
    }
    
    /* Protection par mot de passe */
    #passwordOverlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 99999;
      background: linear-gradient(135deg, #003B38 0%, #0D3B0E 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-family);
    }
    #passwordOverlay.hidden { display: none !important; }
    #passwordBox {
      background: #fcf8f2;
      padding: 2rem 2.5rem;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      text-align: center;
      max-width: 360px;
    }
    #passwordBox h2 {
      margin: 0 0 1rem 0;
      color: #003B38;
      font-size: 1.25rem;
    }
    #passwordBox input[type="password"] {
      width: 100%;
      padding: 12px 16px;
      font-size: 1rem;
      border: 2px solid #ddd;
      border-radius: 8px;
      margin-bottom: 1rem;
      box-sizing: border-box;
    }
    #passwordBox input:focus { outline: none; border-color: #003B38; }
    #passwordBox button {
      padding: 10px 24px;
      font-size: 1rem;
      background: #003B38;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    #passwordBox button:hover { background: #0D3B0E; }
    #passwordError {
      color: #d32f2f;
      font-size: 0.875rem;
      margin-top: 0.5rem;
      min-height: 1.25rem;
    }
    /* Styles pour les nouvelles fonctionnalités */
    .reminder-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background: var(--error);
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    
    .offline-indicator {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      background: var(--warning);
      color: white;
      padding: 8px;
      text-align: center;
      z-index: 999;
      font-size: 14px;
    }
    
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin: 20px 0;
    }
    
    .pagination button {
      padding: 8px 16px;
      border: 1px solid var(--border-subtle);
      background: white;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .pagination button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .sortable-header {
      cursor: pointer;
      user-select: none;
      position: relative;
    }
    
    .sortable-header:hover {
      background: var(--bg-secondary);
    }
    
    .sort-indicator {
      margin-left: 6px;
      color: #000;
      font-size: 1.15em;
      font-weight: 600;
      opacity: 1;
    }
    
    .sortable-header[data-sort="asc"] .sort-indicator::after {
      content: ' ↑';
    }
    
    .sortable-header[data-sort="desc"] .sort-indicator::after {
      content: ' ↓';
    }
    
    .tooltip {
      position: absolute;
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 12px;
      pointer-events: none;
      z-index: 10000;
      display: none;
      max-width: 300px;
    }
    
    .help-menu {
      position: absolute;
      top: 44px;
      right: 20px;
      background: white;
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      box-shadow: var(--shadow-lg);
      padding: 8px;
      z-index: 1000;
      display: none;
      min-width: 200px;
    }
    
    .help-menu.show {
      display: block;
    }
    
    .help-menu button {
      display: block;
      width: 100%;
      padding: 10px;
      text-align: left;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 4px;
    }
    
    .help-menu button:hover {
      background: var(--bg-secondary);
    }
    
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }
    
    .modal-content {
      background: white;
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow-lg);
    }
    
    .modal-content h2 {
      margin-top: 0;
    }
    
    .modal-content h3 {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    
    .modal-content ul {
      margin-left: 20px;
      margin-bottom: 15px;
    }
    
    .modal-content li {
      margin-bottom: 8px;
    }
    
    #syncTvaDataButton:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    /* ============================================
       AMÉLIORATIONS UX ET INFOGRAPHIE DES CELLULES
       Tableaux PLAN DE TRAVAIL et DECLARATION
       ============================================ */
    
    /* Statut OK - Style léger et chic */
    .client-table td[data-status="ok"],
    .client-table td .cell-status-ok {
      background: rgba(76, 175, 80, 0.08);
      color: #2e7d32;
      font-weight: 500;
    }

    /* Statuts : pas de fond, police en gras + couleurs bien visibles */
    #suiviTable .task-select.status-ok,
    #declarationTable .task-select.status-ok {
      color: #2e7d32 !important;
      font-weight: 700 !important;
    }
    #suiviTable .task-select.status-en-attente,
    #declarationTable .task-select.status-en-attente {
      color: #b8860b !important;
      font-weight: 700 !important;
    }
    #suiviTable .task-select.status-retard,
    #declarationTable .task-select.status-retard {
      color: #c62828 !important;
      font-weight: 700 !important;
    }
    #declarationTable td.echeance-alert-overdue,
    #declarationTable .echeance-overdue {
      color: #c62828 !important;
      font-weight: 700 !important;
    }
    
    /* Statut NA/N/A - Style léger et chic (harmonisé partout) */
    .client-table td[data-status="na"],
    .client-table td .cell-status-na,
    .client-table td.echeance-na-cell {
      background: rgba(158, 158, 158, 0.06);
      color: #757575;
      font-weight: 400;
      font-style: italic;
    }
    
    /* Statut "A faire" - Style léger et chic */
    .client-table td[data-status="a-faire"],
    .client-table td .cell-status-a-faire {
      background: rgba(255, 152, 0, 0.08);
      color: #e65100;
      font-weight: 500;
    }
    
    /* Statut "Suspens" - Style léger et chic */
    .client-table td[data-status="suspens"],
    .client-table td .cell-status-suspens {
      background: rgba(255, 193, 7, 0.08);
      color: #f57f17;
      font-weight: 500;
    }
    
    /* ============================================
       INFOGRAPHIE CHIC ET DISCRÈTE - DATE D'ÉCHÉANCE
       Palette de couleurs inspirée du design system
       ============================================ */
    
    .echeance-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 9px;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.25px;
      white-space: nowrap;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    
    /* Badge OK - Success S50/S75 (Vert discret mais visible) */
    .echeance-badge.echeance-ok {
      background: var(--success-50); /* #edf7ee */
      color: var(--success-400); /* #357a38 */
      border: 1px solid var(--success-75); /* #b6deb7 */
    }
    
    /* Badge Approchant - Warning W50/W75 (Jaune discret mais visible) */
    .echeance-badge.echeance-approaching {
      background: var(--warning-50); /* #fff9e6 */
      color: var(--warning-400); /* #b38705 */
      border: 1px solid var(--warning-75); /* #ffe699 */
    }
    
    /* Badge Warning - Warning W75/W200 (Orange discret mais visible) */
    .echeance-badge.echeance-warning {
      background: var(--warning-75); /* #ffe699 */
      color: var(--warning-500); /* #9c7604 */
      border: 1px solid var(--warning-200); /* #ffcc31 */
    }
    
    /* Badge Urgent - Error E50/E100 (Rouge discret mais visible) */
    .echeance-badge.echeance-urgent {
      background: var(--error-50); /* #ffebee */
      color: var(--error-500); /* #c62828 */
      border: 1px solid var(--error-100); /* #ef9a9a */
      font-weight: 600;
    }
    
    /* Badge Overdue - Error E75/E200 (Rouge discret mais visible) */
    .echeance-badge.echeance-overdue {
      background: var(--error-75); /* #ffcdd2 */
      color: var(--error-500); /* #c62828 */
      border: 1px solid var(--error-200); /* #e57373 */
      font-weight: 600;
    }
    
    /* Cellule avec alerte - Bordures discrètes mais élégantes */
    .echeance-alert-overdue {
      border-left: 2px solid var(--error-500) !important; /* #c62828 */
      background: rgba(255, 235, 238, 0.3) !important; /* E50 */
    }
    
    .echeance-alert-urgent {
      border-left: 2px solid var(--error-400) !important; /* #d32f2f */
      background: rgba(255, 235, 238, 0.25) !important; /* E50 */
    }
    
    .echeance-alert-warning {
      border-left: 2px solid var(--warning-200) !important; /* #ffcc31 */
      background: rgba(255, 249, 230, 0.3) !important; /* W50 */
    }
    
    .echeance-alert-approaching {
      border-left: 1.5px solid var(--warning-75) !important; /* #ffe699 */
      background: rgba(255, 249, 230, 0.2) !important; /* W50 */
    }
    
    /* Hover discret sur les badges */
    .echeance-badge:hover {
      opacity: 0.9;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Amélioration des selects selon leur valeur - Style léger */
    .client-table td select.task-select[value="OK"] {
      background-color: rgba(76, 175, 80, 0.08);
      color: #2e7d32;
      font-weight: 500;
    }
    
    .client-table td select.task-select[value="NA"],
    .client-table td select.task-select[value="N/A"] {
      background-color: rgba(158, 158, 158, 0.06);
      color: #757575;
      font-style: italic;
    }
    
    .client-table td select.task-select[value="A faire"] {
      background-color: rgba(255, 152, 0, 0.08);
      color: #e65100;
      font-weight: 500;
    }
    
    .client-table td select.task-select[value="Suspens"] {
      background-color: rgba(255, 193, 7, 0.08);
      color: #f57f17;
      font-weight: 500;
    }
    
    /* Amélioration des inputs - Style léger */
    .client-table td input.task-input[data-status="ok"] {
      background: rgba(76, 175, 80, 0.08);
      border-color: rgba(76, 175, 80, 0.3);
    }
    
    .client-table td input.task-input[data-status="na"] {
      background: rgba(158, 158, 158, 0.06);
      border-color: rgba(158, 158, 158, 0.3);
      font-style: italic;
    }
    
    /* Input Commentaire - Sans bordures */
    .client-table td input.task-input-comment {
      border: none !important;
      background: transparent !important;
      padding: 4px 0 !important;
      box-shadow: none !important;
      width: 100%;
    }
    
    .client-table td input.task-input-comment:focus {
      border: none !important;
      background: rgba(0, 0, 0, 0.02) !important;
      box-shadow: none !important;
      outline: none !important;
    }
    
    .client-table td input.task-input-comment:hover {
      background: rgba(0, 0, 0, 0.01) !important;
    }
    
    /* Input Date de dépôt - Type date sans bordures */
    .client-table td input.task-input-date {
      border: none !important;
      background: transparent !important;
      padding: 4px 0 !important;
      box-shadow: none !important;
      font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      font-size: 12px;
      color: #333;
      width: 100%;
    }
    
    .client-table td input.task-input-date:focus {
      border: none !important;
      background: rgba(0, 0, 0, 0.02) !important;
      box-shadow: none !important;
      outline: none !important;
    }
    
    .client-table td input.task-input-date::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.6;
      margin-left: 4px;
    }
    
    .client-table td input.task-input-date::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
    }
    
    /* Input Date de dépôt - Style pour Firefox */
    .client-table td input.task-input-date::-moz-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.6;
      margin-left: 4px;
    }
    
    .client-table td input.task-input-date::-moz-calendar-picker-indicator:hover {
      opacity: 1;
    }
    
    /* Cellules de montant - Style léger */
    .client-table td[data-type="montant"] {
      font-family: "Calibri", "Calibri Light", Arial, sans-serif;
      font-weight: 500;
      text-align: right;
    }
    
    .client-table td[data-montant-positive="true"] {
      color: #2e7d32;
    }
    
    .client-table td[data-montant-negative="true"] {
      color: #d32f2f;
    }
    
    /* Lignes avec hover léger */
    .client-table tbody tr:hover {
      background-color: rgba(0, 0, 0, 0.02);
    }
    
    /* Lignes avec alerte selon le statut d'échéance - Style discret mais chic */
    .client-table tbody tr.row-overdue {
      border-left: 2px solid var(--error-500); /* #c62828 */
      background: rgba(255, 235, 238, 0.2); /* E50 */
    }
    
    .client-table tbody tr.row-urgent {
      border-left: 2px solid var(--error-400); /* #d32f2f */
      background: rgba(255, 235, 238, 0.15); /* E50 */
    }
    
    .client-table tbody tr.row-approaching {
      border-left: 1.5px solid var(--warning-75); /* #ffe699 */
      background: rgba(255, 249, 230, 0.2); /* W50 */
    }
    
    .client-table tbody tr.row-depot-ok {
      border-left: 1.5px solid var(--success-75); /* #b6deb7 */
      background: rgba(237, 247, 238, 0.2); /* S50 */
    }
    
    .client-table td {
      transition: background-color 0.15s ease;
    }