/* Simply Prospect — feuille de style partagée
   Palette : bleu principal (#2F6FEB), navy foncé (#132A4D)
*/
:root {
  --primary: #132A4D;
  --primary-light: #1d3c6b;
  --primary-lighter: #2a4f89;
  --accent: #2F6FEB;
  --accent-light: #5b8ff2;
  --bg: #F4F6FA;
  --card-bg: #ffffff;
  --text: #182233;
  --text-muted: #667085;
  --border: #e3e7ee;
  --success: #2E9E6B;
  --danger: #D7443E;
  --warning: #E0A72E;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(19,42,77,0.08), 0 1px 2px rgba(19,42,77,0.06);
  --shadow-md: 0 4px 12px rgba(19,42,77,0.12);
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;

  --tint-blue-bg: #E4ECFC;
  --tint-blue-fg: #1d3c8f;
  --tint-red-bg: #FBE7E6;
  --tint-red-fg: #9c2e29;
  --tint-green-bg: #E1F3EA;
  --tint-green-fg: #226b4c;
  --tint-gold-bg: #FBF1DC;
  --tint-gold-fg: #8a651f;
  --tint-orange-bg: #FCE9DA;
  --tint-orange-fg: #9c4f14;
  --tint-gray-bg: #E7E9ED;
  --tint-gray-fg: #4B5563;
  --tint-purple-bg: #EFE6FA;
  --tint-purple-fg: #6B3FA0;

  /* Menu de gauche : même palette que 2B Connect, quel que soit le thème jour/nuit. */
  --sidebar-bg: #131a28;
  --sidebar-border: #232e3f;
  --sidebar-text: #e4ebf6;
  --sidebar-text-strong: #e5e9f0;
  --sidebar-text-faint: #7f93b4;
  --sidebar-hover-bg: #1c2638;
  --sidebar-toggle-bg: #151d2a;
  --sidebar-toggle-border: #1f2937;
  --sidebar-shadow: none;
  --sidebar-active: #4d80ed;
  --sidebar-logout: #e69936;
  --sidebar-logout-hover: #f5b45c;
}

:root[data-theme="dark"] {
  --bg: #0d1526;
  --card-bg: #141f36;
  --text: #eef1f8;
  --text-muted: #8d97ad;
  --border: rgba(238,241,248,0.10);
  --primary: #A9C6FF;
  --primary-light: #c3d8ff;
  --primary-lighter: #dbe8ff;
  --shadow: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);

  /* Menu de gauche : même palette que 2B Connect, quel que soit le thème jour/nuit. */
  --sidebar-bg: #131a28;
  --sidebar-border: #232e3f;
  --sidebar-text: #e4ebf6;
  --sidebar-text-strong: #e5e9f0;
  --sidebar-text-faint: #7f93b4;
  --sidebar-hover-bg: #1c2638;
  --sidebar-toggle-bg: #151d2a;
  --sidebar-toggle-border: #1f2937;
  --sidebar-shadow: none;
  --sidebar-active: #4d80ed;
  --sidebar-logout: #e69936;
  --sidebar-logout-hover: #f5b45c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
  /* Un tableau plus large que l'écran (mobile) ne doit faire défiler QUE lui-même
     (.table-wrap a son propre overflow:auto) — jamais toute la page horizontalement.
     Sur iOS, overflow-x:hidden seul ne suffit pas à bloquer le geste de glissement
     horizontal (rubber-band) : touch-action:pan-y interdit ce geste au niveau de la
     page, tout en laissant le défilement vertical normal. Les conteneurs qui doivent
     rester scrollables horizontalement (table-wrap, audience-toggle...) réautorisent
     explicitement pan-x sur eux-mêmes.
     overflow-x:hidden (plutôt que clip) forcerait overflow-y à passer de "visible" à
     "auto" (règle CSS : un axe non-visible "promeut" l'autre), ce qui transforme <body>
     en propre conteneur de défilement et casse le position:sticky de la barre du haut
     (elle défile alors avec la page au lieu de rester fixe). "clip" bloque le débordement
     horizontal sans ce problème, car il n'entre pas dans cette règle de promotion. */
  overflow-x: clip;
  touch-action: pan-y;
  /* Empêche l'effet de rebond ("rubber-band") d'iOS quand on tire au-delà du haut/bas de
     la page en laissant le doigt appuyé — sans ça, la page entière semble "sauter" ou se
     décaler brièvement, ce qui donnait l'impression que la barre du haut n'était plus fixe. */
  overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }

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

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text-strong);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--sidebar-shadow);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  /* 100dvh suit la hauteur réellement visible : sur iPhone, 100vh correspond à l'écran
     barre d'outils repliée, si bien que le bas du menu (raccourcis jour/nuit, déconnexion)
     tombait sous la zone affichée et restait coupé. Repli en 100vh pour les navigateurs
     qui ignorent dvh. */
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  transition: width 0.16s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* Emplacement du menu pendant le chargement d'une page. Le vrai menu n'est dessiné qu'après
   la vérification de session (/api/me) : entre-temps, sa place montrait le fond clair de la
   page, ce qui produisait un flash blanc à chaque clic depuis que le menu est sombre. Ce bloc
   occupe la place tant que le conteneur est vide, puis disparaît quand le menu est injecté.
   Réservé à l'affichage bureau : sur mobile, le menu est un tiroir masqué par défaut. */
@media (min-width: 861px) and (min-height: 501px) {
  .app-shell:empty::before {
    content: ""; display: block; flex-shrink: 0; align-self: flex-start;
    width: var(--sidebar-w); height: 100vh; height: 100dvh;
    position: sticky; top: 0;
    background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border);
  }
  html[data-sidebar="collapsed"] .app-shell:empty::before { width: var(--sidebar-w-collapsed); }
}

.sidebar .brand { display: flex; flex-direction: column; padding: 24px 16px; }
.sidebar .brand .brand-top { display: flex; align-items: flex-start; gap: 10px; margin-top: -5px; }
.sidebar .brand .logo { margin-top: 2px; }
.sidebar .brand .logo { width: 32px; height: 32px; flex-shrink: 0; }
.sidebar .brand .brand-text { display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; }
.sidebar .brand .brand-name { font-weight: 800; font-size: 19px; letter-spacing: 0.2px; color: var(--accent); }
/* Sur le fond sombre du menu : icône du logo en blanc, nom "SimplyProspection" dans le bleu
   du menu (le !important l'emporte sur la couleur posée en ligne sur "Prospection").
   Limité au menu : la page de connexion ne change pas. */
.sidebar .brand .logo { filter: brightness(0) invert(1); }
.sidebar .brand .brand-name, .sidebar .brand .brand-name span { color: #ffffff !important; }
.sidebar .brand .brand-sub { font-size: 9.5px; color: var(--sidebar-text-faint); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }
.role-view-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }

.card-toggle-header {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; margin: 0; text-align: left;
}
.card-toggle-chevron {
  font-size: 18px; color: var(--text-muted); flex-shrink: 0; margin-top: 3px; transition: transform 0.15s ease; transform: rotate(90deg);
}
.card-collapsible.collapsed .card-toggle-chevron { transform: rotate(0deg); }
.card-toggle-body { margin-top: 14px; }
.card-collapsible.collapsed .card-toggle-body { display: none; }
.role-view-badge {
  display: inline-flex; padding: 2px 8px; border-radius: 20px; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.role-view-direction { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.role-view-administrateur { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.role-view-commercial { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.role-view-name { font-size: 10.5px; font-weight: 600; color: var(--sidebar-text); white-space: nowrap; }
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .role-view-row { display: none; }

.sidebar-header-row {
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
  padding-top: env(safe-area-inset-top, 0px);
  position: sticky; top: 0; z-index: 5; background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  min-height: 82px;
}
.sidebar.collapsed .sidebar-header-row { flex-direction: column; gap: 8px; padding: 0 0 8px; }
.sidebar.collapsed .brand { padding: 12px 0 0; align-items: center; }

.collapse-toggle {
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--sidebar-toggle-border);
  background: var(--sidebar-toggle-bg);
  color: var(--sidebar-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 12px; flex-shrink: 0;
  transition: background 0.12s, transform 0.16s, color 0.12s;
}
.collapse-toggle:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.sidebar.collapsed .collapse-toggle { transform: rotate(180deg); }

.sidebar-section-label {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 14px 18px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--sidebar-text-faint); white-space: nowrap; overflow: hidden;
}
.sidebar.collapsed .sidebar-section-label { opacity: 0; height: 0; padding: 0; }

/* gap: 0 — les trois entrees du haut sont dans un meme bloc et n'avaient donc
   aucun ecart entre elles. On aligne tout le menu sur ce rythme-la. */
.sidebar nav { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 0; }

.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px;
  color: var(--sidebar-text); font-size: 13.4px; font-weight: 600; cursor: pointer;
  transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden;
}
.nav-item .ic { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-item .ic svg { width: 17px; height: 17px; display: block; }
.nav-item .label { overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .nav-item .label { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
.nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.nav-item.active { background: var(--sidebar-active); color: #fff; font-weight: 700; }
.nav-item.active .ic { color: #fff; }
.nav-item[draggable="true"] { cursor: grab; }
.nav-item[draggable="true"].dragging { opacity: 0.4; cursor: grabbing; }

/* ---------- nav sections (Espace clients / Espace fournisseurs) ---------- */
/* Pas de marge propre : l'espacement vient du `gap` de <nav>, unique pour
   tout le menu. Les deux cumules doublaient l'ecart entre blocs. */
.nav-block { margin-bottom: 0; }
.nav-section-header {
  /* gap identique a celui des items (12px) : a 6px, le texte des titres
     commencait 6 px plus a gauche et les premieres lettres ne s'alignaient pas
     avec celles des items en dessous. */
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* L'en-tete est un lien vers la premiere entree de la section : on neutralise
     le souligne et la couleur que le navigateur met d'office sur un lien. */
  text-decoration: none; color: inherit;
  /* Meme rembourrage qu'un item du menu : sans ca, les titres de section
     creaient un espace plus large et le rythme du menu etait irregulier. */
  padding: 10px 12px; background: none; border: none; cursor: pointer; font-family: inherit;
}
.nav-section-label {
  /* Meme casse et meme corps que les items du menu : les capitales etroites se
     lisaient moins bien que le texte courant, et l'oeil devait changer de
     regime a chaque titre. Le pictogramme, le chevron et la couleur suffisent
     a distinguer un titre de section d'une entree. */
  font-size: 13.4px; font-weight: 600; letter-spacing: 0;
  color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Le titre occupe l'espace libre : sans ca, `space-between` ecartait le
     pictogramme du texte en les repoussant aux deux bords. */
  flex: 1; text-align: left;
}
.nav-section-chevron {
  /* Hauteur bornee a celle d'une icone d'item (18 px). En 22 px sans contrainte,
     le chevron imposait une ligne plus haute et les titres de section
     mesuraient 46 px contre 38 pour un item : c'est ce surplus qu'on voyait
     comme un ecart supplementaire. */
  font-size: 18px; line-height: 1; height: 18px; width: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sidebar-text-faint); flex-shrink: 0; transition: transform 0.15s ease;
  transform: rotate(90deg);
}
.nav-section.collapsed .nav-section-chevron { transform: rotate(0deg); }
.nav-section-items { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.nav-section.collapsed .nav-section-items { display: none; }
.sidebar.collapsed .nav-section-header { justify-content: center; padding: 10px; }
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-section-chevron { display: none; }

.nav-badge {
  margin-left: auto; flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800;
  background: var(--sidebar-hover-bg); color: var(--sidebar-text);
}
.nav-item.active .nav-badge { background: rgba(255,255,255,0.28); color: #fff; }
.nav-badge.nav-badge-urgent { background: var(--danger); color: #fff; }
.nav-badge.nav-badge-chat { background: var(--tint-green-bg); color: var(--tint-green-fg); margin-left: auto; }
.nav-item.active .nav-badge.nav-badge-chat { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.nav-badge.nav-badge-chat-group { background: var(--tint-orange-bg); color: var(--tint-orange-fg); margin-left: 4px; }
.nav-item.active .nav-badge.nav-badge-chat-group { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.sidebar.collapsed .nav-badge { display: none !important; }

/* ---------- rapports : presence, tri des colonnes, graphique ---------- */
/* Pastille de presence. Verte en ligne, orange inactif, grise hors ligne — la
   couleur ne porte jamais l'information seule, le libelle l'accompagne toujours. */
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; flex-shrink: 0; }
.pastille-en_ligne { background: var(--success); }
.pastille-inactif { background: var(--warning); }
.pastille-deconnecte { background: var(--text-muted); }

th.triable { cursor: pointer; user-select: none; white-space: nowrap; }
th.triable:hover { color: var(--text); }
th.triable .fleche { opacity: 0; margin-left: 4px; font-size: 9px; }
th.triable.trie .fleche { opacity: 1; }
th.triable:hover .fleche { opacity: 0.45; }

/* Le nom d'un commercial ouvre sa fiche : il doit se voir comme un lien. */
.lien-fiche { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: left; }
.lien-fiche:hover { text-decoration: underline; }

/* Graphique des temps de connexion : meme gabarit que les statistiques de vente,
   avec une echelle a gauche pour que les hauteurs se lisent. */
.rapport-graph { display: flex; gap: 10px; }
.rapport-graph-echelle { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--text-muted); padding-bottom: 22px; text-align: right; min-width: 34px; }
.rapport-graph .stats-barchart { flex: 1; height: 190px; }
.rapport-graph .stats-barchart-bar { width: 72%; max-width: 26px; background: var(--accent); }
.rapport-graph .stats-barchart-label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rapport-vide { padding: 26px 0; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* ---------- generic name-search dropdown (utilisé par ex. par le transfert de newsletter) ---------- */
.global-search-results {
  display: none; position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); z-index: 60;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md);
  max-height: 320px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: 6px;
}
.gsr-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 7px; cursor: pointer;
  color: var(--text); font-size: 12.5px;
}
.gsr-row:hover { background: var(--bg); }
.gsr-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; text-transform: uppercase; }
.gsr-empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* ---------- mobile nav (hamburger + drawer) ---------- */
.mobile-nav-toggle {
  display: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--primary); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(10,15,26,0.5); z-index: 900; }
.mobile-nav-overlay.active { display: block; }

@media (max-width: 860px), (max-height: 500px) {
  /* La 2e condition (max-height) couvre les téléphones larges en orientation paysage
     (ex: iPhone Pro Max ≈ 932px de large, au-dessus du seuil de largeur) : sans elle, le
     menu latéral complet s'affichait "tout seul" au lieu de rester replié derrière ☰. */
  .mobile-nav-toggle { display: flex; }
  .collapse-toggle { display: none; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 950; width: 280px !important;
    transform: translateX(-100%); transition: transform 0.2s ease;
    /* Barre d'accueil de l'iPhone : sans cette marge, la dernière rangée d'icônes
       se retrouve sous l'indicateur tactile. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sidebar.mobile-open { transform: translateX(0); }
}

/* ---------- tables sur mobile : défilement tactile fluide, densité resserrée,
   boutons d'action plus grands (cibles tactiles) — le reste (colonnes visibles)
   passe par la 1ère colonne "collée" (SP.applyStickyColumns) déjà en place. ---------- */
@media (max-width: 640px) {
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .row-actions { flex-wrap: wrap; }
  .row-actions .btn, .row-actions button { padding: 8px 11px; font-size: 12.5px; }

  /* La barre de recherche (position:fixed, alignée en JS sur la barre d'outils desktop)
     chevauche les filtres empilés sur petit écran : on la remet dans le flux normal. */
  .search-bar.search-bar-aligned-toolbar { position: static !important; top: auto !important; right: auto !important; width: 100%; margin-bottom: 10px; }
  .search-bar.search-bar-aligned-toolbar input { width: 100%; }

  /* En-tête de fiche détail (nom + bouton Modifier/Supprimer/tchat/suivi/fermer) : le groupe
     de boutons ne passait pas à la ligne et débordait hors écran. Réorganisé en grille 2x2
     compacte (tchat/suivi commercial en colonne, Supprimer/Modifier en colonne), et le bouton
     fermer "×" remonte en position absolue à la hauteur du titre, dans l'angle supérieur droit. */
  .modal-header { flex-wrap: wrap; row-gap: 10px; position: relative; }
  .modal-header .modal-close { position: absolute; top: 20px; right: 22px; }
  .modal-header > div:last-child {
    display: grid; grid-template-columns: auto auto; gap: 8px; width: auto; margin-left: auto; margin-top: 4px;
  }
  .modal-header > div:last-child [id$="-chat-btn-slot"] { grid-row: 1; grid-column: 1; }
  .modal-header > div:last-child [id$="-actions-btn-slot"] { grid-row: 2; grid-column: 1; }
  .modal-header > div:last-child [data-fiche-act="delete"] { grid-row: 1; grid-column: 2; }
  .modal-header > div:last-child [data-fiche-act="edit"] { grid-row: 2; grid-column: 2; }

  /* Même souci en bas de fiche : la rangée "Basculer dans la catégorie" + bouton fermer "×"
     ne passait pas à la ligne, la croix se retrouvait coincée au milieu des pastilles. */
  .modal-actions { flex-wrap: wrap; row-gap: 10px; }
  /* Une fois passée à la ligne, la croix se retrouve seule sur sa ligne : "space-between"
     n'a alors qu'un seul élément à répartir et le colle à gauche. On la force à droite. */
  .modal-actions .modal-close { margin-left: auto; }
}

.theme-toggle-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 10px 6px; margin-top: 2px; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; }
.theme-toggle-row > .toolbar-draggable { cursor: grab; }
.theme-toggle-row > .toolbar-draggable.dragging { opacity: 0.4; cursor: grabbing; }
.grid-draggable { cursor: grab; }
.grid-draggable.dragging { opacity: 0.4; cursor: grabbing; }
.theme-toggle-btn {
  flex: none; width: 33px; height: 33px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--sidebar-border); background: transparent; color: var(--sidebar-text);
  font-family: inherit; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.theme-toggle-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.theme-toggle-btn:focus, .theme-toggle-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sidebar-hover-bg); }
.theme-toggle-btn .ic {
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--accent); transition: color 0.15s;
}
.theme-toggle-btn.is-dark .ic { color: var(--accent-light); }
.theme-toggle-btn .label { display: none; }

.sidebar-footer-actions { display: flex; align-items: center; gap: 8px; padding: 0; }
.logout-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--sidebar-border); background: transparent; color: var(--sidebar-text); font-size: 13.2px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; overflow: hidden;
}
.logout-btn svg { flex-shrink: 0; }
.logout-btn .label { overflow: hidden; text-overflow: ellipsis; }
.logout-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* Bouton "Déconnexion" du menu : orange de 2B Connect, survol orange clair comme sur 2B. */
/* « Deconnexion » et « LCDM » se fondent dans la liste : plus d'encadre, et
   le meme gabarit qu'une entree de menu (rembourrage 10/12, ecart 12, icone de
   18 px) pour que pictogrammes et premieres lettres tombent sur la meme
   verticale que « Carte » juste au-dessus. */
.sidebar .sidebar-footer-actions .logout-btn {
  border: none; padding: 10px 12px; gap: 12px; font-size: 13.4px;
}
.sidebar .sidebar-footer-actions .logout-btn svg { width: 18px; height: 18px; }
/* Le survol de « LCDM » remplissait tout l'encadre de bleu vif. L'encadre
   disparu, cette bande se lisait comme une selection : on reprend le survol
   discret des entrees de menu. */
.sidebar .sidebar-footer-actions a.sidebar-ext-link:hover {
  background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong);
}

.sidebar .logout-btn:not(.sidebar-ext-link) { color: var(--sidebar-logout); }
.sidebar .logout-btn:not(.sidebar-ext-link):hover { background: var(--sidebar-hover-bg); border-color: var(--sidebar-border); color: var(--sidebar-logout-hover); }
.sidebar.collapsed .logout-btn { width: 100%; justify-content: center; padding: 8px; }
.sidebar.collapsed .logout-btn .label { display: none; }
/* Lien externe (LCDM) sous "Déconnexion" : même gabarit, mais survol bleu — le rouge du
   bouton de déconnexion signale une sortie, pas un lien. */
a.sidebar-ext-link { text-decoration: none; box-sizing: border-box; }
a.sidebar-ext-link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.counts-toggle-btn {
  flex-shrink: 0; width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; font-size: 14.5px;
  border-radius: 9px; border: 1px solid var(--sidebar-border); background: transparent; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.counts-toggle-btn:hover { background: var(--sidebar-hover-bg); }
.counts-toggle-btn.counts-hidden { opacity: 0.4; }
.counts-toggle-btn:focus, .counts-toggle-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sidebar-hover-bg); }
.sidebar.hide-counts .nav-item:not([href="alertes.html"]):not([href="alertes-relances.html"]) .nav-badge { display: none !important; }
.sidebar.collapsed .theme-toggle-row { flex-direction: column; }

.lang-switcher { position: relative; flex-shrink: 0; }
.lang-switcher-btn {
  width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; font-size: 15.5px;
  border-radius: 9px; border: 1px solid var(--sidebar-border); background: transparent; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.lang-switcher-btn:hover { background: var(--sidebar-hover-bg); }
.lang-switcher-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; min-width: 172px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); padding: 6px; z-index: 40;
}
.sidebar.collapsed .lang-switcher-menu { right: auto; left: 0; }
.lang-switcher-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 7px; border: none;
  background: transparent; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
}
.lang-switcher-item:hover { background: var(--sidebar-hover-bg); }
.lang-switcher-item.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); font-weight: 700; }

.accent-switcher-menu { grid-template-columns: repeat(5, 1fr); gap: 6px; min-width: 158px; }
.accent-switcher-item {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent;
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.accent-switcher-item:hover { border-color: var(--sidebar-border); }
.accent-switcher-item.active { border-color: var(--text); }
.accent-swatch-dot { width: 18px; height: 18px; border-radius: 50%; display: block; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.08); }
.accent-switcher-btn .accent-swatch-dot { width: 15px; height: 15px; }

.sidebar-footer { padding: 6px 18px 18px; border-top: 1px solid var(--sidebar-border); font-size: 12px; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; }
.sidebar.collapsed .sidebar-footer { text-align: center; padding: 12px 8px 18px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 14px 28px;
  /* viewport-fit=cover (nécessaire pour la PWA en plein écran) fait passer le contenu sous
     l'encoche / Dynamic Island / barre de statut — on réserve cet espace en haut pour que le
     menu ☰ et le titre ne soient plus coupés. */
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  position: sticky; z-index: 12; min-height: 82px;
}
.topbar h1 { font-size: 19px; margin: 0; font-weight: 700; color: var(--primary); }
.topbar h1.page-title-icon { display: flex; align-items: center; gap: 9px; }
.topbar h1.page-title-icon svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.topbar .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.topbar h1.page-title-icon + .sub { margin-left: 29px; }
@media (max-height: 500px) {
  /* Téléphone en orientation paysage : peu de hauteur disponible — on force le sous-titre
     sur 2 lignes (plutôt qu'une seule ligne très large) pour libérer la place nécessaire
     aux icônes de la barre du haut, qui restent alors sur la même ligne que le titre. */
  .topbar .sub { max-width: 260px; }
}

.content { padding: 24px 28px 60px; }

/* ---------- filter pills (statut, carte...) ---------- */
.pill-filter { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 3px; flex-wrap: wrap; }
.filter-pill { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-muted); white-space: nowrap; }
.filter-pill:hover { color: var(--primary); }
.filter-pill.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.role-pills-direction .filter-pill.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.role-pills-administrateur .filter-pill.active { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.role-pills-commercial .filter-pill.active { background: var(--tint-green-bg); color: var(--tint-green-fg); }

.audience-toggle { display: inline-flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.audience-toggle-btn { padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border: none; background: none; white-space: nowrap; flex-shrink: 0; }
.audience-toggle-btn:hover { color: var(--text); }
.audience-toggle-btn.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }

.segmented-control { display: inline-flex; align-items: center; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.segmented-option { padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; border: none; background: none; font-family: inherit; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.segmented-option:hover { color: var(--text); }
.segmented-option.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }

.lang-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-pill {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--text); cursor: pointer; border: 1px solid var(--border); background: var(--bg); font-family: inherit;
  white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-pill:hover { border-color: var(--primary); }
.lang-pill.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); border-color: var(--tint-blue-fg); }

.accent-pill-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.accent-pill {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--text); cursor: pointer; border: 1px solid var(--border); background: var(--bg); font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.accent-pill:hover { border-color: var(--primary); }
.accent-pill.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); border-color: var(--tint-blue-fg); }
.accent-pill .accent-swatch-dot { width: 16px; height: 16px; flex-shrink: 0; }
.accent-pill span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* ---------- search bar ---------- */
.search-bar { position: relative; display: flex; align-items: center; }
.search-bar input {
  width: 260px; padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13.5px; background: var(--bg); color: var(--text); font-family: inherit;
}
@media (max-height: 500px) {
  /* Téléphone en orientation paysage : la barre de recherche (position fixe, alignée sur
     la ligne des filtres) est trop large et chevauche le dernier filtre — on la rétrécit. */
  .search-bar input { width: 140px; }
}
.search-bar input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.search-bar .search-ic { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; display: flex; }
.search-bar.search-bar-aligned-toolbar { position: fixed; right: 28px; z-index: 11; }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.topbar-icon-btn {
  flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.topbar-icon-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
@media (max-height: 500px) {
  /* Téléphone en orientation paysage : les icônes (et le bouton "+ Nouveau..." éventuel)
     restent sur la même ligne que le titre plutôt que de passer à leur propre ligne en
     dessous — le titre garde sa taille naturelle (flex-shrink:0) et c'est le groupe
     d'icônes qui se comprime et devient scrollable horizontalement s'il ne tient pas. */
  .topbar > .flex { flex-shrink: 0; }
  .topbar-actions { flex-shrink: 1; min-width: 0; }
}
@media (max-width: 640px) {
  /* Peu de place dans la barre du haut sur mobile : on retire l'export Excel (accessoire),
     pour garder les icônes essentielles (import, actualiser, réglages, déconnexion) visibles. */
  .topbar-export-btn { display: none; }
}
#topbar-logout-btn.topbar-icon-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---------- cards / tiles ---------- */
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.card h2, .card h3 { margin-top: 0; color: var(--primary); }
.field-title-lg { display: block; font-size: 16.38px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }

.kpi-tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: 11px; padding: 13px 14px 11px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi-tile .kpi-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(255,255,255,0.55); margin-bottom: 8px; }
.kpi-tile .kpi-icon svg { width: 14px; height: 14px; color: inherit; }
.quick-access-title { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.quick-access-ic { display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.quick-access-ic svg { width: 18px; height: 18px; }
.kpi-tile .kpi-label { font-size: 10.5px; opacity: 0.72; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.25; min-height: 2.3em; display: flex; align-items: flex-start; }
.kpi-tile .kpi-value { font-size: 21px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-tile.tint-blue { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.kpi-tile.tint-red { background: var(--tint-red-bg); color: var(--tint-red-fg); }
.kpi-tile.tint-green { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.kpi-tile.tint-gold { background: var(--tint-gold-bg); color: var(--tint-gold-fg); }
.kpi-tile.tint-orange { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.kpi-tile.tint-gray { background: var(--tint-gray-bg); color: var(--tint-gray-fg); }
.kpi-tile.tint-purple { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }
.kpi-tile.clickable { cursor: pointer; transition: transform 0.1s ease; }

/* ---------- Challenge ---------- */
.challenge-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  box-shadow: var(--shadow); text-align: center;
}
.challenge-card-ic { font-size: 26px; margin-bottom: 6px; }
.challenge-card-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.challenge-card-value { font-size: 24px; font-weight: 800; margin-top: 6px; color: var(--accent); }
.challenge-card-value.small-value { font-size: 16px; }
.challenge-table .challenge-row { cursor: pointer; transition: background 0.1s ease; }
.challenge-table .challenge-row:hover { background: var(--bg); }
.challenge-table .challenge-row.is-first { background: var(--tint-gold-bg); }
.challenge-table .challenge-row.is-first:hover { background: var(--tint-gold-bg); filter: brightness(0.97); }
.challenge-pos { font-weight: 800; white-space: nowrap; }
.challenge-next-step { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.kpi-tile.clickable:hover { transform: translateY(-2px); }

.section-title { font-size: 15px; font-weight: 700; color: var(--primary); margin: 28px 0 12px; display: flex; align-items: center; gap: 8px; }
.kpi-section-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.kpi-section-block { margin-top: 28px; }
.kpi-section-block:first-child { margin-top: 0; }

/* ---------- tables ---------- */
/* Le confinement ne vaut que pour l'axe horizontal : il empêche la page de glisser
   latéralement quand on fait défiler les colonnes. Sur l'axe vertical, le tableau n'a pas
   de défilement propre — c'est la zone qui l'entoure qui défile — donc la molette doit lui
   être transmise. Avec "contain" sur les deux axes, le geste était bloqué au-dessus du
   tableau et il fallait viser à côté pour faire défiler la page. */
.table-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; touch-action: pan-x pan-y; overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
/* Activite de l'equipe : la liste est longue par nature. On borne sa hauteur a
   une douzaine de lignes et on laisse defiler a l'interieur, plutot que de
   pousser le reste du tableau de bord vers le bas. */
.dash-activite-defile { max-height: 440px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; background: var(--bg); color: var(--text-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
@media (max-width: 640px) {
  thead th { padding: 8px 10px; font-size: 10.5px; }
  tbody td { padding: 9px 10px; font-size: 12.5px; }
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(47,111,235,0.05); }
tfoot td { padding: 10px 14px; border-top: 2px solid var(--border); }
.fv-ca-month-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg); color: var(--text); font-family: inherit; text-align: right; }
.fv-ca-month-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
td.wrap, th.wrap { white-space: normal; }

.resizable-table { table-layout: fixed; }
.resizable-table th:last-child, .resizable-table td:last-child { min-width: 90px; }
.resizable-table th { position: sticky; overflow: hidden; white-space: normal; line-height: 1.3; vertical-align: bottom; background: var(--card-bg); z-index: 10; }
.resizable-table td { overflow: hidden; text-overflow: ellipsis; }

.sticky-col-table th.sticky-col, .sticky-col-table td.sticky-col { position: sticky; left: 0; background: var(--card-bg); z-index: 11; }
.sticky-col-table th.sticky-col { z-index: 12; }
.sticky-col-table .sticky-col-last { box-shadow: 1px 0 0 var(--border); }

.filter-select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg);
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
  /* Un libellé long (nom de réseau, de région) étirait le menu sur toute la ligne et
     repoussait les filtres suivants : largeur bornée, le texte est tronqué proprement. */
  max-width: 200px; text-overflow: ellipsis;
}
.filter-select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.icon-select { position: relative; }
.icon-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  color: var(--text); font-size: 14px; font-family: inherit; cursor: pointer; box-sizing: border-box;
}
.icon-select-btn:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.icon-select-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.icon-select-current { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.icon-select-current span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-select-chevron { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.icon-select-panel {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 320px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  z-index: 50; padding: 4px;
}
.icon-select-option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.icon-select-option:hover { background: var(--bg); }
.icon-select-option.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.icon-select .ic { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.icon-select .ic svg { width: 15px; height: 15px; display: block; }
.icon-select-option.active .ic { color: inherit; }
.col-resize-handle {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; user-select: none;
}
.col-resize-handle:hover, .col-resize-handle.resizing { background: rgba(47,111,235,0.35); }
.resizable-table th.col-draggable { cursor: grab; }
.resizable-table th.col-draggable.dragging-col { opacity: 0.4; cursor: grabbing; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-ok { background: rgba(46,158,107,0.14); color: var(--success); }
.badge-warn { background: rgba(224,167,46,0.16); color: #8a651f; }
.badge-danger { background: rgba(215,68,62,0.14); color: var(--danger); }
.badge-muted { background: var(--border); color: var(--text-muted); }
.alert-type-ic { display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; color: var(--text-muted); }
.alert-type-ic svg { width: 100%; height: 100%; }
.badge-perdu { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.badge-prospect { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.badge-refus { background: var(--tint-red-bg); color: var(--tint-red-fg); }
.badge-client { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.badge-inactif { background: var(--tint-gray-bg); color: var(--tint-gray-fg); }
/* Reseau concurrent : ni bon ni mauvais, juste a part. Le violet est la seule
   teinte encore libre parmi les statuts fournisseurs. */
.badge-concurrent { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }

/* Lecture d'une carte de visite qui n'a rien donne : le message doit se voir,
   sinon on croit que rien ne s'est passe et on cherche le contact en vain. */
.fcv-alerte { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--tint-orange-bg); color: var(--tint-orange-fg); font-weight: 600; }

/* ---------- force de vente : barre de progression, notes ---------- */
.bar-track { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; height: 8px; width: 100%; min-width: 90px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); transition: width 0.2s ease; }
.bar-fill.over { background: var(--success); }
.bar-fill.low { background: var(--warning); }
.bar-pct { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: block; }

/* ---------- statistiques commercial : diagramme en barres 12 mois, funnel devis/commandes ---------- */
.stats-barchart { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding: 10px 4px 0; }
.stats-barchart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.stats-barchart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.stats-barchart-bar { width: 8px; min-height: 2px; border-radius: 2px 2px 0 0; transition: height 0.2s ease; }
.stats-barchart-label { font-size: 10px; color: var(--text-muted); margin-top: 6px; white-space: nowrap; }
.stats-barchart-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.stats-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.stats-funnel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.stats-funnel-label { width: 100px; font-size: 12.5px; color: var(--text-muted); flex-shrink: 0; }
.stats-funnel-value { width: 32px; text-align: right; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.commercial-name-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; text-align: left; }
.commercial-name-link:hover { text-decoration: underline; }
.fv-note { background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.fv-note .meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
.fv-note-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.fv-note-row .info { font-size: 13px; }
.fv-note-row .meta { font-size: 11.5px; color: var(--text); font-weight: 700; }
.fv-note-row .comment { color: var(--text-muted); margin-top: 2px; }
.fv-note-row .del-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 15px; padding: 2px 4px; flex-shrink: 0; }
.fv-note-row .edit-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 15px; padding: 2px 4px; flex-shrink: 0; }
.fv-note-row .actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.fv-detail-info { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; }

.dept-toggle-btn {
  background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; color: var(--text); font-family: inherit; vertical-align: middle;
}
.dept-chevron { display: inline-block; font-size: 22px; color: var(--text-muted); transition: transform 0.15s ease; transform: rotate(0deg); }
.dept-chevron.open { transform: rotate(90deg); }
.dept-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.dept-chips.collapsed { display: none; }
.dept-chip {
  display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 999px;
  background: var(--tint-blue-bg); color: var(--tint-blue-fg); font-size: 12px; font-weight: 700;
}

.site-card { position: relative; padding-top: 22px; }
.site-logo {
  width: 52px; height: 52px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px;
}
.site-logo img { width: 32px; height: 32px; object-fit: contain; }
.site-logo-fallback { display: none; font-size: 22px; align-items: center; justify-content: center; }

.contact-name-link {
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  text-align: left;
}

/* Espace Fournisseurs : nom de société toujours affiché en majuscules
   (liste + fiche), pour une présentation homogène quelle que soit la casse saisie. */
.fourn-name { text-transform: uppercase; }

/* Pays : toujours en minuscules, sauf la première lettre. */
.fourn-pays { text-transform: lowercase; }
.fourn-pays::first-letter { text-transform: uppercase; }
.contact-name-link:hover { text-decoration: underline; color: var(--accent); }

/* Casse d'affichage homogène, quelle que soit la casse saisie (Contacts) :
   nom de société / nom de gérant toujours en majuscules, ville / prénom
   toujours en minuscules sauf la première lettre. */
.upper-name { text-transform: uppercase; }
.lower-first { text-transform: lowercase; }
.lower-first::first-letter { text-transform: uppercase; }
/* Variante pour un <span> inline (ex: prénom au sein d'un nom complet) : ::first-letter
   n'est fiable que sur des boîtes de type bloc/table-cell, d'où le passage en inline-block. */
.lower-first-inline { text-transform: lowercase; display: inline-block; }
.lower-first-inline::first-letter { text-transform: uppercase; }

.attach-indicator {
  display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; vertical-align: middle; color: var(--text-muted); flex-shrink: 0;
  border: none; background: none; padding: 0; font: inherit; cursor: pointer;
}
.attach-indicator:hover { color: var(--accent); }
body.hide-attach .attach-indicator { display: none !important; }
body.hide-logos .logo-indicator { display: none !important; }
.chat-count-indicator {
  display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; vertical-align: middle; color: var(--text-muted); flex-shrink: 0;
  border: none; background: none; padding: 0; font: inherit; cursor: pointer;
}
.chat-count-indicator:hover { color: var(--accent); }
body.hide-chat-counts .chat-count-indicator { display: none !important; }
.attach-chat-stack { display: inline-flex; flex-direction: column; gap: 3px; vertical-align: middle; margin-right: 8px; }
.attach-chat-stack .attach-indicator,
.attach-chat-stack .chat-count-indicator { margin-right: 0; }
.name-cell { display: flex; align-items: center; min-width: 0; }
.name-cell .contact-name-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; display: inline-block; }
.name-favicon { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; margin-right: 6px; flex-shrink: 0; vertical-align: middle; }
.name-favicon-empty { display: inline-block; }
.attach-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--border); color: var(--text-muted); font-size: 11px; font-weight: 700;
}
.attach-count.has-attach { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.attach-count.has-chat { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.attach-col { width: 1%; white-space: nowrap; padding-right: 0; }
.attach-col + td { padding-left: 4px; }
.attach-col > *:last-child { margin-right: 0 !important; }

/* colonne icônes/logos : se réduit à zéro (ou à la taille des éléments restants, en largeur automatique)
   selon ce qui est masqué parmi trombones / logos / compteur de tchat. */
body.hide-attach.hide-logos th.attach-col[data-kind="logo"],
body.hide-attach.hide-logos td.attach-col[data-kind="logo"],
body.hide-logos th.attach-col[data-kind="logo"],
body.hide-logos td.attach-col[data-kind="logo"],
body.hide-attach th.attach-col[data-kind="attach"],
body.hide-attach td.attach-col[data-kind="attach"] {
  width: 0 !important; padding: 0 !important; border-right: none; overflow: hidden;
}
body.hide-attach.hide-logos.hide-chat-counts th.attach-col[data-kind="both"],
body.hide-attach.hide-logos.hide-chat-counts td.attach-col[data-kind="both"] {
  width: 0 !important; padding: 0 !important; border-right: none; overflow: hidden;
}
body.hide-attach.hide-logos th.attach-col .col-resize-handle,
body.hide-logos th.attach-col[data-kind="logo"] .col-resize-handle,
body.hide-attach th.attach-col[data-kind="attach"] .col-resize-handle { display: none; }

.fiche-map {
  width: 100%; height: 200px; border-radius: 10px; overflow: hidden; margin-bottom: 10px;
  background: var(--bg); border: 1px solid var(--border);
}
.fiche-go-btn { width: 100%; justify-content: center; margin-bottom: 18px; }
@media (max-width: 640px) { .fiche-map { height: 160px; } }

.carte-type-switcher { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.carte-type-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.carte-type-btn:hover { background: var(--sidebar-hover-bg, var(--bg)); }
.carte-type-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.28); padding: 14px;
}
.carte-type-menu-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.carte-type-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.carte-type-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 10px;
  border: 2px solid transparent; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text);
  font-family: inherit;
}
.carte-type-option:hover { background: var(--bg); }
.carte-type-option.active { border-color: var(--accent); color: var(--accent); }
.carte-type-swatch { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border); }
.carte-type-swatch-plan { background: linear-gradient(135deg, #e7ecf5 25%, #cfe0d8 25% 50%, #e7ecf5 50% 75%, #cfe0d8 75%); background-size: 12px 12px; }
.carte-type-swatch-satellite { background: linear-gradient(135deg, #2c3b26, #55613f 40%, #2f3d2a 70%, #4a4033); }
.carte-type-swatch-relief { background: linear-gradient(135deg, #cfe3c8, #9fc79a 50%, #d8cd9a); }

.detail-rows { margin-top: 4px; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row .dr-label { color: var(--text-muted); flex-shrink: 0; }
.detail-row .dr-value { text-align: right; word-break: break-word; color: var(--text); }

.row-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--primary); border-radius: 7px; cursor: pointer;
}
.icon-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.icon-btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.fv-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.fv-doc-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.fv-doc-thumb {
  width: 100%; height: 200px; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fv-doc-thumb canvas, .fv-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fv-doc-thumb-icon { font-size: 42px; opacity: 0.5; }
.fv-doc-card-upload { border-style: dashed; transition: border-color 0.12s, background 0.12s; }
.fv-doc-card-upload.drag-over, .fv-doc-card-upload:hover { border-color: var(--accent); background: rgba(47,111,235,0.05); }
.fv-doc-meta { font-size: 12.5px; line-height: 1.4; overflow: hidden; }
.fv-doc-meta strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.fv-doc-meta .fv-doc-filename { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-doc-actions { display: flex; gap: 6px; justify-content: flex-end; }
.fv-doc-actions .icon-btn { text-decoration: none; }

.collapsible-h4 { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.collapsible-h4 .section-chevron { font-size: 22px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.15s ease; transform: rotate(90deg); }
.collapsible-h4.collapsed .section-chevron { transform: rotate(0deg); }

/* ---------- empty state ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state .icon { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }
.empty-state h3 { color: var(--primary); margin: 6px 0 4px; }
.empty-state p { margin: 0; font-size: 13px; }

/* ---------- buttons ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.field-label-hint { color: var(--danger); font-weight: 600; margin-left: 4px; }
.field label:has(.field-label-hint) { min-height: 32px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; background: var(--bg); color: var(--text); font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.field textarea { min-height: 70px; resize: vertical; }

.field-with-button { display: flex; gap: 8px; align-items: stretch; }
.field-with-button input { flex: 1; min-width: 0; height: 38px; box-sizing: border-box; }
.field-inline-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }

.entity-contacts-list { display: flex; flex-direction: column; gap: 8px; }
.entity-contact-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.entity-contact-row .ecr-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.field-action-btn { flex-shrink: 0; padding: 0 14px; font-size: 12.5px; white-space: nowrap; height: 38px; box-sizing: border-box; }
.field-btn-status { margin-top: 4px; min-height: 14px; }

.product-cat-card { position: relative; }
.product-cat-header {
  width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: none;
  padding: 0; margin-bottom: 14px; cursor: pointer; text-align: left; font-family: inherit;
}
.product-cat-header-text { flex: 1; min-width: 0; }
.product-cat-header-text h3 { margin: 0 0 2px; }
.product-cat-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.product-cat-chevron {
  flex-shrink: 0; font-size: 11px; color: var(--text-muted); transition: transform 0.15s ease; transform: rotate(90deg);
}
.product-cat-header.collapsed .product-cat-chevron { transform: rotate(0deg); }
/* Chevron porte directement la classe (bouton « tout reduire », en-tetes de documents). */
.product-cat-chevron.collapsed { transform: rotate(0deg); }

/* En-tete de section repliable dans Documents */
.doc-type-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.doc-type-header.collapsed .product-cat-chevron { transform: rotate(0deg); }
.doc-type-header:hover h4 { color: var(--primary); }
/* La pastille reste collee au titre plutot que de suivre la largeur du bouton. */
.doc-type-header .attach-count { margin-left: 2px; }
.product-pills { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.product-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); font-size: 12.5px;
  font-weight: 600; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.product-pill:hover { border-color: var(--accent); color: var(--primary); }
.product-pill.has-matches { background: var(--tint-blue-bg); color: var(--tint-blue-fg); border-color: transparent; }
.product-pill-label {
  flex: 1; min-width: 0; display: flex; align-items: center; text-align: left;
  background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer;
}
.product-pill-badges { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.product-pill-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
}
.product-pill-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.product-pill-actions .icon-btn { width: 22px; height: 22px; font-size: 12px; }

.sector-legacy-chips { display: none; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.sector-legacy-label { width: 100%; margin-bottom: 2px; }
.sector-legacy-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--tint-gold-bg); color: var(--tint-gold-fg); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sector-legacy-remove { border: none; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px; opacity: 0.65; }
.sector-legacy-remove:hover { opacity: 1; }

.sector-blocks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.sector-block { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.sector-block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sector-category-select {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); color: var(--text); font-family: inherit; font-size: 13.5px;
}
.sector-category-select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.sector-remove-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--danger); cursor: pointer; font-size: 17px; line-height: 1;
}
.sector-remove-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.sector-items-wrap { margin-top: 10px; }
.sector-items-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 8px; }
.sector-toggle-btn { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.sector-add-btn { padding: 9px 16px; font-size: 13px; }
@media (max-width: 640px) { .sector-items-grid { grid-template-columns: 1fr; } }

.multiselect-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg);
  max-height: 260px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
}
.multiselect-option { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; color: var(--text); }
.multiselect-option input { width: auto; margin: 0; flex-shrink: 0; }
/* Listes de codes courts (departements) : colonnes etroites pour tout voir sans defiler. */
.multiselect-group.multiselect-compact {
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 3px 8px; max-height: 320px;
}
.multiselect-compact .multiselect-option { font-size: 13px; gap: 5px; }
/* Départements déjà attribués à un autre commercial (nom visible au survol). */
.multiselect-option.dept-taken { color: var(--warn, #C9971F); font-weight: 700; }
/* Départements libres : aucun commercial ne les couvre. */
.multiselect-option.dept-free { color: var(--success); font-weight: 700; }
/* Légende sous la grille, sur toute la largeur. */
.dept-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.dept-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dept-legend-free::before { background: var(--success); }
.dept-legend-taken::before { background: var(--warn, #C9971F); }
.dept-chip.dept-chip-conflict { background: var(--tint-orange-bg, #fff4e0); color: var(--tint-orange-fg, #9a5b00); }
/* Message de doublon, sous la grille des départements. */
.sector-conflict {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6;
  background: var(--tint-orange-bg, #fff4e0); color: var(--tint-orange-fg, #9a5b00);
  border: 1px solid rgba(201,151,31,0.35);
}
.sector-conflict-titre { display: block; font-weight: 800; margin-bottom: 2px; }
@media (max-width: 640px) { .multiselect-group { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .multiselect-group.multiselect-compact { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 8px; border: none; font-size: 13.5px; font-weight: 700; cursor: pointer; background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-light); }
.btn.btn-accent { background: var(--accent); color: #fff; }
.btn.btn-accent:hover { background: var(--accent-light); }
.btn.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn.btn-secondary:hover { background: var(--border); }
.btn.btn-block { width: 100%; }
.btn.btn-danger { background: var(--danger); color: #fff; }
.btn.btn-danger:hover { filter: brightness(0.92); }
/* Anciennement vert : aligné sur le bleu des autres boutons d'action. */
.btn.btn-success { background: var(--accent); color: #fff; }
.btn.btn-success:hover { filter: brightness(0.93); }
.btn.btn-tint-green { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.btn.btn-tint-green:hover { filter: brightness(0.96); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- Améliorations : capture d'écran + annotation ---------- */
.screenshot-preview { width: 100%; max-width: 320px; min-height: 90px; border: 1px dashed var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); }
.screenshot-preview img { width: 100%; display: block; }
/* Retour visuel pendant le glisser-déposer d'une image. */
.screenshot-preview.is-dragover { border-color: var(--accent); border-style: solid; background: var(--tint-blue-bg, rgba(47,111,235,0.08)); }
.screenshot-preview span { text-align: center; padding: 8px 12px; line-height: 1.5; }
.am-detail-screenshot { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 16px; cursor: zoom-in; }
.annot-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 28px; border-bottom: 1px solid var(--border); }
.annot-tool { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; font-size: 14px; }
.annot-tool.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.annot-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.annot-color.active { border-color: var(--text); }
.annot-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.annot-canvas-wrap { padding: 16px 28px; display: flex; justify-content: center; background: var(--bg); overflow: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.annot-canvas-wrap canvas { border-radius: 6px; border: 1px solid var(--border); cursor: crosshair; max-width: 100%; }

/* ---------- page actions (create button, above title) ---------- */
.page-actions { padding: 14px 28px 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; position: sticky; top: 0; z-index: 13; background: var(--bg); }
.list-toolbar { position: sticky; z-index: 11; background: var(--bg); padding-top: 2px; }
@media (max-width: 640px) {
  /* Sur mobile, les filtres (département, pays, commercial...) passaient sur plusieurs
     lignes et mangeaient de la hauteur utile. On les garde sur une seule ligne qui défile
     elle-même horizontalement, comme la rangée d'icônes de la barre du haut. */
  .list-toolbar { max-width: 100%; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; }
  .list-toolbar > * { flex-shrink: 0; }
}
@media (max-height: 500px) {
  /* Téléphone en orientation paysage : les filtres fixes prennent trop de hauteur —
     on les laisse défiler avec la page pour voir plus de lignes du tableau. */
  .list-toolbar { position: static; }
}
.btn-new {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow);
  transition: filter 0.12s ease; box-sizing: border-box; flex-shrink: 0;
}
.btn-new:hover { background: var(--accent-light); filter: none; }
.btn-new.btn-outline { background: var(--card-bg); color: var(--primary); border: 1px solid var(--border); box-shadow: none; }
.btn-new.btn-outline:hover { background: var(--bg); filter: none; }

/* ---------- modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(10,15,26,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; animation: modal-fade-in 0.12s ease; }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--card-bg); color: var(--text); border-radius: 16px; box-shadow: var(--shadow-md); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: 26px 28px; animation: modal-scale-in 0.14s ease; }
.modal.modal-wide { max-width: 760px; }
.image-lightbox-overlay { padding: 32px; }
.image-lightbox { position: relative; max-width: 92vw; max-height: 92vh; animation: modal-scale-in 0.14s ease; }
.image-lightbox img { display: block; max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: var(--shadow-md); }
.image-lightbox-close {
  position: absolute; top: -14px; right: -14px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 50%; width: 34px; height: 34px; font-size: 20px; box-shadow: var(--shadow-md);
}
@keyframes modal-scale-in { from { opacity: 0; transform: scale(0.97) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.modal-header h2 { margin: 0 0 4px; color: var(--primary); font-size: 18px; }
/* Le bouton d'enregistrement est double en haut a droite, a gauche de la croix :
   sur une fiche partenaire, le bouton du bas est a deux ecrans de defilement. */
.modal-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.modal-header-actions .modal-submit-top { padding: 7px 16px; font-size: 13px; white-space: nowrap; }
.am-modal-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 14px; font-size: 19px; font-weight: 700; color: var(--primary); }
.am-modal-eyebrow .ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.am-modal-eyebrow .ic svg { width: 20px; height: 20px; display: block; }
/* Fiche détail (contact/client…) : en-tête (nom, statut, actions) fixe, seul le reste défile. */
.modal.modal-fixed-header { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.modal.modal-fixed-header .modal-header { flex-shrink: 0; margin-bottom: 0; padding: 26px 28px 18px; border-bottom: 1px solid var(--border); }
.modal.modal-fixed-header .modal-scroll-body { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: 18px 28px 26px; }
.modal.modal-fixed-header .am-modal-eyebrow { flex-shrink: 0; margin-bottom: 0; padding: 22px 28px 0; }
.modal.modal-fixed-header .am-modal-eyebrow + .modal-header { padding-top: 6px; }

/* Tchat interne (fiche contact / partenaire) : direction, administrateurs, commerciaux */
.chat-trigger-btn, .actions-trigger-btn { position: relative; width: 37px; height: 37px; box-sizing: border-box; }
.chat-trigger-btn .chat-badge {
  position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.chat-modal { display: flex; flex-direction: column; width: 100%; max-width: 520px; height: 78vh; max-height: 660px; padding: 0; }
.chat-modal-header { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.chat-modal-header h3 { margin: 0; font-size: 16px; color: var(--primary); }
.chat-modal-header .small { color: var(--text-muted); margin-top: 3px; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.chat-messages-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 30px 10px; }
.chat-msg { display: flex; gap: 10px; }
.chat-msg-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 1.5px solid; background: var(--card-bg); overflow: hidden;
}
.chat-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.chat-msg-author { font-weight: 700; font-size: 13px; color: var(--text); }
.chat-msg-time { font-size: 11.5px; color: var(--text-muted); }
.chat-msg-role { font-size: 11.5px; color: var(--text-muted); }
.chat-msg-to { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.chat-msg-bubble {
  position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; color: var(--text); line-height: 1.45;
}
.chat-msg-text { white-space: pre-wrap; word-break: break-word; }
.chat-msg-quote {
  border-left: 3px solid var(--accent); background: var(--card-bg); border-radius: 6px; padding: 5px 9px; margin-bottom: 7px;
  font-size: 12px; color: var(--text-muted); font-style: italic; cursor: pointer;
}
.chat-msg-quote b { font-style: normal; color: var(--text); }
.chat-msg-attachment {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--primary); text-decoration: none;
}
.chat-msg-attachment:hover { border-color: var(--accent); }
.chat-msg-actions {
  position: absolute; top: -14px; right: 8px; display: none; gap: 4px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px; box-shadow: var(--shadow);
}
.chat-msg:hover .chat-msg-actions { display: flex; }
.chat-msg-action-btn {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; background: none;
  color: var(--text-muted); cursor: pointer; border-radius: 5px;
}
.chat-msg-action-btn:hover { background: var(--bg); color: var(--primary); }
.chat-reply-preview {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 22px;
  background: var(--bg); border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted);
}
.chat-reply-preview b { color: var(--text); }
.chat-reply-preview button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; }
.chat-attachment-staged {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 22px; font-size: 12.5px; color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.chat-attachment-staged b { color: var(--text); }
.chat-attachment-staged button { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 14px; }
.chat-recipient-row { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 22px 0; }
.chat-recipient-row select {
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 12.5px; background: var(--card-bg);
  color: var(--text); font-family: inherit;
}
.chat-composer { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); }
.chat-composer-input {
  flex: 1; border: 1px solid var(--border); border-radius: 20px; padding: 9px 16px; font-size: 13.5px;
  background: var(--card-bg); color: var(--text); font-family: inherit;
}
.chat-composer-input:focus { outline: none; border-color: var(--accent); }
.chat-composer .icon-btn { border-radius: 50%; flex-shrink: 0; }
.modal-close { border: none; background: transparent; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.modal-form-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  /* La règle non conditionnelle ci-dessus (même propriété grid-template-columns) est plus
     bas dans le fichier qu'un éventuel bloc mobile placé en haut : elle l'emporterait quand
     même. On la surcharge donc juste ici, juste après, pour que l'ordre de cascade joue en notre faveur. */
  .modal-form-grid { grid-template-columns: 1fr; }
  /* Idem pour la rangée des totaux annuels de la fenêtre "Objectifs" (Année / Objectif
     annuel / Ouvertures annuelles / 1ère Cdes annuelles) : en flex-wrap:nowrap forcé, les
     4 champs débordaient hors de l'écran sans repli possible. */
  .fv-obj-annual-row { flex-wrap: wrap !important; }
  .fv-obj-annual-row .field { min-width: 0 !important; flex: 1 1 45% !important; }
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.modal-divider { border-top: 1px solid var(--border); margin: 14px 0; }
.modal-error { background: rgba(215,68,62,0.1); color: var(--danger); border: 1px solid rgba(215,68,62,0.25); padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 14px; display: none; }

/* ---------- misc ---------- */
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.tag { display: inline-block; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--primary); }
.loading { color: var(--text-muted); font-size: 13px; padding: 20px; }
.building-block { border-left: 3px solid var(--accent); background: rgba(47,111,235,0.06); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 12.5px; color: var(--text); margin-bottom: 16px; }

/* ---------- login page ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary) 0%, #0a1730 100%); }
.login-card { background: var(--card-bg); border-radius: 14px; box-shadow: var(--shadow-md); padding: 40px 36px; width: 100%; max-width: 380px; }
.login-card .logo-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 8px; }
.login-card .logo { width: 44px; height: 44px; }
.login-card h1 { text-align: center; font-size: 20px; color: var(--primary); margin: 4px 0 2px; }
.login-card .tagline { text-align: center; color: var(--text-muted); font-size: 12.5px; margin-bottom: 26px; }
.login-error { background: rgba(215,68,62,0.1); color: var(--danger); border: 1px solid rgba(215,68,62,0.25); padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 14px; display: none; }
.login-hint { text-align: center; margin-top: 18px; font-size: 11.5px; color: var(--text-muted); }
.password-field-wrap { position: relative; }
.password-field-wrap input { width: 100%; padding-right: 40px; }
.password-toggle-btn {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.password-toggle-btn:hover { color: var(--text); }
.password-toggle-btn.is-visible { color: var(--accent); }
.login-row { display: flex; align-items: center; justify-content: space-between; margin: -6px 0 16px; font-size: 12.5px; }
.login-remember { display: flex; align-items: center; gap: 6px; color: var(--text-muted); cursor: pointer; }
.login-remember input { width: auto; margin: 0; cursor: pointer; }
.login-row a { color: var(--accent); text-decoration: none; }
.login-row a:hover { text-decoration: underline; }
.login-forgot-hint { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); padding: 8px 12px; border-radius: 8px; font-size: 12px; margin: -8px 0 16px; }

/* ---------- import wizard ---------- */
.dropzone {
  border: 2px dashed var(--border); border-radius: 14px; padding: 40px 20px; text-align: center;
  color: var(--text-muted); cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--accent); background: rgba(47,111,235,0.05); }
.dropzone input[type="file"] { display: none; }
.mapping-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mapping-row:last-child { border-bottom: none; }
.mapping-row label { font-size: 13px; font-weight: 600; color: var(--text); }
.mapping-row select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-family: inherit; }
.step-indicator { display: flex; gap: 8px; margin-bottom: 20px; }
.step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--border); color: var(--text-muted); }
.step-dot.active { background: var(--accent); color: #fff; }
.step-dot.done { background: var(--success); color: #fff; }

/* ---------- tournée / carte ---------- */
.tournee-stop-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.tournee-stop-wrap:last-child { border-bottom: none; }
.tournee-stop-delete-bg {
  position: absolute; inset: 0; background: var(--danger); color: #fff; font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 22px;
}
.tournee-stop { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; background: var(--card-bg); touch-action: pan-y; }
.tournee-stop .num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tournee-name-link { color: inherit; text-decoration: none; }
.tournee-name-link:hover { color: var(--accent); text-decoration: underline; }
.tournee-history-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.tournee-history-row:last-child { border-bottom: none; }
.tournee-map-pin span {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--accent); color: #fff; font-weight: 800;
  font-size: 12px; display: flex; align-items: center; justify-content: center; transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); border: 2px solid #fff;
}
.tournee-map-pin span > * { transform: rotate(-45deg); }
.map-legend { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.map-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* Numéro de département affiché en permanence sur la carte des secteurs.
   Contour sombre sous le texte blanc : le numéro reste lisible aussi bien sur
   un secteur vert foncé que sur un département libre en gris clair. */
.leaflet-marker-icon.dep-num {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 12px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6);
  pointer-events: none;
}

/* Numéro d'un département libre : le fond est gris clair, le blanc n'y tient pas. */
.leaflet-marker-icon.dep-num.dep-num-libre {
  color: #3b4659;
  text-shadow: 0 0 2px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.8);
}

/* ---- Marque de la barre latérale : nom puis rôle ----
   Le rôle remplace l'ancien bandeau du bas. Le lire sous le logo évite de se
   tromper d'écran quand on jongle entre un compte direction et un commercial. */
.brand-role {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #4ae0b4;
  margin-top: 2px;
  line-height: 1.2;
}
.brand-name { letter-spacing: -0.2px; }
.sidebar .brand .logo { color: #ffffff; }

/* Nom de l'utilisateur, en haut à droite. */
.topbar-user {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  max-width: 28vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  /* Sur mobile la barre du haut est déjà serrée : le rôle reste lisible sous le
     logo, le nom s'efface plutôt que de pousser les boutons hors de l'écran. */
  .topbar-user { display: none; }
}

/* Identifiant du compte connecte, dans l'en-tete de la barre laterale.
   Meme vert que le role juste au-dessus : les deux disent "avec quel compte
   suis-je en train de travailler", et c'est la question qui compte quand on a
   un compte direction et un compte commercial. */
.brand-user {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: #4ae0b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  margin-top: 1px;
  opacity: 0.92;
}
.sidebar.collapsed .brand-user { display: none; }

/* L'identifiant mene aux parametres du compte. Il faut que ca se voie : un texte
   cliquable qui ne se distingue pas d'un texte ordinaire n'est jamais clique. */
a.brand-user:hover,
a.brand-user:focus-visible {
  text-decoration: underline;
  opacity: 1;
}
a.brand-user:focus-visible {
  outline: 2px solid #4ae0b4;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Titres de section : ils heritaient de --accent, le bleu du reste de
   l'application, pensé pour un fond blanc. Sur la barre laterale eclaircie il
   devenait terne. Teinte propre a la barre, nettement au-dessus du seuil. */
.sidebar .nav-section-label { color: #82acf9; }
.sidebar .nav-section-header:hover .nav-section-label { color: #ffffff; }

/* Reprise de l'application Actizon : les icones du menu sont bleu clair, le
   libelle quasi blanc. Le contraste entre les deux guide l'oeil vers le texte
   tout en gardant les icones reperables. */
.sidebar .nav-item .ic { color: #82acf9; }
.sidebar .nav-item:hover .ic { color: #a9c6ff; }
.sidebar .nav-item.active .ic { color: #ffffff; }

/* Pictogramme en tete de section. Même gabarit que celui des items du menu
   (18 px) pour que titres et items s'alignent verticalement. */
.nav-section-ic {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #82acf9;
}
.nav-section-ic svg { width: 15px; height: 15px; display: block; }
.nav-section-header:hover .nav-section-ic { color: #a9c6ff; }
.sidebar.collapsed .nav-section-ic { display: none; }

/* Les entrees qui n'appartiennent a aucune section (Tableau de bord, Alertes
   & Relances, Messages tchat en haut ; Carte et Parametres du compte en bas)
   prennent le bleu clair des titres de section. N'ayant pas d'en-tete au-dessus
   d'elles, ce traitement leur donne le meme poids visuel que « Divers » et
   consorts. Ces blocs-la sont les seuls sans la classe .nav-section, puisqu'ils
   n'ont pas de libelle. */
.sidebar nav > .nav-block:not(.nav-section) .nav-item {
  color: #82acf9;
}
/* L'entree active garde son texte blanc : sur la pastille bleue, le bleu clair
   deviendrait illisible. */
.sidebar nav > .nav-block:not(.nav-section) .nav-item.active {
  color: #ffffff;
}
/* Au survol, le libelle passe au blanc comme celui des titres de section ;
   l'icone, elle, s'eclaircit sans aller jusqu'au blanc, ce qui garde la
   hierarchie entre le texte et son pictogramme. */
.sidebar nav > .nav-block:not(.nav-section) .nav-item:hover {
  color: #ffffff;
}
.sidebar nav > .nav-block:not(.nav-section) .nav-item.active:hover {
  color: #ffffff;
}

/* La pastille bleue dit ou l'on se trouve dans le menu. Ouvrir une section,
   c'est y entrer : son en-tete prend la pastille, et l'entree du haut d'ou
   l'on venait la rend. Sans ca, on cliquait « Clients & prospects » et la
   pastille restait en arriere sur « Messages tchat ».
   Si la section ouverte contient deja la page courante, c'est l'item qui porte
   la pastille : l'en-tete s'abstient pour qu'il n'y en ait jamais deux. */
.nav-section:not(.collapsed):not(:has(.nav-item.active)) > .nav-section-header {
  background: var(--sidebar-active);
  border-radius: 9px;
}
.nav-section:not(.collapsed):not(:has(.nav-item.active)) > .nav-section-header .nav-section-label,
.nav-section:not(.collapsed):not(:has(.nav-item.active)) > .nav-section-header .nav-section-ic,
.nav-section:not(.collapsed):not(:has(.nav-item.active)) > .nav-section-header .nav-section-chevron {
  color: #ffffff;
}
/* Au survol, l'en-tete ainsi mis en avant garde son texte et son pictogramme
   blancs : le bleu clair du survol ordinaire s'effacerait sur la pastille. */
.sidebar .nav-section:not(.collapsed):not(:has(.nav-item.active)) > .nav-section-header:hover .nav-section-label,
.sidebar .nav-section:not(.collapsed):not(:has(.nav-item.active)) > .nav-section-header:hover .nav-section-ic {
  color: #ffffff;
}
/* L'entree du haut rend la pastille des qu'une section est ouverte, et reprend
   l'allure bleu clair des autres libelles du bloc. */
.sidebar nav:has(.nav-section:not(.collapsed)) > .nav-block:not(.nav-section) .nav-item.active {
  background: none;
  color: #82acf9;
}
.sidebar nav:has(.nav-section:not(.collapsed)) > .nav-block:not(.nav-section) .nav-item.active .ic {
  color: #82acf9;
}
.sidebar nav:has(.nav-section:not(.collapsed)) > .nav-block:not(.nav-section) .nav-item.active:hover,
.sidebar nav:has(.nav-section:not(.collapsed)) > .nav-block:not(.nav-section) .nav-item.active:hover .ic {
  color: #ffffff;
}
.sidebar nav:has(.nav-section:not(.collapsed)) > .nav-block:not(.nav-section) .nav-item.active:hover {
  background: var(--sidebar-hover-bg);
}
/* Le compteur suivait la pastille : sur fond blanc translucide il devenait
   illisible une fois celle-ci retiree. Les compteurs urgents et de tchat ont
   leurs propres teintes, on n'y touche pas. */
.sidebar nav:has(.nav-section:not(.collapsed)) > .nav-block:not(.nav-section) .nav-item.active
  .nav-badge:not(.nav-badge-urgent):not(.nav-badge-chat):not(.nav-badge-chat-group) {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}