/* ============================================================================
   EJMEL AUTO — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Feuille de style unique et globale pour toute l'application.
   Objectif : un rendu moderne, simple, intuitif et professionnel, cohérent
   d'un écran à l'autre.

   PRINCIPES
   - 100 % non-cassant : toutes les classes sont préfixées « ej- » et ne
     remplacent JAMAIS une classe Bootstrap existante. Les anciens écrans
     continuent de fonctionner ; on adopte le nouveau look écran par écran.
   - Tout est piloté par des « jetons de design » (les variables --ej-* dans
     :root). Pour changer une couleur, une police, un arrondi dans TOUTE l'app,
     on modifie UNE seule ligne ici.

   COMMENT L'UTILISER
   1. Charger ce fichier APRÈS Bootstrap dans le template de base :
        <link rel="stylesheet"
              href="{% static 'core/assets/css/ej-design-system.css' %}">
   2. Mettre la classe « ej-page » sur le <body> (ou un conteneur) pour activer
      le fond et la police du système.
   3. Construire les écrans avec les composants ci-dessous (ej-navbar, ej-kpi,
      ej-table, ej-btn, ej-pill, etc.).

   SOMMAIRE
   01. Police
   02. Jetons de design (couleurs, typo, espacements, ombres…)
   03. Base / page
   04. Barre de navigation haute (navbar)
   05. Barre de sous-modules / onglets
   06. Fil d'Ariane + en-tête de page
   07. Boutons
   08. Champs de formulaire
   09. Interrupteur (toggle)
   10. Barre d'outils / filtres
   11. Cartes KPI (indicateurs)
   12. Cartes génériques
   13. Tableaux de données
   14. Avatars
   15. Pastilles de statut (badges)
   16. Pagination
   17. Montants / devise (MRU)
   18. État vide
   19. Utilitaires
   20. Responsive (mobile / tablette)
   ========================================================================== */


/* ============================================================
   01. POLICE
   On utilise Inter (moderne, très lisible). Repli automatique sur les polices
   système si Internet est lent ou indisponible — aucun écran ne reste sans
   police correcte.
   ============================================================ */
/* Noto Sans Arabic (charte 19/10/2026) : relais pour les noms saisis en arabe ;
   Google Fonts découpe la police par plage Unicode, elle ne se télécharge
   que si une page affiche réellement de l'arabe. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+Arabic:wght@400;600;700&display=swap');


/* ============================================================
   02. JETONS DE DESIGN  (la « source de vérité » de l'identité visuelle)
   Système « Comptoir » : bleu pétrole de la marque = actions ; ocre = indicateur
   (onglet actif, liseré KPI). Neutres froids, contraste fort. Couleurs en HEX
   (compatibles avec les vieilles tablettes des centres, contrairement à oklch).
   ============================================================ */
:root {
  /* --- Couleur de marque (bleu pétrole Ejmel) --- */
  --ej-primary:        #20568b;   /* bleu pétrole (boutons, liens, actions) */
  --ej-primary-600:    #1b4a75;   /* survol */
  --ej-primary-700:    #163d61;   /* clic / actif */
  --ej-primary-soft:   #eef3f8;   /* fond doux (icônes, sélection) */
  --ej-primary-softer: #f6f9fc;
  --ej-primary-line:   #cfdae6;   /* bordure douce sur fond accent */

  /* --- Ocre : INDICATEUR uniquement (onglet actif, liseré KPI) --- */
  --ej-ocre:           #c07f2b;
  --ej-ocre-soft:      #f8f0dd;

  /* --- Neutres froids (fonds, textes, bordures) --- */
  --ej-bg:            #fafbfc;   /* fond de page presque blanc (spec Comptoir --bg) : le delta de 2% avec les cartes #fff les fait tenir — un fond blanc pur les fait « flotter » */
  --ej-nav-bg:        #163d61;   /* barre du haut bleu pétrole foncé (fiche ADN), logo blanc dessus */
  --ej-surface:       #ffffff;   /* cartes, barres, tableaux */
  --ej-surface-2:     #eef1f5;   /* fond d'en-tête de tableau, zones secondaires, hover de ligne — foncé d'un cran le 19/10/2026 (était #f4f6f8, invisible sur une caisse au reflet) */
  --ej-border:        #dde2e8;   /* bordures fines */
  --ej-border-2:      #e3e8ee;   /* filet entre deux lignes de tableau — foncé d'un cran le 19/10/2026 (était #eef1f5 : écart de clarté 2,8 sous reflet, invisible ; maintenant 4,6) */
  --ej-border-strong: #cdd5df;   /* bordures de champs */
  --ej-text:          #101720;   /* titres, texte fort (encre) */
  --ej-text-body:     #2b333d;   /* texte courant */
  --ej-muted:         #525b67;   /* texte secondaire / labels */
  --ej-muted-2:       #687280;   /* texte tertiaire / placeholders — charte 19/10/2026 : #7f8894 (3,6:1) trop pâle, #687280 = 4,9:1 */

  /* --- Couleurs sémantiques (statuts) — jamais sur des boutons --- */
  --ej-success:       #2e7d4f;  --ej-success-text: #266b43;  --ej-success-soft: #e7f4ec;
  --ej-warning:       #a06a1b;  --ej-warning-text: #8a5a14;  --ej-warning-soft: #f8f0dd;
  --ej-danger:        #b3403a;  --ej-danger-text:  #9c352f;  --ej-danger-soft:  #f8e8e6;
  --ej-info:          #20568b;  --ej-info-text:    #1b4a75;  --ej-info-soft:    #eef3f8;
  --ej-purple:        #6a5acd;  --ej-purple-text:  #574abd;  --ej-purple-soft:  #ecebfa;

  /* --- Palette d'avatars (initiales) --- */
  --ej-av-blue:   #20568b;  --ej-av-green:  #2e7d4f;  --ej-av-amber: #c07f2b;
  --ej-av-purple: #6a5acd;  --ej-av-teal:   #157f7f;  --ej-av-red:   #b3403a;
  --ej-av-gray:   #525b67;

  /* --- Typographie : Figtree (interface) + IBM Plex Mono (références) --- */
  --ej-font: 'Figtree', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ej-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* CHARTE 19/10/2026 (validée par Mohamed) : QUATRE tailles de texte + une exception.
       25 = titre de page, gros chiffre · 17 = titre de bloc · 15 = texte courant ·
       13 = secondaire, le plus petit autorisé · 12 = UNIQUEMENT libellés en capitales.
     md / xl / 3xl restent des alias (anciens noms) pour ne casser aucun écran. */
  --ej-fs-xs:   12px;   /* libellés en CAPITALES seulement */
  --ej-fs-sm:   13px;
  --ej-fs-base: 15px;
  --ej-fs-md:   15px;   /* alias de base (était 16) */
  --ej-fs-lg:   17px;
  --ej-fs-xl:   17px;   /* alias de lg (était 20) */
  --ej-fs-2xl:  25px;
  --ej-fs-3xl:  25px;   /* alias de 2xl (était 27) */
  --ej-fw-regular: 400;
  --ej-fw-medium:  500;
  --ej-fw-semibold:600;
  --ej-fw-bold:    700;
  --ej-fw-black:   800;

  /* --- Espacements (échelle de 4px) --- */
  --ej-sp-1: 4px;   --ej-sp-2: 8px;   --ej-sp-3: 12px;  --ej-sp-4: 16px;
  --ej-sp-5: 20px;  --ej-sp-6: 24px;  --ej-sp-8: 32px;  --ej-sp-10: 40px;

  /* --- Arrondis (géométrie Comptoir : 11 / 9) --- */
  --ej-r-sm:   8px;
  --ej-r-md:   9px;
  --ej-r-lg:   11px;
  --ej-r-xl:   14px;
  --ej-r-pill: 999px;

  /* --- Ombres (élévation, discrètes) --- */
  --ej-shadow-xs: 0 1px 2px rgba(16, 23, 32, .05);
  --ej-shadow-sm: 0 1px 2px rgba(16, 23, 32, .05);
  --ej-shadow-md: 0 6px 20px rgba(16, 23, 32, .07);
  --ej-shadow-lg: 0 24px 60px rgba(16, 23, 32, .14);

  /* --- Transitions --- */
  --ej-t-fast: 120ms ease;
  --ej-t:      180ms ease;

  /* --- Mise en page --- */
  --ej-navbar-h: 64px;
  --ej-content-max: 1760px;
}


/* ============================================================
   03. BASE / PAGE
   « ej-page » s'applique au <body> (ou à un conteneur global) pour activer
   le fond et la police. On ne touche PAS au <body> par défaut → non-cassant.
   ============================================================ */
.ej-page {
  background: var(--ej-bg);
  color: var(--ej-text-body);
  font-family: var(--ej-font);
  font-size: var(--ej-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ej-page * { box-sizing: border-box; }

/* Conteneur centré pour le contenu des pages */
.ej-container {
  width: 100%;
  max-width: var(--ej-content-max);
  margin: 0 auto;
  padding: var(--ej-sp-6) var(--ej-sp-6) var(--ej-sp-10);
}

.ej-h1 { font-size: var(--ej-fs-2xl); font-weight: var(--ej-fw-bold);    color: var(--ej-text); margin: 0; letter-spacing: -.02em; }
.ej-h2 { font-size: var(--ej-fs-xl);  font-weight: var(--ej-fw-semibold);color: var(--ej-text); margin: 0; }
.ej-h3 { font-size: var(--ej-fs-lg);  font-weight: var(--ej-fw-semibold);color: var(--ej-text); margin: 0; }


/* ============================================================
   04. BARRE DE NAVIGATION HAUTE (navbar)
   Reprend l'identité actuelle (fond #0060c8, liens blancs).
   ============================================================ */
.ej-navbar {
  display: flex;
  align-items: center;
  gap: var(--ej-sp-6);
  height: var(--ej-navbar-h);
  padding: 0 var(--ej-sp-6);
  background: var(--ej-primary);
  color: #fff;
  box-shadow: var(--ej-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.ej-navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--ej-sp-2);
  font-size: var(--ej-fs-lg);
  font-weight: var(--ej-fw-bold);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.ej-navbar__brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--ej-r-md);
  background: rgba(255, 255, 255, .16);
  font-size: 18px;
}

/* Liste de liens */
.ej-nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ej-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ej-sp-2);
  height: 38px;
  padding: 0 var(--ej-sp-4);
  border-radius: var(--ej-r-md);
  color: rgba(255, 255, 255, .88);
  font-size: var(--ej-fs-md);
  font-weight: var(--ej-fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ej-t-fast), color var(--ej-t-fast);
  cursor: pointer;
}
.ej-nav__link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ej-nav__link.is-active,
.ej-nav__link[aria-current="page"] { background: rgba(255, 255, 255, .22); color: #fff; }
.ej-nav__caret { font-size: 10px; opacity: .8; }

/* Pousse les éléments suivants à droite */
.ej-nav--right { margin-left: auto; }

/* Chip utilisateur (à droite) */
.ej-user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ej-sp-3);
  padding: 5px 12px 5px 6px;
  border-radius: var(--ej-r-pill);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background var(--ej-t-fast);
}
.ej-user-chip:hover { background: rgba(255, 255, 255, .22); }
.ej-user-chip__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--ej-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--ej-fw-bold); font-size: var(--ej-fs-sm);
}
.ej-user-chip__name { font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-semibold); line-height: 1.1; }
.ej-user-chip__role { font-size: var(--ej-fs-sm); opacity: .85; line-height: 1.1; }


/* ============================================================
   05. BARRE DE SOUS-MODULES / ONGLETS
   Pour la navigation secondaire d'un module (ex : RH > Employés / Présences…)
   ============================================================ */
.ej-subnav {
  display: flex;
  align-items: center;
  gap: var(--ej-sp-1);
  padding: var(--ej-sp-2) var(--ej-sp-6);
  background: var(--ej-surface);
  border-bottom: 1px solid var(--ej-border);
  overflow-x: auto;
}
.ej-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ej-sp-2);
  padding: var(--ej-sp-2) var(--ej-sp-4);
  border-radius: var(--ej-r-md);
  color: var(--ej-muted);
  font-size: var(--ej-fs-md);
  font-weight: var(--ej-fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ej-t-fast), color var(--ej-t-fast);
  cursor: pointer;
}
.ej-tab:hover { background: var(--ej-surface-2); color: var(--ej-text); }
.ej-tab.is-active { background: var(--ej-primary-soft); color: var(--ej-primary); font-weight: var(--ej-fw-semibold); }


/* ============================================================
   06. FIL D'ARIANE + EN-TÊTE DE PAGE
   ============================================================ */
.ej-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ej-sp-2);
  font-size: var(--ej-fs-sm);
  color: var(--ej-muted);
  margin-bottom: var(--ej-sp-2);
}
.ej-breadcrumb a { color: var(--ej-muted); text-decoration: none; }
.ej-breadcrumb a:hover { color: var(--ej-primary); }
.ej-breadcrumb__sep { opacity: .5; }
.ej-breadcrumb__current { color: var(--ej-text); font-weight: var(--ej-fw-medium); }
/* Le chevron entre deux niveaux était réglé À LA MAIN dans 80 gabarits
   (style="font-size:10px"), et les liens 12 fois de plus. La règle appartient
   au composant : elle est ici une fois pour toutes (chantier du 04/08/2026). */
.ej-breadcrumb i { font-size: 10px; }

.ej-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ej-sp-4);
  margin-bottom: var(--ej-sp-6);
  flex-wrap: wrap;
}
.ej-page-title { font-size: var(--ej-fs-3xl); font-weight: var(--ej-fw-bold); color: var(--ej-text); margin: 0 0 4px; letter-spacing: -.02em; }
.ej-page-subtitle { font-size: var(--ej-fs-md); color: var(--ej-muted); margin: 0; }

/* Badge d'accès / contexte (ex : « Accès RH Manager · Admin ») */
.ej-access-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ej-sp-2);
  padding: var(--ej-sp-2) var(--ej-sp-4);
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-pill);
  font-size: var(--ej-fs-sm);
  color: var(--ej-muted);
  box-shadow: var(--ej-shadow-xs);
}


/* ============================================================
   07. BOUTONS
   ============================================================ */
.ej-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ej-sp-2);
  height: 42px;
  padding: 0 var(--ej-sp-5);
  border: 1px solid transparent;
  border-radius: var(--ej-r-md);
  font-family: var(--ej-font);
  font-size: var(--ej-fs-md);
  font-weight: var(--ej-fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ej-t-fast), border-color var(--ej-t-fast), box-shadow var(--ej-t-fast), transform var(--ej-t-fast);
  user-select: none;
}
.ej-btn:active { transform: translateY(1px); }
.ej-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ej-primary-soft); }
.ej-btn:disabled, .ej-btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Primaire (action principale) */
.ej-btn--primary { background: var(--ej-primary); color: #fff; box-shadow: var(--ej-shadow-sm); }
.ej-btn--primary:hover { background: var(--ej-primary-600); }
.ej-btn--primary:active { background: var(--ej-primary-700); }

/* Secondaire (contour) */
.ej-btn--secondary { background: var(--ej-surface); color: var(--ej-text); border-color: var(--ej-border-strong); }
.ej-btn--secondary:hover { background: var(--ej-surface-2); border-color: var(--ej-muted-2); }

/* Fantôme (discret) */
.ej-btn--ghost { background: transparent; color: var(--ej-text-body); }
.ej-btn--ghost:hover { background: var(--ej-surface-2); }

/* Danger (suppression) */
.ej-btn--danger { background: var(--ej-danger); color: #fff; }
.ej-btn--danger:hover { background: var(--ej-danger-text); }

/* Succès (validation) */
.ej-btn--success { background: var(--ej-success); color: #fff; }
.ej-btn--success:hover { background: var(--ej-success-text); }

/* Tailles */
.ej-btn--sm { height: 34px; padding: 0 var(--ej-sp-3); font-size: var(--ej-fs-sm); }
.ej-btn--lg { height: 48px; padding: 0 var(--ej-sp-6); font-size: var(--ej-fs-lg); }
.ej-btn--block { width: 100%; }

/* Bouton icône seul (rond/carré) */
.ej-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-md);
  background: var(--ej-surface);
  color: var(--ej-muted);
  cursor: pointer;
  transition: background var(--ej-t-fast), color var(--ej-t-fast), border-color var(--ej-t-fast);
}
.ej-btn-icon:hover { background: var(--ej-primary-soft); color: var(--ej-primary); border-color: var(--ej-primary-soft); }
.ej-btn-icon--danger:hover { background: var(--ej-danger-soft); color: var(--ej-danger); border-color: var(--ej-danger-soft); }

/* Rangée de boutons d'action (ex. tableau de bord) */
.ej-actions { display: flex; flex-wrap: wrap; gap: var(--ej-sp-3); }


/* ============================================================
   08. CHAMPS DE FORMULAIRE
   ============================================================ */
.ej-field { display: flex; flex-direction: column; gap: 6px; }
.ej-label { font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-semibold); color: var(--ej-text); }
.ej-label__req { color: var(--ej-danger); }

.ej-input, .ej-select, .ej-textarea {
  width: 100%;
  height: 42px;
  padding: 0 var(--ej-sp-4);
  background: var(--ej-surface);
  border: 1px solid var(--ej-border-strong);
  border-radius: var(--ej-r-md);
  font-family: var(--ej-font);
  font-size: var(--ej-fs-md);
  color: var(--ej-text);
  transition: border-color var(--ej-t-fast), box-shadow var(--ej-t-fast);
  appearance: none;
}
.ej-textarea { height: auto; min-height: 96px; padding: var(--ej-sp-3) var(--ej-sp-4); resize: vertical; }
.ej-input::placeholder, .ej-textarea::placeholder { color: var(--ej-muted-2); }
.ej-input:hover, .ej-select:hover, .ej-textarea:hover { border-color: var(--ej-muted-2); }
.ej-input:focus, .ej-select:focus, .ej-textarea:focus {
  outline: none;
  border-color: var(--ej-primary);
  box-shadow: 0 0 0 3px var(--ej-primary-soft);
}
.ej-input:disabled, .ej-select:disabled { background: var(--ej-surface-2); color: var(--ej-muted); cursor: not-allowed; }

/* Sélecteur : chevron */
.ej-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2376849b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ej-sp-4) center;
  padding-right: var(--ej-sp-8);
  cursor: pointer;
}

/* Champ de recherche (avec icône loupe) */
.ej-search { position: relative; }
.ej-search .ej-input { padding-left: var(--ej-sp-8); }
.ej-search__icon {
  position: absolute;
  left: var(--ej-sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ej-muted-2);
  pointer-events: none;
}

/* États / aide */
.ej-help { font-size: var(--ej-fs-sm); color: var(--ej-muted); }
.ej-input--error { border-color: var(--ej-danger); }
.ej-input--error:focus { box-shadow: 0 0 0 3px var(--ej-danger-soft); }
.ej-help--error { color: var(--ej-danger-text); }


/* ============================================================
   09. INTERRUPTEUR (toggle on/off)
   ============================================================ */
.ej-switch { display: inline-flex; align-items: center; gap: var(--ej-sp-3); cursor: pointer; user-select: none; }
.ej-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ej-switch__track {
  position: relative;
  width: 42px; height: 24px;
  background: var(--ej-border-strong);
  border-radius: var(--ej-r-pill);
  transition: background var(--ej-t);
  flex: none;
}
.ej-switch__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--ej-shadow-sm);
  transition: transform var(--ej-t);
}
.ej-switch input:checked + .ej-switch__track { background: var(--ej-primary); }
.ej-switch input:checked + .ej-switch__track::after { transform: translateX(18px); }
.ej-switch input:focus-visible + .ej-switch__track { box-shadow: 0 0 0 3px var(--ej-primary-soft); }
.ej-switch__label { font-size: var(--ej-fs-md); color: var(--ej-text); font-weight: var(--ej-fw-medium); }


/* ============================================================
   10. BARRE D'OUTILS / FILTRES
   Conteneur blanc qui regroupe filtres, recherche et actions.
   ============================================================ */
.ej-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ej-sp-3);
  padding: var(--ej-sp-3);
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-lg);
  box-shadow: var(--ej-shadow-xs);
  flex-wrap: wrap;
}
.ej-toolbar__spacer { flex: 1 1 auto; }
.ej-toolbar .ej-select, .ej-toolbar .ej-input { height: 40px; }
.ej-toolbar .ej-search { min-width: 220px; flex: 1 1 220px; }


/* ============================================================
   11. CARTES KPI (indicateurs clés)
   ============================================================ */
.ej-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ej-sp-4);
  margin-bottom: var(--ej-sp-6);
}
/* 5 KPI = 5 colonnes sur UNE rangée (spec : jamais de carte orpheline seule sur une 2ᵉ rangée) */
.ej-kpi-grid--5 { grid-template-columns: repeat(5, 1fr); }
.ej-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ej-sp-2);
  padding: var(--ej-sp-5);
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  /* Liseré indicateur en HAUT (ocre = signature Comptoir) : un VRAI border-top qui court
     jusqu'aux coins arrondis — un ::before serait rogné par l'overflow avant le bord (écart spec n°5) */
  border-top: 2px solid var(--ej-ocre);
  border-radius: var(--ej-r-lg);
  box-shadow: var(--ej-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ej-t), transform var(--ej-t);
}
.ej-kpi:hover { box-shadow: var(--ej-shadow-md); transform: translateY(-1px); }
/* KPI « discret » (2ᵉ rang du cockpit) : pas de liseré ocre */
.ej-kpi--quiet { border-top-color: var(--ej-border); }
.ej-kpi__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ej-sp-3); }
.ej-kpi__label {
  font-size: var(--ej-fs-xs); color: var(--ej-muted); font-weight: var(--ej-fw-semibold);
  text-transform: uppercase; letter-spacing: .05em;
}
/* ADN v2 : plus de grosse tuile arrondie avec icône dans les KPI — le chiffre domine */
.ej-kpi__icon { display: none; }
.ej-kpi__value { font-size: var(--ej-fs-3xl); font-weight: var(--ej-fw-bold); color: var(--ej-text); line-height: 1.1; letter-spacing: -.02em; }
.ej-kpi__value small { font-size: var(--ej-fs-lg); font-weight: var(--ej-fw-semibold); color: var(--ej-muted); }
.ej-kpi__unit { font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-semibold); color: var(--ej-muted); margin-left: 4px; }
.ej-kpi__sub { font-size: var(--ej-fs-sm); color: var(--ej-muted); }
.ej-kpi__sub strong { color: var(--ej-text); }

/* Barre de progression dans une carte KPI */
.ej-kpi__progress { height: 6px; background: var(--ej-surface-2); border-radius: var(--ej-r-pill); overflow: hidden; margin-top: 2px; }
.ej-kpi__progress > span { display: block; height: 100%; background: var(--ej-success); border-radius: inherit; }

/* Variantes de couleur (liseré + icône) */
.ej-kpi--primary { border-top-color: var(--ej-primary); }
.ej-kpi--primary .ej-kpi__icon { background: var(--ej-primary-soft); color: var(--ej-primary); }
.ej-kpi--success { border-top-color: var(--ej-success); }
.ej-kpi--success .ej-kpi__icon { background: var(--ej-success-soft); color: var(--ej-success-text); }
.ej-kpi--success .ej-kpi__progress > span { background: var(--ej-success); }
.ej-kpi--warning { border-top-color: var(--ej-warning); }
.ej-kpi--warning .ej-kpi__icon { background: var(--ej-warning-soft); color: var(--ej-warning-text); }
.ej-kpi--danger { border-top-color: var(--ej-danger); }
.ej-kpi--danger .ej-kpi__icon { background: var(--ej-danger-soft); color: var(--ej-danger-text); }

/* Variation de valeur (hausse/baisse) */
.ej-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-semibold); }
.ej-trend--up { color: var(--ej-success-text); }
.ej-trend--down { color: var(--ej-danger-text); }


/* ============================================================
   12. CARTES GÉNÉRIQUES
   ============================================================ */
.ej-card {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-lg);
  box-shadow: var(--ej-shadow-sm);
  overflow: hidden;
}
/* Tête de bloc (fiche ADN) : liseré pétrole à gauche + titre en petites capitales,
   nettement distincte des lignes de données ; l'action éventuelle reste à droite */
.ej-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ej-sp-3);
  padding: var(--ej-sp-4) var(--ej-sp-5);
  border-bottom: 1px solid var(--ej-border);
  border-left: 3px solid var(--ej-primary);
}
.ej-card__title {
  font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-bold); color: var(--ej-text);
  text-transform: uppercase; letter-spacing: .05em; margin: 0;
}
/* Les tuiles d'icônes rondes dans les têtes n'existent plus dans l'ADN v2 */
.ej-card__header .ej-icon-chip { display: none; }
.ej-card__body { padding: var(--ej-sp-5); }


/* ============================================================
   13. TABLEAUX DE DONNÉES
   ============================================================ */
.ej-table-wrap {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-lg);
  box-shadow: var(--ej-shadow-sm);
  /* Un tableau plus large que la carte défile DANS la carte (desktop compris) au lieu de déborder de la page */
  overflow-x: auto;
}
/* Dans une carte, le tableau ne forme plus un « bloc dans le bloc » :
   UNE seule surface (maquette liste des services) — la séparation se fait
   par l'en-tête gris du tableau, pas par une double bordure. */
.ej-card .ej-table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--ej-border);
}
.ej-table { width: 100%; border-collapse: collapse; font-size: var(--ej-fs-base); }
.ej-table thead th {
  text-align: left;
  /* 14px horizontal (au lieu de 20) : un tableau de 10 colonnes doit TENIR à l'écran
     sans défiler — le défilement dans la carte n'est que la roue de secours */
  padding: var(--ej-sp-3) 14px;
  background: var(--ej-surface-2);
  border-bottom: 1px solid var(--ej-border);
  font-size: var(--ej-fs-xs);
  font-weight: var(--ej-fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ej-muted);
  white-space: nowrap;
}
.ej-table tbody td {
  /* Densité outil métier (spec --rowpy:15px → lignes ~52-56px, 10-12 lignes par écran) ;
     filet de ligne en --ej-border-2 (spec --line2), la bordure pleine reste pour la carte.
     nowrap comme la spec : une cellule ne replie JAMAIS (ligne haute) — un tableau trop
     large défile DANS sa carte (.ej-table-wrap est en overflow-x:auto). */
  padding: 15px 14px;
  border-bottom: 1px solid var(--ej-border-2);
  color: var(--ej-text-body);
  vertical-align: middle;
  white-space: nowrap;
}
.ej-table tbody tr:last-child td { border-bottom: none; }
/* Ligne de total (tfoot) : mêmes retraits que le corps + séparateur (sinon padding navigateur ≈ 1px → totaux désalignés) */
.ej-table tfoot td {
  padding: var(--ej-sp-4) 14px;
  border-top: 1px solid var(--ej-border);
  background: var(--ej-surface-2);
  font-weight: var(--ej-fw-bold);
  color: var(--ej-text);
}
.ej-table tbody tr { transition: background var(--ej-t-fast); }
/* Spec : pas de zébrage — hover gris neutre --surface2 uniquement */
.ej-table tbody tr:hover { background: var(--ej-surface-2); }
.ej-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Les en-têtes de colonnes chiffrées doivent aussi être alignés à droite (sinon l'en-tête reste à gauche) */
.ej-table thead th.ej-table__num { text-align: right; }
.ej-table__actions { display: inline-flex; gap: 6px; }
/* Le bouton « Actions ▾ » est TOUJOURS au même endroit : collé au bord droit de la ligne.
   width:1% + nowrap = la colonne se réduit à son contenu, la place restante va aux données. */
.ej-table td.ej-td-actions { width: 1%; white-space: nowrap; text-align: right; }
/* Chrome 89 (caisses SUNMI T2 et D2mini, vu dans les journaux de la prod le
   19/10/2026) ne connaît pas :has() et jette TOUTE la règle qui le contient :
   chaque :has() reste seul dans sa règle, doublé par une classe que le petit
   script « compat » de base.html pose sur la cellule / la carte. */
.ej-table td:has(> .ej-table__actions) { width: 1%; white-space: nowrap; text-align: right; }
/* Menu « Actions ▾ » ouvert : le tableau ET la carte doivent le laisser déborder,
   sinon leur overflow le rogne sur les listes courtes (1 à 3 lignes).
   Refermé, on retrouve le rognage normal des coins arrondis. */
.ej-table-wrap.ej-dd-open, .ej-card.ej-dd-open { overflow: visible; }
.ej-table-wrap:has(.dropdown-menu.show) { overflow: visible; }
.ej-card:has(.dropdown-menu.show) { overflow: visible; }

/* Affectations d'un paiement : quelles factures il a réglées */
.ej-aff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ej-aff__lead { font-size: var(--ej-fs-sm); color: var(--ej-muted); }
.ej-aff__lead i { font-size: 10px; margin-right: 3px; }
.ej-aff__chip {
  display: inline-flex; align-items: center;
  font-size: var(--ej-fs-sm); color: var(--ej-text-body, #38445c);
  background: var(--ej-primary-soft, #e7f0fb);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.ej-aff__chip b { font-weight: 700; color: var(--ej-primary, #0060c8); margin-left: 2px; }
/* Résumé dépliable quand un paiement règle beaucoup de factures */
.ej-aff-more { margin-top: 6px; }
.ej-aff-more > summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: var(--ej-fs-sm); color: var(--ej-primary, #0060c8); font-weight: 600;
  list-style: none; user-select: none;
}
.ej-aff-more > summary::-webkit-details-marker { display: none; }
.ej-aff-more > summary i { font-size: 10px; }
.ej-aff-more > summary::after { content: "▸"; font-size: 9px; margin-left: 2px; }
.ej-aff-more[open] > summary::after { content: "▾"; }
.ej-aff-more[open] > summary { margin-bottom: 4px; }

/* Pied de tableau (résumé + pagination) */
.ej-table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ej-sp-3);
  padding: var(--ej-sp-3) var(--ej-sp-5);
  background: var(--ej-surface);
  border-top: 1px solid var(--ej-border);
  font-size: var(--ej-fs-sm); color: var(--ej-muted);
  flex-wrap: wrap;
}

/* Cellule « utilisateur » (avatar + nom + sous-texte) */
.ej-cell-user { display: flex; align-items: center; gap: var(--ej-sp-3); }
.ej-cell-user__name { font-weight: var(--ej-fw-semibold); color: var(--ej-text); line-height: 1.2; }
.ej-cell-user__sub { font-size: var(--ej-fs-sm); color: var(--ej-muted); line-height: 1.2; }


/* ============================================================
   14. AVATARS (initiales colorées)
   ============================================================ */
.ej-avatar {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--ej-r-md);
  color: #fff;
  font-weight: var(--ej-fw-bold);
  font-size: var(--ej-fs-base);
  background: var(--ej-av-gray);
}
.ej-avatar--sm { width: 30px; height: 30px; font-size: var(--ej-fs-xs); border-radius: var(--ej-r-sm); }
.ej-avatar--lg { width: 52px; height: 52px; font-size: var(--ej-fs-lg); }
.ej-avatar--round { border-radius: 50%; }
.ej-avatar--blue   { background: var(--ej-av-blue); }
.ej-avatar--green  { background: var(--ej-av-green); }
.ej-avatar--amber  { background: var(--ej-av-amber); }
.ej-avatar--purple { background: var(--ej-av-purple); }
.ej-avatar--teal   { background: var(--ej-av-teal); }
.ej-avatar--red    { background: var(--ej-av-red); }
.ej-avatar--gray   { background: var(--ej-av-gray); }


/* ============================================================
   15. PASTILLES DE STATUT (badges)
   ============================================================ */
.ej-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ej-r-pill);
  font-size: var(--ej-fs-sm);   /* charte : 12 px = capitales seulement ; « Payée », « Non validée »… = 13 */
  font-weight: var(--ej-fw-semibold);
  white-space: nowrap;
  line-height: 1.4;
}
.ej-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ej-pill--success { background: var(--ej-success-soft); color: var(--ej-success-text); }
.ej-pill--warning { background: var(--ej-warning-soft); color: var(--ej-warning-text); }
.ej-pill--danger  { background: var(--ej-danger-soft);  color: var(--ej-danger-text); }
.ej-pill--info    { background: var(--ej-info-soft);    color: var(--ej-info-text); }
.ej-pill--purple  { background: var(--ej-purple-soft);  color: var(--ej-purple-text); }
.ej-pill--neutral { background: var(--ej-surface-2);    color: var(--ej-muted); }


/* ============================================================
   16. PAGINATION
   ============================================================ */
.ej-pagination { display: inline-flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ej-pagination li { list-style: none; margin: 0; }
.ej-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 var(--ej-sp-2);
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-md);
  background: var(--ej-surface);
  color: var(--ej-text-body);
  font-size: var(--ej-fs-sm);
  font-weight: var(--ej-fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ej-t-fast), color var(--ej-t-fast), border-color var(--ej-t-fast);
}
.ej-page-btn:hover { background: var(--ej-surface-2); border-color: var(--ej-muted-2); }
.ej-page-btn.is-active { background: var(--ej-primary); color: #fff; border-color: var(--ej-primary); }
.ej-page-btn:disabled,
.ej-page-btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }


/* ============================================================
   17. MONTANTS / DEVISE (MRU)
   ============================================================ */
.ej-amount { font-variant-numeric: tabular-nums; font-weight: var(--ej-fw-semibold); color: var(--ej-text); }
.ej-amount--lg { font-size: var(--ej-fs-xl); }
.ej-currency { font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-semibold); color: var(--ej-muted); margin-left: 3px; }
.ej-amount--pos { color: var(--ej-success-text); }
.ej-amount--neg { color: var(--ej-danger-text); }


/* ============================================================
   18. ÉTAT VIDE
   ============================================================ */
.ej-empty { text-align: center; padding: var(--ej-sp-10) var(--ej-sp-6); color: var(--ej-muted); }
.ej-empty__icon { font-size: 40px; color: var(--ej-muted-2); margin-bottom: var(--ej-sp-3); }
.ej-empty__title { font-size: var(--ej-fs-lg); font-weight: var(--ej-fw-semibold); color: var(--ej-text); margin: 0 0 4px; }


/* ============================================================
   19. UTILITAIRES (petits aides, préfixés pour ne rien casser)
   ============================================================ */
.ej-flex     { display: flex; }
.ej-flex-col { display: flex; flex-direction: column; }
.ej-items-center { align-items: center; }
.ej-justify-between { justify-content: space-between; }
.ej-gap-1 { gap: var(--ej-sp-1); } .ej-gap-2 { gap: var(--ej-sp-2); }
.ej-gap-3 { gap: var(--ej-sp-3); } .ej-gap-4 { gap: var(--ej-sp-4); }
.ej-gap-5 { gap: var(--ej-sp-5); } .ej-gap-6 { gap: var(--ej-sp-6); } .ej-gap-8 { gap: var(--ej-sp-8); }
.ej-mt-2 { margin-top: var(--ej-sp-2); } .ej-mt-4 { margin-top: var(--ej-sp-4); } .ej-mt-6 { margin-top: var(--ej-sp-6); }
.ej-mb-2 { margin-bottom: var(--ej-sp-2); } .ej-mb-4 { margin-bottom: var(--ej-sp-4); } .ej-mb-6 { margin-bottom: var(--ej-sp-6); }
.ej-ml-auto { margin-left: auto; }
.ej-w-full { width: 100%; }
/* ADN Comptoir : les cellules de liste ne se replient JAMAIS sur deux lignes
   (réfs, dates, badges) — le tableau défile horizontalement si besoin. */
.ej-nowrap { white-space: nowrap; }
.ej-text-muted { color: var(--ej-muted); }
/* Utilitaires réellement répétés dans les gabarits (relevé du 04/08/2026) —
   ajoutés là où le même style revenait des dizaines de fois à la main. */
.ej-text-muted-2 { color: var(--ej-muted-2); }
.ej-text-danger  { color: var(--ej-danger); }
.ej-text-warning { color: var(--ej-warning); }
.ej-text-success { color: var(--ej-success); }
.ej-mono         { font-family: var(--ej-mono); }
.ej-hidden       { display: none; }
/* Un formulaire réduit à un seul bouton, posé dans une cellule de tableau. */
.ej-form-inline  { display: inline; }
/* La ligne « aucun résultat » d'un tableau — 71 fois réglée à la main. */
.ej-table__empty { text-align: center; padding: 26px; }
.ej-text-end { text-align: right; }
.ej-text-center { text-align: center; }
.ej-fw-semibold { font-weight: var(--ej-fw-semibold); }
.ej-fw-bold { font-weight: var(--ej-fw-bold); }
.ej-nowrap { white-space: nowrap; }


/* ============================================================
   19b. LISTES MOBILES EN CARTES-LIGNES (ADN maquette « Mobile »)
   Desktop : tableau. Mobile : cartes-lignes (nom en gras,
   n°·heure·agence en petit, montant à droite, badge d'état).
   Utilisées via un conteneur .ej-list-dual qui porte les deux rendus.
   ============================================================ */
.ej-rowcards { display: none; }
.ej-rowcard {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ej-border-2);
  text-decoration: none;
}
.ej-rowcard:last-child { border-bottom: none; }
.ej-rowcard:active { background: var(--ej-primary-softer); }
.ej-rowcard__name { font-weight: var(--ej-fw-semibold); color: var(--ej-text); font-size: var(--ej-fs-base); line-height: 1.25; }
.ej-rowcard__meta { font-size: var(--ej-fs-sm); color: var(--ej-muted); margin-top: 3px; }
.ej-rowcard__meta .ej-ref { font-size: var(--ej-fs-sm); }
.ej-rowcard__right { flex: none; text-align: right; }
/* Le texte de gauche cède la place (nom long + bouton à droite : « Satisfaction »). */
.ej-rowcard > :first-child, .ej-rowcard__lien > :first-child { min-width: 0; }
.ej-rowcard__name { overflow-wrap: anywhere; }
.ej-rowcard__amount { font-weight: var(--ej-fw-bold); color: var(--ej-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ej-rowcard__right .ej-pill { margin-top: 5px; }
/* Carte avec barre d'actions (19/10/2026) : le corps reste un lien, le menu
   « Actions » vit dessous — un menu ne peut pas être DANS un lien. */
.ej-rowcard--actions { flex-direction: column; align-items: stretch; gap: 10px; }
.ej-rowcard__lien { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; text-decoration: none; color: inherit; }
.ej-rowcard__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Duo de KPI en tête de liste (Encaissé / En attente — ADN mobile) */
.ej-kpis-duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ej-sp-3);
  max-width: 560px;
  margin-bottom: var(--ej-sp-5);
}

/* Puces de filtre rapide (Aujourd'hui / Non validées / Mon agence) */
.ej-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 14px; }
.ej-chips .ej-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--ej-border); border-radius: 999px;
  background: var(--ej-surface); color: var(--ej-muted);
  font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-medium); text-decoration: none;
  white-space: nowrap;
}
.ej-chips .ej-chip:hover { border-color: var(--ej-border-strong); color: var(--ej-text); }
.ej-chips .ej-chip.is-active {
  background: var(--ej-primary-soft); border-color: var(--ej-primary-line);
  color: var(--ej-primary); font-weight: var(--ej-fw-semibold);
}

/* ============================================================
   20. RESPONSIVE — LES 4 PALIERS DE LA CHARTE (19/10/2026)
   Téléphone < 600 px · tablette 600–1023 · caisse SUNMI 1024–1439 · PC ≥ 1440.
   Seules formes autorisées : (max-width: 599.98px) · (max-width: 1023.98px) ·
   (max-width: 1439.98px) · (min-width: 600px) · (min-width: 1024px) ·
   (min-width: 1440px). Jamais la syntaxe (width >= …) : Chrome 89 des
   caisses SUNMI ne la comprend pas.
   ============================================================ */
@media (max-width: 1023.98px) {
  .ej-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599.98px) {
  .ej-container { padding: var(--ej-sp-4); }
  /* ADN mobile : KPI 2 par ligne (comme la maquette), cartes compactées */
  .ej-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--ej-sp-3); }
  .ej-kpi { padding: var(--ej-sp-4); }
  .ej-kpi__value { font-size: var(--ej-fs-2xl); }
  .ej-kpi__icon { width: 34px; height: 34px; font-size: 15px; }
  .ej-page-title { font-size: var(--ej-fs-2xl); }
  .ej-navbar { gap: var(--ej-sp-3); padding: 0 var(--ej-sp-4); }
  .ej-toolbar { align-items: stretch; }
  .ej-toolbar .ej-btn, .ej-toolbar .ej-select, .ej-toolbar .ej-search { width: 100%; }
  /* En-têtes de page : les groupes de boutons passent à la ligne sans déborder */
  .ej-page-header { flex-wrap: wrap; gap: var(--ej-sp-3); }
  .ej-page-header .ej-actions { flex-wrap: wrap; }
  /* Tableaux : défilement horizontal plutôt que casse de mise en page */
  .ej-table-wrap { overflow-x: auto; }
  .ej-table { min-width: 720px; }
  /* Listes à double rendu : sur mobile le tableau cède la place aux cartes-lignes */
  .ej-list-dual .ej-table-wrap { display: none; }
  .ej-list-dual .ej-rowcards { display: block; }
  .ej-chips { padding: 0 16px 12px; }
  /* Bouton « Nouvelle facture » pleine largeur sous le titre (ADN mobile) */
  .ej-page-header .ej-newbtn { width: 100%; justify-content: center; }
  .ej-kpis-duo { max-width: none; }
}

/* ============================================================
   21. TABLEAU DE BORD (accueil) — style maquette « Bonjour … »
   ============================================================ */
.ej-welcome { margin-bottom: var(--ej-sp-6); }
.ej-welcome__title { font-size: var(--ej-fs-3xl); font-weight: var(--ej-fw-bold); color: var(--ej-text); margin: 0; letter-spacing: -.02em; }
.ej-welcome__title span { color: var(--ej-primary); }
.ej-welcome__subtitle { font-size: var(--ej-fs-md); color: var(--ej-muted); margin: 4px 0 0; }

.ej-dash-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: var(--ej-sp-4); align-items: start; }
/* Sans le bloc Statistiques (réservé, 23/10/2026) : deux colonnes, pas de trou. */
.ej-dash-grid--2 { grid-template-columns: 1fr 1fr; }

/* Pastille d'icône (en-têtes de carte, lignes) */
.ej-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--ej-r-md); background: var(--ej-primary-soft); color: var(--ej-primary); font-size: 16px; }
.ej-icon-chip--green  { background: var(--ej-success-soft); color: var(--ej-success-text); }
.ej-icon-chip--amber  { background: var(--ej-warning-soft); color: var(--ej-warning-text); }
.ej-icon-chip--purple { background: var(--ej-purple-soft);  color: var(--ej-purple-text); }

/* Titre de carte avec pastille */
.ej-card__title { display: inline-flex; align-items: center; gap: var(--ej-sp-3); }

/* Tuiles d'action (Facturation) */
.ej-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ej-sp-3); }
.ej-tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--ej-sp-4);
  min-height: 104px; padding: var(--ej-sp-4);
  background: var(--ej-primary-softer);
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-lg);
  text-decoration: none; cursor: pointer; font-family: var(--ej-font); text-align: left;
  transition: box-shadow var(--ej-t), transform var(--ej-t);
}
.ej-tile:hover { box-shadow: var(--ej-shadow-md); transform: translateY(-1px); }
.ej-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ej-r-md); background: #fff; color: var(--ej-primary); font-size: 18px; }
.ej-tile__label { font-size: var(--ej-fs-md); font-weight: var(--ej-fw-semibold); color: var(--ej-text); }
.ej-tile--primary { background: var(--ej-primary); border-color: var(--ej-primary); }
.ej-tile--primary .ej-tile__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.ej-tile--primary .ej-tile__label { color: #fff; }
.ej-tile__badge { position: absolute; top: 10px; right: 10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ej-r-pill); background: var(--ej-danger); color: #fff; font-size: var(--ej-fs-sm); font-weight: var(--ej-fw-bold); display: inline-flex; align-items: center; justify-content: center; }

/* Petites pastilles compteur */
.ej-countpill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--ej-r-pill); background: var(--ej-surface-2); border: 1px solid var(--ej-border); font-size: var(--ej-fs-sm); color: var(--ej-muted); font-weight: var(--ej-fw-medium); text-decoration: none; }
.ej-countpill:hover { border-color: var(--ej-border-strong); }
.ej-countpill b { color: var(--ej-primary); font-weight: var(--ej-fw-bold); }

/* Lignes de liste (Statistiques & rapports) */
.ej-listrow { display: flex; align-items: center; gap: var(--ej-sp-3); width: 100%; margin-bottom: var(--ej-sp-2); padding: var(--ej-sp-3); background: var(--ej-surface); border: 1px solid var(--ej-border); border-radius: var(--ej-r-md); text-decoration: none; font-family: var(--ej-font); font-size: var(--ej-fs-md); text-align: left; cursor: pointer; transition: background var(--ej-t-fast), border-color var(--ej-t-fast); }
.ej-listrow:hover { background: var(--ej-surface-2); border-color: var(--ej-border-strong); }
.ej-listrow__label { flex: 1; font-weight: var(--ej-fw-semibold); color: var(--ej-text); }
.ej-listrow__chev { color: var(--ej-muted-2); font-size: 12px; }

/* Cartes de centre (colorées) */
.ej-center-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ej-sp-3); }
.ej-center-card { display: flex; flex-direction: column; gap: var(--ej-sp-3); padding: var(--ej-sp-4); border-radius: var(--ej-r-lg); background: var(--ej-primary-soft); border: 1px solid transparent; text-decoration: none; transition: box-shadow var(--ej-t), transform var(--ej-t); }
.ej-center-card:hover { box-shadow: var(--ej-shadow-md); transform: translateY(-1px); }
.ej-center-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ej-r-md); background: #fff; color: var(--ej-primary); font-size: 16px; }
.ej-center-card__name { font-weight: var(--ej-fw-bold); color: var(--ej-text); }
.ej-center-card__status { font-size: var(--ej-fs-sm); color: var(--ej-muted); display: inline-flex; align-items: center; gap: 6px; }
.ej-center-card__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ej-success); }
.ej-center-card--c1 { background: var(--ej-primary-soft); } .ej-center-card--c1 .ej-center-card__icon { color: var(--ej-primary); }
.ej-center-card--c2 { background: #e2f2f2; } .ej-center-card--c2 .ej-center-card__icon { color: var(--ej-av-teal); }
.ej-center-card--c3 { background: var(--ej-success-soft); } .ej-center-card--c3 .ej-center-card__icon { color: var(--ej-success); }
.ej-center-card--c4 { background: var(--ej-purple-soft); } .ej-center-card--c4 .ej-center-card__icon { color: var(--ej-purple); }
.ej-center-card--c5 { background: var(--ej-danger-soft); } .ej-center-card--c5 .ej-center-card__icon { color: var(--ej-danger); }

/* Responsive tableau de bord (téléphone / tablette) */
@media (max-width: 1023.98px) { .ej-dash-grid { grid-template-columns: 1fr; } }


/* ============================================================
   20 bis. COMPOSANTS BOOTSTRAP SUR L'ÉCHELLE DE LA CHARTE (19/10/2026)
   Les anciens écrans utilisent encore des composants Bootstrap, dimensionnés
   en rem (16 px et plus) : boutons, champs, pagination, titres h1-h6…
   Même correspondance que pour les écrans : ≥ 22 → 25 · 17-21 → 17 ·
   14-16,5 → 15 · ≤ 13,5 → 13. `:where(.ej-page)` garde une spécificité
   minimale : la moindre classe ej- (titre de carte, KPI…) passe devant.
   ============================================================ */
:where(.ej-page) h1, :where(.ej-page) .h1, :where(.ej-page) h2, :where(.ej-page) .h2,
:where(.ej-page) h3, :where(.ej-page) .h3, :where(.ej-page) h4, :where(.ej-page) .h4 { font-size: var(--ej-fs-2xl); }
:where(.ej-page) h5, :where(.ej-page) .h5, :where(.ej-page) .lead { font-size: var(--ej-fs-lg); }
:where(.ej-page) h6, :where(.ej-page) .h6 { font-size: var(--ej-fs-base); }
:where(.ej-page) .btn, :where(.ej-page) .form-control, :where(.ej-page) .form-select,
:where(.ej-page) .input-group-text, :where(.ej-page) .page-link { font-size: var(--ej-fs-base); }
:where(.ej-page) .btn-lg, :where(.ej-page) .form-control-lg, :where(.ej-page) .form-select-lg { font-size: var(--ej-fs-lg); }
:where(.ej-page) .btn-sm, :where(.ej-page) .form-control-sm, :where(.ej-page) .form-select-sm,
:where(.ej-page) .pagination-sm .page-link, :where(.ej-page) .badge, :where(.ej-page) .dropdown-header,
:where(.ej-page) small, :where(.ej-page) .small, :where(.ej-page) .form-text,
:where(.ej-page) .invalid-feedback, :where(.ej-page) .valid-feedback { font-size: var(--ej-fs-sm); }
:where(.ej-page) .display-1, :where(.ej-page) .display-2, :where(.ej-page) .display-3,
:where(.ej-page) .display-4, :where(.ej-page) .display-5, :where(.ej-page) .display-6 { font-size: var(--ej-fs-2xl); }
/* Listes de recherche (Select2 de django-autocomplete-light) : sa feuille
   impose min-width: 20em (300 px). Au téléphone la liste dépassait de sa
   carte et la coupait (« Nouvelle facture », 19/10/2026). On garde les
   300 px quand la place existe, jamais plus large que le conteneur. */
.ej-page .select2-container { min-width: min(20em, 100%); }
/* Bouton principal Bootstrap (fenêtres d'encaissement, anciens écrans) :
   le bleu pétrole de la charte au lieu du bleu vif #0d6efd de Bootstrap. */
:where(.ej-page) .btn-primary {
  --bs-btn-bg: var(--ej-primary); --bs-btn-border-color: var(--ej-primary);
  --bs-btn-hover-bg: var(--ej-primary-600); --bs-btn-hover-border-color: var(--ej-primary-600);
  --bs-btn-active-bg: var(--ej-primary-700); --bs-btn-active-border-color: var(--ej-primary-700);
  --bs-btn-disabled-bg: var(--ej-primary); --bs-btn-disabled-border-color: var(--ej-primary);
}
/* Les utilitaires fs-* de Bootstrap sont en !important : on suit. */
:where(.ej-page) .fs-1, :where(.ej-page) .fs-2, :where(.ej-page) .fs-3, :where(.ej-page) .fs-4 { font-size: var(--ej-fs-2xl) !important; }
:where(.ej-page) .fs-5 { font-size: var(--ej-fs-lg) !important; }
:where(.ej-page) .fs-6 { font-size: var(--ej-fs-base) !important; }


/* ============================================================
   21. COUCHE « COMPTOIR »  (signatures du nouveau système)
   Chiffres tabulaires, références en monospace, densité « direction »,
   focus ocre discret. Additif : ne casse aucun écran existant.
   ============================================================ */

/* Chiffres alignés et tabulaires partout où c'est un montant/indicateur */
.ej-kpi__value,
.ej-amount,
.ej-table__num,
.ej-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Références (numéros de facture, comptes, matricules) en monospace */
.ej-ref {
  font-family: var(--ej-mono);
  font-size: var(--ej-fs-sm);   /* charte : était .93em → 13,95 / 12,09 px, hors échelle */
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ej-text);
}
/* Dans un titre, la référence garde la taille du titre (matricule en tête de fiche). */
h1 .ej-ref, h2 .ej-ref, h3 .ej-ref, .ej-page-title .ej-ref { font-size: inherit; }

/* Unité de devise discrète après un montant */
.ej-unit { color: var(--ej-muted-2); font-weight: 500; font-size: var(--ej-fs-sm); margin-left: 3px; }

/* Étiquette neutre (agence, mode de paiement) — plus discret qu'un badge */
.ej-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 7px;
  background: var(--ej-surface-2); border: 1px solid var(--ej-border);
  font-size: var(--ej-fs-sm); font-weight: 600; color: var(--ej-muted);
  white-space: nowrap;
}

/* ---- Barre de filtres compacte (RÈGLE : une seule ligne, jamais empilée) ----
   À utiliser sur toutes les listes. Une recherche fusionnée qui prend la largeur,
   une plage de dates compacte, des puces de filtre rapide. Chaque champ = 48px.
   Passe à la ligne seulement si l'écran est étroit (flex-wrap). */
.ej-filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px var(--ej-sp-5);
}
.ej-fld {
  display: flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 14px;
  border: 1px solid var(--ej-border); border-radius: var(--ej-r-md);
  background: var(--ej-surface); color: var(--ej-muted);
}
.ej-fld > i { color: var(--ej-muted-2); font-size: 14px; }
.ej-fld input {
  border: none; outline: none; background: transparent;
  font-family: var(--ej-font); font-size: var(--ej-fs-md); color: var(--ej-text);
  width: 100%; height: 100%; padding: 0;
}
.ej-fld input::placeholder { color: var(--ej-muted-2); }
.ej-fld:focus-within { border-color: var(--ej-primary); box-shadow: 0 0 0 3px var(--ej-primary-soft); }
.ej-fld--grow { flex: 1 1 260px; min-width: 190px; }
.ej-fld--dates { gap: 6px; }
.ej-fld--dates input { width: 128px; color: var(--ej-muted); border: none; outline: none; background: transparent; font-family: var(--ej-font); font-size: var(--ej-fs-md); }
.ej-fld__arrow { color: var(--ej-muted-2); flex: none; }
/* Selects de filtre inline (branche, type, mode…) : 48px, chevron, comme la maquette */
.ej-filterbar select {
  height: 48px; padding: 0 34px 0 14px;
  border: 1px solid var(--ej-border); border-radius: var(--ej-r-md);
  background: var(--ej-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f8894' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  -webkit-appearance: none; appearance: none;
  font-family: var(--ej-font); font-size: var(--ej-fs-md); font-weight: 500; color: var(--ej-text);
  cursor: pointer; width: auto; max-width: 220px; flex: none;
}
.ej-filterbar select:focus { outline: none; border-color: var(--ej-primary); box-shadow: 0 0 0 3px var(--ej-primary-soft); }
/* Puce de filtre rapide (Aujourd'hui / 7 jours / Non validées…) */
.ej-chip {
  display: inline-flex; align-items: center; height: 48px; padding: 0 16px;
  border: 1px solid var(--ej-border); border-radius: 999px;
  background: var(--ej-surface); color: var(--ej-muted);
  font-family: var(--ej-font); font-size: var(--ej-fs-base); font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ej-chip:hover { background: var(--ej-surface-2); color: var(--ej-text); text-decoration: none; }
.ej-chip.is-on { background: var(--ej-primary-soft); color: var(--ej-primary); border-color: transparent; font-weight: 600; }

/* ---- Formulaires « Comptoir » (new_object.html + autres via .ej-form) ----
   Carte centrée, labels au-dessus, champs 46px. Couvre les widgets Django
   (form-control), selects, textarea et les autocompletes selectize. */
.ej-form-card { max-width: 680px; margin: 0 auto; padding: var(--ej-sp-6); }
.ej-form .ej-field { margin-bottom: 16px; }
.ej-form .ej-label { display: block; font-size: var(--ej-fs-sm); font-weight: 600; color: var(--ej-muted); margin-bottom: 6px; }
.ej-form input[type="text"], .ej-form input[type="number"], .ej-form input[type="email"],
.ej-form input[type="password"], .ej-form input[type="date"], .ej-form input[type="tel"],
.ej-form input[type="url"], .ej-form input[type="file"], .ej-form input:not([type]),
.ej-form select, .ej-form textarea, .ej-form .form-control {
  width: 100%; min-height: 46px;
  border: 1px solid var(--ej-border); border-radius: var(--ej-r-md);
  background: var(--ej-surface); padding: 0 13px;
  font-family: var(--ej-font); font-size: var(--ej-fs-md); color: var(--ej-text);
  box-shadow: none;
}
.ej-form textarea { min-height: 92px; padding: 11px 13px; }
.ej-form input:focus, .ej-form select:focus, .ej-form textarea:focus, .ej-form .form-control:focus {
  outline: none; border-color: var(--ej-primary); box-shadow: 0 0 0 3px var(--ej-primary-soft);
}
.ej-form input::placeholder, .ej-form textarea::placeholder { color: var(--ej-muted-2); }
/* selectize (champs autocomplete) au look Comptoir */
.ej-form .selectize-control { width: 100%; }
.ej-form .selectize-input {
  min-height: 46px; border: 1px solid var(--ej-border); border-radius: var(--ej-r-md);
  padding: 10px 13px; box-shadow: none;
  font-family: var(--ej-font); font-size: var(--ej-fs-md); color: var(--ej-text);
}
.ej-form .selectize-input.focus { border-color: var(--ej-primary); box-shadow: 0 0 0 3px var(--ej-primary-soft); }
.ej-form .selectize-input.dropdown-active { border-radius: var(--ej-r-md) var(--ej-r-md) 0 0; }
.ej-form .selectize-dropdown { border: 1px solid var(--ej-border); border-radius: 0 0 var(--ej-r-md) var(--ej-r-md); font-family: var(--ej-font); }
.ej-form__actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; }

/* Champs de recherche dans une barre d'outils : look Comptoir sans toucher
   chaque formulaire (scopé à .ej-toolbar → n'affecte pas les autres form-control) */
.ej-toolbar input[type="text"],
.ej-toolbar input[type="search"],
.ej-toolbar input[type="number"],
.ej-toolbar input[type="date"],
.ej-toolbar select,
.ej-toolbar .form-control {
  height: 44px;
  border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-md);
  background: var(--ej-surface);
  padding: 0 13px;
  font-family: var(--ej-font);
  font-size: var(--ej-fs-md);
  color: var(--ej-text);
  box-shadow: none;
}
.ej-toolbar input::placeholder,
.ej-toolbar .form-control::placeholder { color: var(--ej-muted-2); }
.ej-toolbar input:focus,
.ej-toolbar select:focus,
.ej-toolbar .form-control:focus {
  outline: none;
  border-color: var(--ej-primary);
  box-shadow: 0 0 0 3px var(--ej-primary-soft);
}

/* Titre de page : plus marqué (Comptoir = 800, serré) */
.ej-page-title { font-weight: var(--ej-fw-black); letter-spacing: -.02em; }

/* En-têtes épurés : on masque le fil d'Ariane et les sous-titres descriptifs
   (demande Mohamed — « ça ne sert à rien »). Global : tous les écrans. */
.ej-breadcrumb, .ej-page-subtitle { display: none; }

/* Cible tactile : les commandes du comptoir se manipulent au doigt */
.ej-btn { min-height: 44px; }
.ej-input, .ej-select, .ej-search input, .ej-field { min-height: 44px; }
.ej-btn--sm { min-height: 36px; }

/* Focus accent (au lieu d'un simple survol) */
.ej-input:focus, .ej-select:focus, .ej-textarea:focus, .ej-search input:focus {
  outline: none;
  border-color: var(--ej-primary);
  box-shadow: 0 0 0 3px var(--ej-primary-soft);
}

/* ---- Densité « direction » : cockpit & reporting ----
   Compacte, chiffres en monospace. À poser sur un conteneur (.ej-dense). */
.ej-dense {
  /* Charte 19/10/2026 : la densité direction garde les 4 tailles (elle
     descendait à 13,5 / 14 / 22) ; seuls les espacements se resserrent et
     les chiffres passent en monospace. */
  --ej-sp-5:    16px;
  --ej-sp-6:    18px;
}
.ej-dense .ej-kpi__value,
.ej-dense .ej-amount,
.ej-dense .ej-table__num,
.ej-dense .ej-money { font-family: var(--ej-mono); font-weight: 600; letter-spacing: -.02em; }
.ej-dense .ej-kpi { padding: var(--ej-sp-4); }
.ej-dense table td, .ej-dense .ej-table td { padding-top: 9px; padding-bottom: 9px; }
.ej-dense .ej-table th { font-size: var(--ej-fs-xs); letter-spacing: .07em; }

/* Barre de filtres EN LIGNE : les champs gardent une largeur naturelle au
   lieu du width:100% des formulaires — sans elle, chaque champ prenait toute
   la ligne et les filtres s'empilaient (vu par Mohamed 04/08 sur Caissier
   principal et Brouillons oubliés). */
.ej-toolbar--inline { padding: 0; background: transparent; border: none; box-shadow: none; flex-wrap: wrap; }
.ej-toolbar--inline > .ej-input,
.ej-toolbar--inline > .ej-select { width: auto; min-width: 150px; }
.ej-toolbar--inline > .ej-input[type="date"] { width: 160px; }

/* Compatibilité Bootstrap 4 → 5 : BS5 a retiré la marge des .form-group,
   les champs des anciens formulaires se collaient (vu sur Versements). */
.form-group { margin-bottom: var(--ej-sp-4); }
.form-group label { margin-bottom: 4px; display: inline-block; }

/* Grille de formulaire standard (écrans de réglages : comptes, moyens de
   paiement, déplacements…) — remplace les .rg-form/.mp-form/.da-form locaux
   qui répétaient la même chose (cohérence UX, 03/08/2026). */
.ej-formgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ej-sp-4); }
.ej-formgrid--3 { grid-template-columns: repeat(3, 1fr); }
/* Règle Mohamed (29/08) : à partir de 600 px les champs RÉTRÉCISSENT, rien ne
   change de place — le SUNMI 10,1" voit le même formulaire que le 15,6".
   Seul le téléphone empile. */
@media (max-width: 599.98px) { .ej-formgrid, .ej-formgrid--3 { grid-template-columns: 1fr; } }

/* Barre d'utilisation (plafond de créance, atteinte d'objectif) */
.ej-util { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.ej-util__track { flex: 1; height: 6px; border-radius: 99px; background: var(--ej-border); overflow: hidden; }
.ej-util__fill { height: 100%; border-radius: 99px; background: var(--ej-primary); }
.ej-util__pct { font-variant-numeric: tabular-nums; font-size: var(--ej-fs-sm); font-weight: 600; color: var(--ej-muted); width: 38px; text-align: right; }


/* Accessibilité : respecte la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Sélecteur d'agence (20/08/2026) ─────────────────────────────────────────
   La pastille ocre et le bandeau ne sont pas décoratifs : ils remplacent le
   contournement qui consistait à modifier sa propre fiche pour changer
   d'agence. Le risque de ce dispositif, c'est d'OUBLIER d'en sortir — d'où un
   signal impossible à manquer tant qu'on n'est pas revenu chez soi. */
.ej-agence-empruntee {
  background: var(--ej-warning-soft, #FFF7E6) !important;
  border: 1px solid var(--ej-ocre, #C9962F) !important;
  border-radius: 10px;
  color: var(--ej-ocre-fonce, #7d5417) !important;
}
/* Le nom et les icônes restaient BLANCS (règle .ej-userbtn__name de la barre
   pétrole) : illisibles sur le fond crème — remarque Mohamed 29/08/2026. */
.ej-agence-empruntee .ej-userbtn__name,
.ej-agence-empruntee i {
  color: var(--ej-ocre-fonce, #7d5417) !important;
}
.ej-bandeau-agence {
  background: var(--ej-warning-soft, #FFF7E6);
  border-bottom: 2px solid var(--ej-ocre, #C9962F);
  color: #7d5417;
  padding: 10px 20px;
  font-size: var(--ej-fs-sm);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ej-bandeau-agence b { font-weight: 700; }
.ej-bandeau-agence__retour {
  background: var(--ej-ocre, #C9962F); color: #fff; border: none;
  border-radius: 8px; padding: 5px 12px; font: inherit; font-size: var(--ej-fs-sm);
  font-weight: 600; cursor: pointer;
}
.ej-bandeau-agence__retour:hover { filter: brightness(.93); }

/* ── Messages après une action (django.contrib.messages) — 21/10/2026 ────────
   Avant : <li class="alert alert-error"> — « alert-error » n'existe pas dans
   Bootstrap (il attend « alert-danger ») : les refus s'affichaient en BLANC,
   le message le plus important était le moins visible. Une couleur par niveau,
   tirée des jetons : erreur rouge, avertissement ocre, information bleu,
   réussite vert. Chrome 89 : flex + gap, pas de :has. */
.ej-flashes {
  list-style: none; margin: 16px auto; padding: 0 16px; max-width: 980px;
  display: flex; flex-direction: column; gap: 8px;
}
.ej-flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--ej-info-soft); border-left: 4px solid var(--ej-info);
  border-radius: var(--ej-r-md);
  background: var(--ej-info-soft); color: var(--ej-info-text);
  font-size: var(--ej-fs-base); line-height: 1.45;
}
.ej-flash__icon { flex: none; margin-top: 3px; font-size: 15px; }
.ej-flash__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--ej-text-body); }
.ej-flash__text a { color: inherit; font-weight: var(--ej-fw-semibold); text-decoration: underline; }
.ej-flash__close {
  flex: none; width: 28px; height: 28px; margin: -3px -4px -3px 0;
  border: 0; border-radius: var(--ej-r-sm); background: transparent;
  color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7;
}
.ej-flash__close:hover { opacity: 1; background: rgba(16, 23, 32, .06); }
.ej-flash--error   { background: var(--ej-danger-soft);  border-color: #ecc9c5; border-left-color: var(--ej-danger);  color: var(--ej-danger-text); }
.ej-flash--warning { background: var(--ej-warning-soft); border-color: #ead9b4; border-left-color: var(--ej-ocre);    color: var(--ej-warning-text); }
.ej-flash--success { background: var(--ej-success-soft); border-color: #c4e3cf; border-left-color: var(--ej-success); color: var(--ej-success-text); }
.ej-flash--error .ej-flash__text { color: var(--ej-danger-text); font-weight: var(--ej-fw-medium); }

/* ============================================================
   21. CAISSES SUNMI, TABLETTES & TACTILE — 21/08/2026
   Les agences travaillent sur des caisses SUNMI (écran tactile
   15", ~1366×768) et des tablettes SUNMI (1280×800), posées à
   hauteur de comptoir. Deux conséquences que le desktop ignore :
   le DOIGT remplace la souris (cible fiable ≥ 44 px — recommandation
   d'accessibilité WCAG), et la largeur réelle est plus proche de
   1280 que de 1920. Couche purement ADDITIVE : rien à changer dans
   les gabarits, les écrans souris/clavier ne bougent pas.
   ============================================================ */

/* ---- Caisse SUNMI (1024–1439 px) : la barre reste VISIBLE, en version
   compacte (décision Mohamed 22/08/2026 : un caissier ne doit pas ouvrir un
   tiroir pour trouver « Vidange »). Libellés sans icônes, logo un peu plus
   petit, profil réduit à l'avatar (le nom est dans le menu). Le nom d'AGENCE
   reste : c'est le garde-fou du sélecteur. Un seul réglage pour tout le
   palier (charte 19/10/2026), mesuré au bord bas : 1 024 px.
   SPÉCIFICITÉ VOULUE (`.navbar .navbar-nav .nav-link`) : le <style> de
   base.html vient APRÈS ce fichier et pose `.navbar .nav-link { padding: 0
   14px !important; font-size: 15px }` — à spécificité égale, il gagnait. ---- */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  /* 6 px depuis le menu Achats (lot 4, 19/10/2026) : à 1 024 px, avec
     « Ejmel Truck » dans le sélecteur, 8 px débordaient de 10 px. */
  .navbar .navbar-nav .nav-link { padding-left: 6px !important; padding-right: 6px !important; font-size: var(--ej-fs-base); }
  .navbar .navbar-nav .nav-link > .fa, .navbar .navbar-nav .nav-link > .fas,
  .navbar .navbar-nav .nav-link > .far { display: none; }
  .navbar .navbar-nav .nav-item:hover > .nav-link::after,
  .navbar .navbar-nav .nav-link.active::after { left: 6px; right: 6px; }
  .navbar .navbar-brand { margin-right: 10px; }
  .navbar .navbar-brand img.ej-brand-logo { height: 36px; }
  .navbar .ej-userbtn { height: 36px; }
  .navbar .ej-userbtn__name { font-size: var(--ej-fs-sm); }
  #navbarDropdownUser .ej-userbtn__name { display: none; }
  #navbarDropdownUser { padding-right: 8px !important; }
  .ej-container { padding-left: var(--ej-sp-5); padding-right: var(--ej-sp-5); }
}

/* ---- PC (≥ 1 440 px) : au bas du palier, la barre complète (icônes +
   libellés) ne laissait que 11 px de marge sous Chrome — Safari, qui mesure
   le texte plus large, débordait à droite (vu par Mohamed 19/10/2026). On
   resserre un peu les onglets : ~60 px de marge, rien ne disparaît. ---- */
@media (min-width: 1440px) {
  /* 8 px depuis le menu Achats (lot 4, 19/10/2026) : à 11 px il ne restait
     que 14 px de marge sous Chrome avec « Ejmel Truck » — pas assez pour
     Safari. */
  .navbar .navbar-nav .nav-link { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ---- Écran TACTILE (SUNMI, tablette, téléphone) ----
   `pointer: coarse` = l'appareil se pilote au doigt. On agrandit les
   cibles SANS toucher au desktop : un caissier ne doit jamais viser
   deux fois. */
@media (pointer: coarse) {
  .ej-btn, .ej-btn--sm { min-height: 44px; }
  .ej-input, .ej-select { min-height: 44px; }
  /* Menus déroulants : une entrée par phalange, pas par pixel. */
  .dropdown-item { padding-top: 11px; padding-bottom: 11px; }
  /* Lignes de tableau : plus d'air pour toucher la bonne ligne
     (Actions ▾ se joue souvent à la ligne près). */
  .ej-table td { padding-top: 12px; padding-bottom: 12px; }
  /* Les champs quantité/prix éditables des factures (largeur fixée en
     ligne dans les gabarits) : hauteur tactile quand même. */
  .fc-qte, .fc-prix { min-height: 44px; }
}
/* iPhone / iPad SEULEMENT (-webkit-touch-callout n'existe que sur iOS) :
   Safari zoome la page au focus d'un champ écrit en moins de 16 px — le
   gérant perdait sa mise en page à chaque saisie. Exception assumée à la
   charte ; les caisses SUNMI (Android, pas de zoom) restent à 15 px. */
@supports (-webkit-touch-callout: none) {
  .ej-input, .ej-select,
  input[type="text"], input[type="number"], input[type="date"], input[type="search"],
  input[type="tel"], input[type="email"], input[type="password"], select, textarea { font-size: 16px; }
}

/* ---- Tablette (600–1023 px) et téléphone ---- */
@media (max-width: 1023.98px) {
  /* Les barres d'outils passent à la ligne au lieu d'écraser la recherche */
  .ej-toolbar { flex-wrap: wrap; }
  .ej-page-header { flex-wrap: wrap; gap: var(--ej-sp-3); }
}

/* ---- Téléphone (le gérant qui consulte depuis chez lui) ---- */
@media (max-width: 599.98px) {
  /* Un formulaire posé dans l'en-tête de page (filtres de dates) passe à la
     ligne au lieu de pousser la page en défilement horizontal — c'est le
     débordement que la sonde d'audit a mesuré sur « Messages WhatsApp ». */
  .ej-page-header form { flex-wrap: wrap; }
  /* Les formulaires en ligne (filtres de listes) s'empilent proprement */
  .ej-fld { width: 100%; }
  .ej-fld .ej-input, .ej-fld .ej-select { width: 100%; }
  /* Un select de filtre prend sa largeur naturelle (son option la plus
     longue) : au téléphone il dépassait de la carte (« Récompenses lavage »). */
  .ej-filterbar select { width: 100%; }
  /* Pagination : les numéros passent à la ligne au lieu de pousser la flèche
     « suivante » hors de la carte (13 listes, mesuré le 19/10/2026). */
  .ej-table-foot { justify-content: center; }
  .ej-pagination { flex-wrap: wrap; justify-content: center; }
  /* Gros chiffres : l'unité (MRU, %) passe sous le nombre plutôt que d'être
     rognée par la carte quand deux KPI se partagent la largeur. */
  .ej-kpi__value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
  .ej-kpi__unit { margin-left: 0; }
  .ej-actions { width: 100%; }
  .ej-actions .ej-btn { flex: 1 1 auto; }
  /* Les pilules d'état ne cassent pas au milieu d'un mot */
  .ej-pill { white-space: nowrap; }
}

/* ============================================================
   22. TABLEAUX : DENSITÉ SUNMI ET MODE CARTES — 21/08/2026
   Mohamed : « sur l'ancien système, pas besoin de défiler à gauche
   à droite sur la SUNMI ». Le défilement horizontal est un filet
   contre la casse, pas une ergonomie. MESURÉ avant correction : à
   1280 px deux listes de 10 colonnes défilaient encore DANS leur
   carte (factures mécanique 95 px, achats 55 px) ; à 390 px quinze
   tableaux défilaient de 364 à 945 px.
   ============================================================ */

/* ---- Tablette et caisse SUNMI (600–1439 px) : dense, mais TOUT tient ----
   22/08/2026, après l'ancien système montré par Mohamed : quand la place
   manque, le texte PASSE À LA LIGNE au lieu de rétrécir puis défiler. Une
   ligne sur deux hauteurs reste lisible ; une ligne qui défile hors champ ne
   l'est plus. Quand tout tient, rien ne change (pas de retour à la ligne).
   Ce qui ne se coupe JAMAIS : montants, références, pilules, étiquettes,
   boutons, colonne Actions.
   Charte 19/10/2026 : le texte des tableaux reste à 15 px partout (il
   descendait à 14 px, et les en-têtes / pilules à 11 px) ; on ne gagne la
   place que sur les marges des cellules. */
@media (min-width: 600px) and (max-width: 1439.98px) {
  /* Sélecteurs `.ej-table tbody td` / `.ej-table thead th` OBLIGATOIRES : la
     base les utilise (spécificité 0,1,2) — « .ej-table td » (0,1,1) perdait,
     et ces paddings n'ont pas porté du 21 au 22/08 (mesuré : lignes de 67 px
     au lieu de ~55). */
  .ej-table thead th, .ej-table tbody td, .ej-table tfoot td { padding: 9px 9px; }
  .ej-table tbody td, .ej-table tbody td.ej-nowrap { white-space: normal; }
  .ej-table tbody td.ej-table__num, .ej-table td.ej-td-actions,
  .ej-table .ej-ref, .ej-table .ej-amount, .ej-table .ej-pill, .ej-table .ej-tag,
  .ej-table .ej-btn, .ej-table .ej-table__actions { white-space: nowrap; }
}
/* Règle séparée : un :has() dans la liste ci-dessus la ferait ignorer EN
   ENTIER par Chrome 89 (caisses SUNMI). */
@media (min-width: 600px) and (max-width: 1439.98px) {
  .ej-table td:has(> .ej-table__actions) { white-space: nowrap; }
}
/* ---- Tablette (600–1023 px) : un cran de marge en moins dans les cellules
   — c'est ce qui manquait pour qu'une liste de 10 colonnes tienne vers
   1 000 px sans défiler dans sa carte, même avec les retours à la ligne. ---- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .ej-table thead th, .ej-table tbody td, .ej-table tfoot td { padding-left: 6px; padding-right: 6px; }
  .ej-table thead th { letter-spacing: .02em; }
  .ej-table .ej-tag, .ej-table .ej-pill { padding: 3px 8px; }
  .ej-table .ej-btn--sm { height: 32px; padding: 0 10px; }
}

/* ---- Téléphone (< 600) : une ligne = une FICHE, plus de colonnes ----
   L'en-tête disparaît ; chaque cellule devient « libellé : valeur ». Le
   libellé vient de `data-label`, posé automatiquement depuis le <th>
   correspondant par un petit script de la base (aucun gabarit à modifier). */
@media (max-width: 599.98px) {
  /* L'ancienne approche (section 20) posait min-width:720px pour FORCER le
     défilement dans la carte : en mode cartes c'est l'inverse qu'on veut. */
  .ej-table { min-width: 0 !important; }
  .ej-table, .ej-table tbody, .ej-table tfoot, .ej-table tr, .ej-table td { display: block; width: 100%; }
  .ej-table thead { display: none; }
  .ej-table tbody tr {
    padding: 10px 14px 12px;
    border-bottom: 6px solid var(--ej-surface-2);
  }
  .ej-table tbody tr:last-child { border-bottom: none; }
  .ej-table tfoot tr { padding: 10px 14px 12px; }
  .ej-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 5px 0 !important; border: none !important; text-align: right;
    white-space: normal; flex-wrap: wrap;   /* plusieurs pilules : à la ligne, pas dehors */
  }
  .ej-table td::before {
    content: attr(data-label);
    flex: 0 0 40%; text-align: left;
    font-size: var(--ej-fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: var(--ej-muted);
  }
  /* La première cellule (numéro, nom) fait office de titre de fiche */
  .ej-table td:first-child { font-weight: 700; font-size: var(--ej-fs-base); padding-bottom: 8px !important;
                             border-bottom: 1px solid var(--ej-border-2) !important; }
  .ej-table td:first-child::before { display: none; }
  .ej-table td:first-child { justify-content: flex-start; text-align: left; }
  /* Le texte d'une fiche passe à la ligne. Sélecteur `.ej-table tbody td`
     OBLIGATOIRE : la base (0,1,2) impose nowrap et l'emportait sur
     `.ej-table td` — un libellé long débordait de 9 px à 390 px
     (« Récompenses lavage », mesuré le 19/10/2026). */
  .ej-table tbody td, .ej-table tbody td.ej-nowrap { white-space: normal; }
  /* Cellules techniques : vides, fusionnées (état vide), actions */
  .ej-table td[colspan]::before, .ej-table td:not([data-label])::before,
  .ej-table td[data-label=""]::before { display: none; }
  .ej-table td[colspan] { justify-content: center; text-align: center; }
  .ej-table td .ej-table__actions { margin-left: auto; }
  .ej-table__num { text-align: right; }
  /* Le conteneur n'a plus rien à faire défiler */
  .ej-table-wrap { overflow-x: visible; }
}

/* Annulation TRACÉE (lot 3, 19/10/2026) : un petit « Annuler » qui se déplie
   en motif + confirmation — la ligne du tableau reste compacte. */
/* Police normale même dans une colonne de montants (.ej-dense la met en
   monospace gras) — vu au téléphone le 20/10/2026. */
.ej-annuler { display: inline-block; text-align: left; position: relative;
               font-family: var(--ej-font); font-variant-numeric: normal;
               font-weight: 400; letter-spacing: normal; }
.ej-annuler > summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: var(--ej-fs-sm); font-weight: 600; color: var(--ej-danger); user-select: none;
  padding: 4px 8px; border-radius: 6px;
}
.ej-annuler > summary::-webkit-details-marker { display: none; }
.ej-annuler > summary:hover { background: var(--ej-danger-soft); }
.ej-annuler[open] > summary { background: var(--ej-danger-soft); }
.ej-annuler__corps {
  /* Flottant sous le bouton : il n'élargit pas la colonne du tableau. */
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 260px;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--ej-border); border-radius: 8px; background: var(--ej-surface, #fff);
  box-shadow: var(--ej-shadow-md, 0 6px 18px rgba(16, 24, 40, .12)); white-space: normal;
}
@media (max-width: 599.98px) {
  .ej-annuler__corps { right: auto; left: 0; width: min(260px, calc(100vw - 48px)); }
}
.ej-annuler__aide { font-size: var(--ej-fs-sm); color: var(--ej-muted); line-height: 1.35; }
.ej-annuler__corps .ej-input { width: 100%; }

/* Fenêtre de confirmation (19/10/2026, « il y a un écart ») : sans dépendre du
   JavaScript des modales Bootstrap (piège 4/5 du projet). Affichée par le
   serveur ; `hidden` la ferme. */
.ej-confirm {
  position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(16, 24, 40, .45);
}
.ej-confirm[hidden] { display: none; }
.ej-confirm__boite {
  width: 100%; max-width: 480px; background: var(--ej-surface, #fff); border-radius: 12px;
  padding: 20px; box-shadow: 0 20px 48px rgba(16, 24, 40, .25);
}
.ej-confirm__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: var(--ej-fs-lg, 17px); font-weight: var(--ej-fw-bold); color: var(--ej-warning-text); }
.ej-confirm__aide { font-size: var(--ej-fs-sm); color: var(--ej-muted); }
.ej-confirm__liste { margin: 0 0 10px; padding-left: 18px; }
.ej-confirm__liste li { margin: 2px 0; }
.ej-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 599.98px) {
  .ej-confirm__actions .ej-btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   DÉTAIL D'UN PRIX (21/10/2026) — un montant qui montre de quoi il est fait,
   au survol de la souris ET au toucher (caisses SUNMI, téléphones : le survol
   n'y existe pas). Bulle en position fixe, placée par ej-prixdetail.js.
   Chrome 89 : ni :has ni @container.
   ============================================================ */
.ej-prixdetail {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 2px 6px; margin: -2px -6px;
  border-radius: var(--ej-r-sm); font: inherit; color: inherit;
  cursor: pointer; white-space: nowrap; text-align: right;
  border-bottom: 1px dashed var(--ej-primary-line);
}
.ej-prixdetail:hover, .ej-prixdetail[aria-expanded="true"] { background: var(--ej-primary-soft); }
.ej-prixdetail:focus-visible { outline: 2px solid var(--ej-primary); outline-offset: 2px; }
.ej-prixdetail__i { font-size: 12px; color: var(--ej-primary); opacity: .75; }
.ej-prixdetail-bulle {
  position: fixed; z-index: 1080;
  width: max-content; max-width: min(380px, calc(100vw - 16px));
  padding: 10px 12px; border-radius: var(--ej-r-md);
  background: var(--ej-surface); color: var(--ej-text-body);
  border: 1px solid var(--ej-border); box-shadow: var(--ej-shadow-lg);
  font-size: var(--ej-fs-sm); line-height: 1.35; text-align: left; white-space: normal;
}
.ej-prixdetail-bulle[hidden] { display: none; }
.ej-prixdetail-bulle .ej-prixdetail__titre {
  display: block; font-size: var(--ej-fs-xs); font-weight: var(--ej-fw-bold);
  text-transform: uppercase; letter-spacing: .03em; color: var(--ej-primary); margin-bottom: 6px;
}
.ej-prixdetail-bulle .ej-prixdetail__poste,
.ej-prixdetail-bulle .ej-prixdetail__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 3px 0;
}
.ej-prixdetail-bulle .ej-prixdetail__poste + .ej-prixdetail__poste { border-top: 1px solid var(--ej-border-2); }
.ej-prixdetail-bulle .ej-prixdetail__poste.is-absent { color: var(--ej-muted); }
.ej-prixdetail-bulle .ej-prixdetail__lib b { color: var(--ej-text); font-weight: var(--ej-fw-semibold); }
.ej-prixdetail-bulle .ej-prixdetail__val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ej-prixdetail-bulle .ej-prixdetail__total {
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--ej-border-strong); color: var(--ej-text);
}
.ej-prixdetail-bulle .ej-prixdetail__note { display: block; margin-top: 6px; font-size: var(--ej-fs-xs); color: var(--ej-muted); }
.ej-prixdetail-bulle .ej-pill { padding: 1px 6px; font-size: var(--ej-fs-xs); }

/* ============================================================
   RECHERCHE D'UN PRODUIT PAR 3 LETTRES (21/10/2026)
   Composant de core/assets/js/ej-recherche-produit.js : remplace la liste
   déroulante des milliers de produits (facture fournisseur à lignes, saisie
   d'un mouvement de stock). Le conteneur .ej-recherche n'enveloppe que le
   champ et la liste : la liste s'ouvre juste sous le champ. Chrome 89.
   ============================================================ */
.ej-recherche { position: relative; min-width: 0; }
.ej-recherche__liste {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px 0; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--ej-surface); border: 1px solid var(--ej-border);
  border-radius: var(--ej-r-md); box-shadow: 0 8px 24px rgba(16, 23, 32, .14);
}
.ej-recherche__liste[hidden] { display: none; }
.ej-recherche__liste li { padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.ej-recherche__liste li.is-actif, .ej-recherche__liste li:hover { background: var(--ej-primary-soft); }
.ej-recherche__liste li.is-vide { color: var(--ej-muted); cursor: default; background: none; }
.ej-recherche__nom { font-weight: var(--ej-fw-semibold); color: var(--ej-text); min-width: 0; }
.ej-recherche__meta { font-size: var(--ej-fs-sm); color: var(--ej-muted); white-space: nowrap; }

/* Lien de navigation dans un tableau ou une liste (le nom d'un produit qui
   ouvre sa fiche, 21/10/2026) : couleur de la marque, sans le soulignement
   bleu vif de Bootstrap ; souligné au survol. */
.ej-lien { color: var(--ej-primary-700); font-weight: inherit; text-decoration: none; }
.ej-lien:hover, .ej-lien:focus-visible { color: var(--ej-primary); text-decoration: underline; }