/* ============================================
   Portail Réseau Agences — Style principal
   ============================================ */

/* --------------------------------------------------------------------------
   Jetons de design — nommés par RÔLE, pas par couleur.
   Pour changer une couleur, modifier le jeton de rôle ci-dessous : la valeur se
   propage partout. Les anciens noms (--blue-royal, --gray-500, …) ont été retirés :
   les gabarits utilisent désormais ces jetons de rôle.
   -------------------------------------------------------------------------- */
:root {
  /* Typographie — titres en Bricolage Grotesque, interface en Instrument Sans (hébergées, voir static/fonts) */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Identité — l'indigo du réseau */
  --indigo-deep: #141829;   /* fond du menu latéral, dégradés d'en-tête */
  --indigo: #2b3fbf;        /* action primaire, lien, élément actif */
  --indigo-light: #5568d8;  /* survol et variantes claires */
  --indigo-soft: #e6e9f8;   /* fond doux : pastilles d'icônes, puces */
  --link: var(--indigo);    /* couleur des liens : plus claire en thème sombre pour garder le contraste */

  /* Neutres — du fond de page vers l'encre */
  --bg: #f4f5f8;            /* fond de page */
  --surface: #ffffff;       /* fond des cartes et panneaux */
  --surface-2: #eceef4;     /* remplissage discret, survol de ligne */
  --line: #dee1ea;          /* bordures et séparateurs */
  --line-strong: #c3c8d6;   /* bordures de champs de formulaire */
  --faint: #6a7088;         /* texte de remplacement, état désactivé */
  --muted: #5d637a;         /* texte secondaire */
  --ink-soft: #4a5068;      /* texte courant atténué */
  --ink: #2a3049;           /* texte courant */
  --ink-strong: #1b2038;    /* titres */
  --white: #ffffff;         /* blanc littéral (texte sur fond coloré) — ne suit pas le thème */

  /* États — sens métier, jamais décoratif */
  --ok: #2f7d5b;            --ok-soft: #dcefe5;
  --warn: #b7892c;          --warn-soft: #f6eedc;
  --danger: #b8433a;        --danger-soft: #f6e1de;

  /* Accents catégoriels — pastilles d'icônes, familles de modules */
  --accent-cyan: #3a7f96;   --accent-cyan-soft: #e1eef2;
  --accent-violet: #6b5bb5; --accent-violet-soft: #ebe8f6;

  /* Texte sur fond d'état doux (badges, alertes) : contraste AA */
  --ok-ink: #1f5c42;  --warn-ink: #7a5a14;  --danger-ink: #8f2f28;
  --info-ink: #1e2a80;  --violet-ink: #4b3f94;  --cyan-ink: #245a6c;
  --indigo-hover: #2234a3;

  --sidebar-width: 260px;
  --sidebar-width-collapsed: 68px;
  --header-height: 64px;
  --shadow-sm: 0 1px 2px rgba(27,32,56,0.06);
  --shadow: 0 2px 6px -1px rgba(27,32,56,0.08);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 8px;
  --transition: all 0.2s ease;
}

@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-wght-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  font-variant-numeric: lining-nums;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

/* Titres : Bricolage Grotesque, resserrée. Les règles de composant ne fixent que taille et graisse. */
h1, h2, h3, .titre { font-family: var(--font-display); letter-spacing: -0.015em; }
/* Montants, quantités et dates alignés en colonnes */
table, .stat-value, .num, input[type="number"] { font-variant-numeric: tabular-nums lining-nums; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--indigo-light); outline-offset: 2px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================
   LAYOUT
   ============================================ */

.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  width: var(--sidebar-width);
  background: var(--indigo-deep);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

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

.sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand .brand-icon {
  width: 38px;
  height: 38px;
  background: var(--indigo);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.sidebar-brand .brand-icon-logo {
  background: transparent;
  padding: 2px;
}

.sidebar-brand .brand-icon-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-brand .brand-text {
  display: flex;
  flex-direction: column;
}

.sidebar-brand .brand-name {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--white);
  line-height: 1.2;
}

.sidebar-brand .brand-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.sidebar-toggle-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition);
}

.sidebar-toggle-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
}

.sidebar-toggle-btn i { transition: transform 0.2s ease; }

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
}

.nav-section {
  margin-bottom: 4px;
}

.nav-section-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  padding: 14px 0 6px 12px;
}

/* Sous-titre à l'intérieur d'une section (nav_config 'heading') ; vide = simple trait. */
.nav-subheading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 10px 0 4px 12px;
}

.nav-subheading-rule {
  padding: 0;
  margin: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.nav-section-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-align: left;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  margin-bottom: 2px;
  text-decoration: none;
}

.nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  text-decoration: none;
}

.nav-item.active {
  background: rgba(255,255,255,0.09);
  color: var(--white);
  box-shadow: inset 2px 0 0 #8ea0ff;
}

.nav-item i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item .badge {
  margin-left: auto;
  font-size: 12px;
  padding: 0 7px;
  line-height: 18px;
  border-radius: 99px;
  font-weight: 600;
  background: var(--warn);
  color: #1b1405;
}

.nav-item-soon {
  cursor: default;
  color: rgba(255,255,255,0.35);
}

.nav-item-soon:hover {
  background: none;
  color: rgba(255,255,255,0.35);
}

.nav-item-soon .badge {
  margin-left: auto;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item-row .nav-item {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
}

.nav-fav-star {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 12px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
  margin-bottom: 2px;
}

.nav-fav-star:not(.active) { opacity: 0; }
.nav-item-row:hover .nav-fav-star, .nav-fav-star:focus-visible { opacity: 1; }
@media (hover: none) { .nav-fav-star:not(.active) { opacity: 1; } }

.nav-fav-star:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

.nav-fav-star.active {
  color: var(--warn);
}

.nav-section-toggle {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font: inherit;
  padding-right: 6px;
}

.nav-section-toggle i {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.nav-section.collapsed .nav-section-toggle i {
  transform: rotate(-90deg);
}

.nav-section.collapsed #favoritesList {
  display: none;
}

/* ---- Sections accordéon épinglables (nav_sections) ---- */
.nav-section-header {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-section-header .nav-section-label { flex: 1; min-width: 0; }

.nav-section-pin,
.nav-section-open {
  flex-shrink: 0;
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  margin-right: 2px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  transition: var(--transition);
}

.nav-section-pin:hover,
.nav-section-open:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); text-decoration: none; }
.nav-section-pin.active { color: var(--warn); }

.nav-section.collapsed .nav-section-items { display: none; }

/* Épinglée : toujours ouverte, peu importe l'état replié */
.nav-section.pinned .nav-section-items { display: block !important; }
.nav-section.pinned .nav-section-toggle i { transform: none !important; }

/* Mode GRC (onglet ouvert par ↗, voir base.html) : seul le GRC reste au menu */
.crm-focus-only { display: none; }
body.crm-focus .crm-focus-only { display: block; }
body.crm-focus .crm-focus-hide,
body.crm-focus .nav-section-header { display: none !important; }
body.crm-focus .nav-section-items { display: block !important; }

.sidebar-footer {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
}

.sidebar-user .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.sidebar-user .user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user .user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user .user-role {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
}

.sidebar-user .logout-btn {
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  transition: var(--transition);
  flex-shrink: 0;
}
.sidebar-user .logout-btn:hover {
  color: var(--danger);
  text-decoration: none;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;   /* un élément flex ne descend pas sous la largeur minimale de
                     son contenu tant que ceci n'est pas posé : sans lui, une
                     ligne large (tableau, en-tête) élargit toute la page et
                     provoque un défilement horizontal sur téléphone */
}

/* ============================================
   HEADER
   ============================================ */

.header {
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;   /* sans ceci, le contenu impose sa largeur et pousse les
                     boutons de droite hors de l'écran sur téléphone */
}

.page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-strong);
}

.header-search {
  max-width: 320px;
  width: 100%;
}

.header-search input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
  transition: var(--transition);
}

.header-search input:focus {
  outline: none;
  border-color: var(--indigo);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 14%, transparent);
}

.search-wrapper {
  position: relative;
}

.search-wrapper i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 14px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;   /* les actions restent toujours atteignables */
}

.header-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--surface-2);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 16px;
  position: relative;
  text-decoration: none;
}

.header-btn:hover {
  background: var(--line);
  color: var(--ink-strong);
  text-decoration: none;
}

.header-btn .notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
}

/* ============================================
   MENU OUTILS (grille dans l'en-tête)
   ============================================ */

.tools-menu-wrap { position: relative; }

.tools-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 120;
  overflow: hidden;
}

.tools-menu-panel.show { display: block; }

.tools-menu-header {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--surface-2);
}

.tools-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--surface-2);
  transition: var(--transition);
}

.tools-menu-item:last-child { border-bottom: none; }

.tools-menu-item:hover {
  background: var(--bg);
  text-decoration: none;
}

.tools-menu-item.is-soon {
  cursor: default;
  opacity: 0.55;
}

.tools-menu-item.is-soon:hover { background: none; }

.tools-menu-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--indigo);
  font-size: 17px;
}

.tools-menu-text { min-width: 0; }

.tools-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tools-menu-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.tools-menu-empty {
  padding: 24px 16px;
  text-align: center;
}

.tools-menu-empty i {
  font-size: 22px;
  color: var(--line-strong);
  display: block;
  margin-bottom: 8px;
}

.tools-menu-empty p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}

.header-agency {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.header-agency .agency-name {
  font-weight: 600;
  color: var(--ink-strong);
}

.agency-switch-form select {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-strong);
  cursor: pointer;
  max-width: 180px;
}

.agency-switch-form select:focus {
  outline: none;
}

/* ============================================
   SÉLECTEUR DE CONTEXTE UNIFIÉ (en-tête)
   ============================================ */

/* Réseau / Agence / Rôle réunis dans une seule pastille. Les deux <select>
   restent des formulaires distincts : c'est la présentation qui est unifiée. */
.context-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;              /* autorise l'ellipsis des enfants */
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.context-switcher:hover { border-color: var(--line-strong); }

.context-icon { color: var(--indigo); flex-shrink: 0; }

.context-form { display: flex; min-width: 0; }

.context-form select,
.context-value {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-strong);
  font-family: inherit;
  max-width: 190px;
  min-width: 0;
  text-overflow: ellipsis;
}

.context-form select { cursor: pointer; padding: 2px 4px; border-radius: 5px; }

/* Le focus doit rester visible : on ne supprime pas le contour, on le remplace
   par un anneau lisible (l'ancien contrôle faisait outline:none, invisible au
   clavier). */
.context-form select:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}

.context-sep { color: var(--faint); flex-shrink: 0; }

.context-role {
  flex-shrink: 0;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}

/* Utilitaire : visible pour les lecteurs d'écran uniquement. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   PAGE CONTENT
   ============================================ */

.page-content {
  flex: 1;
  padding: 28px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header-title h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin-bottom: 2px;
}

.page-header-title p {
  font-size: 13px;
  color: var(--muted);
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Carte cliquable (fiche enveloppée dans un <a>) : remplace les
   onmouseover/onmouseout inline par un :hover CSS pur, thème-compatible. */
.card-clickable {
  cursor: pointer;
  transition: var(--transition);
}

.card-clickable:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--indigo);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h2,
.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-strong);
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--surface-2);
  background: var(--bg);
}

/* Indicateurs : bande de chiffres (filet en tête, pas de carte ni de pastille d'icône).
   Les gabarits gardent .stat-icon dans le HTML ; elle n'est simplement plus affichée. */
.stat-card {
  background: transparent;
  padding: 14px 20px 14px 0;
  border: 0;
  border-top: 1px solid var(--ink-strong);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.stat-icon { display: none; }

.stat-info { flex: 1; }

.stat-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.stat-change {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.stat-change.up { color: var(--ok); }
.stat-change.down { color: var(--danger); }

/* ============================================
   GRIDS
   ============================================ */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ============================================
   TABLES
   ============================================ */

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--surface-2);
  /* Indice de défilement horizontal en CSS pur (sans JS) : deux couches "local"
     masquent le bord tant qu'il reste du contenu cette-direction, deux couches
     "scroll" dessinent une ombre fixe par-dessus quand ce n'est pas le cas —
     l'ombre n'apparaît donc que si la table dépasse réellement du conteneur. */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)) 0 0,
    linear-gradient(to left, var(--surface) 30%, rgba(0,0,0,0)) 100% 0,
    linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0)) 0 0,
    linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

th {
  background: var(--bg);
  padding: 11px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--surface-2);
  color: var(--ink);
  font-size: 13px;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg); }

/* ============================================
   BADGES
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-success { background: var(--ok-soft); color: var(--ok-ink); }
.badge-warning { background: var(--warn-soft); color: var(--warn-ink); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge-info { background: var(--indigo-soft); color: var(--info-ink); }
.badge-secondary { background: var(--surface-2); color: var(--ink-soft); }
.badge-purple { background: var(--accent-violet-soft); color: var(--violet-ink); }
.badge-cyan { background: var(--accent-cyan-soft); color: var(--cyan-ink); }

/* Priority badges */
.badge-urgente { background: var(--danger-soft); color: var(--danger-ink); }
.badge-importante { background: var(--warn-soft); color: var(--warn-ink); }
.badge-normale { background: var(--ok-soft); color: var(--ok-ink); }
.badge-basse { background: var(--surface-2); color: var(--ink-soft); }

/* Status badges */
.badge-publie, .badge-active, .badge-disponible, .badge-complete, .badge-paye, .badge-approuve { background: var(--ok-soft); color: var(--ok-ink); }
.badge-brouillon, .badge-nouveau, .badge-recue { background: var(--surface-2); color: var(--ink-soft); }
.badge-en_traitement, .badge-en_integration, .badge-beta { background: var(--indigo-soft); color: var(--info-ink); }
.badge-en_attente, .badge-en_revision, .badge-demande { background: var(--warn-soft); color: var(--warn-ink); }
.badge-archive, .badge-inactive, .badge-suspendue, .badge-ferme, .badge-refuse { background: var(--danger-soft); color: var(--danger-ink); }
.badge-expediee { background: var(--accent-violet-soft); color: var(--violet-ink); }
.badge-bientot { background: var(--accent-cyan-soft); color: var(--cyan-ink); }

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:focus { outline: none; }

.btn-sm { padding: 5px 10px; font-size: 12px; gap: 5px; }
.btn-lg { padding: 11px 22px; font-size: 14px; }
.btn-icon { padding: 8px; gap: 0; }

.btn-primary { background: var(--indigo); color: var(--white); border-color: var(--indigo); }
.btn-primary:hover { background: var(--indigo-hover); border-color: var(--indigo-hover); color: var(--white); }

.btn-success { background: var(--ok); color: var(--white); border-color: var(--ok); }
.btn-success:hover { background: color-mix(in srgb, var(--ok) 85%, black); color: var(--white); }

.btn-danger { background: var(--danger); color: var(--white); border-color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, black); color: var(--white); }

.btn-warning { background: var(--warn); color: #1b1405; border-color: var(--warn); }
.btn-warning:hover { background: color-mix(in srgb, var(--warn) 85%, black); color: #1b1405; }

.btn-secondary { background: var(--surface); color: var(--ink-soft); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg); color: var(--ink-strong); }

.btn-outline { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.btn-outline:hover { background: var(--indigo); color: var(--white); }

.btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink-strong); }

/* ============================================
   FORMS
   ============================================ */

.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  transition: var(--transition);
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 14%, transparent);
}

.form-control::placeholder { color: var(--faint); }

select.form-control { cursor: pointer; }

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-check input { cursor: pointer; }
.form-check label { font-size: 13px; color: var(--ink-soft); cursor: pointer; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.alert i { margin-top: 1px; flex-shrink: 0; font-size: 15px; }

.alert-success { background: var(--ok-soft); color: var(--ok-ink); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.alert-warning { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.alert-danger { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.alert-info { background: var(--indigo-soft); color: var(--info-ink); border: 1px solid color-mix(in srgb, var(--indigo) 30%, transparent); }

/* ============================================
   FILTERS BAR
   ============================================ */

.filters-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: var(--surface);
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--surface-2);
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.filters-bar select,
.filters-bar input {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  transition: var(--transition);
  min-width: 140px;
}

.filters-bar select:focus,
.filters-bar input:focus {
  outline: none;
  border-color: var(--indigo);
  background: var(--surface);
}

.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.view-toggle-btn {
  background: none;
  border: none;
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--faint);
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition);
}

.view-toggle-btn:hover {
  color: var(--ink);
}

.view-toggle-btn.active {
  background: var(--surface);
  color: var(--indigo);
  box-shadow: var(--shadow);
}

/* ============================================
   NEWS CARDS
   ============================================ */

.news-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 18px;
  transition: var(--transition);
  cursor: pointer;
  display: block;
}

.news-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--indigo);
  text-decoration: none;
}

.news-card.pinned { border-left: 4px solid var(--indigo); }
.news-card.urgente { border-left: 4px solid var(--danger); }
.news-card.importante { border-left: 4px solid var(--warn); }

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.news-date {
  font-size: 11px;
  color: var(--muted);
}

.news-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 8px;
  line-height: 1.4;
}

.news-excerpt {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   TOOL CARDS
   ============================================ */

.tool-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 20px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--indigo);
}

.tool-fav-star {
  background: none;
  border: none;
  color: var(--line-strong);
  font-size: 15px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.tool-fav-star:hover { background: var(--surface-2); color: var(--muted); }
.tool-fav-star.active { color: var(--warn); }

.tool-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--indigo-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--indigo);
}

.tool-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
}

.tool-description {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}

.tool-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================
   GROUP CARDS
   ============================================ */

.group-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: var(--transition);
}

.group-card:hover {
  box-shadow: var(--shadow-md);
}

.group-card-image {
  height: 160px;
  background: var(--indigo-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.group-card-image .destination-icon {
  font-size: 60px;
  opacity: 0.3;
}

.group-card-image .destination-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: white;
}

.group-card-image .destination-name {
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.group-card-body {
  padding: 16px;
}

.group-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 8px;
  line-height: 1.4;
}

.group-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.group-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.group-meta-item i { color: var(--indigo); font-size: 12px; width: 14px; }

.group-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--indigo);
  white-space: nowrap;
}

.group-price span {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.spots-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 8px 0;
  overflow: hidden;
}

.spots-fill {
  height: 100%;
  background: var(--indigo);
  border-radius: 2px;
}

/* ============================================
   SUPPLIER CARD
   ============================================ */

.supplier-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 16px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.supplier-card:hover {
  border-color: var(--indigo);
}

.supplier-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--indigo);
}

/* ============================================
   PRODUCT CARDS (Shop)
   ============================================ */

.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: var(--transition);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
}

.product-image {
  height: 180px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: var(--faint);
}

.product-body {
  padding: 16px;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 6px;
}

.product-description {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--indigo);
}

/* ============================================
   CHART CONTAINER
   ============================================ */

.chart-container {
  position: relative;
  height: 220px;
  width: 100%;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
  color: var(--line-strong);
}

.empty-state p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}

/* ============================================
   COMMISSION TABLE
   ============================================ */

.commission-total-row td {
  font-weight: 700;
  background: var(--bg);
}

/* ============================================
   MODAL (simple)
   ============================================ */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-backdrop.show {
  display: flex;
}

.modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 520px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 20px;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-page {
  min-height: 100vh;
  background: var(--indigo-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: none;
}

.login-container {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo .logo-box {
  width: min(260px, 80vw);
  height: 96px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.login-logo .logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-logo h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}

.login-logo p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

.login-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 36px;
}

.login-card .form-label {
  color: rgba(255,255,255,0.7);
}

.login-card .form-control {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--white);
}

.login-card .form-control::placeholder { color: rgba(255,255,255,0.3); }
.login-card .form-control:focus {
  background: rgba(255,255,255,0.12);
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo-light) 35%, transparent);
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--indigo);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 8px;
  letter-spacing: 0.3px;
}

.login-btn:hover {
  box-shadow: none;
}

.login-footer {
  text-align: center;
  margin-top: 24px;
}

.login-footer p {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

/* ============================================
   AGENT CARD
   ============================================ */

.agent-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
}

.agent-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--indigo);
}

.agent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

/* ============================================
   DOCUMENT CARD
   ============================================ */

.doc-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: var(--transition);
}

.doc-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--indigo);
}

.doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--danger-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--danger);
  flex-shrink: 0;
}

/* ============================================
   MARKETING CARD
   ============================================ */

.marketing-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: var(--transition);
}

.marketing-card:hover {
  box-shadow: var(--shadow-md);
}

.marketing-preview {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
}

.marketing-body { padding: 14px; }

/* ============================================
   INFO ROW — ligne icône + libellé + valeur.
   Remplace le motif répété en style="display:flex;gap:10px;..."
   (fiches fournisseur, agence, mon agence).
   ============================================ */

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
}

.info-row + .info-row { border-top: 1px solid var(--surface-2); }

.info-row i {
  flex: none;
  width: 18px;
  text-align: center;
  margin-top: 1px;
  color: var(--indigo);
}

.info-row-label {
  flex: none;
  width: 110px;
  color: var(--muted);
}

.info-row-value {
  flex: 1;
  min-width: 0;
  color: var(--ink-strong);
  font-weight: 500;
  word-break: break-word;
}

/* ============================================
   LIST ROW — ligne cliquable (icône/point + texte + méta) utilisée pour
   les listes "dernières nouvelles / demandes récentes / documents" des
   tableaux de bord. :hover en CSS pur (remplace les onmouseover inline).
   ============================================ */

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

.list-row + .list-row { border-top: 1px solid var(--surface-2); }

.list-row:hover {
  background: var(--bg);
  text-decoration: none;
}

.list-row-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.list-row-body { flex: 1; min-width: 0; }

.list-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-row-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

/* ============================================
   CELL PRICE / STRONG — cellules de tableau mises en avant
   (montants, taux) : remplace les style="font-weight:700;color:..."
   répétés dans groupes / commissions / statistiques.
   ============================================ */

.cell-price {
  white-space: nowrap;
  font-weight: 700;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}

.cell-strong {
  font-weight: 700;
  color: var(--ink-strong);
}

/* ============================================
   SECTION DIVIDER — séparateur fin + titre optionnel, remplace les
   <div style="flex:1;height:1px;background:var(--line);"> répétés.
   ============================================ */

.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.section-divider:empty { color: transparent; }
.section-divider:empty::before,
.section-divider:empty::after { flex: 1; }

/* ============================================
   EVENT ITEM / THREAD — liste d'événements horodatés (commentaires,
   journal d'audit, historique de points).
   ============================================ */

.event-thread { display: flex; flex-direction: column; gap: 0; }

.event-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--surface-2);
}

.event-thread .event-item:first-child { border-top: none; padding-top: 0; }

.event-item-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.event-item-body { flex: 1; min-width: 0; }

.event-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.event-item-author { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.event-item-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.event-item-text { font-size: 13px; color: var(--ink); margin-top: 3px; }

/* ============================================
   REP CARD / ROW CARD — fiches représentant fournisseur, lignes de
   commission et de document dans un panneau (fiche fournisseur).
   ============================================ */

.row-card {
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-2);
}

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

.rep-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.rep-card-head .agent-avatar,
.rep-card-head img {
  width: 40px;
  height: 40px;
  font-size: 14px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.rep-card-body { flex: 1; min-width: 0; }
.rep-card-name { font-weight: 600; font-size: 14px; color: var(--ink-strong); }
.rep-card-title,
.rep-card-location { font-size: 12px; color: var(--muted); }

.rep-card-actions { display: flex; gap: 4px; margin-left: auto; flex: none; }

.rep-card-contacts { display: flex; flex-direction: column; gap: 5px; }

.rep-card-contacts a {
  font-size: 12px;
  color: var(--indigo);
  display: flex;
  gap: 6px;
  align-items: center;
}

.rep-card-notes {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

.commission-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.commission-row-name { font-weight: 600; font-size: 13px; color: var(--ink-strong); }
.commission-row-rate { font-weight: 700; color: var(--ok); font-size: 14px; }
.commission-row-year { font-size: 11px; color: var(--muted); }
.commission-row-condition { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.commission-row-notes { font-size: 12px; color: var(--muted); }

.cart-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cart-line-icon {
  width: 48px;
  height: 48px;
  background: var(--surface-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--muted);
  flex: none;
}

.cart-line-body { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 600; font-size: 14px; color: var(--ink-strong); }
.cart-line-meta { font-size: 12px; color: var(--muted); }
.cart-line-price { font-weight: 700; font-size: 16px; color: var(--indigo); }

.doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-row-body { flex: 1; min-width: 0; }
.doc-row-title { font-size: 13px; font-weight: 600; }
.doc-row-meta { font-size: 11px; color: var(--muted); }

/* ============================================
   MISC
   ============================================ */

.btn-block { width: 100%; }
.flex-divider { flex: 1; height: 1px; background: var(--line); }
.text-muted { color: var(--muted); }
.text-small { font-size: 12px; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

.fw-bold { font-weight: 700; }
.fw-600 { font-weight: 600; }

.color-blue { color: var(--indigo); }
.color-green { color: var(--ok); }
.color-orange { color: var(--warn); }
.color-red { color: var(--danger); }

.divider {
  height: 1px;
  background: var(--line);
  margin: 20px 0;
}

/* Urgent banner */
.urgent-banner {
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.urgent-banner i { color: var(--danger); font-size: 18px; }
.urgent-banner strong { color: var(--danger-ink); }
.urgent-banner p { color: var(--danger-ink); font-size: 13px; }

/* Bannière "épinglé" — variante calme de urgent-banner, sur les tokens
   de couleur (donc thème-compatible), pour les nouvelles épinglées. */
.pinned-banner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pinned-banner i { color: var(--indigo); font-size: 16px; }
.pinned-banner strong { color: var(--ink-strong); font-size: 13px; }
.pinned-banner p { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Stats breakdown */
.stats-breakdown {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stats-breakdown-item {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* Les requêtes de largeur (RESPONSIVE) vivent désormais en fin de feuille —
   voir le commentaire au-dessus de @media (max-width: 1200px). */

/* ============================================
   PALETTE DE COMMANDE (Ctrl+K)
   ============================================ */

/* z-index : au-dessus de l'en-tête collant (50) et du tiroir mobile (100),
   la palette est l'élément le plus haut de l'interface quand elle est ouverte. */
.palette-veil {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 200;
}

.palette {
  position: fixed;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 201;
  overflow: hidden;
}

.palette[hidden], .palette-veil[hidden] { display: none; }

.palette-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.palette-input-row i { color: var(--indigo); font-size: 17px; }

.palette-input-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-strong);
  outline: none;
}

.palette-input-row input::placeholder { color: var(--faint); }

.palette-esc {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 2px 6px;
}

.palette-results { overflow-y: auto; padding: 6px 0 10px; }

.palette-hint { margin: 0; padding: 14px 18px; font-size: 12.5px; color: var(--muted); }
.palette-hint kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-soft);
}

.palette-group {
  padding: 10px 18px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 18px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-strong);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.palette-item i { color: var(--muted); flex-shrink: 0; }
.palette-item:hover, .palette-item.is-active { background: var(--surface-2); text-decoration: none; }
.palette-item.is-active i { color: var(--indigo); }

.palette-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-item-context { flex-shrink: 0; font-size: 12px; color: var(--faint); }

/* Question en langage naturel : action distincte des résultats directs. */
.palette-ask {
  margin: 8px 14px 4px;
  border: 1px dashed color-mix(in srgb, var(--indigo) 45%, var(--line));
  background: var(--surface-2);
  border-radius: 10px;
  padding: 0;
}

.palette-ask .palette-item { border-radius: 10px; }
.palette-ask .palette-item i { color: var(--indigo); }

.palette-state { padding: 14px 18px; font-size: 13px; color: var(--muted); }
.palette-state.is-error { color: var(--danger); }

.palette-answer { padding: 14px 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }

@media (max-width: 768px) {
  .palette { top: 6vh; max-height: 80vh; }
  .palette-esc { display: none; }
  .palette-item-context { display: none; }
}

/* ============================================
   FILE « À TRAITER » (tableau de bord)
   ============================================ */

.action-queue {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  overflow: hidden;
}

.action-queue-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.action-queue-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-strong);
}

.action-queue-head h2 i { color: var(--warn); margin-right: 4px; }
.action-queue-count { font-size: 12px; color: var(--muted); }
.action-queue-more { margin-left: auto; font-size: 12px; color: var(--faint); }

.action-queue-list { list-style: none; margin: 0; padding: 0; }

.action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.action-item:last-child { border-bottom: none; }
.action-item:hover { background: var(--surface-2); }

.action-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Sévérité : le sens vient des jetons d'état, pas d'une couleur arbitraire. */
.action-badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.action-badge.danger { background: var(--danger-soft); color: var(--danger-ink); }
.action-badge.info { background: var(--accent-cyan-soft); color: var(--cyan-ink); }

.action-text { min-width: 0; flex: 1; }

.action-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-strong);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-title:hover { color: var(--indigo); text-decoration: underline; }

.action-subtitle {
  display: block;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-cta { flex-shrink: 0; }

/* ============================================
   BARRE D'ONGLETS MOBILE
   ============================================ */

.tabbar {
  display: none;   /* activée par la media query < 768 px ci-dessus */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;     /* sous le tiroir (100) et son voile (99) */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;   /* cible tactile confortable */
  justify-content: center;
}

.tabbar-item:hover { text-decoration: none; color: var(--ink); }
.tabbar-item.active { color: var(--indigo); }

.tabbar-icon { position: relative; font-size: 19px; line-height: 1; }

.tabbar-badge {
  position: absolute;
  top: -4px;
  left: 11px;
  background: var(--warn);
  color: #1a1400;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  min-width: 15px;
  padding: 0 4px;
  border-radius: 10px;
  text-align: center;
}

.tabbar-label { line-height: 1.2; }

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
}

/* ============================================
   SIDEBAR RÉDUITE (icônes seulement)
   ============================================ */

:is(body.sidebar-collapsed, body.sidebar-rail) { --sidebar-width: var(--sidebar-width-collapsed); }

:is(body.sidebar-collapsed, body.sidebar-rail) .sidebar-brand {
  flex-direction: column;
  gap: 8px;
  padding: 16px 8px;
}

:is(body.sidebar-collapsed, body.sidebar-rail) .brand-text { display: none; }

:is(body.sidebar-collapsed, body.sidebar-rail) .sidebar-toggle-btn { margin-left: 0; }
:is(body.sidebar-collapsed, body.sidebar-rail) .sidebar-toggle-btn i { transform: rotate(180deg); }

:is(body.sidebar-collapsed, body.sidebar-rail) .sidebar-nav { padding: 12px 6px; }

:is(body.sidebar-collapsed, body.sidebar-rail) .nav-section-header { display: none; }
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-subheading {
  font-size: 0; padding: 0; margin: 6px 8px; border-top: 1px solid rgba(255,255,255,0.12);
}
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-section-items { display: block !important; }
:is(body.sidebar-collapsed, body.sidebar-rail) #favoritesList { display: block !important; }

:is(body.sidebar-collapsed, body.sidebar-rail) .nav-item-row { justify-content: center; }
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-item {
  justify-content: center;
  padding: 10px;
}
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-item .nav-label,
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-item .badge,
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-item-soon .nav-label,
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-item-soon .badge {
  display: none;
}
:is(body.sidebar-collapsed, body.sidebar-rail) .nav-fav-star { display: none; }

:is(body.sidebar-collapsed, body.sidebar-rail) .sidebar-footer { padding: 14px 8px; }
:is(body.sidebar-collapsed, body.sidebar-rail) .sidebar-user {
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px;
}
:is(body.sidebar-collapsed, body.sidebar-rail) .sidebar-user .user-info { display: none; }

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}

.sidebar-overlay.show { display: block; }

/* ============================================
   VOCABULAIRE DE FORMULAIRE RICHE — centralisé depuis group_form.html,
   qui les avait définies en <style> local (invisible du reste de l'app).
   Réutilisable pour tout formulaire à sections/onglets/choix multiples.
   ============================================ */

.form-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 28px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.form-help { font-size: 12px; color: var(--muted); margin-top: 4px; }

.checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.checkbox-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  background: var(--bg);
  transition: var(--transition);
}

.checkbox-pill:has(input:checked) { background: var(--indigo); border-color: var(--indigo); color: white; }

.lang-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }

.lang-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition);
}

.lang-tab:hover { color: var(--ink-strong); }
.lang-tab.active { color: var(--indigo); border-bottom-color: var(--indigo); }

/* Commission summary cards */
.commission-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--bg);
  border-radius: 10px;
  padding: 16px;
  margin: 8px 0 20px;
}

.commission-summary-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.commission-summary-value { font-size: 20px; font-weight: 800; color: var(--ink-strong); }

@media (max-width: 768px) {
  .commission-summary { grid-template-columns: 1fr; }
}

/* Admin cards */
.admin-module-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

.admin-module-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--indigo);
  text-decoration: none;
}

.admin-module-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* Scrollbar global */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* Print */
/* Requêtes de largeur — placées en FIN de feuille, après toutes les
   règles de base : à spécificité égale, c'est la dernière déclaration
   qui gagne. Remonter ces blocs plus haut ferait réapparaître le bug
   où .mobile-menu-btn { display: none } annulait son propre affichage
   sur téléphone. */

@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  :root { --sidebar-width: 220px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .page-content { padding: 20px; }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 0px; }
  .sidebar { transform: translateX(-260px); width: 260px; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .page-content { padding: 16px; }
  .header { padding: 0 16px; }
  .mobile-menu-btn { display: flex; }
  .sidebar-toggle-btn { display: none; }

  /* La barre d'onglets est fixée en bas : on réserve sa hauteur sous le
     contenu, sinon elle masque la fin de page (et les boutons de formulaire).
     safe-area-inset-bottom = barre gestuelle des iPhone récents. */
  .tabbar { display: grid; }
  .page-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.crm-focus .page-content { padding-bottom: 16px; }  /* mode GRC : pas de barre d'onglets */

  /* En-tête étroit : on garde l'agence active, l'information la plus utile,
     et on masque le rôle, le réseau et le séparateur plutôt que de laisser
     déborder (le réseau reste changeable depuis un écran plus large). */
  .context-switcher { padding: 5px 8px; gap: 4px; }
  .context-role,
  .context-network,
  .context-sep { display: none; }
  .context-form select, .context-value { max-width: 150px; font-size: 11.5px; }
  .context-value { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .context-switcher { max-width: 100%; }
  .header-left { min-width: 0; flex: 1 1 0; }
  /* Les outils épinglés sont déjà dans la barre du bas : on libère la place du nom d'agence. */
  .tools-menu-wrap:has(#toolsMenuBtn) { display: none; }

  /* File à traiter : le bouton passe sous le texte au lieu de l'écraser. */
  .action-item { flex-wrap: wrap; gap: 8px 10px; }
  .action-text { flex-basis: 100%; order: 2; }
  .action-cta { order: 3; margin-left: auto; }
}

@media print {
  .sidebar, .header, .tabbar { display: none; }
  .main-content { margin-left: 0; }
  .page-content { padding: 0; }
}

/* Numéro de version (VERSION à la racine, voir app.py APP_VERSION) */
.app-version { font-size: 10px; color: var(--muted); white-space: nowrap; letter-spacing: .2px; }
.login-footer .app-version { margin-top: 4px; }
.page-footer { margin-top: 32px; padding: 12px 0 4px; border-top: 1px solid var(--surface-2); font-size: 11px; color: var(--muted); text-align: right; }

/* ============================================
   TOP BANNIÈRE PROMOTION
   Module Marketing → Promotions Top Bannière. Rendue par
   templates/partials/top_promotion_banner.html, en tête de la colonne de
   contenu : au-dessus de l'en-tête, jamais par-dessus. Elle occupe toute la
   largeur disponible et pousse le reste de la page vers le bas.
   ============================================ */

.promo-top {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--indigo-deep);   /* visible le temps que l'image charge */
  isolation: isolate;               /* le dégradé ne bave pas sur l'en-tête */
}

/* Option activable par promotion. z-index sous l'en-tête sticky (50) : les deux
   s'empilent au lieu de se chevaucher, l'en-tête s'ancrant sous la bannière
   grâce à --promo-sticky-h (hauteur réelle publiée par le partiel). */
.promo-top-sticky {
  position: sticky;
  top: 0;
  z-index: 45;
}

.promo-top-sticky ~ .header { top: var(--promo-sticky-h, 0px); }

.promo-track {
  position: relative;
  /* Hauteur pilotée par le ratio large recommandé (1920 × 300), bornée pour ne
     jamais manger l'écran sur un grand moniteur ni devenir illisible. */
  height: clamp(132px, 15.6vw, 220px);
}

.promo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}

.promo-slide.is-active { opacity: 1; visibility: visible; }

.promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* adaptation automatique à la largeur de l'écran */
  object-position: center;
  display: block;
}

/* Contraste garanti quelle que soit l'image : dégradé opaque à gauche, où vit
   le texte, transparent à droite pour laisser voir le visuel. */
.promo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(15, 45, 94, 0.92) 0%,
    rgba(15, 45, 94, 0.78) 42%,
    rgba(15, 45, 94, 0.15) 100%);
}

.promo-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 18px 28px;
}

.promo-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.promo-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}

.promo-title {
  font-size: clamp(17px, 1.7vw, 25px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.promo-details {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  /* Deux lignes au maximum : la bannière garde une hauteur prévisible. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--white);
  color: var(--indigo-deep);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: transform .12s ease, box-shadow .12s ease;
}

.promo-cta:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); }
.promo-cta:active { transform: translateY(0); }
.promo-cta i { font-size: 13px; }

/* ---- Carrousel : flèches et indicateurs ---- */

.promo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .15s ease;
}

.promo-nav:hover { background: rgba(255, 255, 255, 0.4); }
.promo-nav:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.promo-prev { left: 8px; }
.promo-next { right: 8px; }

.promo-dots {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}

.promo-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background .15s ease, width .15s ease;
}

.promo-dot.is-active { width: 18px; border-radius: 4px; background: var(--white); }
.promo-dot:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .promo-slide { transition: none; }
  .promo-cta { transition: none; }
}

/* ---- Tablette et mobile : bannière plus courte, CTA toujours visible ---- */
@media (max-width: 768px) {
  .promo-track { height: auto; min-height: 104px; }
  .promo-slide { position: relative; inset: auto; display: none; }
  .promo-slide.is-active { display: flex; }
  .promo-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 26px;
  }
  /* Le dégradé devient vertical : le texte passe sous l'image, pas à côté. */
  .promo-scrim {
    background: linear-gradient(180deg,
      rgba(15, 45, 94, 0.78) 0%,
      rgba(15, 45, 94, 0.9) 100%);
  }
  .promo-title { font-size: 16.5px; }
  /* Une seule ligne de détails sur mobile — le CTA reste au-dessus du pli. */
  .promo-details { -webkit-line-clamp: 1; font-size: 12.5px; }
  .promo-cta { padding: 9px 18px; font-size: 13px; }
  .promo-nav { display: none; }     /* glissement tactile à la place */
  .promo-dots { bottom: 8px; left: 16px; transform: none; }
}

@media print {
  .promo-top { display: none; }
}

/* ============================================
   CONNEXION — deux colonnes : formulaire, puis route de croisière sur fond encre
   ============================================ */
.login-split { display: grid; grid-template-columns: minmax(340px, 480px) 1fr; min-height: 100vh; background: var(--surface); }
.login-split__form { display: flex; align-items: center; padding: 40px; }
.login-split__inner { width: 100%; max-width: 360px; margin: 0 auto; }
.login-split h1 { font-size: 28px; line-height: 1.15; color: var(--ink-strong); margin-bottom: 6px; }
.login-split__lead { color: var(--ink-soft); margin-bottom: 24px; }
.login-split .form-control { width: 100%; }
.login-split__btn { width: 100%; justify-content: center; padding: 10px 16px; margin-top: 8px; }
.login-split__help { margin-top: 16px; font-size: 13px; }
.login-split__foot { margin-top: 48px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.login-split__map { position: relative; overflow: hidden; background: var(--indigo-deep); }
.login-split__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-split__logo { position: absolute; top: 36px; left: 40px; width: 170px; z-index: 1; }
.login-split__map p { position: absolute; left: 40px; bottom: 40px; max-width: 28ch; z-index: 1; color: rgba(255,255,255,.8); font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; line-height: 1.25; }
@media (max-width: 800px) {
  .login-split { grid-template-columns: 1fr; }
  .login-split__map { display: none; }
}

/* Mots de passe oublié / réinitialisation : même grammaire, carte plus sobre */
.login-card { backdrop-filter: none; border-radius: var(--radius-lg); }

/* ============================================
   CATALOGUE — hôtels et navires : liste en lignes, photo en tête des fiches
   ============================================ */
.catalog-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.catalog-list .empty-state { padding: 48px 20px; }
.catalog-row {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px 16px 10px 10px;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.catalog-row:first-child { border-top: 0; }
.catalog-row:hover { background: var(--surface-2); text-decoration: none; }
.catalog-thumb {
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--surface-2) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 24px;
}
.catalog-row:hover .catalog-thumb { background-color: var(--line); }
.catalog-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink-strong); line-height: 1.25; }
.catalog-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.catalog-side { font-size: 13px; color: var(--muted); white-space: nowrap; }
.catalog-stars { color: var(--warn); font-size: 12px; white-space: nowrap; letter-spacing: 1px; }

.catalog-hero {
  height: min(46vh, 380px);
  min-height: 220px;
  border-radius: var(--radius);
  background: var(--surface-2) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 48px;
}
.catalog-title { margin: 18px 0 24px; }
.catalog-title h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-strong); }
.catalog-title-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 8px; color: var(--ink-soft); }
.catalog-title-meta .catalog-stars { font-size: 14px; }

@media (max-width: 640px) {
  .catalog-row { grid-template-columns: 84px 1fr; gap: 2px 14px; }
  .catalog-thumb { grid-row: span 2; }
  .catalog-side { grid-column: 2; }
  .catalog-thumb { height: 60px; }
}

/* Priorité : un point de couleur, jamais un emoji. Le libellé reste dans le title. */
.prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--faint); }
.prio-urgente { background: var(--danger); }
.prio-haute { background: var(--warn); }
.prio-importante { background: var(--warn); }
.prio-normale { background: var(--ok); }
.prio-basse { background: var(--faint); }

/* Bande de chiffres : libellé au-dessus, grand chiffre, filets verticaux entre les valeurs. */
.grid:has(> .stat-card) { gap: 0; }
.stat-card { padding: 18px 22px; }
.stat-info { display: flex; flex-direction: column; }
.stat-info .stat-label { order: -1; font-size: 13px; margin: 0 0 2px; }
.stat-value { font-size: 36px; line-height: 1.15; }
.stat-change { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.stat-trend { width: 64px; height: 18px; flex: none; }
.grid-4 > .stat-card:nth-child(4n+1), .grid-3 > .stat-card:nth-child(3n+1) { padding-left: 0; }
.grid-4 > .stat-card:not(:nth-child(4n+1)), .grid-3 > .stat-card:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
@media (max-width: 1200px) {
  .grid-4 > .stat-card { border-left: 0 !important; padding-left: 22px !important; }
  .grid-4 > .stat-card:nth-child(2n+1) { padding-left: 0 !important; }
  .grid-4 > .stat-card:nth-child(2n) { border-left: 1px solid var(--line) !important; }
}
@media (max-width: 768px) {
  .grid:has(> .stat-card) > .stat-card { border-left: 0 !important; padding: 14px 0 !important; }
}
@media (max-width: 900px) {
  .grid-3 > .stat-card { border-left: 0 !important; padding-left: 22px !important; }
  .grid-3 > .stat-card:nth-child(2n+1) { padding-left: 0 !important; }
  .grid-3 > .stat-card:nth-child(2n) { border-left: 1px solid var(--line) !important; }
}

/* Panneau de la connexion : toujours sombre, quel que soit le thème. */
.login-split__map { --route: #8ea0ff; --point: #b7892c; --indigo-deep: #141829; }

/* Menu contextuel d'une ligne de tableau : <details class="row-menu"> (Groupes, Gestion des navires). */
.row-menu { position:relative; display:inline-block; }
.row-menu summary { list-style:none; }
.row-menu summary::-webkit-details-marker { display:none; }
.row-menu-panel { position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:4px; }
.row-menu-panel a, .row-menu-panel button { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; border:none; background:none; color:inherit; font:inherit; text-align:left; text-decoration:none; border-radius:6px; cursor:pointer; white-space:nowrap; }
.row-menu-panel a:hover, .row-menu-panel button:hover { background:var(--bg); text-decoration:none; }