/* ============================================================
   HRT — DESIGN SYSTEM CSS MULTI-SOCIÉTÉ
   Source de vérité : /docs/project/custom-brand-theme.css
   Copie déployée   : HRT/PUBLIC/assets/css/custom-brand-theme.css
   ATTENTION : éditer la SOURCE, puis répliquer 1:1.
   Ne JAMAIS éditer uniquement la copie déployée.
   ============================================================ */

/* ============================================================
   1. TOKENS COMMUNS — :root global
   Communs aux deux sociétés (Ray Assainissement + Techni-cana)
   ============================================================ */
:root {
  --brand-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.06);
  --brand-shadow-md:          0 2px 8px rgba(0, 0, 0, 0.10);
  --brand-shadow-lg:          0 4px 16px rgba(0, 0, 0, 0.12);
  --brand-transition:         0.15s ease;
  --brand-font-size-base:     13px;
  --brand-font-size-sm:       12px;
  --brand-font-size-lg:       16px;
  --brand-line-height:        1.5;
  --brand-sidebar-width:      240px;
  --brand-sidebar-condensed:  70px;
  --brand-topbar-height:      70px; /*Originalement 60px mais ne s'aligné pas parfaitement avec la sidebar*/

  /* Familles typographiques globales — chargées via Google Fonts dans base.php
     et login.php. Inter pour body dense ERP, Archivo pour display affirmé,
     JetBrains Mono pour figures tabulaires. */
  --brand-font-display:       'Archivo', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-font-mono:          'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;
}

/* ============================================================
   2. THEME RAY ASSAINISSEMENT
   Scope : [data-societe-theme="ray"]
   Primaire : #497A2D Vert sapin DOMINANT (correction utilisateur 2026-04-27)
   Le vert est la couleur dominante de Ray (logo officiel + signalétique).
   Le navy #1D3557 passe en secondaire pour les boutons d'action neutre,
   les en-têtes de tableau et les éléments structurels.
   Source : /docs/project/brand-theme-overrides-ray.md
   ============================================================ */
[data-societe-theme="ray"] {

  /* --- COULEURS PRIMAIRES — Vert sapin dominant Ray --- */
  --brand-primary:          #497A2D;
  --brand-primary-dark:     #3A6324;
  --brand-primary-soft:     #E8F2DD;
  --brand-on-primary:       #FFFFFF;

  /* --- COULEURS SECONDAIRES — Navy Ray (rôle secondaire) --- */
  --brand-secondary:        #1D3557;
  --brand-secondary-dark:   #142740;
  --brand-secondary-soft:   #E8EDF3;
  --brand-on-secondary:     #FFFFFF;

  /* --- ACCENT BRAND — Navy Ray pour signatures formelles, en-têtes, dividers --- */
  --brand-accent:           #1D3557;
  --brand-accent-dark:      #142740;
  --brand-accent-soft:      #E8EDF3;
  --brand-on-accent:        #FFFFFF;

  /* --- SURFACES ET FONDS --- */
  --brand-bg-app:           #F2F5F0;
  --brand-bg-surface:       #FFFFFF;

  /* --- TYPOGRAPHIE --- */
  --brand-text-default:     #1A1F2E;
  --brand-text-muted:       #6B7280;
  --brand-border:           #D8DED2;

  /* --- COULEURS SÉMANTIQUES --- */
  --brand-success:          #497A2D;
  --brand-success-soft:     #E8F2DD;
  --brand-warning:          #B45309;
  --brand-warning-soft:     #FEF3C7;
  --brand-danger:           #C0392B;
  --brand-danger-soft:      #FDECEA;
  --brand-info:             #1D6FA4;
  --brand-info-soft:        #E8F4FD;

  /* --- TYPOGRAPHIE FONT —
     --brand-font-display et --brand-font-mono sont définis globalement
     dans :root (Archivo + JetBrains Mono). Seul body Inter est défini
     ici per-thème par cohérence sémantique. --- */
  --brand-font-sans:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- FORME --- */
  --brand-radius:           6px;

  /* --- ASSETS — logo officiel Ray (PNG) sur panneau blanc dans la sidebar --- */
  --brand-logo-url:         url('/assets/images/logo-ray.png');
  --brand-logo-bg:          #FFFFFF;
  --brand-sidebar-bg:       #497A2D;
  --brand-sidebar-text:     #FFFFFF;
  --brand-sidebar-active-bg: rgba(255,255,255,0.18);
  --brand-sidebar-hover-bg: rgba(255,255,255,0.10);
  --brand-onglet-bg:         #E8F2DD;
}

/* ============================================================
   3. THEME TECHNI-CANA
   Scope : [data-societe-theme="technicana"]
   Primaire : #242B3D Navy charbon DOMINANT (correction utilisateur 2026-04-27)
   Le navy charbon est la couleur dominante du wordmark "TECHNICANA" et
   de la top-bar du site officiel. Le vert vif #6CB543 (le "C" du logo)
   passe en accent décoratif et le vert ERP #4A8C28 reste utilisé pour
   les états positifs (success, validation).
   Source : /docs/project/brand-theme-overrides-technicana.md
   ============================================================ */
[data-societe-theme="technicana"] {

  /* --- COULEURS PRIMAIRES — Navy charbon dominant Techni-cana --- */
  --brand-primary:          #242B3D;
  --brand-primary-dark:     #161B28;
  --brand-primary-soft:     #E5E7EC;
  --brand-on-primary:       #FFFFFF;

  /* --- COULEURS SECONDAIRES — Vert Techni-cana (rôle secondaire) --- */
  --brand-secondary:        #6CB543;
  --brand-secondary-dark:   #3A6E1F;
  --brand-secondary-soft:   #E8F5DD;
  --brand-on-secondary:     #FFFFFF;

  /* --- ACCENT — Vert vif signature (le C du logo officiel) --- */
  --brand-accent:           #6CB543;
  --brand-accent-dark:      #4A8C28;
  --brand-accent-soft:      #EAF7DD;
  --brand-on-accent:        #FFFFFF;

  /* --- SURFACES ET FONDS --- */
  --brand-bg-app:           #F5F6F8;
  --brand-bg-surface:       #FFFFFF;

  /* --- TEXTE --- */
  --brand-text-default:     #1A2433;
  --brand-text-muted:       #64748B;
  --brand-border:           #D5D8DE;

  /* --- COULEURS SÉMANTIQUES --- */
  --brand-success:          #4A8C28;
  --brand-success-soft:     #E8F5DD;
  --brand-warning:          #B45309;
  --brand-warning-soft:     #FEF3C7;
  --brand-danger:           #DC2626;
  --brand-danger-soft:      #FEE2E2;
  --brand-info:             #1380A5;
  --brand-info-soft:        #E0F0F5;

  /* --- TYPOGRAPHIE FONT —
     --brand-font-display et --brand-font-mono sont définis globalement
     dans :root (Archivo + JetBrains Mono). --- */
  --brand-font-sans:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- FORME --- */
  --brand-radius:           6px;

  /* --- ASSETS — logo officiel Techni-cana (PNG) sur panneau blanc --- */
  --brand-logo-url:         url('/assets/images/logo-technicana.png');
  --brand-logo-bg:          #FFFFFF;
  --brand-sidebar-bg:       #242B3D;
  --brand-sidebar-text:     #FFFFFF;
  --brand-sidebar-active-bg: rgba(255,255,255,0.12);
  --brand-sidebar-hover-bg: rgba(255,255,255,0.08);
  --brand-onglet-bg:         #E5E7EC;
}

/* ============================================================
   4. THEME TECHNI-FUITE
   Scope : [data-societe-theme="technifuite"]
   Source : /docs/project/technifuite/brand-theme-overrides.md
   ============================================================ */
[data-societe-theme="technifuite"] {

  --brand-primary:           #1D70B7;
  --brand-primary-dark:      #155A96;
  --brand-primary-soft:      #E3F0F9;
  --brand-on-primary:        #FFFFFF;

  --brand-secondary:         #74cbc5;
  --brand-secondary-dark:    #D4581A;
  --brand-secondary-soft:    #FEF0E8;
  --brand-on-secondary:      #FFFFFF;

  --brand-accent:            #F56E28;
  --brand-accent-dark:       #D4581A;
  --brand-accent-soft:       #FEF0E8;
  --brand-on-accent:         #FFFFFF;

  --brand-bg-app:            #F4F6F8;
  --brand-bg-surface:        #FFFFFF;

  --brand-text-default:      #1A1C20;
  --brand-text-muted:        #6B7280;
  --brand-border:            #D1D9E0;

  --brand-success:           #1A5C35;
  --brand-success-soft:      #D4EDDA;
  --brand-warning:           #A8430F;
  --brand-warning-soft:      #FEF0E8;
  --brand-danger:            #8B2020;
  --brand-danger-soft:       #FBEAEA;
  --brand-info:              #0E4275;
  --brand-info-soft:         #E3F0F9;

  --brand-font-sans:         'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --brand-radius:            6px;

  --brand-logo-url:          url('/assets/images/logo-technifuite.png');
  --brand-logo-bg:           #DEE5EE;
  --brand-sidebar-bg:        #11416A;
  --brand-sidebar-text:      #FFFFFF;
  --brand-sidebar-active-bg: rgba(29, 112, 183, 0.20);
  --brand-sidebar-hover-bg:  rgba(255, 255, 255, 0.08);
  --brand-onglet-bg:         #E3F0F9;
}

/* ============================================================
   5. THEME DETECT RÉSEAUX
   Scope : [data-societe-theme="detectreseaux"]
   Source : /docs/project/detectreseaux/brand-theme-overrides.md
   ============================================================ */
[data-societe-theme="detectreseaux"] {

  --brand-primary:           #1D70B7;
  --brand-primary-dark:      #165A96;
  --brand-primary-soft:      #E8F2FA;
  --brand-on-primary:        #FFFFFF;

  --brand-secondary:         #000000;
  --brand-secondary-dark:    #D44E43;
  --brand-secondary-soft:    #FEF0EF;
  --brand-on-secondary:      #FFFFFF;

  --brand-accent:            #F16358;
  --brand-accent-dark:       #D44E43;
  --brand-accent-soft:       #FEF0EF;
  --brand-on-accent:         #FFFFFF;

  --brand-bg-app:            #F4F5F7;
  --brand-bg-surface:        #FFFFFF;

  --brand-text-default:      #2D2D2D;
  --brand-text-muted:        #6B7280;
  --brand-border:            #D1D5DB;

  --brand-success:           #065F46;
  --brand-success-soft:      #D1FAE5;
  --brand-warning:           #92400E;
  --brand-warning-soft:      #FEF3C7;
  --brand-danger:            #991B1B;
  --brand-danger-soft:       #FEE2E2;
  --brand-info:              #1D4ED8;
  --brand-info-soft:         #E8F2FA;

  --brand-font-sans:         'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --brand-radius:            6px;

  --brand-logo-url:          url('/assets/images/logo-detectreseaux.png');
  --brand-logo-bg:           #FFFFFF;
  --brand-sidebar-bg:        #1A1C20;
  --brand-sidebar-text:      #FFFFFF;
  --brand-sidebar-active-bg: rgba(29, 112, 183, 0.18);
  --brand-sidebar-hover-bg:  rgba(255, 255, 255, 0.06);
  --brand-onglet-bg:         #E8F2FA;
}

/* ============================================================
   6. THEME RAY TPI
   Scope : [data-societe-theme="raytpi"]
   Logo officiel : "RAY" blanc + "TPI" azur sur champ navy.
   Couleurs extraites du logo vectoriel :
     Azur   #008ADD (signature, dominante)
     Navy   #00152F (champ de fond du logo, structure)
     Blanc  #FFFFFF
   Primaire = azur legerement approfondi (#0A78C2) pour garantir
   le contraste AA du texte blanc sur les boutons (4.7:1) ; l'azur
   pur #008ADD reste vivant dans les surbrillances de la sidebar.
   Secondaire + accent = navy #00152F (en-tetes, dividers, KPI).
   ATTENTION logo : contrairement a Ray/Technicana (panneau blanc),
   le logo RAY TPI est concu pour fond sombre -> --brand-logo-bg navy.
   ============================================================ */
[data-societe-theme="raytpi"] {

  /* --- COULEURS PRIMAIRES - Azur RAY TPI (signature du logo) --- */
  --brand-primary:          #0A78C2;
  --brand-primary-dark:     #085E99;
  --brand-primary-soft:     #E1F1FB;
  --brand-on-primary:       #FFFFFF;

  /* --- COULEURS SECONDAIRES - Navy RAY TPI (champ du logo) --- */
  --brand-secondary:        #00152F;
  --brand-secondary-dark:   #000B1C;
  --brand-secondary-soft:   #E2E6EC;
  --brand-on-secondary:     #FFFFFF;

  /* --- ACCENT - Navy RAY TPI (en-tetes, dividers, KPI) --- */
  --brand-accent:           #00152F;
  --brand-accent-dark:      #000B1C;
  --brand-accent-soft:      #E2E6EC;
  --brand-on-accent:        #FFFFFF;

  /* --- SURFACES ET FONDS --- */
  --brand-bg-app:           #F3F6F9;
  --brand-bg-surface:       #FFFFFF;

  /* --- TYPOGRAPHIE --- */
  --brand-text-default:     #0F1B2D;
  --brand-text-muted:       #64748B;
  --brand-border:           #D5DEE6;

  /* --- COULEURS SEMANTIQUES --- */
  --brand-success:          #1F8B4C;
  --brand-success-soft:     #E2F4EA;
  --brand-warning:          #B45309;
  --brand-warning-soft:     #FEF3C7;
  --brand-danger:           #C0392B;
  --brand-danger-soft:      #FDECEA;
  --brand-info:             #0E7490;
  --brand-info-soft:        #E0F2F7;

  /* --- TYPOGRAPHIE FONT - Inter (defini globalement dans :root) --- */
  --brand-font-sans:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- FORME --- */
  --brand-radius:           6px;

  /* --- ASSETS - logo blanc+azur sur navy : panneau NAVY (pas blanc) --- */
  --brand-logo-url:         url('/assets/images/logo-raytpi.png');
  --brand-logo-bg:          #00152F;
  --brand-sidebar-bg:       #00152F;
  --brand-sidebar-text:     #FFFFFF;
  --brand-sidebar-active-bg: rgba(0, 138, 221, 0.28);
  --brand-sidebar-hover-bg: rgba(0, 138, 221, 0.14);
  --brand-onglet-bg:         #E1F1FB;
}

/* ============================================================
   6. BASE APPLICATIVE — BODY + TYPOGRAPHIE
   ============================================================ */
body {
  font-family:   var(--brand-font-sans);
  font-size:     var(--brand-font-size-base);
  line-height:   var(--brand-line-height);
  color:         var(--brand-text-default);
  background:    var(--brand-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Barres de defilement du projet ---
   Sans selecteur : s'applique a la fenetre et a tout element scrollable (modale, tiroir,
   textarea, panneau, liste d'autocomplete...). Les elements qui masquent volontairement leur
   barre (.table-hrt-scroll, .onglet-hrt) restent prioritaires, leur selecteur est plus specifique.
   Ne jamais poser scrollbar-width ni scrollbar-color ici : Chrome ignorerait alors tout ce bloc
   et rendrait ses barres natives (cf. .table-hrt-scrollbar). */
::-webkit-scrollbar {
  width:      12px;
  height:     12px;
  background: var(--brand-bg-app);
}
::-webkit-scrollbar-track {
  background:    var(--brand-bg-app);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background:    var(--brand-text-muted);
  border:        3px solid var(--brand-bg-app);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }
::-webkit-scrollbar-corner { background: var(--brand-bg-app); }

/* Firefox n'a pas ces pseudo-elements : scrollbar-color est heritable, le poser sur html
   suffit a habiller toutes les barres du projet. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--brand-text-muted) var(--brand-bg-app); }
}

/* ============================================================
   5. OVERRIDES HYPER — UNIVERSELS (valent pour les deux thèmes)
   ============================================================ */

/* Override 2 — Navbar double margin-left Hyper + alignement hamburger
   FEEDBACK_LOG META_css_source_of_truth_drift — correctif obligatoire.
   Sans display:flex sur .container-fluid, le hamburger reste en haut
   à gauche tandis que .navbar-right s'aligne sur la baseline du texte
   à droite — décalage vertical visible. On force l'alignement central
   sur toute la barre. */
.navbar-custom {
  margin-left:  -12px !important;
  margin-right: -12px !important;
  width:        calc(100% + 24px) !important;
  background-color: var(--brand-bg-surface) !important;
  box-shadow:   var(--brand-shadow-sm) !important;
  display:      flex !important;
  align-items:  stretch !important;
  min-height:   var(--brand-topbar-height) !important;
}
.navbar-custom > .container-fluid {
  display:      flex !important;
  align-items:  center !important;
  width:        100%;
  padding-right: 16px;
}
.navbar-custom .button-toggle-menu {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          var(--brand-topbar-height);
  padding:         0;
  margin:          0;
  background:      transparent;
  border:          0;
  color:           var(--brand-text-default);
  font-size:       22px;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background var(--brand-transition), color var(--brand-transition);
}
.navbar-custom .button-toggle-menu:hover {
  background: var(--brand-bg-app);
  color:      var(--brand-primary);
}
.navbar-custom .button-toggle-menu:focus-visible {
  outline:        2px solid var(--brand-primary);
  outline-offset: -4px;
}
.navbar-custom .navbar-right {
  align-items: center;
  height:      var(--brand-topbar-height);
}

/* Override 3 — Sidebar 100vh fixed */
.leftside-menu {
  position:          fixed !important;
  top:               0 !important;
  bottom:            0 !important;
  height:            100vh !important;
  display:           flex;
  flex-direction:    column;
  background-color:  var(--brand-sidebar-bg) !important;
  padding-bottom: 0 !important;
}
.leftside-menu .logo {
  flex: 0 0 70px;
}
#leftside-menu-container {
  flex:       1 1 auto;
  min-height: 0;
}
.leftside-menu .side-nav {
  display:        flex;
  flex-direction: column;
  flex:           1 1 auto;
}

/* Override 4 — Zone logo : panneau blanc pour les logos officiels
   Les vrais logos Ray (block teal/vert) et Techni-cana (navy + vert)
   sont conçus pour fond clair. Sur sidebar foncée, on les place dans
   un panneau blanc avec une fine séparation de la sidebar. */
.leftside-menu .logo {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  height:          var(--brand-topbar-height) !important;
  padding:         4px 12px !important;
  overflow:        hidden;
  background-color: var(--brand-logo-bg) !important;
  text-decoration:  none !important;
  border-bottom:    1px solid var(--brand-border);
}
/* IMPORTANT : NE PAS forcer display:flex/inline-flex sur .logo-lg /.logo-sm.
   Hyper toggle nativement display:block/none entre les deux variantes
   selon data-sidenav-size (default → lg visible / sm caché ;
   condensed → lg caché / sm visible). Un override display ici fait
   apparaître les DEUX variantes côte à côte. */
.leftside-menu .logo .logo-lg,
.leftside-menu .logo .logo-sm {
  max-width:   100%;
  max-height:  100%;
  line-height: 0;
  text-align:  center;
}
.leftside-menu .logo .logo-img-lg {
  max-width:  200px;
  max-height: 58px;
  width: auto; height: auto;
  object-fit: contain;
}
.leftside-menu .logo .logo-img-sm {
  max-width:  52px;
  max-height: 52px;
  width: auto; height: auto;
  object-fit: contain;
}

/* Override — Side-nav links couleurs brand */
.leftside-menu .side-nav-link {
  color:       var(--brand-sidebar-text) !important;
  opacity:     0.82;
  font-size:   13px;
  font-weight: 400;
  transition:  background-color var(--brand-transition), opacity var(--brand-transition);
}
.leftside-menu .side-nav-link:hover {
  background-color: var(--brand-sidebar-hover-bg) !important;
  opacity:          1;
}
.leftside-menu .side-nav-link.active,
.leftside-menu .mm-active > .side-nav-link {
  background-color: var(--brand-sidebar-active-bg) !important;
  color:            var(--brand-sidebar-text) !important;
  opacity:          1;
  font-weight:      600;
}
.leftside-menu .side-nav-link i,
.leftside-menu .side-nav-link svg {
  color: inherit !important;
  opacity: 0.9;
}
.leftside-menu .side-nav-title {
  color:          rgba(255,255,255,0.5) !important;
  font-size:      10px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight:    600;
}

/* Menus depliables sidebar (HRT) */
.leftside-menu .side-nav-item.hrt-nav-group {
  position: relative;
}

.leftside-menu .hrt-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.leftside-menu .hrt-nav-arrow-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--brand-radius);
  cursor: pointer;
  flex-shrink: 0;
}

.leftside-menu .hrt-nav-arrow-btn:hover {
  background-color: var(--brand-sidebar-hover-bg);
}

.leftside-menu .hrt-nav-arrow {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.leftside-menu .side-nav-item.hrt-nav-group.is-open .hrt-nav-arrow {
  transform: rotate(180deg);
}

.leftside-menu .hrt-nav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.leftside-menu .side-nav-item.hrt-nav-group.is-open > .hrt-nav-sub {
  max-height: 320px;
}

.leftside-menu .hrt-nav-sub-inner {
  margin: 2px 0 6px 34px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.leftside-menu .hrt-nav-sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 12px;
  border-radius: var(--brand-radius);
  font-size: 12.5px;
  color: var(--brand-sidebar-text);
  opacity: 0.72;
  text-decoration: none;
  transition: background-color var(--brand-transition), opacity var(--brand-transition);
}

.leftside-menu .hrt-nav-sub-link:hover {
  background-color: var(--brand-sidebar-hover-bg);
  opacity: 1;
}

.leftside-menu .hrt-nav-sub-link.active {
  color: var(--brand-primary-soft);
  opacity: 1;
  font-weight: 600;
}

.leftside-menu .hrt-nav-sub-link .hrt-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

.leftside-menu .hrt-nav-sub-link.active .hrt-nav-dot {
  opacity: 1;
}

@media (max-width: 991.98px) {
  .leftside-menu .hrt-nav-sub-link {
    min-height: 44px;
  }
}

/* Mode condensed : sous-menu en flyout au survol */
html[data-sidenav-size="condensed"] .wrapper .leftside-menu .hrt-nav-arrow-btn {
  display: none;
}

html[data-sidenav-size="condensed"] .wrapper .leftside-menu .hrt-nav-sub {
  max-height: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 210px;
  padding: 6px;
  background-color: var(--brand-sidebar-bg);
  border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
  box-shadow: var(--brand-shadow-lg);
  display: none;
}

html[data-sidenav-size="condensed"] .wrapper .leftside-menu .side-nav-item.hrt-nav-group:hover .hrt-nav-sub {
  display: block;
}

html[data-sidenav-size="condensed"] .wrapper .leftside-menu .hrt-nav-sub-inner {
  margin: 0;
  padding-left: 0;
  border-left: 0;
}

/* Override — Éliminer le purple Hyper par défaut dans la sidebar */
.leftside-menu .mm-active > a,
.leftside-menu li.active > a {
  color: var(--brand-sidebar-text) !important;
  background-color: var(--brand-sidebar-active-bg) !important;
}

/* Override 5 — Déconnexion sticky en bas de sidebar */
.side-nav-item-logout {
  margin-top:       auto;
  position:         sticky;
  bottom:           0;
  background-color: var(--brand-sidebar-bg);
  border-top:       1px solid rgba(255,255,255,0.10);
  padding:          6px 0 8px 0;
  z-index:          2;
}
.side-nav-link-logout {
  color:      var(--brand-danger-soft, #f0a0a0) !important;
  transition: background-color var(--brand-transition), color var(--brand-transition);
}
.side-nav-link-logout i { color: var(--brand-danger-soft, #f0a0a0) !important; }
.side-nav-link-logout:hover,
.side-nav-link-logout:focus {
  color:            #ffffff !important;
  background-color: rgba(192, 57, 43, 0.22) !important;
}
.side-nav-link-logout:hover i { color: #ffffff !important; }

/* Condensed sidebar — bloque l'expansion Hyper au hover.
   Hyper force width:--ct-leftbar-width + visibility:visible sur le span au hover,
   ce qui fait déborder le lien hors du cadre condensed (70px).
   On annule ces deux règles pour rester dans les bornes. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-item:hover .side-nav-link {
  width: var(--ct-leftbar-width-sm) !important;
  background-color: var(--brand-sidebar-hover-bg) !important;
}
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-item:hover .side-nav-link span {
  visibility: hidden !important;
}

/* En mode condensed, on ne touche PAS au padding de .side-nav-link-logout —
   Hyper applique nativement padding:10px sur tous les .side-nav-link, ce qui
   centre l'icône (50px) dans la sidebar (70px). Forcer padding:0 décale
   le logout de ~8px vers la gauche par rapport aux autres items. */

/* Override — Boutons brand (remplacent btn-primary Hyper violet) */
.btn-primary,
.btn-brand-primary {
  background-color: var(--brand-primary) !important;
  border-color:     var(--brand-primary-dark) !important;
  color:            var(--brand-on-primary) !important;
  border-radius:    var(--brand-radius) !important;
  font-size:        13px;
  font-weight:      500;
}
.btn-primary:hover,
.btn-brand-primary:hover {
  background-color: var(--brand-primary-dark) !important;
  border-color:     var(--brand-primary-dark) !important;
  color:            var(--brand-on-primary) !important;
}
.btn-primary:focus-visible,
.btn-brand-primary:focus-visible {
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb, 29,53,87), 0.18) !important;
}

/* Override — Liens couleur brand */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }

/* Override — Inputs focus ring brand */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent) !important;
}

/* Override — Tooltips à la couleur de la société : Hyper les peint en var(--ct-body-color), */
/* soit le gris du texte du body. Les flèches lisent le même token, redéfinir suffit pour tout */
.tooltip {
  --ct-tooltip-bg:            var(--brand-primary);
  --ct-tooltip-color:         #fff;
  --ct-tooltip-font-size:     12px;
  --ct-tooltip-padding-y:     4px;
  --ct-tooltip-padding-x:     8px;
  --ct-tooltip-max-width:     260px;
  --ct-tooltip-border-radius: var(--brand-radius);
}

/* Override 1 — .small sur éléments block (Hyper force inline-block) */
/* FEEDBACK_LOG META_css_source_of_truth_drift — correctif obligatoire */
dl.small, dt.small, dd.small, p.small, div.small, section.small, article.small,
header.small, footer.small, aside.small, nav.small, main.small, form.small,
fieldset.small, legend.small, label.small, ul.small, ol.small, li.small,
table.small, thead.small, tbody.small, tfoot.small, tr.small, td.small, th.small,
h1.small, h2.small, h3.small, h4.small, h5.small, h6.small {
  display: revert;
}

/* Override 6 — Cache-buster : id="app-style" sera sur la balise CSS dans base.php */

/* ============================================================
   6. COMPOSANTS — CARDS
   ============================================================ */
.card {
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow:    var(--brand-shadow-sm);
  background:    var(--brand-bg-surface);
}
.card-header {
  background:    linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
  border-bottom: 1px solid var(--brand-border);
  min-height:    44px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       0 20px;
  border-radius: var(--brand-radius) var(--brand-radius) 0 0;
}
.card-title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--brand-text-default);
  margin:      0;
}
.card-body {
  padding: 20px;
}

/* ============================================================
   7. COMPOSANTS — BADGES
   ============================================================ */
.badge-hrt {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 8px;
  border-radius: 999px;
  font-size:     11px;
  font-weight:   600;
  line-height:   1;
  letter-spacing: 0.02em;
  white-space:   nowrap;
}
.badge-hrt .badge-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}
.badge-success  { color: var(--brand-success); background: var(--brand-success-soft); }
.badge-warning  { color: var(--brand-warning); background: var(--brand-warning-soft); }
.badge-danger   { color: var(--brand-danger);  background: var(--brand-danger-soft); }
.badge-info     { color: var(--brand-info);    background: var(--brand-info-soft); }
.badge-neutral  { color: var(--brand-text-muted); background: var(--brand-primary-soft); }

/* Badges cliquables (button.badge-hrt) */
button.badge-hrt {
  border:      none;
  font-family: inherit;
  cursor:      pointer;
  transition:  filter .15s ease, box-shadow .15s ease;
}
button.badge-hrt:hover  { filter: brightness(.92); box-shadow: var(--brand-shadow-sm); }
button.badge-hrt:active { transform: scale(.97); }
button.badge-hrt:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ============================================================
   COMPOSANTS — ALERTES / CALLOUTS  (réutilisable)
   ============================================================ */
.alert-hrt {
  display:           flex;
  align-items:       flex-start;
  gap:               10px;
  border:            1px solid var(--brand-border);
  border-left-width: 4px;
  border-radius:     var(--brand-radius);
  padding:           12px 14px;
  font-size:         13px;
  line-height:       1.45;
}
.alert-hrt > i          { margin-top: 2px; flex-shrink: 0; }
.alert-hrt-title        { font-weight: 600; color: var(--brand-text-default); }
.alert-hrt-desc         { color: var(--brand-text-muted); margin-top: 2px; }
.alert-hrt-chips        { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.alert-hrt--warning { background: var(--brand-warning-soft); border-color: var(--brand-warning); color: var(--brand-warning); }
.alert-hrt--danger  { background: var(--brand-danger-soft);  border-color: var(--brand-danger);  color: var(--brand-danger); }
.alert-hrt--info    { background: var(--brand-info-soft);    border-color: var(--brand-info);    color: var(--brand-info); }
.alert-hrt--success { background: var(--brand-success-soft); border-color: var(--brand-success); color: var(--brand-success); }

/* ============================================================
   8. COMPOSANTS — TABLES
   ============================================================ */
.table-hrt-wrapper {
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow:    var(--brand-shadow-sm);
  /* clip et non hidden : hidden ferait de la carte un conteneur de defilement,
     ce qui neutraliserait le position:sticky de la barre de defilement horizontale. */
  overflow:      clip;
}
/* Le defilement horizontal porte sur le tableau seul, pas sur la carte : la barre de recherche
   et le pied de listing doivent garder la largeur de la carte meme quand le tableau deborde.
   La barre native est masquee, c'est .table-hrt-scrollbar qui la remplace. */
.table-hrt-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}
.table-hrt-scroll::-webkit-scrollbar { height: 0; }

/* --- Barre de defilement horizontale collee en bas de l'ecran ---
   Elle pilote .table-hrt-scroll via initListingScrollbar() et reste visible tant que
   le listing est a l'ecran : sans elle, rien n'indique que des colonnes sont hors champ.
   Aucun scrollbar-width / scrollbar-color ici : des que l'une de ces proprietes standard est
   posee, Chrome ignore tous les pseudo-elements ::-webkit-scrollbar de l'element et retombe
   sur sa barre native. Le style ci-dessous ne s'applique qu'a cette condition.
   z-index au-dessus du footer sticky des liste.php (.form-footer-sticky-hrt, z-index 99) :
   ce footer n'a pas de fond mais sa boite couvre le bas de l'ecran et capterait les clics
   destines a la barre. Le bouton du footer reste visible juste au-dessus d'elle. */
.table-hrt-scrollbar {
  position:   sticky;
  bottom:     0;
  z-index:    100;
  height:     18px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--brand-bg-surface);
  border-top: 1px solid var(--brand-border);
}
.table-hrt-scrollbar > div { height: 1px; }
.table-hrt-scrollbar::-webkit-scrollbar {
  height:     16px;
  background: var(--brand-bg-app);
}
.table-hrt-scrollbar::-webkit-scrollbar-track {
  background:    var(--brand-bg-app);
  border-radius: 8px;
}
.table-hrt-scrollbar::-webkit-scrollbar-thumb {
  background:    var(--brand-text-muted);
  border:        3px solid var(--brand-bg-app);
  border-radius: 8px;
}
.table-hrt-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

/* Firefox n'a pas les pseudo-elements webkit : on lui donne les proprietes standard,
   sans quoi il afficherait sa barre par defaut. */
@supports not selector(::-webkit-scrollbar) {
  .table-hrt-scrollbar {
    scrollbar-width: auto;
    scrollbar-color: var(--brand-text-muted) var(--brand-bg-app);
  }
}
.table-hrt {
  width: 100%;
  border-collapse: separate;
  border-spacing:  0;
  font-size: 13px;
}
.table-hrt thead th {
  background:     #fafbfd;
  border-bottom:  1px solid var(--brand-border);
  padding:        10px 12px;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--brand-text-muted);
  white-space:    nowrap;
  user-select:    none;
}
.table-hrt thead th.sortable { cursor: pointer; }
.table-hrt thead th.sortable:hover { background: var(--brand-primary-soft); color: var(--brand-primary); }
.table-hrt tbody tr { border-bottom: 1px solid var(--brand-border); transition: background var(--brand-transition); }
.table-hrt tbody tr:last-child { border-bottom: none; }
.table-hrt tbody tr:hover { background: var(--brand-primary-soft); }
.table-hrt tbody td { padding: 10px 12px; color: var(--brand-text-default); vertical-align: middle; }

/* ============================================================
   9. COMPOSANTS — FORMULAIRES
   ============================================================ */
.field-hrt {
  display:       flex;
  flex-direction: column;
  gap:           5px;
  margin-bottom: 16px;
}
.field-label-hrt {
  font-size:      12px;
  font-weight:    500;
  color:          var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field-input-hrt,
.field-select-hrt,
.field-textarea-hrt {
  width:         100%;
  height:        38px;
  padding:       0 12px;
  font-family:   var(--brand-font-sans);
  font-size:     13px;
  font-weight:   400;
  color:         var(--brand-text-default);
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  outline:       none;
  transition:    border-color var(--brand-transition), box-shadow var(--brand-transition);
  appearance:    none;
  -webkit-appearance: none;
}
.field-textarea-hrt {
  height:   auto;
  padding:  8px 12px;
  resize:   vertical;
  min-height: 80px;
}
.field-input-hrt::placeholder,
.field-select-hrt::placeholder {
  color: var(--brand-text-muted);
  opacity: 0.7;
}
.field-input-hrt:focus,
.field-select-hrt:focus,
.field-textarea-hrt:focus {
  border-color: var(--brand-primary);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}
.field-input-hrt:disabled,
.field-select-hrt:disabled {
  background: var(--brand-bg-app);
  color:      var(--brand-text-muted);
  cursor:     not-allowed;
}
.form-section-hrt {
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow:    var(--brand-shadow-sm);
  margin-bottom: 16px;
  overflow:      hidden;
}
.form-section-header-hrt {
  display:        flex;
  align-items:    center;
  gap:            8px;
  min-height:     44px;
  padding:        0 20px;
  background:     linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
  border-bottom:  1px solid var(--brand-border);
  font-size:      13px;
  font-weight:    600;
  color:          var(--brand-text-default);
}
.form-section-body-hrt {
  padding: 20px;
}

/* ============================================================
   10. COMPOSANTS — BOUTONS HRT PROJET
   ============================================================ */
.btn-hrt-primary {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        7px 16px;
  background:     var(--brand-primary);
  color:          var(--brand-on-primary);
  border:         1px solid var(--brand-primary-dark);
  border-radius:  var(--brand-radius);
  font-family:    var(--brand-font-sans);
  font-size:      13px;
  font-weight:    500;
  line-height:    1;
  cursor:         pointer;
  text-decoration: none;
  transition:     background var(--brand-transition), box-shadow var(--brand-transition), transform var(--brand-transition);
  white-space:    nowrap;
  -webkit-font-smoothing: antialiased;
}
.btn-hrt-primary:hover {
  background:  var(--brand-primary-dark);
  color:       var(--brand-on-primary);
  transform:   translateY(-1px);
  box-shadow:  0 2px 8px rgba(0,0,0,0.15);
}
.btn-hrt-primary:active { transform: scale(0.97); }
.btn-hrt-primary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.btn-hrt-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-hrt-secondary {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  height:         38px;
  padding:        0 14px;
  background:     var(--brand-bg-surface);
  color:          var(--brand-text-default);
  border:         1px solid var(--brand-border);
  border-radius:  var(--brand-radius);
  font-family:    var(--brand-font-sans);
  font-size:      13px;
  font-weight:    500;
  line-height:    1;
  cursor:         pointer;
  text-decoration: none;
  transition:     background var(--brand-transition), border-color var(--brand-transition);
  white-space:    nowrap;
}
.btn-hrt-secondary:hover {
  background:    var(--brand-bg-app);
  border-color:  var(--brand-primary);
  color:         var(--brand-primary);
}
.btn-hrt-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm-hrt { padding: 5px 10px; font-size: 12px; height: auto; }
.btn-md-hrt { padding: 7px 14px; height: auto; }

/* --- Bouton à icône seule accolé à un champ : largeur fixe pour que deux champs superposés --- */
/* --- se terminent au même pixel, les icônes Font Awesome n'ayant pas toutes la même largeur --- */
.btn-icon-hrt {
  width:           38px;
  padding:         0;
  justify-content: center;
  flex-shrink:     0;
}

.btn-hrt-ghost {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        7px 12px;
  background:     transparent;
  color:          var(--brand-text-muted);
  border:         1px solid transparent;
  border-radius:  var(--brand-radius);
  font-family:    var(--brand-font-sans);
  font-size:      13px;
  font-weight:    500;
  line-height:    1;
  cursor:         pointer;
  text-decoration: none;
  transition:     background var(--brand-transition), color var(--brand-transition);
}
.btn-hrt-ghost:hover {
  background: var(--brand-primary-soft);
  color:      var(--brand-primary);
}
.btn-hrt-ghost:disabled {
  opacity:    0.35;
  cursor:     not-allowed;
  background: transparent;
  color:      var(--brand-text-muted);
}

.btn-hrt-danger {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        8px 18px;
  height:         38px;
  font-family:    var(--brand-font-ui);
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 0.02em;
  background:     var(--brand-danger);
  color:          #fff;
  border:         1px solid var(--brand-danger);
  border-radius:  var(--brand-radius);
  cursor:         pointer;
  text-decoration: none;
  transition:     background var(--brand-transition), border-color var(--brand-transition);
  white-space:    nowrap;
  -webkit-font-smoothing: antialiased;
}
.btn-hrt-danger:hover {
  background:   color-mix(in srgb, var(--brand-danger) 85%, black);
  border-color: color-mix(in srgb, var(--brand-danger) 85%, black);
  color:        #fff;
  transform:    translateY(-1px);
  box-shadow:   0 2px 8px rgba(0,0,0,0.15);
}
.btn-hrt-danger:active  { transform: scale(0.97); }
.btn-hrt-danger:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ============================================================
   11. COMPOSANTS — PAGE TITLE ET TOOLBAR
   ============================================================ */
.page-title-hrt {
  font-size:      20px;
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: -0.01em;
  color:          var(--brand-text-default);
  margin:         0 0 2px 0;
}
.page-subtitle-hrt {
  font-size:  13px;
  color:      var(--brand-text-muted);
  margin:     0;
}
.listing-toolbar {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            12px;
  flex-wrap:      wrap;
  margin-bottom:  16px;
}
.listing-toolbar-title { flex: 1 1 auto; min-width: 0; }
.listing-toolbar-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

/* ── Onglets HRT — Toggle / Segment control ─────────────────────
   Remplace nav-tabs "soulignement" par un contrôle segmenté :
   conteneur pill neutre, onglet actif rempli en primary.
   ──────────────────────────────────────────────────────────────── */
.onglet-hrt {
  display:       flex;
  flex-wrap:     wrap;
  gap:           2px;
  padding:       3px;
  background:    var(--brand-bg-app);
  border:        1px solid var(--brand-border);
  border-radius: 8px;
}
.onglet-hrt .nav-link {
  margin-bottom: 0;
  padding:       6px 14px;
  font-size:     13px;
  font-weight:   500;
  color:         var(--brand-text-muted);
  background:    transparent;
  border:        1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  white-space:   nowrap;
  line-height:   1.4;
  transition:    background var(--brand-transition), color var(--brand-transition), box-shadow var(--brand-transition);
}
.onglet-hrt .nav-link:hover,
.onglet-hrt .nav-link:focus {
  color:        var(--brand-primary);
  background:   var(--brand-primary-soft);
  border-color: transparent;
  outline:      none;
}
.onglet-hrt .nav-link.active {
  color:        var(--brand-on-primary) !important;
  background:   var(--brand-primary) !important;
  border-color: var(--brand-primary-dark) !important;
  box-shadow:   0 1px 4px rgba(0,0,0,0.14);
  font-weight:  600;
}
.onglet-hrt .nav-link.active:hover {
  color:        var(--brand-on-primary) !important;
  background:   var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}

/* ============================================================
   12. COMPOSANTS — CHIP SOCIÉTÉ (topbar)
   ============================================================ */
.chip-societe {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        4px 10px;
  background:     var(--brand-primary-soft);
  color:          var(--brand-primary);
  border:         1px solid var(--brand-border);
  border-radius:  999px;
  font-size:      12px;
  font-weight:    600;
  white-space:    nowrap;
}
.chip-societe i { font-size: 13px; }

/* ============================================================
   13. COMPOSANTS — PAGE PLACEHOLDER (module à venir)
   ============================================================ */
.placeholder-module {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  min-height:     60vh;
  text-align:     center;
  color:          var(--brand-text-muted);
  padding:        40px 20px;
}
.placeholder-module-icon {
  width:           64px;
  height:          64px;
  border-radius:   50%;
  background:      var(--brand-primary-soft);
  color:           var(--brand-primary);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       28px;
  margin-bottom:   20px;
}
.placeholder-module h2 {
  color:       var(--brand-text-default);
  font-size:   18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.placeholder-module p {
  font-size:    14px;
  color:        var(--brand-text-muted);
  max-width:    360px;
  line-height:  1.6;
  margin-bottom: 24px;
}

/* ============================================================
   14. COMPOSANTS — LOGIN FORM
   ============================================================ */
.login-page {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--brand-bg-app);
  font-family:     var(--brand-font-sans);
}
.login-box {
  width:         100%;
  max-width:     420px;
  padding:       40px;
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: 10px;
  box-shadow:    var(--brand-shadow-md);
}
.login-logo {
  display:       block;
  text-align:    center;
  margin-bottom: 28px;
}
.login-logo img,
.login-logo svg {
  max-height: 48px;
  width:      auto;
}
.login-title {
  font-size:      18px;
  font-weight:    600;
  color:          var(--brand-text-default);
  text-align:     center;
  margin-bottom:  4px;
}
.login-subtitle {
  font-size:  13px;
  color:      var(--brand-text-muted);
  text-align: center;
  margin-bottom: 28px;
}
.login-field {
  margin-bottom: 16px;
}
.login-field label {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      12px;
  font-weight:    500;
  color:          var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom:  6px;
}
.login-field label i { font-size: 13px; }
.login-field input,
.login-field select {
  width:         100%;
  height:        44px;
  padding:       0 14px;
  font-family:   var(--brand-font-sans);
  font-size:     14px;
  color:         var(--brand-text-default);
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  outline:       none;
  transition:    border-color var(--brand-transition), box-shadow var(--brand-transition);
  appearance:    none;
  -webkit-appearance: none;
}
.login-field input:focus,
.login-field select:focus {
  border-color: var(--brand-primary);
  box-shadow:   0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.login-error {
  display:       none;
  padding:       10px 14px;
  background:    var(--brand-danger-soft);
  border:        1px solid var(--brand-danger);
  border-radius: var(--brand-radius);
  color:         var(--brand-danger);
  font-size:     13px;
  margin-bottom: 16px;
}
.login-error.visible { display: block; }
.login-btn {
  width:          100%;
  height:         44px;
  background:     var(--brand-primary);
  color:          var(--brand-on-primary);
  border:         1px solid var(--brand-primary-dark);
  border-radius:  var(--brand-radius);
  font-family:    var(--brand-font-sans);
  font-size:      14px;
  font-weight:    600;
  cursor:         pointer;
  letter-spacing: 0.01em;
  transition:     background var(--brand-transition), transform var(--brand-transition);
  margin-top:     8px;
}
.login-btn:hover {
  background: var(--brand-primary-dark);
  transform:  translateY(-1px);
}
.login-btn:active { transform: scale(0.98); }
.login-dev-notice {
  margin-top:   20px;
  padding-top:  16px;
  border-top:   1px solid var(--brand-border);
  font-size:    11px;
  color:        var(--brand-text-muted);
}

/* ============================================================
   15. MODALES — Cards imbriquées sobres
   ============================================================ */
.modal-body .form-section-hrt,
.modal-body .card {
  border:        1px solid var(--brand-border) !important;
  border-radius: var(--brand-radius) !important;
  box-shadow:    none !important;
  background:    #fbfcfe !important;
  margin-bottom: 12px !important;
}
.modal-body .form-section-header-hrt,
.modal-body .card-header {
  background:    transparent !important;
  border-bottom: 1px solid var(--brand-border) !important;
  padding:       10px 14px !important;
  min-height:    36px !important;
  font-size:     11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:         var(--brand-text-muted) !important;
}

/* Modal structure brand overrides — header, title, body, footer, close */
#modal .modal-content {
  border:        1px solid var(--brand-border);
  border-radius: 10px;
  overflow:      visible;
}
#modal .modal-header {
  background:    linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
  border-bottom: 1px solid var(--brand-border);
  padding:       7px 14px;
  min-height:    38px;
  display:       flex;
  align-items:   center;
}
#modal .modal-title {
  font-family:    var(--brand-font-sans);
  font-size:      14px;
  font-weight:    600;
  letter-spacing: -0.01em;
  color:          var(--brand-text-default);
  margin:         0;
}
#modal .modal-body {
  padding:     18px;
  font-size:   13px;
  line-height: 1.55;
  color:       var(--brand-text-default);
}
#modal .modal-footer {
  border-top:      1px solid var(--brand-border);
  padding:         8px 14px;
  background:      var(--brand-bg-surface);
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             8px;
}
#modal .modal-footer .btn-hrt-secondary {
  height:  auto;
  padding: 7px 14px;
}
/* Modifieur : force les 2 boutons du footer aux extrémités (à poser sur .modal-footer) */
#modal .modal-footer.hrt-footer-split {
  justify-content: space-between;
}
.modal-close-hrt {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   var(--brand-radius);
  background:      transparent;
  border:          none;
  color:           var(--brand-text-muted);
  font-size:       18px;
  cursor:          pointer;
  margin-left:     auto;
  flex-shrink:     0;
  transition:      background var(--brand-transition), color var(--brand-transition);
}
.modal-close-hrt:hover {
  background: var(--brand-danger-soft);
  color:      var(--brand-danger);
}

/* Ecran complet (fiche client, formulaire de creation) charge en iframe dans la grande modale */
.hrt-modal-iframe {
  display: block;
  width: 100%;
  height: 75vh;
  border: 0;
}

/* ============================================================
   16. ROW ACTION ICONS
   ============================================================ */
.row-action-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  border-radius:   var(--brand-radius);
  border:          none;
  background:      transparent;
  color:           var(--brand-text-muted);
  font-size:       15px;
  cursor:          pointer;
  transition:      background var(--brand-transition), color var(--brand-transition);
}
.row-action-icon:hover {
  background: var(--brand-primary-soft);
  color:      var(--brand-primary);
}
.row-action-icon.danger:hover {
  background: var(--brand-danger-soft);
  color:      var(--brand-danger);
}
.row-action-icon.info:hover {
  background: var(--brand-info-soft);
  color:      var(--brand-info);
}

/* --- Colonne Actions contenant un bouton libelle (addColAction is_icon = 0) :
   largeur plancher pour que le bouton respire. Le nowrap de la cellule
   l'elargit tout seul au-dela si le libelle est plus long. --- */
.table-hrt th.col-actions-libelle,
.table-hrt td.col-actions-libelle {
  min-width: 150px;
}

/* --- Colonne Actions épinglée à droite sur tous les listings, quelle que soit la taille :
   elle reste atteignable même quand le tableau déborde et scrolle horizontalement. --- */
.table-hrt th.col-actions,
.table-hrt td.col-actions {
  position: sticky;
  right:    0;
  z-index:  2;
  background: var(--brand-bg-surface);
  transition: background var(--brand-transition);
}
.table-hrt thead th.col-actions {
  background: #fafbfd;
  z-index:    3;
}
.table-hrt tbody tr:hover td.col-actions {
  background: var(--brand-primary-soft);
}

/* --- Ligne de listing en alerte (element arrete, expire, en erreur) : la colonne Actions
   etant sticky, elle porte son propre fond opaque et doit reprendre celui de la ligne,
   sinon elle reste blanche au milieu d'une ligne coloree. --- */
.table-hrt tbody tr.hrt-row-danger,
.table-hrt tbody tr.hrt-row-danger td.col-actions {
  background: var(--brand-danger-soft);
}
.table-hrt tbody tr.hrt-row-danger:hover,
.table-hrt tbody tr.hrt-row-danger:hover td.col-actions {
  background: color-mix(in srgb, var(--brand-danger-soft) 88%, var(--brand-danger) 12%);
}

/* --- Toast flash : rendu par base.php quand l'URL porte un parametre success= ou error= --- */
.hrt-flash-toast {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  z-index:       9999;
  display:       flex;
  align-items:   center;
  gap:           10px;
  max-width:     360px;
  padding:       12px 16px;
  background:    var(--brand-bg-card, #fff);
  border:        1px solid var(--brand-border, #e3e6ea);
  border-radius: var(--brand-radius, 6px);
  box-shadow:    var(--brand-shadow-md);
  font-size:     13px;
  font-weight:   500;
  color:         var(--brand-text-default);
  opacity:       0;
  transform:     translateY(8px);
  transition:    opacity .4s ease, transform .4s ease;
}
.hrt-flash-toast.is-visible {
  opacity:   1;
  transform: translateY(0);
}
.hrt-flash-toast-icon {
  flex-shrink: 0;
  font-size:   16px;
}
.hrt-flash-toast-success { border-left: 4px solid var(--brand-success, #22c55e); }
.hrt-flash-toast-success .hrt-flash-toast-icon { color: var(--brand-success, #22c55e); }

.hrt-flash-toast-danger { border-left: 4px solid var(--brand-danger, #ef4444); }
.hrt-flash-toast-danger .hrt-flash-toast-icon { color: var(--brand-danger, #ef4444); }

/* ============================================================
   17. RESPONSIVE — MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 991px) {
  .listing-toolbar { flex-direction: column; align-items: flex-start; }
  .listing-toolbar-actions { width: 100%; }
  .col-hide-mobile { display: none !important; }
  .placeholder-module { min-height: 40vh; }
}

/* ============================================================
   18. PRESENTATION LAYER — Composants premium ERP
   Ajoutés 2026-04-27 dans le cadre de la passe "améliorer la
   présentation". Aesthetic : instrument technique premium.
   Ces composants peuvent vivre à côté des composants ERP de
   base (cards, tables, forms) sans les remplacer.
   ============================================================ */

/* --- Eyebrow label : micro-titre uppercase au-dessus d'une zone --- */
.section-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--brand-font-sans);
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--brand-text-muted);
  margin-bottom:  10px;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width:   24px;
  height:  2px;
  background: var(--brand-primary);
  border-radius: 1px;
}

/* --- Hero welcome : zone d'accueil avec gradient mesh + grain + watermark --- */
.hero-welcome {
  position:      relative;
  overflow:      hidden;
  border:        1px solid var(--brand-border);
  border-radius: 12px;
  padding:       28px 32px 30px;
  margin-bottom: 24px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-secondary) 6%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, #FFFFFF 0%, var(--brand-bg-app) 100%);
  box-shadow:    var(--brand-shadow-sm);
}
.hero-welcome::after {
  /* Grain texture SVG inline — ne dépend d'aucun asset */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.hero-welcome > * { position: relative; z-index: 1; }
.hero-welcome .hero-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-family:    var(--brand-font-sans);
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--brand-primary);
  margin-bottom:  12px;
}
.hero-welcome .hero-title {
  font-family:    var(--brand-font-display);
  font-size:      32px;
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: -0.025em;
  color:          var(--brand-text-default);
  margin:         0 0 6px 0;
}
.hero-welcome .hero-title em {
  font-style: normal;
  color:      var(--brand-primary);
}
.hero-welcome .hero-subtitle {
  font-family: var(--brand-font-sans);
  font-size:   14px;
  color:       var(--brand-text-muted);
  max-width:   620px;
  margin:      0;
  line-height: 1.55;
}
.hero-welcome .hero-meta {
  display:     flex;
  align-items: center;
  gap:         18px;
  margin-top:  18px;
  flex-wrap:   wrap;
}
.hero-welcome .hero-meta-item {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-family: var(--brand-font-mono);
  font-size:   11px;
  font-weight: 500;
  color:       var(--brand-text-muted);
  letter-spacing: 0.04em;
}
.hero-welcome .hero-meta-item i { font-size: 13px; color: var(--brand-primary); }

/* Watermark décoratif — initiale brand en bas à droite, très estompée */
.hero-welcome .hero-watermark {
  position:    absolute;
  right:       -20px;
  bottom:      -40px;
  font-family: var(--brand-font-display);
  font-size:   180px;
  font-weight: 800;
  line-height: 1;
  color:       var(--brand-primary);
  opacity:     0.05;
  pointer-events: none;
  letter-spacing: -0.04em;
  user-select: none;
  z-index:     0;
}

/* --- Live dot : indicateur pulsant pour signal d'activité temps réel --- */
.live-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--brand-success);
  position:      relative;
}
.live-dot::after {
  content:    '';
  position:   absolute;
  inset:      -4px;
  border-radius: 50%;
  background: var(--brand-success);
  opacity:    0.4;
  animation:  livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  60%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* --- KPI Card : carte chiffre clé avec display font + accent rule --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  position:      relative;
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: 10px;
  padding:       18px 20px 20px;
  box-shadow:    var(--brand-shadow-sm);
  overflow:      hidden;
  transition:    border-color var(--brand-transition), box-shadow var(--brand-transition), transform var(--brand-transition);
}
.kpi-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border));
  box-shadow:   var(--brand-shadow-md);
  transform:    translateY(-1px);
}
.kpi-card::before {
  /* Accent rule verticale gauche */
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--brand-primary);
  border-radius: 0 2px 2px 0;
  opacity: 0.85;
}
.kpi-card.kpi-secondary::before { background: var(--brand-secondary); }
.kpi-card.kpi-accent::before    { background: var(--brand-accent, var(--brand-primary)); }
.kpi-card.kpi-warning::before   { background: var(--brand-warning); }
.kpi-card.kpi-muted::before     { background: var(--brand-border); }

.kpi-card .kpi-label {
  font-family:    var(--brand-font-sans);
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--brand-text-muted);
  margin:         0 0 10px 0;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            8px;
}
.kpi-card .kpi-label i {
  font-size: 14px;
  color:     var(--brand-text-muted);
  opacity:   0.7;
}
.kpi-card .kpi-value {
  display:        flex;
  align-items:    baseline;
  gap:            8px;
  flex-wrap:      wrap;
  font-family:    var(--brand-font-display);
  font-size:      15px;
  line-height:    1.05;
  letter-spacing: -0.025em;
  color:          var(--brand-text-default);
  font-variant-numeric: tabular-nums;
  margin:         0;
}
.kpi-card .kpi-value .kpi-number,
.kpi-card .kpi-value-number {
  font-family: var(--brand-font-sans);
  font-weight: bold;
  font-size: 1.2rem;
}
.kpi-card .kpi-value .kpi-libelle,
.kpi-card .kpi-value-label {
  font-weight: 500;
}
.kpi-value:hover .kpi-number,
.kpi-value:hover .kpi-libelle {
  color: var(--brand-secondary);
}
.kpi-card .kpi-value.kpi-empty {
  color:       var(--brand-text-muted);
  font-weight: 500;
  opacity:     0.6;
}
.kpi-card .kpi-value-number {
  display: inline-flex;
  align-items: baseline;
}
.kpi-card .kpi-value-label {
  display: inline-flex;
  align-items: center;
  min-height: 1em;
  font-family: var(--brand-font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-text-muted);
  opacity: 0.88;
}
.kpi-card .kpi-row-action {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
.kpi-card .kpi-trend {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  margin-top:    10px;
  font-family:   var(--brand-font-mono);
  font-size:     11px;
  font-weight:   500;
  letter-spacing: 0.02em;
}
.kpi-card .kpi-trend.up   { color: var(--brand-success); }
.kpi-card .kpi-trend.down { color: var(--brand-danger); }
.kpi-card .kpi-trend.flat { color: var(--brand-text-muted); }
.kpi-card .kpi-trend i { font-size: 13px; }
.kpi-card .kpi-foot {
  margin-top: 10px;
  font-family: var(--brand-font-sans);
  font-size: 11px;
  color: var(--brand-text-muted);
  letter-spacing: 0.02em;
}

@media (max-width: 767.98px) {
  .kpi-card .kpi-value {
    font-size: 24px;
  }
}

/* --- Activity timeline : liste d'événements récents avec rule verticale --- */
.activity-timeline {
  position: relative;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.activity-item {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px dashed var(--brand-border);
}
.activity-item:last-child { border-bottom: none; }
.activity-item::before {
  /* point timeline */
  content: '';
  position: absolute;
  left: 5px; top: 20px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-bg-surface);
  border: 2px solid var(--brand-primary);
  z-index: 1;
}
.activity-item::after {
  /* rule verticale */
  content: '';
  position: absolute;
  left: 8px; top: 28px; bottom: -2px;
  width: 1px;
  background: var(--brand-border);
}
.activity-item:last-child::after { display: none; }
.activity-item .activity-time {
  font-family: var(--brand-font-mono);
  font-size: 11px;
  color: var(--brand-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.activity-item .activity-title {
  font-family: var(--brand-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text-default);
  margin: 2px 0 0 0;
  line-height: 1.4;
}
.activity-item .activity-meta {
  font-family: var(--brand-font-sans);
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 2px;
}
.activity-item.activity-empty {
  padding-left: 0;
  text-align: center;
  font-size: 13px;
  color: var(--brand-text-muted);
  border-bottom: none;
}
.activity-item.activity-empty::before,
.activity-item.activity-empty::after { display: none; }

/* --- Action tiles : raccourcis modulaires vers les modules --- */
.action-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.action-tile {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       16px 18px;
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: 10px;
  text-decoration: none;
  color:         var(--brand-text-default);
  transition:    border-color var(--brand-transition), background var(--brand-transition), transform var(--brand-transition);
  position: relative;
  overflow: hidden;
}
.action-tile:hover {
  border-color: var(--brand-primary);
  background:   color-mix(in srgb, var(--brand-primary) 4%, var(--brand-bg-surface));
  transform:    translateY(-1px);
  color:        var(--brand-text-default);
}
.action-tile-icon {
  flex-shrink: 0;
  width:  44px; height: 44px;
  border-radius: 8px;
  background: var(--brand-primary-soft);
  color:      var(--brand-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: background var(--brand-transition);
}
.action-tile:hover .action-tile-icon {
  background: var(--brand-primary);
  color:      var(--brand-on-primary);
}
.action-tile-body { flex: 1 1 auto; min-width: 0; }
.action-tile-title {
  font-family: var(--brand-font-sans);
  font-size:   14px;
  font-weight: 600;
  color:       var(--brand-text-default);
  margin: 0 0 2px 0;
}
.action-tile-desc {
  font-family: var(--brand-font-sans);
  font-size:   12px;
  color:       var(--brand-text-muted);
  margin: 0;
  line-height: 1.4;
}
.action-tile-arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--brand-text-muted);
  transition: transform var(--brand-transition), color var(--brand-transition);
}
.action-tile:hover .action-tile-arrow {
  color: var(--brand-primary);
  transform: translateX(2px);
}
.action-tile.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.action-tile.is-disabled .action-tile-icon {
  background: var(--brand-bg-app);
  color: var(--brand-text-muted);
}

/* --- Page hero — version compacte pour pages internes --- */
.page-hero-hrt {
  position: relative;
  border-radius: 10px;
  padding: 18px 22px;
}
.page-hero-hrt .page-hero-title {
  font-family:    var(--brand-font-display);
  font-size:      24px;
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1.15;
  color:          var(--brand-text-default);
  margin: 0 0 4px 0;
}
.page-hero-hrt .page-hero-subtitle {
  font-family: var(--brand-font-sans);
  font-size: 13px;
  color: var(--brand-text-muted);
  margin: 0;
}

/* --- Roadmap empty state : remplace le placeholder-module mou --- */
.empty-state-pro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  background: var(--brand-bg-surface);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .empty-state-pro { grid-template-columns: minmax(280px, 360px) 1fr; }
}
.empty-state-visual {
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand-bg-app) 0%, color-mix(in srgb, var(--brand-primary) 6%, var(--brand-bg-app)) 100%);
  min-height: 220px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--brand-border);
}
.empty-state-visual::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.6;
}
.empty-state-visual > * { position: relative; z-index: 1; }
.empty-state-icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--brand-bg-surface);
  border: 1px solid var(--brand-border);
  color: var(--brand-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: var(--brand-shadow-sm);
}
.empty-state-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text-muted);
}
.empty-state-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.empty-state-eyebrow {
  font-family:    var(--brand-font-sans);
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--brand-primary);
  margin-bottom:  10px;
}
.empty-state-title {
  font-family:    var(--brand-font-display);
  font-size:      24px;
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1.15;
  color:          var(--brand-text-default);
  margin: 0 0 10px 0;
}
.empty-state-desc {
  font-family: var(--brand-font-sans);
  font-size: 13px;
  color: var(--brand-text-muted);
  line-height: 1.55;
  margin: 0 0 18px 0;
  max-width: 520px;
}
.empty-state-roadmap {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  display: grid;
  gap: 8px;
}
.empty-state-roadmap li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--brand-font-sans);
  font-size: 12px;
  color: var(--brand-text-muted);
}
.empty-state-roadmap li i {
  font-size: 14px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.empty-state-roadmap li.done i { color: var(--brand-success); }
.empty-state-roadmap li.done { color: var(--brand-text-default); }

/* --- Login premium two-pane --- */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  font-family: var(--brand-font-sans);
}
@media (min-width: 992px) {
  .login-shell { grid-template-columns: minmax(380px, 480px) 1fr; }
}
.login-brand-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  color: #FFFFFF;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--brand-secondary) 35%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--brand-accent, var(--brand-secondary)) 35%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  overflow: hidden;
  min-height: 220px;
}
.login-brand-pane::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.login-brand-pane > * { position: relative; z-index: 1; }
.login-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--brand-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-decoration: none;
}
.login-brand-logo span {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.login-brand-tagline {
  max-width: 360px;
}
.login-brand-tagline .login-brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
}
.login-brand-tagline .login-brand-title {
  font-family: var(--brand-font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}
.login-brand-tagline .login-brand-desc {
  font-family: var(--brand-font-sans);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  margin: 0;
}
.login-brand-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--brand-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}
.login-brand-foot .live-dot {
  background: #FFFFFF;
}
.login-brand-foot .live-dot::after {
  background: #FFFFFF;
}
.login-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--brand-bg-app);
  position: relative;
}
.login-form-pane::before {
  /* texture grain subtile sur le fond clair */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.7;
}
.login-form-pane .login-box {
  position: relative;
  z-index: 1;
  background: var(--brand-bg-surface);
  border-radius: 14px;
  box-shadow: var(--brand-shadow-md);
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
}
.login-form-pane .login-eyebrow {
  font-family: var(--brand-font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-primary);
  margin-bottom: 8px;
  text-align: left;
  display: block;
}
.login-form-pane .login-title {
  font-family: var(--brand-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-text-default);
  text-align: left;
  margin: 0 0 6px 0;
}
.login-form-pane .login-subtitle {
  text-align: left;
  font-size: 13px;
  color: var(--brand-text-muted);
  margin-bottom: 24px;
}

/* --- Page-level subtle background polish (grain on app bg) --- */
.content-page {
  position: relative;
}

/* --- Listing toolbar h1 : utiliser display font --- */
.page-title-hrt {
  font-family:    var(--brand-font-display);
  font-size:      24px;
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1.2;
}

/* --- Autocomplete suggestions (champs raison sociale, adresse) --- */
.autocomplete-suggestions {
  position:         absolute;
  z-index:          1050;
  top:              100%;
  left:             0;
  right:            0;
  margin-top:       2px;
  background:       var(--brand-bg-surface);
  border:           1px solid var(--brand-border);
  border-radius:    var(--brand-radius-md);
  box-shadow:       var(--brand-shadow-md);
  max-height:       240px;
  overflow-y:       auto;
  overflow-x:       hidden;
}
.autocomplete-item {
  display:          flex;
  flex-direction:   column;
  padding:          8px 12px;
  cursor:           pointer;
  border-bottom:    1px solid var(--brand-border);
  transition:       background 0.1s;
}
.autocomplete-item:last-child {
  border-bottom:    none;
}
.autocomplete-item:hover {
  background:       var(--brand-bg-subtle);
}
.autocomplete-label {
  font-size:        13px;
  font-weight:      500;
  color:            var(--brand-text-default);
  white-space:      nowrap;
  overflow:         hidden;
  text-overflow:    ellipsis;
}
.autocomplete-sub {
  font-size:        11px;
  color:            var(--brand-text-muted);
  margin-top:       1px;
}

/* ============================================================
   19. COMPOSANTS — DATA LIST (pattern label-valeur dense)
   Remplace les <table> inline pour l'affichage fiche / synthèse.
   ============================================================ */
.data-list-hrt {
  margin:  0;
  padding: 0;
}
.data-row-hrt {
  display:               grid;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap:                   0 16px;
  padding:               7px 0;
  border-bottom:         1px solid var(--brand-border);
  align-items:           baseline;
}
.data-row-hrt:last-child { border-bottom: none; }
.data-list-hrt dt {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--brand-text-muted);
  margin:         0;
  padding-top:    1px;
  white-space:    nowrap;
}
.data-list-hrt dd {
  font-size:   13px;
  font-weight: 500;
  color:       var(--brand-text-default);
  margin:      0;
  word-break:  break-word;
  line-height: 1.45;
}
.data-list-hrt dd a {
  color:           var(--brand-primary);
  text-decoration: none;
}
.data-list-hrt dd a:hover {
  color:           var(--brand-primary-dark);
  text-decoration: underline;
}

/* --- Client fiche — métaligne sous le titre (type, tél, email) --- */
.fiche-meta-line {
  display:     flex;
  align-items: center;
  gap:         18px;
  flex-wrap:   wrap;
  margin-top:  8px;
  font-size:   12px;
  color:       var(--brand-text-muted);
}
.fiche-meta-line a {
  color:           var(--brand-text-muted);
  text-decoration: none;
  transition:      color var(--brand-transition);
}
.fiche-meta-line a:hover { color: var(--brand-primary); }
.fiche-meta-item {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
}
.fiche-meta-item i {
  font-size: 13px;
  color:     var(--brand-primary);
  opacity:   0.8;
}

/* ============================================================
   20. MODULE CLIENT — Haute densité journalière
   Interface utilisée toute la journée → densité max, lisibilité
   préservée, micro-interactions fluides, zéro friction.
   ============================================================ */

/* --- KPI strip horizontal — remplace kpi-grid en liste client ---
   Économise ~70px verticaux vs la grille de 3 cartes.
   Séparateurs | + accent 2px en bas = lecture instantanée. */
.kpi-strip {
  display:       flex;
  background:    var(--brand-bg-surface);
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow:    var(--brand-shadow-sm);
  overflow:      hidden;
  margin-bottom: 10px;
}
.kpi-strip-item {
  flex:       1 1 0;
  padding:    10px 18px 12px;
  border-right: 1px solid var(--brand-border);
  position:   relative;
  min-width:  0;
  transition: background var(--brand-transition);
}
.kpi-strip-item:last-child { border-right: none; }
.kpi-strip-item.ks-filter:hover { background: var(--brand-bg-app); }
.kpi-strip-item::after {
  content:  '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height:   2px;
}
.kpi-strip-item.ks-primary::after { background: var(--brand-primary); }
.kpi-strip-item.ks-success::after { background: var(--brand-success); }
.kpi-strip-item.ks-muted::after   { background: var(--brand-border); }
.kpi-strip-label {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--brand-text-muted);
  display:        flex;
  align-items:    center;
  gap:            5px;
  margin:         0 0 5px 0;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.kpi-strip-label i { font-size: 12px; opacity: 0.7; flex-shrink: 0; }
.kpi-strip-value {
  font-family:          var(--brand-font-sans);
  font-size:            22px;
  font-weight:          700;
  letter-spacing:       -0.02em;
  color:                var(--brand-text-default);
  font-variant-numeric: tabular-nums;
  line-height:          1;
  margin:               0;
}
.kpi-strip-value.ks-empty {
  color:       var(--brand-text-muted);
  font-weight: 400;
  opacity:     0.5;
}
/* Tuile KPI cliquable : ks-filter = filtre cliquable ; ks-filter + ks-success = filtre actif (couleur secondaire société) */
.kpi-strip-item.ks-filter { cursor: pointer; }
.kpi-strip-item.ks-filter:hover::after { height: 3px; }
.kpi-strip-item.ks-filter.ks-success { background: var(--brand-secondary-soft); }
.kpi-strip-item.ks-filter.ks-success::after { height: 3px; background: var(--brand-secondary); }
.kpi-strip-item.ks-filter.ks-success .kpi-strip-label { color: var(--brand-secondary); }
.kpi-strip-item.ks-filter.ks-success .kpi-strip-label i { opacity: 1; }

/* Cellule montant listing : chiffres tabulaires + gras (réutilisable) */
.hrt-montant-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.kpi-strip-foot {
  font-size:  10px;
  color:      var(--brand-text-muted);
  margin:     3px 0 0 0;
  letter-spacing: 0.02em;
}

/* --- Panel de recherche — animation CSS max-height (plus fluide) ---
   transition max-height évite le flash de layout du display:none,
   donne une impression d'accordéon. */
.search-panel-animated .card-body {
  overflow:   hidden;
  transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity    0.18s ease,
              padding    0.18s ease;
}
.search-panel-animated.panel-open .card-body {
  max-height: 600px;
  opacity:    1;
}
.search-panel-animated.panel-closed .card-body {
  max-height: 0;
  opacity:    0;
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}
.card-header-toggle {
  cursor:      pointer;
  user-select: none;
  transition:  background var(--brand-transition);
}
.card-header-toggle:hover {
  background: linear-gradient(180deg, #f4f6f9 0%, #eff2f6 100%);
}
.panel-chevron-icon {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:  15px;
  color:      var(--brand-text-muted);
}
.panel-open  .panel-chevron-icon { transform: rotate(0deg); }
.panel-closed .panel-chevron-icon { transform: rotate(-180deg); }

/* Badge filtres actifs dans le header de recherche */
.badge-search-active {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 8px;
  background:    var(--brand-primary-soft);
  color:         var(--brand-primary);
  border-radius: 999px;
  font-size:     10px;
  font-weight:   600;
  letter-spacing: 0.04em;
}

/* --- Onglets fiche — underline moderne (override §11) ---
   Remplace le style "card tabs" par un underline propre,
   plus lisible en navigation rapide entre onglets. */
.onglet-hrt {
  display:    flex;
  gap:        0;
  border-bottom: 1px solid var(--brand-border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--brand-onglet-bg, var(--brand-bg-surface));
  border-radius: 6px 6px 6px 6px;
  margin-bottom: 14px;
}
.onglet-hrt::-webkit-scrollbar { display: none; }
.onglet-hrt .nav-link {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     10px 15px;
  font-size:   12px;
  font-weight: 500;
  color:       var(--brand-text-muted);
  border:      none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  margin-bottom: -1px;
  transition:  color var(--brand-transition),
               border-bottom-color var(--brand-transition),
               background var(--brand-transition);
  text-decoration: none;
}
.onglet-hrt .nav-link i { font-size: 13px; opacity: 0.75; }
.onglet-hrt .nav-link:hover {
  color:             var(--brand-primary);
  background:        var(--brand-primary-soft);
  border-bottom-color: transparent;
}
.onglet-hrt .nav-link.active {
  color:             var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight:       600;
  background:        transparent;
}
.onglet-hrt .nav-link.active i { opacity: 1; }
.onglet-hrt .nav-link:first-child {
  border-top-left-radius:    5px;
  border-bottom-left-radius: 5px;
}
.onglet-hrt .nav-link:last-child {
  border-top-right-radius:    5px;
  border-bottom-right-radius: 5px;
}

/* --- Table rows denses dans la zone listing client ---
   7px au lieu de 10px → +30% de lignes visibles sans scroll. */
#clientListeZone .table-hrt thead th {
  padding: 7px 12px;
}
#clientListeZone .table-hrt tbody td {
  padding: 7px 12px;
}

/* --- Cellules listing : identité 2 lignes + coordonnées empilées --- */
.cell-2line-hrt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.cell-2line-hrt__main {
  font-weight: 600;
  color: var(--brand-text-default);
}
.cell-2line-hrt__sub {
  font-size: 11px;
  color: var(--brand-text-muted);
}
.cell-coord-hrt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cell-coord-hrt__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--brand-text-muted);
}
.cell-coord-hrt__item i {
  width: 13px;
  font-size: 12px;
  color: var(--brand-primary);
  opacity: 0.8;
  flex-shrink: 0;
}
.cell-coord-hrt__item a {
  color: inherit;
  text-decoration: none;
}
.cell-coord-hrt__item a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* --- Page hero fiche plus compact ---
   Revu à la baisse pour maximiser l'espace contenu. */
.page-hero-hrt {
  padding:       12px 18px;
}
.page-hero-hrt .page-hero-title {
  font-size: 20px;
}
.page-hero-hrt .breadcrumb {
  padding-top: 0;
  padding-bottom: 0;
}

.page-hero-hrt--sticky {
  position: sticky;
  top: 90px;
  z-index: 100;
  background:
    radial-gradient(circle at top right,
      color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%,
      transparent 42%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-bg-surface) 94%, white 6%) 0%,
      var(--brand-bg-surface) 100%);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--brand-border));
  border-top-width: 4px;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.10),
    0 4px 12px color-mix(in srgb, var(--brand-primary) 10%, transparent);
  overflow: hidden;
}

.page-hero-hrt--sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--brand-primary) 10%, transparent) 0%,
      transparent 18%,
      transparent 82%,
      color-mix(in srgb, var(--brand-primary) 08%, transparent) 100%);
  pointer-events: none;
}

.page-hero-hrt--sticky::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--brand-primary) 16%, var(--brand-border));
  pointer-events: none;
}

.page-hero-hrt {
  border-color: #000000 !important;
}

/* --- Tableau pack article : séparateurs nets + colonne action centrée --- */
.table-pack-hrt tbody td {
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 88%, white 12%);
}

.table-pack-hrt #article-pack-empty-row td {
  border-top: none;
  border-bottom: none;
}

.table-pack-hrt th.col-actions,
.table-pack-hrt td.col-actions {
  width: 84px;
  text-align: center !important;
  vertical-align: middle;
}

.table-pack-hrt .table-pack-hrt__action-cell {
  padding-left: 8px;
  padding-right: 8px;
  display: table-cell;
}

.table-pack-hrt .table-pack-hrt__action-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
}

.table-pack-hrt .table-pack-hrt__action-cell .row-action-icon {
  margin: 0;
}

.table-pack-hrt tbody tr:last-child td {
  border-bottom: none;
}

/* --- Listing toolbar plus serrée --- */
.listing-toolbar {
  margin-bottom: 10px;
}

/* --- Kbd shortcut hint (discret, pour power users) --- */
.kbd-hint {
  display:      inline-flex;
  align-items:  center;
  padding:      1px 5px;
  font-family:  var(--brand-font-mono);
  font-size:    10px;
  font-weight:  500;
  color:        var(--brand-text-muted);
  background:   var(--brand-bg-app);
  border:       1px solid var(--brand-border);
  border-radius: 3px;
  line-height:  1.5;
  user-select:  none;
  opacity:      0.75;
}

/* ============================================================
   22. QUICK SEARCH BAR + FILTRES DRAWER + RADIO GROUPE
   ============================================================ */

/* ── Quick search bar (entre KPI et listing) ── */
.listing-quick-bar {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 8px;
}
.listing-quick-bar-search {
  position: relative;
  flex:     1;
  min-width: 0;
}
.listing-quick-bar-search .listing-search-icon {
  position:       absolute;
  left:           10px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      14px;
  color:          var(--brand-text-muted);
  pointer-events: none;
}
.listing-quick-bar-search .field-input-hrt {
  padding-left:  34px;
  padding-right: 30px;
}
.listing-quick-clear {
  position:    absolute;
  right:       8px;
  top:         50%;
  transform:   translateY(-50%);
  border:      none;
  background:  none;
  color:       var(--brand-text-muted);
  cursor:      pointer;
  padding:     2px 4px;
  font-size:   15px;
  line-height: 1;
  border-radius: 3px;
}
.listing-quick-clear:hover {
  color:      var(--brand-text-default);
  background: var(--brand-bg-app);
}

/* ── Filtres drawer (Bootstrap 5 offcanvas) ── */
.filtres-drawer {
  width:          clamp(320px, 90vw, 520px) !important;
  display:        flex;
  flex-direction: column;
}
.filtres-drawer .offcanvas-header {
  border-bottom: 1px solid var(--brand-border);
  padding:       14px 20px;
  flex-shrink:   0;
}
.filtres-drawer .offcanvas-title {
  font-family: var(--brand-font-display);
  font-size:   15px;
  font-weight: 600;
  color:       var(--brand-text-default);
}
.filtres-drawer .offcanvas-body {
  padding:    18px 20px;
  flex:       1 1 auto;
  overflow-y: auto;
}
.filtres-drawer-footer {
  padding:     12px 20px;
  border-top:  1px solid var(--brand-border);
  display:     flex;
  gap:         8px;
  background:  var(--brand-bg-surface);
  flex-shrink: 0;
}

/* ── Radio groupe statut ── */
.radio-group-hrt {
  display:       flex;
  border:        1px solid var(--brand-border);
  border-radius: 6px;
  overflow:      hidden;
}
.radio-group-hrt input[type="radio"] { display: none; }
.radio-group-hrt label {
  flex:        1;
  text-align:  center;
  padding:     6px 10px;
  font-size:   13px;
  cursor:      pointer;
  border-right: 1px solid var(--brand-border);
  color:       var(--brand-text-default);
  margin:      0;
  transition:  background var(--brand-transition), color var(--brand-transition);
  user-select: none;
  line-height: 1.6;
}
.radio-group-hrt label:last-child { border-right: none; }
.radio-group-hrt input[type="radio"]:checked + label {
  background:  var(--brand-primary);
  color:       var(--brand-on-primary);
  font-weight: 600;
}
.radio-group-hrt label:hover { background: var(--brand-primary-soft); }
.radio-group-hrt input[type="radio"]:checked + label:hover { background: var(--brand-primary-dark); }

/* ============================================================
   21. COMPOSANTS — LISTING GÉNÉRIQUE (classe Listing)
   Couvre : sort indicator, thead sticky, empty state,
            barre de recherche, footer compteur.
   ============================================================ */

/* --- Sort indicator — deux chevrons SVG superposés ---
   Le chevron actif passe à opacité 1, l'autre à 0.25. */
.table-hrt thead th .sort-indicator {
  display:       inline-flex;
  margin-left:   4px;
  vertical-align: middle;
  opacity:       0.35;
  transition:    opacity var(--brand-transition);
}
.table-hrt thead th.sortable:hover .sort-indicator { opacity: 0.6; }

/* Chevron haut actif (ASC) */
.table-hrt thead th.sort-asc .sort-indicator { opacity: 1; }
.table-hrt thead th.sort-asc  .sort-indicator svg path:first-child { opacity: 1; }
.table-hrt thead th.sort-asc  .sort-indicator svg path:last-child  { opacity: 0.2; }

/* Chevron bas actif (DESC) */
.table-hrt thead th.sort-desc .sort-indicator { opacity: 1; }
.table-hrt thead th.sort-desc .sort-indicator svg path:first-child { opacity: 0.2; }
.table-hrt thead th.sort-desc .sort-indicator svg path:last-child  { opacity: 1; }

/* --- Rang du critère de tri (tri multi-colonnes) ---
   Affiché uniquement quand plusieurs colonnes sont empilées dans le ORDER BY. */
.sort-rank {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       15px;
  height:          15px;
  margin-left:     4px;
  padding:         0 3px;
  border-radius:   4px;
  background:      var(--brand-primary);
  color:           var(--brand-on-primary);
  font-size:       9px;
  font-weight:     700;
  font-family:     var(--brand-font-mono);
  line-height:     1;
  vertical-align:  middle;
}

/* --- Icones d'export d'un listing, posees a cote du titre de page ---
   Icone seule, sans cadre : la couleur porte l'information, pas un contour. */
.listing-export-hrt {
  display:         inline-flex;
  align-items:     center;
  /* 16px comme le ps-3 que SOS_DEBOUCHE pose sur ses icones d'export */
  margin-left:     16px;
  font-size:       18px;
  line-height:     1;
  vertical-align:  middle;
  text-decoration: none;
  cursor:          pointer;
}
.listing-export-hrt.is-xlsx { color: #1D6F42; }
.listing-export-hrt.is-pdf { color: var(--brand-danger); }

/* Onglets de fiche : pas de titre de page, les icones se posent au-dessus du tableau */
.listing-export-bar-hrt {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  margin-bottom:   6px;
}
.listing-export-bar-hrt .listing-export-hrt { font-size: 16px; }

/* --- Barre des critères de tri actifs --- */
.listing-sort-hrt {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 8px;
}
.listing-sort-hrt .listing-sort-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--brand-text-muted);
}
.listing-sort-hrt .listing-sort-chip {
  display:       inline-flex;
  align-items:   stretch;
  overflow:      hidden;
  border:        1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background:    var(--brand-bg-card);
}
.listing-sort-hrt .sort-chip-main,
.listing-sort-hrt .sort-chip-remove,
.listing-sort-hrt .listing-sort-reset {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  border:      0;
  background:  transparent;
  color:       var(--brand-text-default);
  font-size:   12px;
  cursor:      pointer;
  transition:  background var(--brand-transition), color var(--brand-transition);
}
.listing-sort-hrt .sort-chip-main {
  padding:     4px 8px;
  font-weight: 500;
}
.listing-sort-hrt .sort-chip-main i { font-size: 10px; color: var(--brand-primary); }
.listing-sort-hrt .sort-chip-main:hover { background: var(--brand-primary-soft); color: var(--brand-primary); }
.listing-sort-hrt .sort-chip-remove {
  padding:     4px 7px;
  border-left: 1px solid var(--brand-border);
  color:       var(--brand-text-muted);
}
.listing-sort-hrt .sort-chip-remove:hover { background: var(--brand-danger); color: #fff; }
.listing-sort-hrt .listing-sort-reset {
  padding:   4px 8px;
  color:     var(--brand-text-muted);
  font-size: 11px;
}
.listing-sort-hrt .listing-sort-reset:hover { color: var(--brand-primary); text-decoration: underline; }

/* --- Thead : positionne pour passer au-dessus des cellules du corps ---
   Pas de top: 0 volontairement. La carte est en overflow: clip, donc le conteneur de
   defilement vertical est la page : un thead sticky irait se coller au haut de la fenetre,
   par-dessus la topbar. Pour un en-tete fige, il faudrait un top egal a la hauteur de
   la topbar et un z-index arbitre avec elle. */
.table-hrt-wrapper .table-hrt thead th {
  position: sticky;
  z-index: 2;
}

/* --- Empty state design system ---
   Remplace l'ancien .empty-state-am2s / .empty-state-icon. */
.listing-empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        48px 24px;
  text-align:     center;
  color:          var(--brand-text-muted);
}
.listing-empty-icon {
  font-size:     40px;
  line-height:   1;
  margin-bottom: 12px;
  opacity:       0.4;
  color:         var(--brand-primary);
}
.listing-empty-title {
  font-family:   var(--brand-font-display);
  font-size:     15px;
  font-weight:   600;
  color:         var(--brand-text-default);
  margin:        0 0 6px;
}
.listing-empty-desc {
  font-size:  13px;
  color:      var(--brand-text-muted);
  margin:     0;
  max-width:  320px;
}

/* --- Barre de recherche inline (globalSearch) ---
   Utilise field-input-hrt, cohérente avec le reste du design. */
.listing-search-bar {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 8px;
}
.listing-search-bar .listing-search-input-wrap {
  position:    relative;
  flex:        0 0 260px;
}
.listing-search-bar .listing-search-input-wrap i {
  position:   absolute;
  left:       10px;
  top:        50%;
  transform:  translateY(-50%);
  font-size:  14px;
  color:      var(--brand-text-muted);
  pointer-events: none;
}
.listing-search-bar .listing-search-input-wrap .field-input-hrt {
  padding-left: 32px;
  height:       34px;
}
.listing-search-count {
  font-size:   12px;
  color:       var(--brand-text-muted);
  font-family: var(--brand-font-mono);
}

/* --- Footer compteur de résultats --- */
.listing-footer {
  display:      flex;
  align-items:  center;
  justify-content: flex-end;
  padding:      8px 12px;
  border-top:   1px solid var(--brand-border);
  font-size:    11px;
  color:        var(--brand-text-muted);
  font-family:  var(--brand-font-mono);
  background:   var(--brand-bg-surface);
}

.field-input-hrt.is-calculated {
  background-color: color-mix(in srgb, var(--brand-primary-xlight) 58%, white 42%);
  color: var(--brand-text-muted);
  cursor: default;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ─── Data field — label + value pair for fiches ─── */
.data-field-o2toit {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.data-field-o2toit .data-label {
  font-family: var(--brand-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-text-muted);
  line-height: 1.3;
}

.data-field-o2toit .data-value {
  font-family: var(--brand-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text);
  line-height: 1.4;
}

.data-field-o2toit .data-value.is-empty {
  color: var(--brand-text-disabled);
}

/* ─── Detail card — reusable card pattern for fiches ─── */
.detail-card-o2toit {
  background: var(--brand-bg-card);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow 0.2s ease;
}

.detail-card-o2toit:hover {
  box-shadow: var(--brand-shadow);
}

.detail-card-o2toit .detail-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  min-height: 46px;
  background: linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
  border-bottom: 1px solid var(--brand-border-light);
}

.detail-card-o2toit .detail-card-header .detail-card-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--brand-radius-sm);
  background: var(--brand-primary-xlight);
  color: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.detail-card-o2toit .detail-card-header h2,
.detail-card-o2toit .detail-card-header h3 {
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-secondary-darker);
  margin: 0;
  letter-spacing: 0.01em;
}

.detail-card-o2toit .detail-card-body {
  padding: 18px 20px;
}

/* ─── Breadcrumb enhanced ─── */
.breadcrumb-o2toit {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  font-family: var(--brand-font);
  font-size: 13px;
}

.breadcrumb-o2toit li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-o2toit li + li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-border);
  flex-shrink: 0;
}

.breadcrumb-o2toit a {
  color: var(--brand-primary-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.breadcrumb-o2toit a:hover {
  color: var(--brand-primary-darker);
}

.breadcrumb-o2toit .breadcrumb-current {
  color: var(--brand-text-muted);
  font-weight: 500;
}

/* ─── Sidebar info row (vertical label-value for sidebar) ─── */
.info-row-o2toit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--brand-border-light);
}

.info-row-o2toit:last-child {
  border-bottom: none;
}

.info-row-o2toit .info-label {
  font-family: var(--brand-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
  flex-shrink: 0;
}

.info-row-o2toit .info-value {
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text);
  text-align: right;
  min-width: 0;
}

.info-row-o2toit .info-value.is-empty {
  color: var(--brand-text-disabled);
}

.info-row-o2toit .info-value.is-danger {
  color: var(--brand-danger-text);
}

/* ============================================================
   SELECTS HRT — indicateur visuel natif de liste déroulante
   Appliqué à la classe commune déjà utilisée dans le projet :
   .field-input-hrt sur les balises <select>.
   ============================================================ */
select.field-input-hrt {
  padding-right: 38px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 43%, var(--brand-text-muted) 44%, var(--brand-text-muted) 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--brand-text-muted) 44%, var(--brand-text-muted) 56%, transparent 57%);
  background-position:
    calc(100% - 19px) calc(50% + 2px),
    calc(100% - 13px) calc(50% + 2px);
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}

select.field-input-hrt:focus {
  background-image:
    linear-gradient(45deg, transparent 43%, var(--brand-primary) 44%, var(--brand-primary) 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--brand-primary) 44%, var(--brand-primary) 56%, transparent 57%);
}

select.field-input-hrt:disabled {
  cursor: not-allowed;
  background-image: none;
}

/* ============================================================
   ARTICLE PACK HEADER ACTION
   Bouton compact aligné au titre de card, 100% piloté par les
   variables --brand-* pour s'adapter au thème société actif.
   ============================================================ */
.form-subcard-title-hrt--with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.form-subcard-title-main-hrt {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.form-subcard-title-content-hrt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.form-subcard-title-label-hrt {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--brand-primary-darker);
}

.form-subcard-title-desc-hrt {
  font-size: 12px;
  line-height: 1.4;
  color: var(--brand-text-muted);
}

.article-composition-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius);
  background: var(--brand-secondary-xlight);
  color: var(--brand-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.article-composition-note i {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--brand-primary-dark);
  margin-top: 1px;
}

.article-composition-note > div {
  min-width: 0;
}

.article-composition-note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--brand-text);
}

.article-price-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--brand-text-muted);
}

.article-price-note strong {
  color: var(--brand-text);
  font-weight: 600;
}

.article-tva-indicator {
  background: var(--brand-secondary-xlight);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius);
  padding: 10px 12px;
  min-height: 38px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--brand-text-muted);
  line-height: 1.35;
}

.article-tva-indicator.is-active {
  background: var(--brand-primary-xlight);
  color: var(--brand-text);
  border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--brand-border-light) 68%);
}

.article-calc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-primary-xlight);
  color: var(--brand-primary-dark);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.article-quick-read .detail-card-body {
  padding-top: 16px;
  padding-bottom: 16px;
}

.article-quick-read .data-value {
  font-size: 15px;
  font-weight: 600;
}

.btn-hrt-inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--brand-shadow-sm);
}

.btn-hrt-inline-action i {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .form-subcard-title-hrt--with-action {
    align-items: stretch;
  }

  .form-subcard-title-main-hrt {
    width: 100%;
  }

  .article-composition-note {
    padding: 11px 12px;
  }

  .btn-hrt-inline-action {
    width: 100%;
  }
}

/* Article ajout UX refinements */
.article-quick-read-title {
  color: var(--brand-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.article-quick-read .detail-card-header {
  align-items: flex-start;
  background: linear-gradient(180deg, var(--brand-primary-xlight) 0%, rgba(253, 243, 220, 0) 100%);
}

.article-quick-read .detail-card-body {
  padding-top: 16px;
}

.article-quick-read .data-label {
  color: var(--brand-secondary-darker);
}

.article-quick-read .data-value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.article-section-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.article-section-title--identity {
  color: var(--brand-text);
}

.article-section-title--classification {
  color: var(--brand-primary-dark);
}

.article-section-title--pricing {
  color: var(--brand-secondary-darker);
}

.article-section-title--pack {
  color: var(--brand-primary-darker);
}

.article-section-title--matrix {
  color: var(--brand-text-muted);
}

.article-price-label-main {
  color: var(--brand-text);
}

.article-price-note {
  background: var(--brand-primary-xlight);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius);
  color: var(--brand-text);
  padding: 10px 12px;
}

.article-price-note strong {
  color: var(--brand-primary-darker);
}

.article-tva-indicator {
  background: var(--brand-secondary-xlight);
  border: 1px solid var(--brand-border-light);
  border-radius: var(--brand-radius);
  color: var(--brand-text-muted);
  padding: 10px 12px;
}

.article-tva-indicator.is-active {
  background: var(--brand-primary-xlight);
  border-color: var(--brand-primary-light);
  color: var(--brand-text);
}

.article-calc-badge {
  background: var(--brand-primary-light);
  border-radius: var(--brand-radius-pill);
  color: var(--brand-text);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 8px;
  text-transform: uppercase;
}
.client-adresse-toolbar {
   display: flex;
   justify-content: flex-end;
   align-items: end;
   margin: 0 0 12px;
 }

.client-adresse-toolbar .btn-hrt-primary {
  white-space: nowrap;
}

.client-adresse-listing {
  margin-top: 0;
}

@media (max-width: 767.98px) {
  .client-adresse-toolbar {
    margin-bottom: 10px;
  }
}

/* Devis ajout sidebar / recap */
.devis-layout-hrt {
  align-items: flex-start;
}

.devis-sidebar-hrt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.devis-sidebar-col-hrt {
  position: sticky;
  top: 92px;
  align-self: flex-start;
  z-index: 20;
}

.devis-nav-link-hrt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  border-radius: 10px;
  color: var(--brand-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.devis-nav-link-hrt:first-of-type {
  margin-top: 0;
}

.devis-nav-link-hrt i {
  font-size: 16px;
  color: var(--brand-primary-dark);
  flex-shrink: 0;
}

.devis-nav-link-hrt:hover {
  background: var(--brand-primary-xlight);
  color: var(--brand-primary-darker);
  text-decoration: none;
}

.devis-nav-link-hrt.is-active {
  background: var(--brand-primary-xlight);
  color: var(--brand-primary-darker);
}

.devis-nav-link-hrt.is-active i {
  color: var(--brand-primary-darker);
}

.devis-recap-row-hrt {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--brand-border-light);
  font-size: 13px;
}

.devis-recap-row-hrt:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.devis-recap-row-hrt .label {
  color: var(--brand-text-muted);
}

.devis-recap-row-hrt .value {
  color: var(--brand-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.devis-recap-row-hrt--final .value {
  color: var(--brand-primary-darker);
  font-size: 16px;
}

.devis-recap-note-hrt {
  color: var(--brand-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.devis-validite-wrap-hrt {
  position: relative;
}

.devis-validite-input-hrt {
  padding-right: 86px;
}

.devis-validite-addon-hrt {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--brand-primary-xlight);
  color: var(--brand-primary-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .devis-sidebar-col-hrt {
    position: static;
  }
}

/* ============================================================
   VALIDATION VISUELLE DES CHAMPS HRT
   ============================================================ */
.field-input-hrt.is-invalid,
.field-select-hrt.is-invalid,
.field-textarea-hrt.is-invalid {
  border-color: var(--brand-danger-border) !important;
  background: var(--brand-danger-bg);
  box-shadow: 0 0 0 3px rgba(139, 32, 32, 0.10);
}

.field-hrt:has(.is-invalid) .field-label-hrt,
.field-hrt:has(.is-invalid) .form-label {
  color: var(--brand-danger-text);
}

/* ============================================================
   23. SYNTHESE / FICHE - Panneau, cartes, tuiles KPI, activités
   Composants génériques sortis de client/synthese.php et
   client/fiche.php (aucune balise <style> dans un fichier PHP).
   Réutilisables sur toute fiche ou tableau de bord.
   ============================================================ */

/* --- Panneau : conteneur de section avec en-tête --- */
.hrt-panel {
  background: var(--brand-bg-surface);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
}
.hrt-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 8px;
  border-bottom: 1px solid var(--brand-border);
}
.hrt-panel-icon {
  font-size: 13px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.hrt-panel-icon.is-danger { color: var(--brand-danger); }
.hrt-panel-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-text-muted);
  margin: 0;
  white-space: nowrap;
}

/* --- Pilules d'état posées dans un en-tête de panneau ou de carte --- */
.hrt-pill-primary,
.hrt-pill-danger {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hrt-pill-primary {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
}
.hrt-pill-danger {
  background: var(--brand-danger-soft);
  color: var(--brand-danger);
  border: 1px solid var(--brand-danger);
  font-weight: 700;
  animation: hrtPulseDanger 2s ease-in-out infinite;
}
@keyframes hrtPulseDanger {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}

/* --- Grille 2 colonnes séparées par un filet, empilée sous 768px --- */
.hrt-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.hrt-split-main {
  padding: 16px 18px;
  border-right: 1px solid var(--brand-border);
}
.hrt-split-side {
  padding: 14px 18px 16px;
}

/* --- KPI principal : valeur mise en avant, filet latéral coloré --- */
.hrt-kpi-hero {
  border-left: 3px solid var(--brand-border);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.hrt-kpi-hero.is-danger { border-left-color: var(--brand-danger); }
.hrt-kpi-hero-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-text-muted);
  margin-bottom: 5px;
}
.hrt-kpi-hero.is-danger .hrt-kpi-hero-label { color: var(--brand-danger); }
.hrt-kpi-hero-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--brand-text-default);
}
.hrt-kpi-hero.is-danger .hrt-kpi-hero-value { color: var(--brand-danger); }
.hrt-kpi-hero-sub {
  font-size: 11px;
  margin-top: 5px;
}

/* --- Tranches : 4 tuiles à filet supérieur, gradation du niveau 1 au 4 --- */
.hrt-bucket-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.hrt-bucket {
  border-top: 3px solid var(--brand-border);
  border-radius: 0 0 6px 6px;
  padding: 10px 10px 8px;
  background: var(--brand-bg-surface);
}
.hrt-bucket.is-zero { opacity: .4; }
.hrt-bucket.is-niveau-1 { border-top-color: color-mix(in srgb, var(--brand-warning) 55%, var(--brand-bg-surface)); }
.hrt-bucket.is-niveau-2 { border-top-color: var(--brand-warning); }
.hrt-bucket.is-niveau-3 { border-top-color: var(--brand-danger); }
.hrt-bucket.is-niveau-4 { border-top-color: color-mix(in srgb, var(--brand-danger) 75%, black); }
.hrt-bucket-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  color: var(--brand-text-muted);
}
.hrt-bucket.is-niveau-1 .hrt-bucket-label,
.hrt-bucket.is-niveau-2 .hrt-bucket-label { color: var(--brand-warning); }
.hrt-bucket.is-niveau-3 .hrt-bucket-label,
.hrt-bucket.is-niveau-4 .hrt-bucket-label { color: var(--brand-danger); }
.hrt-bucket-value {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--brand-text-default);
}
.hrt-bucket.is-niveau-1 .hrt-bucket-value,
.hrt-bucket.is-niveau-2 .hrt-bucket-value { color: var(--brand-warning); }
.hrt-bucket.is-niveau-3 .hrt-bucket-value { color: var(--brand-danger); }
.hrt-bucket.is-niveau-4 .hrt-bucket-value { color: color-mix(in srgb, var(--brand-danger) 75%, black); }
.hrt-bucket-sub {
  font-size: 9px;
  color: var(--brand-text-muted);
  margin-top: 2px;
}

/* --- Faits chiffrés en ligne sous un bloc de KPI --- */
.hrt-fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hrt-fact {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--brand-text-muted);
}
.hrt-fact i {
  font-size: 13px;
  color: var(--brand-primary);
}
.hrt-fact strong { font-weight: 700; }

/* --- Graphique : en-tête, légende, boîte à hauteur fixe --- */
.hrt-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hrt-chart-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-text-default);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hrt-chart-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--brand-text-muted);
}
.hrt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.hrt-legend-dot.is-primary { background: var(--brand-primary); }
.hrt-legend-dot.is-muted { background: var(--brand-border); }
.hrt-chart-box {
  position: relative;
  height: 160px;
}

/* --- Carte : bloc autonome avec en-tête, action à droite et corps --- */
.hrt-card {
  background: var(--brand-bg-surface);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  overflow: hidden;
}
.hrt-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--brand-border);
}
.hrt-card-icon {
  font-size: 13px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.hrt-card-icon.is-info { color: var(--brand-info); }
.hrt-card-icon.is-danger { color: var(--brand-danger); }
.hrt-card-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-text-muted);
  margin: 0;
  flex: 1;
  white-space: nowrap;
}
.hrt-card-pill {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.hrt-card-link {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hrt-card-link:hover { color: var(--brand-primary); }
.hrt-card-body { padding: 12px 14px; }

/* --- Texte libre et état vide dans une carte --- */
.hrt-text-block {
  font-size: 13px;
  color: var(--brand-text-default);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}
.hrt-empty-text {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin: 0;
  font-style: italic;
}
.hrt-link-inline {
  color: var(--brand-primary);
  font-weight: 600;
}

/* --- Grille de contacts : avatar initiales + coordonnées --- */
.hrt-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.hrt-contact-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--brand-bg-app);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
}
.hrt-contact-card.is-inactive {
  background: var(--brand-danger-soft);
  border-color: var(--brand-danger);
  opacity: .85;
}
.hrt-contact-card.is-inactive .hrt-contact-avatar { background: var(--brand-text-muted); }
.hrt-contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.hrt-contact-info {
  flex: 1;
  min-width: 0;
}
.hrt-contact-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-default);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrt-contact-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brand-text-muted);
  margin-bottom: 4px;
}
.hrt-contact-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--brand-text-muted);
  margin-top: 2px;
}
.hrt-contact-meta i {
  font-size: 12px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.hrt-contact-meta a {
  color: var(--brand-primary);
  text-decoration: none;
}

/* --- Liste d'activités : une ligne par élément, libellé puis meta --- */
.hrt-activity-list {
  display: flex;
  flex-direction: column;
}
.hrt-activity-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--brand-border);
  transition: background var(--brand-transition);
}
.hrt-activity-row:last-child { border-bottom: none; }
.hrt-activity-row:hover { background: var(--brand-bg-app); }
.hrt-activity-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hrt-activity-ref {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-default);
  font-family: var(--brand-font-mono);
}
.hrt-activity-desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-text-default);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hrt-activity-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--brand-text-muted);
}
.hrt-activity-meta strong {
  color: var(--brand-text-default);
  font-weight: 700;
}

/* --- Utilitaires de couleur brand --- */
.hrt-text-danger { color: var(--brand-danger) !important; }
.hrt-text-warning { color: var(--brand-warning) !important; }
.hrt-text-muted { color: var(--brand-text-muted) !important; }

/* --- Responsive : la grille 2 colonnes s'empile, les tranches passent à 2 --- */
@media (max-width: 991px) {
  .hrt-bucket-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .hrt-split-grid { grid-template-columns: 1fr; }
  .hrt-split-main {
    border-right: none;
    border-bottom: 1px solid var(--brand-border);
    padding: 14px 14px 12px;
  }
  .hrt-split-side { padding: 12px 14px; }
  .hrt-panel-header,
  .hrt-card-header { flex-wrap: wrap; }
  .hrt-fact-row { gap: 8px; }
}

/* --- Hero sans habillage : le titre de page seul, sans carte ni ombre --- */
.page-hero-hrt--plain {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 0 4px 0;
}

/* --- Badge miniature aligné sur une ligne de texte --- */
.badge-hrt--xs {
  font-size: 9px;
  vertical-align: middle;
}

/* --- Tuile KPI compacte : rangée de chiffres clés sous un en-tête de fiche --- */
.hrt-kpi-tile {
  background: var(--brand-bg-surface);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 155px;
  flex: 1 1 155px;
}
.hrt-kpi-tile.is-danger {
  background: var(--brand-danger-soft);
  border: 1.5px solid var(--brand-danger);
  padding: 14px 18px;
  min-width: 175px;
  flex: 1 1 175px;
}
.hrt-kpi-tile-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
}
.hrt-kpi-tile-label i { font-size: 12px; }
.hrt-kpi-tile.is-danger .hrt-kpi-tile-label { color: var(--brand-danger); }
.hrt-kpi-tile-value {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-text-default);
}
.hrt-kpi-tile-value.is-lead {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.hrt-kpi-tile-value.is-muted { color: var(--brand-text-muted); }
.hrt-kpi-tile.is-danger .hrt-kpi-tile-value { color: var(--brand-danger); }
.hrt-kpi-tile.is-danger .hrt-kpi-tile-value.is-lead { font-size: 22px; }
.hrt-kpi-tile-sub {
  font-size: 11px;
  color: var(--brand-text-muted);
  margin-top: 3px;
  line-height: 1.45;
}
.hrt-kpi-tile.is-danger .hrt-kpi-tile-sub {
  color: var(--brand-danger);
  margin-top: 4px;
  opacity: .85;
}

/* --- Listing : conteneur des boutons d'action d'une ligne, sortis des styles en ligne de la classe --- */
.table-hrt td.col-actions {
  white-space: nowrap;
}
.table-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* --- Sentinelle du lazy load : invisible, observee par IntersectionObserver --- */
.listing-lazy-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
}

/* ============================================================
   24. LISTE MEDIA - vignette + informations + actions de ligne
   Liste d'éléments visuels (photos d'intervention, pièces
   jointes) où la vignette sert à reconnaître le fichier et non
   à l'examiner. Réutilisable partout ou une liste doit montrer
   un aperçu plutôt qu'un nom de fichier.
   ============================================================ */
.hrt-media-list {
  display: flex;
  flex-direction: column;
}

.hrt-media-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--brand-border);
}
.hrt-media-row:first-child { padding-top: 0; }
.hrt-media-row:last-child { border-bottom: none; }

/* --- Vignette carrée : accueille portrait comme paysage sans rognage --- */
.hrt-media-thumb {
  width: 190px;
  height: 190px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background: var(--brand-bg-app);
  overflow: hidden;
}
.hrt-media-thumb i {
  font-size: 40px;
  color: var(--brand-text-muted);
}
.hrt-media-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hrt-media-info {
  flex: 1;
  min-width: 0;
}
.hrt-media-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-default);
}
.hrt-media-meta {
  font-size: 12px;
  color: var(--brand-text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hrt-media-coord {
  font-size: 12px;
  font-family: var(--brand-font-mono);
  color: var(--brand-text-muted);
  margin-top: 3px;
}
.hrt-media-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* --- Actions revelees au survol de là ligne, comme la colonne Actions des listings --- */
.hrt-media-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--brand-transition);
}
.hrt-media-row:hover .hrt-media-actions,
.hrt-media-row:focus-within .hrt-media-actions {
  opacity: 1;
}

@media (max-width: 575.98px) {
  .hrt-media-actions { opacity: 1; }
}

/* ============================================================
   MAITRE / DETAIL - liste de cartes selectionnables a gauche,
   contenu de la selection a droite. Generique : utilisable pour
   toute navigation par carte (recurrences, lots, periodes...).
   ============================================================ */
.hrt-master-detail {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.hrt-master-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* Les deux volets portent leur en-tete avec .hrt-section-head + .form-subcard-title-hrt */
.hrt-detail-pane { min-width: 0; }

/* --- Carte selectionnable : bouton pleine largeur, filet lateral d'etat --- */
.hrt-select-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--brand-bg-surface);
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--brand-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--brand-transition), border-color var(--brand-transition);
}
.hrt-select-card:hover {
  border-color: var(--brand-primary);
  border-left-color: var(--brand-primary);
}
/* L'anneau porte la selection : il reste visible meme quand un etat colore prend le fond */
.hrt-select-card.is-active {
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary);
  border-left-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary);
}
.hrt-select-card.is-stopped {
  border-left-color: var(--brand-danger);
  background: var(--brand-danger-soft);
}
.hrt-select-card.is-stopped.is-active {
  border-color: var(--brand-danger);
  box-shadow: 0 0 0 1px var(--brand-danger);
}
.hrt-select-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hrt-select-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand-text-muted);
  white-space: nowrap;
}
.hrt-select-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text-default);
  margin-bottom: 6px;
}
.hrt-select-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--brand-text-muted);
  margin-top: 3px;
  min-width: 0;
}
.hrt-select-card-meta i {
  font-size: 11px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.hrt-select-card-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Sous 992px : les cartes passent en bandeau defilant au-dessus du detail --- */
@media (max-width: 991.98px) {
  .hrt-master-detail { grid-template-columns: minmax(0, 1fr); }
  .hrt-master-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .hrt-select-card {
    min-width: 230px;
    flex-shrink: 0;
  }
}
/* --- En-tete de page sans habillage de carte : le titre porte seul la hierarchie. Remplace le
   style="background:none;border:none;box-shadow:none;padding:0 0 4px 0" repete en dur sur les heros --- */
.hrt-hero-plain {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 0 4px 0;
}