/* =====================================================================
   CRM — v3 « Moteur d'action Ontario »
   Design tokens propres (--crm-*) dérivés du shell GANDALF : thème clair
   (signature Chanv crème) + sombre via body[data-gtheme="dark"].
   Tout est scopé .crm- ; aucune fuite vers le reste du hub.
   ===================================================================== */

/* .crm-rt-notepop est ancré au <body> (hors #crm-view) comme .crm-sheet-ov :
   sans lui dans cette liste, tous ses var(--crm-*) seraient indéfinis.
   Même piège pour #crm-tabbar, la barre d'onglets : elle vit à côté de
   #crm-view (et non dedans) pour survivre aux repeintures de celui-ci. */
#crm-view, #agriculture-view, #ambassadeurs-view, #diffusions-view, #ligne-du-temps-view, #crm-tabbar, .crm-sheet-ov, .crm-rt-notepop, .ldt-editor-veil {
  /* thème clair (défaut) */
  --crm-ground: transparent;
  --crm-card: #FFFFFF;
  --crm-card-2: #FAF6EC;
  --crm-line: rgba(40, 34, 24, .09);
  --crm-line-strong: rgba(40, 34, 24, .16);
  --crm-ink: #282521;
  --crm-ink-2: var(--g-ink-dim, rgba(40, 38, 34, .78));
  --crm-ink-3: var(--g-ink-faint, rgba(40, 38, 34, .70));
  --crm-accent: #A8863F;
  --crm-accent-ink: #FFFFFF;
  --crm-accent-soft: rgba(168, 134, 63, .10);
  --crm-shadow: 0 1px 2px rgba(40, 34, 24, .04), 0 8px 24px -12px rgba(40, 34, 24, .10);
  --crm-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.6 4.6 9.8-10.4'/%3E%3C/svg%3E");
  --crm-shadow-lift: 0 2px 4px rgba(40, 34, 24, .05), 0 16px 32px -16px rgba(40, 34, 24, .18);
  --crm-ok-ink: #256B43;      --crm-ok-bg: #E3F2E8;      --crm-ok-dot: #34A264;
  --crm-warn-ink: #8A5A12;    --crm-warn-bg: #F9EED9;    --crm-warn-dot: #D08A2A;
  --crm-crit-ink: #93443B;    --crm-crit-bg: #F7E9E6;    --crm-crit-dot: #C0574E;
  --crm-info-ink: #31518E;    --crm-info-bg: #E8EDF8;    --crm-info-dot: #4A76C4;
  --crm-chart-a: #B99653;     --crm-chart-b: #DDCBA4;
  /* Sentiments (Ambassadeurs) — échelle DIVERGENTE : deux teintes + un point
     neutre, luminosité en escalier vers chaque pôle (vérifiée en OKLab). Le
     vert et le rouge ne se touchent jamais : le neutre les sépare toujours. */
  --amb-s-tres-positif: #256B43;
  --amb-s-positif: #34A264;
  --amb-s-mitige: #A89F8D;
  --amb-s-negatif: #C0574E;
  --amb-s-tres-negatif: #8F3A31;
  --amb-s-aucun: #CFC8B8;
}
body[data-gtheme="dark"] #crm-view, body[data-gtheme="dark"] #agriculture-view,
body[data-gtheme="dark"] #ambassadeurs-view, body[data-gtheme="dark"] #diffusions-view,
body[data-gtheme="dark"] #ligne-du-temps-view,
body[data-gtheme="dark"] #crm-tabbar,
body[data-gtheme="dark"] .crm-sheet-ov,
body[data-gtheme="dark"] .crm-rt-notepop,
body[data-gtheme="dark"] .ldt-editor-veil {
  --crm-card: #2b2823;
  --crm-card-2: #332f28;
  --crm-line: rgba(221, 203, 164, .13);
  --crm-line-strong: rgba(221, 203, 164, .26);
  --crm-ink: rgba(255, 255, 255, .92);
  --crm-ink-2: rgba(255, 255, 255, .58);
  --crm-ink-3: rgba(255, 255, 255, .36);
  --crm-accent: #DDCBA4;
  --crm-accent-ink: #241f16;
  --crm-accent-soft: rgba(221, 203, 164, .12);
  --crm-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -14px rgba(0, 0, 0, .5);
  --crm-shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 38px -16px rgba(0, 0, 0, .55);
  --crm-ok-ink: #96C7A8;      --crm-ok-bg: rgba(84, 160, 116, .16);   --crm-ok-dot: #64B586;
  --crm-warn-ink: #E5B573;    --crm-warn-bg: rgba(208, 138, 42, .15); --crm-warn-dot: #DA9A44;
  --crm-crit-ink: #DE9A90;    --crm-crit-bg: rgba(192, 87, 78, .16);  --crm-crit-dot: #CC6B5A;
  --crm-info-ink: #A3BCE8;    --crm-info-bg: rgba(74, 118, 196, .17); --crm-info-dot: #7B9BD6;
  --crm-chart-a: #DDCBA4;     --crm-chart-b: #8a7347;
  /* Sentiments en thème sombre : mêmes teintes, escalier INVERSÉ — sur fond
     sombre, « plus fort » = plus clair. Jamais un simple recopiage du clair. */
  --amb-s-tres-positif: #96C7A8;
  --amb-s-positif: #5FA97F;
  --amb-s-mitige: #7A7264;
  --amb-s-negatif: #B95F50;
  --amb-s-tres-negatif: #E29C92;
  --amb-s-aucun: #4A443A;
}

.crm-list, .crm-fiche { max-width: 980px; margin: 0 auto; color: var(--crm-ink); }

/* --- Animations partagées ------------------------------------------- */
@keyframes crm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes crm-sheet-up { from { opacity: .4; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes crm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crm-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@keyframes crm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 162, 100, .45); } 60% { box-shadow: 0 0 0 5px rgba(52, 162, 100, 0); } }
@media (prefers-reduced-motion: reduce) {
  /* .crm-rt-notepop est ancré au <body> : il échappe à `#crm-view *`, exactement
     comme .crm-sheet-ov. Sans lui ici, le panneau de note continuerait de glisser
     alors que « Réduire les animations » est actif. */
  #crm-view *, #crm-view *::before, #crm-view *::after,
  #crm-tabbar *, #crm-tabbar *::before, #crm-tabbar *::after,
  .crm-sheet-ov, .crm-sheet, .crm-rt-notepop, .ldt-editor-veil, .ldt-editor { animation: none !important; transition: none !important; }
}

/* --- Squelettes de chargement --------------------------------------- */
.crm-skel { border-radius: 10px; background: linear-gradient(100deg, var(--crm-card-2) 40%, var(--crm-card) 50%, var(--crm-card-2) 60%) 0 0 / 200% 100%; animation: crm-shimmer 1.4s linear infinite; }
.crm-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.crm-skel-row + .crm-skel-row { border-top: 1px solid var(--crm-line); }
.crm-skel--av { width: 42px; height: 42px; border-radius: 13px; flex: none; }
.crm-skel--l1 { height: 13px; width: 46%; margin-bottom: 7px; }
.crm-skel--l2 { height: 11px; width: 28%; }
.crm-skel--pill { width: 74px; height: 24px; border-radius: 999px; margin-left: auto; flex: none; }

/* --- En-tête de la liste --------------------------------------------- */
.crm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; animation: crm-in .3s ease both; }
.crm-head__title { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.crm-head__sub { font-size: 13px; color: var(--crm-ink-2); margin-top: 3px; }
.crm-head__new { display: inline-flex; align-items: center; gap: 7px; background: var(--crm-accent); color: var(--crm-accent-ink); border: none; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 550; padding: 10px 16px; cursor: pointer; box-shadow: var(--crm-shadow); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.crm-head__new:hover { transform: translateY(-1px); box-shadow: var(--crm-shadow-lift); filter: brightness(1.04); }
.crm-head__new:active { transform: none; }

/* KPI cliquables = filtres de statut */
.crm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.crm-kpi { position: relative; text-align: left; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 16px; padding: 13px 16px 12px; cursor: pointer; font: inherit; color: inherit; box-shadow: var(--crm-shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; animation: crm-in .34s ease both; }
.crm-kpi:nth-child(2) { animation-delay: .03s; } .crm-kpi:nth-child(3) { animation-delay: .06s; }
.crm-kpi:nth-child(4) { animation-delay: .09s; } .crm-kpi:nth-child(5) { animation-delay: .12s; }
.crm-kpi:hover { transform: translateY(-2px); box-shadow: var(--crm-shadow-lift); }
.crm-kpi:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
.crm-kpi__n { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crm-kpi__l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--crm-ink-2); margin-top: 3px; }
.crm-kpi__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--crm-ink-3); }
.crm-kpi--actif .crm-kpi__dot { background: var(--crm-ok-dot); }
.crm-kpi--ralentit .crm-kpi__dot { background: var(--crm-warn-dot); }
.crm-kpi--dormant .crm-kpi__dot { background: var(--crm-crit-dot); }
.crm-kpi--prospect .crm-kpi__dot { background: var(--crm-info-dot); }
.crm-kpi.on { border-color: var(--crm-accent); box-shadow: 0 0 0 1px var(--crm-accent) inset, var(--crm-shadow); }
.crm-kpi.on::after { content: ''; position: absolute; inset: 0; border-radius: 16px; background: var(--crm-accent-soft); pointer-events: none; }

/* --- Barre d'outils --------------------------------------------------- */
.crm-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; animation: crm-in .38s ease both; }
.crm-search { flex: 1 1 240px; min-width: 170px; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 13px; transition: border-color .15s ease, box-shadow .15s ease; }
.crm-search:focus-within { border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-accent-soft); }
.crm-search svg { color: var(--crm-ink-3); flex: none; }
.crm-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--crm-ink); }
.crm-search input::placeholder { color: var(--crm-ink-3); }
.crm-filter { height: 42px; padding: 0 34px 0 13px; border: 1px solid var(--crm-line); border-radius: 13px; font: inherit; font-size: 13px; background: var(--crm-card); color: var(--crm-ink); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23968a70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color .15s ease; }
.crm-filter:hover { border-color: var(--crm-line-strong); }

/* --- Filtre à cases : plusieurs produits d'un coup (ticket JR1pexYJvg3ZjvpqhfaN)
   Le bouton emprunte `.crm-filter` pour se ranger dans la barre d'outils comme
   les autres filtres — c'est un menu déroulant, il doit en avoir l'air. Le
   panneau, lui, est à nous : un <select multiple> natif s'ouvre en liste
   permanente de 29 lignes et ne se manœuvre qu'au Ctrl+clic.

   ATTENTION — ce panneau écrit un <label> PORTEUR DE TEXTE et une vraie
   <input type=checkbox> par produit : les deux formes que les sélecteurs nus
   de public/style.css (L1053 `input, select { width:100%; padding:12px 15px }`
   et L1042 `label { display:block; text-transform:uppercase; … }`) frappent de
   plein fouet. Sans les annulations ci-dessous, la case s'étirerait sur toute
   la ligne et les noms de produits sortiraient en MAJUSCULES GRASSES GRISES —
   c'est exactement l'accident décrit plus bas pour `.ldt-sku`. Ne pas les
   retirer sans avoir d'abord désarmé ces sélecteurs nus. */
.crm-multi { position: relative; display: inline-flex; }
.crm-multi__btn { max-width: 210px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Un filtre actif se voit depuis la barre d'outils : sinon, une liste courte
   ressemble à une liste vide et on cherche la panne au mauvais endroit. */
.crm-multi__btn.on { border-color: var(--crm-accent); background-color: var(--crm-accent-soft); font-weight: 600; }
.crm-multi__pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: min(330px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 13px;
  box-shadow: var(--crm-shadow-lift); padding: 10px;
  /* Le panneau est imbriqué dans le <label> « Produit » du panneau de filtres,
     donc il HÉRITE de `label { text-transform: uppercase; color: #666 }`
     (style.css L1266) — la consigne du haut sortait en capitales. On coupe
     l'héritage une fois, à la racine du menu : ce qui s'écrit ici est du texte
     de menu, pas un intitulé de formulaire. */
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
/* Pas d'animation d'ouverture ici, contrairement à `.crm-act__dropdown` : ce
   panneau existe dès le rendu de la liste et ne fait que s'afficher. Une
   animation posée sur l'élément se jouerait UNE fois, à vide, pendant qu'il
   est encore masqué — et plus jamais ensuite. */
.crm-multi__pop[hidden] { display: none; }
.crm-multi__hint { margin: 0 2px 8px; font-size: 11.5px; line-height: 1.45; color: var(--crm-ink-3); }
.crm-multi__q { height: 36px; width: 100%; min-width: 0; box-sizing: border-box; margin-bottom: 8px; }
.crm-multi__q input { font-size: 13px; padding: 0; }   /* contre input { padding: 12px 15px } */
/* Le parc dépasse la trentaine de produits : la liste défile, elle ne pousse
   pas le pied du panneau sous le pli — « Tout décocher » doit rester visible. */
.crm-multi__list { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.crm-multi__opt {
  /* `flex-start` et non `center` : le libellé peut désormais tenir sur deux
     lignes (voir `.crm-multi__lb`), et une case à cocher flottant au milieu
     d'un nom de deux lignes ne se rattache plus visuellement à rien. */
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
  margin: 0;                  /* contre label { margin-bottom: 8px } */
  font: inherit; font-size: 13px; line-height: 1.35;   /* contre label { font-size: 12px; font-weight: 700 } */
  text-transform: none;       /* un nom de produit n'est pas un cri */
  letter-spacing: normal; color: var(--crm-ink);       /* contre label { color: #666 } */
}
.crm-multi__opt:hover { background: var(--crm-card-2); }
.crm-multi__bx {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 16px; height: 16px; min-width: 0;   /* contre input { width: 100% } */
  padding: 0; margin: 1px 0 0;                               /* contre input { padding: 12px 15px } ; 1px = centrage optique sur la 1re ligne */
  border: 1.5px solid var(--crm-line-strong); border-radius: 5px;
  background: var(--crm-card); cursor: pointer;
}
.crm-multi__bx:checked {
  background: var(--crm-accent) no-repeat center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'><path d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  border-color: var(--crm-accent);
}
.crm-multi__bx:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
/* LE NOM ENTIER, SUR DEUX LIGNES S'IL LE FAUT (ticket Gse9aJDDanlenDq7qI2f).
   Melissa Poulin : « je vois pas si c'est wildberry ou blossum kush de la
   vape ». Ce panneau coupait au bout de la ligne
   (`text-overflow: ellipsis`), or ce qui départage deux produits est souvent
   le DERNIER mot du nom : « Balanced Live Resin 510 Thread Cartridge –
   Wildberry » et « Original Kush 510 Thread Cartridge » ne se distinguent
   qu'à la fin. Couper par la fin, ici, c'est couper exactement l'information
   qu'on vient chercher. La liste défile déjà (`.crm-multi__list`) : une ligne
   de plus lui coûte moins qu'un choix fait à l'aveugle.

   Les remises à zéro qui suivent doublent le correctif de
   `.crm-dir-filters-grid > label > span` (ux-refresh.css) : ce panneau vit
   dans un <label>, et le prochain sélecteur de formulaire un peu large le
   reprendrait pour un intitulé. `.crm-multi__opt >` porte la spécificité à
   (0,2,0), au-dessus des (0,1,2) qui l'ont écrasé. Ne pas retirer. */
.crm-multi__opt > .crm-multi__lb {
  flex: 1; min-width: 0;
  white-space: normal; overflow-wrap: anywhere;
  font-size: 13px; font-weight: 400; letter-spacing: normal;
  text-transform: none; color: var(--crm-ink);
}
.crm-multi__opt > .crm-multi__n {
  flex: none; margin-top: 1px;
  font-size: 11.5px; font-weight: 400; letter-spacing: normal;
  text-transform: none; color: var(--crm-ink-3); font-variant-numeric: tabular-nums;
}
.crm-multi__vide { margin: 0; padding: 14px 8px; text-align: center; font-size: 12.5px; color: var(--crm-ink-3); }
.crm-multi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--crm-line); }
.crm-multi__cnt { font-size: 11.5px; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
.crm-multi__clear { border: none; background: none; font: inherit; font-size: 12.5px; color: var(--crm-ink-2); cursor: pointer; padding: 4px 7px; border-radius: 8px; }
.crm-multi__clear:hover { color: var(--crm-ink); background: var(--crm-card-2); }

.crm-count { font-size: 12.5px; color: var(--crm-ink-3); margin: 2px 2px 8px; }
/* Compte rendu de « Feuille de la liste » (ticket Lux1ByBbbojE0Zl13MIA). Vide,
   la ligne ne prend aucune place : sans `:empty`, un blanc de 8 px s'installerait
   sous le compte de magasins en permanence, pour un message qui n'apparaît
   qu'après un clic. */
.crm-sheetmsg { font-size: 12.5px; color: var(--crm-ink-3); margin: -4px 2px 8px; }
.crm-sheetmsg:empty { margin: 0; }
.crm-sheetmsg a { color: var(--crm-accent); font-weight: 600; }

/* --- Table des magasins (desktop) / cards (mobile) -------------------- */
.crm-listwrap { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 18px; overflow: hidden; box-shadow: var(--crm-shadow); animation: crm-in .42s ease both; }
.crm-thead { display: grid; grid-template-columns: 42px minmax(160px, 2fr) 76px minmax(78px, 1fr) minmax(78px, 1fr) 104px 96px 104px 100px; gap: 13px; align-items: center; padding: 10px 18px; background: var(--crm-card-2); border-bottom: 1px solid var(--crm-line); }
.crm-th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-ink-3); text-align: left; }
button.crm-th { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; transition: color .12s ease; }
button.crm-th:hover { color: var(--crm-ink); }
button.crm-th.on { color: var(--crm-accent); }
.crm-th__arrow { font-size: 9px; line-height: 1; }
.crm-row { display: grid; grid-template-columns: 42px minmax(160px, 2fr) 76px minmax(78px, 1fr) minmax(78px, 1fr) 104px 96px 104px 100px; gap: 13px; align-items: center; padding: 11px 18px; cursor: pointer; transition: background .12s ease; }
.crm-row + .crm-row { border-top: 1px solid var(--crm-line); }
.crm-row:hover { background: var(--crm-accent-soft); }

/* Mode sélection (export ShipStation) — réservé aux gestionnaires. La piste
   de cases n'existe que sous .crm-list--sel : la grille à 9 pistes reste
   intacte pour les autres. */
.crm-list--sel .crm-thead,
.crm-list--sel .crm-row { grid-template-columns: 26px 42px minmax(160px, 2fr) 76px minmax(78px, 1fr) minmax(78px, 1fr) 104px 96px 104px 100px; }
.crm-sel-cb { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--crm-accent); }
.crm-selbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 8px; padding: 9px 13px; border: 1px solid var(--crm-accent); border-radius: 12px; background: var(--crm-accent-soft); animation: crm-in .2s ease both; }
.crm-selbar__n { font-size: 13px; font-weight: 600; }
.crm-selbar__sp { flex: 1; }
.crm-selbar button { font-family: inherit; font-size: 12.5px; border-radius: 9px; padding: 6px 12px; cursor: pointer; border: 1px solid var(--crm-line); background: var(--crm-card); color: var(--crm-ink); transition: filter .12s ease; }
.crm-selbar button:hover:not(:disabled) { filter: brightness(.97); }
.crm-selbar button:disabled { opacity: .55; cursor: default; }
.crm-selbar__go { background: var(--crm-accent); border-color: var(--crm-accent); color: #fff; font-weight: 600; }
.crm-selbar__msg { font-size: 12.5px; color: var(--crm-ink-3); }
.crm-selbar__msg a { color: var(--crm-accent); font-weight: 600; }
.crm-row:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: -2px; }
.crm-row__main { min-width: 0; }
.crm-row__name { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-row__sub, .crm-row__cell { color: var(--crm-ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-row__num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Pastilles de tags. Discrètes par construction : la liste va jusqu'à 1896
   lignes actives, une pastille ne doit ni changer la hauteur d'une ligne ni
   tirer l'œil avant le nom du magasin — d'où 11 px, l'encre secondaire et
   l'absence de fond plein.
   Toutes les couleurs sortent des jetons --crm-* définis en clair ET en sombre
   au sommet du fichier : aucune valeur n'est posée dans un seul thème.
   --------------------------------------------------------------------------- */
.crm-tag {
  display: inline-flex; align-items: center; max-width: 130px;
  font: inherit; font-size: 11px; font-weight: 550; line-height: 1.55;
  padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--crm-line-strong); background: var(--crm-card-2);
  color: var(--crm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.crm-tag:hover { color: var(--crm-accent); border-color: var(--crm-accent); background: var(--crm-accent-soft); }
/* Ce qui ne se clique pas ne fait pas semblant : « +N » (simple report) et une
   pastille désactivée (fiche sans navigation) gardent leur apparence au survol. */
.crm-tag--more, .crm-tag:disabled { cursor: default; }
.crm-tag--more:hover, .crm-tag:disabled:hover { color: var(--crm-ink-2); border-color: var(--crm-line-strong); background: var(--crm-card-2); }
/* Variante bouton (fiche, formulaire) : focus clavier visible, état « posé ». */
.crm-tag--btn:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
.crm-tag--btn.on { background: var(--crm-accent); border-color: var(--crm-accent); color: var(--crm-accent-ink); }

/* Dans une ligne de liste, c'est la VILLE qui cède la place, pas les tags : la
   colonne « Magasin » tombe à son minimum de 160 px et les points de suspension
   mangeaient les pastilles — un tag qu'on ne voit pas ne sert à rien.
   `:not(.crm-row__mob)` : la sous-ligne MOBILE n'a pas de `__subtxt`, son texte
   y serait un item de flex anonyme sur lequel text-overflow: ellipsis ne
   s'applique pas — elle se ferait couper net au lieu de finir en « … ». */
.crm-row__sub:not(.crm-row__mob) { display: flex; align-items: center; }
.crm-row__subtxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-tags { display: inline-flex; gap: 4px; flex: none; vertical-align: middle; }
.crm-tags:not(:empty) { margin-left: 7px; }
.crm-row .crm-tag { max-width: 76px; }

/* --- Bannière / chaîne / groupe (ticket 5mJMpwFXki0IxDcoQVDH) --------------
   Volontairement DISTINCTE d'un tag : fond teinté et bord plein, là où la
   pastille de tag est neutre et discrète. Les deux se côtoient sur la même
   sous-ligne de liste et dans le même bandeau de fiche ; au même gris, on
   lirait la bannière comme un tag de plus — or le ticket demande précisément
   qu'elle SAUTE AUX YEUX (« on voit immédiatement qu'il appartient à ce
   groupe »). Elle reste sur la palette d'accent existante : un groupe n'est ni
   une alerte ni un succès, aucune couleur de statut ne lui convenait. */
.crm-banner-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 190px;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.55;
  padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--crm-accent); background: var(--crm-accent-soft);
  color: var(--crm-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default; transition: border-color .12s ease, color .12s ease, background .12s ease;
}
/* Le préfixe « Bannière » nomme le champ sans qu'on ait à deviner ce que la
   pastille désigne — un nom de chaîne seul se confondrait avec un tag. */
.crm-banner-chip__l { font-weight: 500; opacity: .72; text-transform: lowercase; }
.crm-banner-chip__l::after { content: ' ·'; }
.crm-banner-chip--btn { cursor: pointer; }
.crm-banner-chip--btn:hover { background: var(--crm-accent); border-color: var(--crm-accent); color: var(--crm-accent-ink); }
.crm-banner-chip--btn:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
/* Ce qui ne se clique pas ne fait pas semblant (même règle que .crm-tag). */
.crm-banner-chip:disabled { cursor: default; }
.crm-banner-chip:disabled:hover { background: var(--crm-accent-soft); border-color: var(--crm-accent); color: var(--crm-accent); }
/* En ligne de liste : même arbitrage que les tags — c'est la VILLE qui cède la
   place. Plus large qu'un tag (76 px) parce qu'un nom de chaîne coupé à trois
   lettres n'identifie plus rien, mais borné : la colonne « Magasin » descend à
   160 px et le nom du magasin reste ce qu'on lit en premier. */
.crm-banner-chip--sm { flex: none; max-width: 104px; margin-left: 7px; }
.crm-hero__banner { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.crm-hero__banner .crm-banner-chip { font-size: 11.5px; max-width: none; padding: 1px 10px; }

/* Numéro de magasin dans le bandeau (ticket gOHcpCaOodmUjOQKWKem).
   Même gabarit que la pastille de bannière — c'est la même rangée et la même
   question d'identité —, mais sur la palette NEUTRE : la bannière garde
   l'accent parce qu'elle mène ailleurs (la liste du groupe), le numéro ne mène
   nulle part, il se lit et se recopie. Deux pastilles d'accent côte à côte se
   seraient concurrencées. Le numéro lui-même passe en chiffres tabulaires et
   en gras : c'est la seule chose qu'on vient y chercher.
   Jetons --crm-* uniquement : définis en clair ET en sombre au sommet du
   fichier, donc rien à reprendre pour le thème sombre. */
.crm-num-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 190px;
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1.55;
  font-variant-numeric: tabular-nums;
  padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--crm-line-strong); background: var(--crm-card-2);
  color: var(--crm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default; transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.crm-num-chip__l { font-weight: 500; opacity: .72; text-transform: lowercase; font-variant-numeric: normal; }
.crm-num-chip__l::after { content: ' ·'; }
/* Ce qui ne se clique pas ne fait pas semblant : sans presse-papiers, la
   pastille est rendue en <span> et n'a ni curseur ni survol (même règle que
   .crm-tag et .crm-banner-chip). */
.crm-num-chip--btn { cursor: pointer; }
.crm-num-chip--btn:hover { border-color: var(--crm-accent); color: var(--crm-accent); background: var(--crm-accent-soft); }
.crm-num-chip--btn:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }

/* Numéro de magasin en LIGNE DE LISTE et en tête d'aperçu (ticket
   kPzo8F7q7XynipgIJPOZ). Volontairement PAS une pastille : la sous-ligne en
   porte déjà jusqu'à quatre (bannière, groupes, tags) et une cinquième aurait
   noyé les autres. Du texte tabulaire, légèrement appuyé, posé en tête de la
   sous-ligne — une colonne de numéros ne se lit que si elle est alignée, et
   c'est ce balayage vertical que le ticket demande (« pour aller plus vite
   dans les recherches »).
   `flex: none` : c'est la VILLE qui cède la place quand la colonne rétrécit,
   même arbitrage que les tags et la bannière juste à côté. */
.crm-row-num {
  flex: none; margin-right: 7px; font-variant-numeric: tabular-nums;
  font-weight: 650; color: var(--crm-ink-2); white-space: nowrap;
}
.crm-dir-preview-num { font-variant-numeric: tabular-nums; font-weight: 750; color: var(--crm-ink-2); }

/* Le <select> de tags prend la largeur de sa plus longue option, et ces
   libellés sont du texte libre tapé par les reps : sans borne, la largeur du
   filtre serait pilotée par les données — ce qui n'était pas le cas pour
   rep/région (valeurs courtes et contrôlées). Même valeur que le cockpit, qui
   avait déjà anticipé le problème. */
#crm-tag { max-width: 190px; }

/* Tags de la fiche : sous la ligne ville · région, ils peuvent respirer. La
   boîte du héros fait ~678 px et passe déjà à la ligne, donc un tag de 40
   caractères — la borne d'écriture — y tient EN ENTIER. Le plafonner ici
   couperait le seul endroit censé tout montrer, y compris le repli du « +N »
   de la liste. */
.crm-hero__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.crm-hero__tags .crm-tag { font-size: 11.5px; max-width: none; padding: 1px 9px; }

/* Suggestions sous le champ « Tags » du formulaire. */
.crm-tagsug { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; max-height: 84px; overflow-y: auto; }
.crm-tagsug:empty { display: none; }
.crm-tagsug__l { font-size: 11.5px; color: var(--crm-ink-3); margin-right: 2px; }
.crm-row__date { color: var(--crm-ink-2); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Cellule sell-through (part de marché + présence Bleuh) */
.crm-st-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.crm-st-cell--none { color: var(--crm-ink-3); }
.crm-st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.crm-st-dot--ours { background: var(--crm-ok-dot); }
.crm-st-dot--zero { background: var(--crm-ink-3); opacity: .5; }
.crm-st-val { color: var(--crm-ink); }
.crm-st-cell .crm-st-opp { font-size: 12px; line-height: 1; }

/* Dernière activité : 2 lignes (date · heure + initiales) + pastille d'ancienneté */
.crm-lastact { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.crm-lastact--none { color: var(--crm-ink-3); }
.crm-lastact__d { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.crm-lastact__t { font-size: 12px; color: var(--crm-ink-3); }
.crm-lastact__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.crm-lastact--fresh .crm-lastact__dot { background: var(--crm-ok-dot); }
.crm-lastact--ok .crm-lastact__dot { background: var(--crm-ok-dot); opacity: .55; }
.crm-lastact--warn .crm-lastact__dot { background: #e0a83c; }
.crm-lastact--cold .crm-lastact__dot { background: #d06b57; }
#crm-fixed-remove { padding: 6px 9px; color: var(--crm-ink-3); }

/* --- Monogramme ------------------------------------------------------- */
.crm-mono { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: 13.5px; flex: none; letter-spacing: .01em; }
.crm-mono--lg { width: 58px; height: 58px; border-radius: 17px; font-size: 19px; }
.crm-mono--actif { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-mono--ralentit { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.crm-mono--dormant { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
.crm-mono--prospect { background: var(--crm-info-bg); color: var(--crm-info-ink); }

/* --- Pastille de statut ------------------------------------------------ */
.crm-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; padding: 4px 11px; border-radius: 999px; white-space: nowrap; justify-self: start; }
.crm-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.crm-pill--actif { background: var(--crm-ok-bg); color: var(--crm-ok-ink); } .crm-pill--actif .crm-dot { background: var(--crm-ok-dot); animation: crm-pulse 2.4s ease-out infinite; }
.crm-pill--ralentit { background: var(--crm-warn-bg); color: var(--crm-warn-ink); } .crm-pill--ralentit .crm-dot { background: var(--crm-warn-dot); }
.crm-pill--dormant { background: var(--crm-crit-bg); color: var(--crm-crit-ink); } .crm-pill--dormant .crm-dot { background: var(--crm-crit-dot); }
.crm-pill--prospect { background: var(--crm-info-bg); color: var(--crm-info-ink); } .crm-pill--prospect .crm-dot { background: var(--crm-info-dot); }
/* Rang Top 400 de la fiche (phase 2, lot 0). */
.crm-pill--top400 { background: var(--crm-accent-soft); color: var(--crm-ink); gap: 5px; }
.crm-pill--top400 b { font-weight: 650; }
.crm-pill--top400 .crm-t4-up { color: var(--crm-ok-ink); }
.crm-pill--top400 .crm-t4-down { color: var(--crm-crit-ink); }

/* --- Pastille de segment ABCD -------------------------------------------- */
.crm-seg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; font-size: 11px; font-weight: 650; border-radius: 999px; padding: 2px 8px; white-space: nowrap; letter-spacing: .02em; }
.crm-seg-badge--success { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-seg-badge--accent { background: var(--crm-accent-soft); color: var(--crm-accent); }
.crm-seg-badge--muted { background: var(--crm-card-2); color: var(--crm-ink-2); border: 1px solid var(--crm-line); }
.crm-seg-badge--warning { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.crm-seg-badge--prospect { background: var(--crm-info-bg); color: var(--crm-info-ink); }
/* `social` (type d'activité Instagram) : la fiche n'en stylait que l'icône
   (.crm-act__ic--social) ; le rapport par personne rend le MÊME colorKey en
   pastille, qui restait donc sans couleur. Mêmes teintes que l'icône. */
.crm-seg-badge--social { background: var(--crm-accent-soft); color: var(--crm-accent-ink); }

/* Filtre segments A/B/C/D/P (barre d'outils) */
.crm-segrow { display: inline-flex; gap: 2px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 13px; padding: 3px; height: 42px; box-sizing: border-box; align-items: stretch; }
.crm-segrow button { border: none; background: transparent; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--crm-ink-2); padding: 0 12px; border-radius: 10px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.crm-segrow button:hover { color: var(--crm-ink); }
.crm-segrow button.on { background: var(--crm-card); color: var(--crm-ink); box-shadow: var(--crm-shadow); }

/* --- États ------------------------------------------------------------- */
.crm-loading, .crm-empty, .crm-error { padding: 40px 24px; text-align: center; color: var(--crm-ink-2); animation: crm-fade .2s ease both; }
.crm-empty__ic { font-size: 26px; margin-bottom: 8px; opacity: .8; }
.crm-empty__hint { font-size: 12.5px; color: var(--crm-ink-3); margin-top: 4px; }
.crm-error { color: var(--crm-crit-ink); }

/* --- Fiche : hero ------------------------------------------------------- */
.crm-fiche__back { background: none; border: none; color: var(--crm-ink-2); font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 2px; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; transition: color .12s ease; }
.crm-fiche__back:hover { color: var(--crm-ink); }
.crm-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 20px; padding: 20px 22px; box-shadow: var(--crm-shadow); animation: crm-in .3s ease both; }
.crm-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--crm-chart-a), var(--crm-chart-b), transparent 85%); opacity: .9; }
.crm-hero__main { flex: 1; min-width: 0; }
.crm-hero__name { font-size: 19px; font-weight: 650; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-hero__sub { font-size: 13px; color: var(--crm-ink-2); margin-top: 3px; }
.crm-hero__side { display: flex; align-items: center; gap: 10px; flex: none; }
.crm-hero__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.crm-hero__seg { display: flex; align-items: center; gap: 8px; }
.crm-hero__score { font-size: 12px; color: var(--crm-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-hero__menu { position: relative; }
.crm-hero__more { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--crm-line); border-radius: 10px; color: var(--crm-ink-2); font-size: 17px; line-height: 1; cursor: pointer; transition: background .12s ease, color .12s ease; }
.crm-hero__more:hover { background: var(--crm-accent-soft); color: var(--crm-ink); }
.crm-hero__dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 12px; box-shadow: var(--crm-shadow-lift); min-width: 160px; z-index: 30; overflow: hidden; }
.crm-hero__dropdown.on { display: flex; flex-direction: column; animation: crm-in .14s ease both; }
.crm-hero__dropdown button { background: none; border: none; text-align: left; padding: 10px 14px; font: inherit; font-size: 13.5px; color: var(--crm-ink); cursor: pointer; }
.crm-hero__dropdown button:hover { background: var(--crm-accent-soft); }
.crm-hero__dropdown button.danger { color: var(--crm-crit-ink); }

/* Actions rapides */
.crm-actions { display: flex; gap: 8px; margin: 12px 0; animation: crm-in .34s ease both; }
.crm-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--crm-ink); text-decoration: none; padding: 11px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 13px; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; cursor: pointer; }
.crm-action:hover { background: var(--crm-accent-soft); transform: translateY(-1px); box-shadow: var(--crm-shadow); }
.crm-action svg { color: var(--crm-ink-2); }

/* Bandeau KPI de la fiche */
.crm-fkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; animation: crm-in .38s ease both; }
.crm-fkpi { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 15px; padding: 12px 15px; box-shadow: var(--crm-shadow); }
.crm-fkpi__n { font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.crm-fkpi__l { font-size: 11.5px; color: var(--crm-ink-2); margin-top: 2px; }

/* --- Onglets de la fiche ------------------------------------------------ */
.crm-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 2px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 14px; padding: 4px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; animation: crm-in .42s ease both; }
/* Le décalage ne vaut QUE dans le CRM. Depuis les onglets DU MODULE (ticket
   qcETPn2CbbjcLeyxo8My), #crm-tabbar est collant lui aussi et passe devant :
   sans ce `top`, les onglets de la fiche se colleraient DERRIÈRE lui et
   deviendraient inatteignables dès qu'on fait défiler. La hauteur est mesurée
   puis publiée par crm/index.js (--crm-otabs-h).

   Sélecteur porté sur #crm-view et pas sur `.crm-tabs` tout court : la classe
   est réemployée telle quelle par Ambassadeurs, Diffusions et Ligne du temps
   (grep `class="crm-tabs`), qui n'ont AUCUNE barre d'onglets au-dessus d'eux.
   Une variable posée sur <html> les aurait décollés d'une cinquantaine de
   pixels dès qu'on serait passé par le CRM — un module qui en décale trois
   autres à distance, c'est le genre de bug qu'on ne rattache jamais à sa
   cause. */
#crm-view .crm-tabs { top: var(--crm-otabs-h, 0px); }
.crm-tabs::-webkit-scrollbar { display: none; }
.crm-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--crm-ink-2); padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.crm-tab:hover { color: var(--crm-ink); }
.crm-tab.on { background: var(--crm-card); color: var(--crm-ink); font-weight: 600; box-shadow: var(--crm-shadow); }
.crm-tab__badge { font-size: 11px; font-weight: 600; background: var(--crm-accent-soft); color: var(--crm-accent); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
body[data-gtheme="dark"] #crm-view .crm-tab__badge { color: var(--crm-accent); }
.crm-tabpane { animation: crm-in .24s ease both; }

/* --- Onglets DU MODULE (plusieurs écrans ouverts) ------------------------
   Ticket qcETPn2CbbjcLeyxo8My. À ne pas confondre avec .crm-tabs juste
   au-dessus, qui sont les onglets INTERNES d'une fiche (Aperçu / Activités /
   Commandes…). Ceux-ci portent des ÉCRANS entiers — d'où un vocabulaire de
   classes distinct (.crm-otab*), une largeur qui suit le texte au lieu de se
   partager la ligne, et un ✕ par onglet.

   #crm-tabbar est un frère de #crm-view, jamais un enfant : chaque écran
   réécrit `#crm-view.innerHTML` en entier. Il porte donc lui-même les jetons
   --crm-* (voir le sélecteur en tête de fichier), sans quoi tout ici serait
   sans couleur. */
/* Collante : une fiche magasin fait plusieurs écrans de haut, et devoir
   remonter tout en haut pour changer d'onglet redonnerait envie d'ouvrir une
   deuxième fenêtre. Le fond OPAQUE (--gs-ground, le fond de la coquille) n'est
   pas décoratif : sans lui, le contenu défilerait visiblement DERRIÈRE la
   barre. Si un ancêtre coupait le `sticky`, la barre défilerait simplement
   avec le reste — dégradation sans casse.

   `top` N'EST PAS 0. #crm-tabbar est un frère de .gshell-modulehead dans
   #app-content, et cet en-tête est lui aussi `sticky; top: 0` — mais à
   z-index 70 contre 30. À `top: 0`, la barre d'onglets se glissait donc SOUS
   l'en-tête de module au premier défilement et disparaissait : exactement
   l'écran du ticket, une longue fiche magasin. Sous 860px, c'est
   .gshell-topbar (z-index 80) qui prend le relais. La hauteur de ce qui colle
   réellement est mesurée par crm/index.js (hauteurChrome) et publiée dans
   --gs-chrome-h ; le repli à 0 vaut « rien au-dessus ».

   Le 12px d'écart sous la barre est un PADDING d'ici, et non plus la marge de
   .crm-otabs : une marge tombe hors de la boîte, donc hors du fond opaque et
   hors de offsetHeight — le contenu se serait vu défiler dans cette bande, et
   les onglets de la fiche se seraient collés 12px trop haut. */
#crm-tabbar { position: sticky; top: var(--gs-chrome-h, 0px); z-index: 30; padding: 4px 0 12px; background: var(--gs-ground, transparent); color: var(--crm-ink); }
/* `position: relative` n'est pas décoratif : c'est ce qui fait de la bande
   l'offsetParent de ses onglets, donc ce qui rend `offsetLeft` mesurable par
   montrerActif() (crm/index.js) pour ramener l'onglet actif dans le champ. */
.crm-otabs { position: relative; display: flex; align-items: center; gap: 4px; max-width: 980px; margin: 0 auto; padding: 4px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.crm-otabs::-webkit-scrollbar { display: none; }
.crm-otab { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 220px; padding: 8px 8px 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--crm-ink-2); cursor: pointer; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.crm-otab:hover { color: var(--crm-ink); background: var(--crm-accent-soft); }
.crm-otab.on { background: var(--crm-card); color: var(--crm-ink); font-weight: 600; box-shadow: var(--crm-shadow); }
.crm-otab:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
.crm-otab__ic { flex: none; display: inline-flex; line-height: 1; }
/* L'étiquette se tronque, l'onglet ne pousse jamais la barre : huit onglets
   doivent tenir sans que le ✕ du dernier sorte de l'écran. Le nom complet
   reste dans le `title`. */
.crm-otab__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-otab__x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; border-radius: 6px; font: inherit; font-size: 12px; line-height: 1; color: var(--crm-ink-3); cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.crm-otab:hover .crm-otab__x, .crm-otab.on .crm-otab__x { opacity: 1; }
.crm-otab__x:hover { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
.crm-otab__x:focus-visible { opacity: 1; outline: 2px solid var(--crm-accent); outline-offset: 1px; }
.crm-otabs__add { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 2px; border: none; background: transparent; border-radius: 9px; font: inherit; font-size: 15px; line-height: 1; color: var(--crm-ink-2); cursor: pointer; transition: background .14s ease, color .14s ease; }
.crm-otabs__add:hover { background: var(--crm-card); color: var(--crm-ink); }
.crm-otabs__add:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
/* Sans pointeur, deux choses cassent. Le ✕ n'apparaît qu'au survol — il ne se
   montrerait donc JAMAIS. Et 20px est une cible bien trop petite pour un geste
   destructeur au pouce, collée qui plus est au corps de l'onglet : on ferme un
   écran en croyant y aller. On donne donc de la hauteur à l'onglet ET à sa
   croix. La barre étant MESURÉE et non codée en dur, tout ce qui se cale
   dessous (--crm-otabs-h) suit sans qu'on ait à y toucher. */
@media (hover: none) {
  .crm-otab { padding-top: 10px; padding-bottom: 10px; }
  .crm-otab__x { opacity: 1; width: 28px; height: 28px; }
}

/* --- Cartes ------------------------------------------------------------- */
.crm-card { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 18px; padding: 18px 20px; margin-bottom: 12px; box-shadow: var(--crm-shadow); }
.crm-section__label { font-size: 11px; color: var(--crm-ink-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-bottom: 12px; }
.crm-help-i { cursor: help; opacity: .5; font-weight: 700; text-transform: none; }
.crm-help-i:hover, .crm-help-i:focus { opacity: .9; outline: none; }

/* Coordonnées (aperçu) */
.crm-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.crm-info--dense { grid-template-columns: repeat(3, 1fr); gap: 9px 18px; }
/* Une seule colonne : pour la carte Coordonnées de la gouttière de droite
   (ticket kPzo8F7q7XynipgIJPOZ), trop étroite pour deux — une adresse y serait
   coupée en accordéon. */
.crm-info--stack { grid-template-columns: 1fr; gap: 9px; }
.crm-info__item { min-width: 0; }
.crm-info__k { font-size: 11px; color: var(--crm-ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.crm-info__v { font-size: 14px; color: var(--crm-ink); overflow-wrap: anywhere; }
.crm-info__v a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--crm-line-strong); transition: border-color .12s ease; }
.crm-info__v a:hover { border-color: var(--crm-accent); }
/* Une valeur ABSENTE et assumée : « — aucun numéro au dossier » (ticket
   ySwZVjYdDM0sNtoGANsP). Grisée pour ne pas se lire comme une donnée, mais
   PRÉSENTE — c'est tout l'objet du correctif : une ligne qui disparaît ne dit
   pas qu'il manque quelque chose. Taille tenue à 12 px : le plancher de
   lisibilité du CRM s'applique aussi à ce qui n'est pas renseigné. */
.crm-info__none { font-size: 12px; color: var(--crm-ink-3); }
.crm-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.crm-flag { font-size: 11.5px; font-weight: 550; padding: 3px 10px; border-radius: 999px; background: var(--crm-accent-soft); color: var(--crm-accent); border: 1px solid transparent; }
body[data-gtheme="dark"] #crm-view .crm-flag { border-color: var(--crm-line); }

/* Top produits (aperçu) */
.crm-top { display: flex; flex-direction: column; gap: 9px; }
.crm-top__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.crm-top__name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-top__city { color: var(--crm-ink-3); font-size: 12px; }
/* Format (« 3.5 g », « 5 × 0.5 g ») — la seule donnée qui distingue deux
   produits homonymes. Il est donc À CÔTÉ du nom, pas dans la ligne grise.
   Le modificateur reste LOCAL : .crm-top__name est partagé par 7 écrans. */
.crm-top__name--fmt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; }
/* Priorité au NOM. Première tentative avec la pastille protégée : à 250 px le
   nom tombait à « O. », et sur une ligne il disparaissait complètement — on
   avait sauvé le complément en détruisant l'essentiel.
   Le plancher (min-width) empêche le nom de s'abréger au-delà du lisible ;
   quand la place manque vraiment, c'est la PASTILLE qui passe à la ligne. */
/* `flex: 0 1 auto` (et non 1 1) : le nom ne s'ÉTIRE pas, donc la pastille reste
   collée à lui. Étiré, le nom repoussait la pastille contre la colonne des
   unités, où elle se lisait comme un attribut du chiffre et non du produit. */
.crm-top__name--fmt .crm-top__nm { flex: 0 1 auto; min-width: 11ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-top__fmt { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    padding: 1.5px 6px; border-radius: 5px; white-space: nowrap;
    color: var(--crm-ink); background: var(--crm-card-2); border: 1px solid var(--crm-line); }
.crm-top__units { font-size: 12.5px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Qualification du produit (sous-catégorie · catégorie · marque, + SKU quand
   le nom seul ne distingue plus). Discrète : elle départage, elle ne concurrence
   pas le nom. Sur toute la largeur, au-dessus de la barre. */
.crm-top__meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--crm-ink-3, #9a927f);
    line-height: 1.35; margin-top: -1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-top__bar { grid-column: 1 / -1; height: 5px; border-radius: 4px; background: var(--crm-card-2); overflow: hidden; }
.crm-top__bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--crm-chart-a), var(--crm-chart-b)); }

/* --- Sell-through (marché) ------------------------------------------------ */
.crm-st-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.crm-st-kpi { background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 13px; padding: 12px 14px; }
.crm-st-kpi__n { font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.crm-st-kpi__l { font-size: 11px; color: var(--crm-ink-2); margin-top: 3px; }
.crm-trend { font-size: 12px; margin-left: 2px; }
.crm-trend--up { color: var(--crm-ok-ink); } .crm-trend--down { color: var(--crm-crit-ink); } .crm-trend--flat { color: var(--crm-ink-3); }
.crm-insight { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--crm-warn-ink); background: var(--crm-warn-bg); border-radius: 11px; padding: 10px 13px; }
.crm-st-legend { display: flex; gap: 16px; margin: 14px 0 2px; font-size: 11.5px; color: var(--crm-ink-2); }
.crm-st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.crm-st-legend span::before { content: ''; width: 14px; height: 3px; border-radius: 2px; }
.crm-st-legend__cat::before { background: var(--crm-chart-b); opacity: .6; }
.crm-st-legend__ours::before { background: var(--crm-accent); }

/* --- Contacts ------------------------------------------------------------ */
.crm-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.crm-contact { display: flex; align-items: center; gap: 12px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 14px; padding: 12px 14px; transition: transform .14s ease, box-shadow .14s ease; }
.crm-contact:hover { transform: translateY(-1px); box-shadow: var(--crm-shadow); }
.crm-contact__av { width: 36px; height: 36px; border-radius: 50%; background: var(--crm-info-bg); color: var(--crm-info-ink); display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: 13px; flex: none; }
.crm-contact__name { font-weight: 550; font-size: 14px; }
.crm-contact__role { font-size: 12px; color: var(--crm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le numéro direct de la personne, sur la même sous-ligne que son rôle
   (ticket ySwZVjYdDM0sNtoGANsP). Souligné plutôt que coloré : la carte porte
   déjà un bouton « écrire », et deux accents sur une ligne de 12 px se
   disputeraient le regard. */
.crm-contact__role a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--crm-line-strong); }
.crm-contact__role a:hover { border-color: var(--crm-accent); }
.crm-contact a { color: var(--crm-ink-2); display: inline-flex; padding: 5px; border-radius: 8px; transition: background .12s ease, color .12s ease; }
.crm-contact a:hover { background: var(--crm-accent-soft); color: var(--crm-ink); }
.crm-contact__edit, .crm-contact__del { background: none; border: none; color: var(--crm-ink-3); cursor: pointer; padding: 5px; border-radius: 8px; display: inline-flex; font-size: 13px; transition: background .12s ease, color .12s ease; }
.crm-contact__edit:hover { background: var(--crm-accent-soft); color: var(--crm-ink); }
.crm-contact__del:hover { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }

/* --- Graphique hebdo (SVG) ------------------------------------------------ */
.crm-chart { margin: 2px 0 6px; }
.crm-chart svg { display: block; width: 100%; height: auto; }
.crm-chart .bar { transition: opacity .12s ease; }
.crm-chart .bar:hover { opacity: .75; }
.crm-chart .bar--peak { fill: var(--crm-accent); }
.crm-chart .bar--partial { fill-opacity: .38; stroke: var(--crm-ink-3); stroke-dasharray: 3 3; }
.crm-chart .lbl--partial { font-style: italic; opacity: .7; }
.crm-chart .grid { stroke: var(--crm-line); stroke-width: 1; }
.crm-chart .lbl { fill: var(--crm-ink-3); font-size: 9.5px; font-family: inherit; }
.crm-chart .val { fill: var(--crm-ink-2); font-size: 9.5px; font-weight: 600; font-family: inherit; }
/* Fiche : barres/dates cliquables → filtre les produits de la semaine */
#crm-fiche-orderchart .crm-chart .bar, #crm-fiche-orderchart .crm-chart .lbl, #crm-fiche-orderchart .crm-chart .val,
#crm-orders-chart .crm-chart .bar, #crm-orders-chart .crm-chart .lbl, #crm-orders-chart .crm-chart .val { cursor: pointer; }
.crm-chart .bar--sel { stroke: var(--crm-accent); stroke-width: 2.5; paint-order: stroke; }
.crm-chart-hint { font-size: 12px; color: var(--crm-ink-3); margin-top: 8px; }
.crm-week-clear { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--crm-accent); background: var(--crm-accent-soft); border: none; border-radius: 999px; padding: 2px 9px; cursor: pointer; vertical-align: middle; }
.crm-week-clear:hover { background: var(--crm-accent); color: var(--crm-accent-ink); }

/* Score : lignes cliquables + pop-up d'explication */
.crm-signal-hint { font-size: 11px; font-weight: 500; color: var(--crm-ink-3); text-transform: none; letter-spacing: 0; }
.crm-signal-row { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding: 4px 6px; transition: background .12s ease; }
.crm-signal-row:hover { background: var(--crm-card-2); }
.crm-signal-row:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
.crm-signal-i { font-size: 11px; color: var(--crm-ink-3); }
.crm-signal-row:hover .crm-signal-i { color: var(--crm-accent); }
.crm-explain-weight { font-size: 12.5px; color: var(--crm-ink-2); background: var(--crm-accent-soft); border-radius: 999px; padding: 4px 12px; display: inline-block; margin-bottom: 12px; }
.crm-explain-weight b { color: var(--crm-accent); }
.crm-explain-how { font-size: 14px; line-height: 1.55; color: var(--crm-ink); margin: 0 0 12px; }
.crm-explain-val { font-size: 13.5px; font-weight: 550; color: var(--crm-ink); background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 12px; padding: 11px 14px; }
.crm-explain-total { font-size: 12px; color: var(--crm-ink-3); margin-top: 14px; line-height: 1.5; }

/* --- Table des commandes --------------------------------------------------- */
.crm-table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crm-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--crm-ink-3); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--crm-line); white-space: nowrap; }
.crm-table th.num, .crm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.crm-table td { padding: 9px 10px; border-bottom: 1px solid var(--crm-line); color: var(--crm-ink); }
.crm-table tr:last-child td { border-bottom: none; }
.crm-table tbody tr { transition: background .1s ease; }
.crm-table tbody tr:hover { background: var(--crm-accent-soft); }
.crm-table .dim { color: var(--crm-ink-2); font-size: 12.5px; white-space: nowrap; }
.crm-more { display: block; width: 100%; margin-top: 10px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 11px; font: inherit; font-size: 13px; font-weight: 500; color: var(--crm-ink-2); padding: 9px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.crm-more:hover { background: var(--crm-accent-soft); color: var(--crm-ink); }

/* --- Activités : timeline --------------------------------------------------- */
.crm-act-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.crm-act-add { display: inline-flex; align-items: center; gap: 6px; background: var(--crm-accent); color: var(--crm-accent-ink); border: none; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 550; padding: 8px 14px; cursor: pointer; box-shadow: var(--crm-shadow); transition: transform .14s ease, filter .14s ease; }
.crm-act-add:hover { transform: translateY(-1px); filter: brightness(1.05); }
.crm-tl__month { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--crm-ink-3); margin: 18px 0 10px 2px; }
.crm-tl__month:first-child { margin-top: 0; }
.crm-act { position: relative; display: flex; gap: 13px; padding: 2px 0 16px 0; }
.crm-act::before { content: ''; position: absolute; left: 17px; top: 40px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--crm-line); }
.crm-act:last-child::before, .crm-act--last::before { display: none; }
.crm-act__ic { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.crm-act__ic--accent { background: var(--crm-info-bg); color: var(--crm-info-ink); }
.crm-act__ic--success { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-act__ic--warning { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.crm-act__ic--prospect { background: var(--crm-info-bg); color: var(--crm-info-ink); }
/* Instagram : la seule teinte d'accent du jeu — les cinq autres se partagent
   info/ok/warn/carte. Sans la sienne, une mention Instagram se lisait comme
   un envoi de PLV dans le fil d'activité. Jetons définis dans les deux thèmes. */
.crm-act__ic--social { background: var(--crm-accent-soft); color: var(--crm-accent-ink); }
.crm-act__ic--muted { background: var(--crm-card-2); color: var(--crm-ink-2); border: 1px solid var(--crm-line); }
.crm-act__body { flex: 1; min-width: 0; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 14px; padding: 11px 14px; }
.crm-act__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.crm-act__type { font-weight: 600; font-size: 13.5px; }
.crm-act__when { font-size: 12px; color: var(--crm-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-act__src { font-size: 10.5px; font-weight: 650; color: var(--crm-ink-2); background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 999px; padding: 1px 8px; margin-left: 8px; margin-right: auto; letter-spacing: .03em; }
.crm-act__right { display: flex; align-items: center; gap: 4px; }
.crm-act__menu { position: relative; }
.crm-act__more { background: none; border: none; color: var(--crm-ink-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 3px 7px; border-radius: 7px; transition: background .12s ease, color .12s ease; }
.crm-act__more:hover { background: var(--crm-accent-soft); color: var(--crm-ink); }
.crm-act__dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 11px; box-shadow: var(--crm-shadow-lift); min-width: 136px; z-index: 10; overflow: hidden; }
.crm-act__dropdown.on { display: flex; flex-direction: column; animation: crm-in .13s ease both; }
.crm-act__dropdown button { background: none; border: none; text-align: left; padding: 9px 13px; font: inherit; font-size: 13px; color: var(--crm-ink); cursor: pointer; width: 100%; }
.crm-act__dropdown button:hover { background: var(--crm-accent-soft); }
.crm-act__note { font-size: 13.5px; color: var(--crm-ink); opacity: .92; line-height: 1.55; margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-act__note--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.crm-act__expand { background: none; border: none; padding: 2px 0; margin-top: 2px; font: inherit; font-size: 12px; font-weight: 550; color: var(--crm-accent); cursor: pointer; }
.crm-act__photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.crm-act__photobtn { background: none; border: none; padding: 0; cursor: zoom-in; display: inline-flex; }
.crm-act__photo { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; border: 1px solid var(--crm-line); transition: transform .14s ease; }
.crm-act__photo:hover { transform: scale(1.04); }
.crm-act__audio { width: 100%; max-width: 300px; height: 36px; margin-top: 9px; }
.crm-act__author { font-size: 11px; color: var(--crm-ink-3); margin-top: 7px; }

/* --- Activité par personne ---------------------------------------------------- */
.crm-act__store { font-size: 12.5px; color: var(--crm-ink-2); margin-top: 3px; font-weight: 600; }
/* Bandeau journalier : les jours vides gardent leur colonne (un creux dans le
   rythme se lit, il ne se masque pas). align-items:flex-end → les barres
   poussent depuis la ligne du bas. */
.crm-actrep-bars { display: flex; align-items: flex-end; gap: 2px; height: 84px; padding: 4px 0; }
.crm-actrep-bar { flex: 1 1 0; min-width: 3px; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; }
.crm-actrep-bar > i { display: flex; align-items: flex-end; width: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--crm-chart-a), var(--crm-chart-b)); }
/* Part ENREGISTRÉE (modifications de fiches) empilée au pied de la barre : d'un
   coup d'œil, la journée où quelqu'un a corrigé des fiches se distingue de celle
   où il a seulement écrit des notes. */
.crm-actrep-bar > i > u { display: block; width: 100%; border-radius: 3px; background: var(--crm-ink-3); opacity: .55; }

/* Six tuiles ici (gestes / notes / fiches / jours / médiane / magasins) contre
   quatre ailleurs : auto-fit plutôt qu'un repeat(6) figé, sinon les tuiles
   deviennent illisibles sur les largeurs intermédiaires. La règle mobile
   (repeat(2,1fr), plus bas dans la media query) continue de primer. */
.crm-actrep-kpis { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
/* Transition ancienne → nouvelle valeur. Tabulaire : les courriels et numéros
   alignés se comparent d'une ligne à l'autre. */
.crm-act__change { font-size: 11.5px; color: var(--crm-ink-2); margin-top: 3px; font-variant-numeric: tabular-nums; word-break: break-word; }
.crm-act--log .crm-act__type { font-weight: 600; }

/* --- Feuille (bottom sheet / modale) ----------------------------------------- */
.crm-sheet-ov { position: fixed; inset: 0; background: rgba(24, 20, 14, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; animation: crm-fade .18s ease both; }
.crm-sheet { background: var(--crm-card, #FBF8F2); color: var(--crm-ink, #282521); width: 100%; max-width: 480px; border-radius: 22px 22px 0 0; max-height: 92dvh; overflow-y: auto; box-shadow: 0 -8px 40px rgba(0, 0, 0, .18); animation: crm-sheet-up .26s cubic-bezier(.32, .72, .33, 1) both; }
.crm-sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--crm-line, rgba(40,34,24,.14)); margin: 10px auto 0; }
@media (min-width: 560px) {
  .crm-sheet-ov { align-items: center; padding: 24px; }
  .crm-sheet { border-radius: 20px; }
  .crm-sheet::before { display: none; }
}
.crm-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--crm-line, rgba(40,34,24,.09)); font-weight: 600; font-size: 15px; position: sticky; top: 0; background: inherit; z-index: 2; }
.crm-sheet__x { background: none; border: none; font-size: 17px; cursor: pointer; color: var(--crm-ink-3, #9a927f); padding: 4px 8px; border-radius: 8px; transition: background .12s ease, color .12s ease; }
.crm-sheet__x:hover { background: var(--crm-accent-soft, rgba(168,134,63,.1)); color: var(--crm-ink, #282521); }
.crm-sheet__body { padding: 16px 20px calc(22px + env(safe-area-inset-bottom)); }
.crm-sheet__label { font-size: 11px; color: var(--crm-ink-3, #9a927f); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 8px; }
.crm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.crm-chips button { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--crm-line, #ece4d6); background: var(--crm-card, #fff); color: var(--crm-ink-2, #6f6857); cursor: pointer; transition: all .13s ease; }
.crm-chips button:hover { border-color: var(--crm-line-strong, #d9cfba); }
.crm-chips button.on { background: var(--crm-accent, #A8863F); color: var(--crm-accent-ink, #fff); border-color: var(--crm-accent, #A8863F); }
.crm-sheet__note { width: 100%; border: 1px solid var(--crm-line, #ece4d6); border-radius: 13px; padding: 11px 13px; font-size: 14px; font-family: inherit; color: var(--crm-ink, #282521); background: var(--crm-card, #fff); resize: vertical; box-sizing: border-box; margin-bottom: 14px; transition: border-color .13s ease, box-shadow .13s ease; }
.crm-sheet__note:focus { outline: none; border-color: var(--crm-accent, #A8863F); box-shadow: 0 0 0 3px var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-sheet__actions { display: flex; gap: 8px; margin-bottom: 12px; }
.crm-sheet__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 500; padding: 11px; border: 1px solid var(--crm-line, #ece4d6); border-radius: 12px; background: var(--crm-card, #fff); cursor: pointer; color: var(--crm-ink, #4a4438); transition: background .13s ease; }
.crm-sheet__btn:hover { background: var(--crm-accent-soft, rgba(168,134,63,.08)); }
.crm-sheet__thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-sheet__thumb { width: 58px; height: 58px; object-fit: cover; border-radius: 11px; border: 1px solid var(--crm-line, #efe9dd); }
.crm-rec { font-size: 13px; padding: 10px 13px; border-radius: 11px; background: var(--crm-info-bg, #eef1f8); color: var(--crm-info-ink, #2f4d86); margin-bottom: 12px; }
.crm-rec--live .crm-rec__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--crm-crit-dot, #c0574e); margin-right: 6px; vertical-align: middle; animation: crm-pulse 1.4s ease-out infinite; }
.crm-rec--done { background: var(--crm-ok-bg, #e6f4ea); color: var(--crm-ok-ink, #1f6b3a); }
.crm-sheet__err { color: var(--crm-crit-ink, #8a3b34); font-size: 13px; margin-bottom: 10px; min-height: 4px; }
/* Indice desktop seulement (le collage n'existe pas vraiment sur mobile). */
.crm-sheet__hint { display: none; color: var(--crm-muted, #8a8577); font-size: 12px; margin: -2px 0 8px; }
@media (hover: hover) and (pointer: fine) { .crm-sheet__hint { display: block; } }
.crm-sheet__save { width: 100%; background: var(--crm-accent, #A8863F); color: var(--crm-accent-ink, #fff); border: none; border-radius: 13px; padding: 13px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .13s ease, transform .13s ease; }
.crm-sheet__save:hover { filter: brightness(1.05); }
.crm-sheet__save:active { transform: scale(.99); }
.crm-sheet__save:disabled { opacity: .55; cursor: default; }

/* --- Échantillons laissés (traçabilité des lots) --------------------------------- */
.crm-samples__check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--crm-ink, #282521); margin-bottom: 10px; cursor: pointer; }
.crm-samples__check input { width: 18px; height: 18px; accent-color: var(--crm-accent, #A8863F); cursor: pointer; }
.crm-samples__check input:disabled { cursor: default; }
.crm-samples { border: 1px solid var(--crm-line, #ece4d6); border-radius: 13px; padding: 10px; margin-bottom: 12px; }
.crm-samples__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-samples__chips:not(:empty) { margin-bottom: 8px; }
.crm-samples__chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 5px 8px 5px 12px; border-radius: 999px; background: var(--crm-accent, #A8863F); color: var(--crm-accent-ink, #fff); }
.crm-samples__chip button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0 2px; opacity: .85; }
.crm-samples__chip button:hover { opacity: 1; }
.crm-samples__q { width: 100%; box-sizing: border-box; border: 1px solid var(--crm-line, #ece4d6); border-radius: 11px; padding: 9px 11px; font-size: 14px; font-family: inherit; background: var(--crm-card, #fff); color: var(--crm-ink, #282521); transition: border-color .13s ease, box-shadow .13s ease; }
.crm-samples__q:focus { outline: none; border-color: var(--crm-accent, #A8863F); box-shadow: 0 0 0 3px var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-samples__list { max-height: 220px; overflow-y: auto; margin-top: 8px; }
.crm-samples__grp { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--crm-ink-3, #9a927f); padding: 8px 4px 4px; }
.crm-samples__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 8px; font: inherit; cursor: pointer; color: var(--crm-ink, #282521); }
.crm-samples__opt:hover { background: var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-samples__lot { font-size: 14px; font-weight: 600; }
.crm-samples__meta { font-size: 12px; color: var(--crm-ink-3, #9a927f); }
/* Le grammage sort du gris de la ligne : c'est LUI qui départage deux lots au
   même nom de produit, il doit s'attraper à l'œil sans être lu. */
.crm-samples__fmt { font-weight: 600; color: var(--crm-ink, #282521); }
.crm-samples__empty { font-size: 13px; color: var(--crm-ink-3, #9a927f); padding: 10px 4px; }
/* Visible AUSSI sur mobile (contrairement à .crm-sheet__hint) : les reps sont sur téléphone. */
.crm-samples__hint { font-size: 12px; color: var(--crm-muted, #8a8577); margin-top: 8px; }
.crm-samples__down { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 13px; color: var(--crm-crit-ink, #8a3b34); padding: 8px 4px; }
.crm-samples__retry, .crm-samples__add { flex: none; font: inherit; font-size: 12px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--crm-line, #ece4d6); border-radius: 999px; background: var(--crm-card, #fff); color: var(--crm-ink, #282521); cursor: pointer; }
.crm-samples__retry:hover, .crm-samples__add:hover { background: var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-samples__manual { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 12px; color: var(--crm-ink-3, #9a927f); border-top: 1px solid var(--crm-line, #ece4d6); padding: 8px 4px 2px; }
.crm-act__lots { font-size: 13px; color: var(--crm-ink-2, #6f6857); margin-top: 4px; }

/* --- Formulaires (magasin / contact) ------------------------------------------ */
.crm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.crm-form-grid .crm-field--full { grid-column: 1 / -1; }
.crm-field { margin-bottom: 11px; }
.crm-field label { display: block; font-size: 12px; font-weight: 500; color: var(--crm-ink-2, #6f6857); margin-bottom: 4px; }
.crm-field input, .crm-field textarea, .crm-field select { width: 100%; box-sizing: border-box; border: 1px solid var(--crm-line, #ece4d6); border-radius: 11px; padding: 9px 11px; font-size: 14px; font-family: inherit; color: var(--crm-ink, #282521); background: var(--crm-card, #fff); transition: border-color .13s ease, box-shadow .13s ease; }
.crm-field input:focus, .crm-field textarea:focus, .crm-field select:focus { outline: none; border-color: var(--crm-accent, #A8863F); box-shadow: 0 0 0 3px var(--crm-accent-soft, rgba(168,134,63,.1)); }
/* « Autre adresse… » ouvre un champ SOUS le sélecteur : les deux se suivent. */
.crm-field select + input[type="email"] { margin-top: 7px; }

/* ---- Pièces jointes du composeur (ticket David, 20/08) ---- */
.crm-mail-attach { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.crm-mail-attach .crm-sheet__btn { flex: 0 0 auto; padding: 8px 14px; }
.crm-mail-weight { font-size: 12px; color: var(--crm-ink-3, #9a927f); }
.crm-mail-weight.over { color: var(--crm-crit-ink, #8a3b34); font-weight: 600; }
.crm-mail-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.crm-mail-file { display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 6px; border: 1px solid var(--crm-line, #ece4d6); border-radius: 11px; background: var(--crm-card, #fff); }
.crm-mail-file__vig { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.crm-mail-file__ic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--crm-accent-soft, rgba(168,134,63,.1)); font-size: 15px; flex: 0 0 auto; }
/* min-width:0 — sans lui, un nom long pousse la croix hors de la carte. */
.crm-mail-file__nom { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mail-file__poids { flex: 0 0 auto; font-size: 11.5px; color: var(--crm-ink-3, #9a927f); }
.crm-mail-file__x { flex: 0 0 auto; background: none; border: none; cursor: pointer; font-size: 13px; line-height: 1; color: var(--crm-ink-3, #9a927f); padding: 6px; border-radius: 8px; transition: background .12s ease, color .12s ease; }
.crm-mail-file__x:hover { background: var(--crm-accent-soft, rgba(168,134,63,.1)); color: var(--crm-ink, #282521); }

/* --- Confirmation --------------------------------------------------------------- */
.crm-confirm__msg { font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
.crm-confirm__actions { display: flex; gap: 8px; }
.crm-confirm__actions .crm-sheet__save { width: auto; flex: 1; margin: 0; }
.crm-confirm__actions .crm-sheet__btn { flex: 1; }

/* --- Rapport hebdo ------------------------------------------------------------------ */
.crm-head__btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-head__report { display: inline-flex; align-items: center; gap: 7px; background: var(--crm-card); color: var(--crm-ink); border: 1px solid var(--crm-line); border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 550; padding: 10px 16px; cursor: pointer; box-shadow: var(--crm-shadow); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.crm-head__report:hover { transform: translateY(-1px); box-shadow: var(--crm-shadow-lift); background: var(--crm-accent-soft); }
.crm-delta { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.crm-delta--up { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-delta--down { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
/* Synthèse markdown */
.crm-md__h { font-size: 13px; font-weight: 650; margin: 12px 0 6px; letter-spacing: -.01em; }
.crm-md__h:first-child { margin-top: 0; }
.crm-md__p { font-size: 13.5px; line-height: 1.6; margin: 0 0 8px; color: var(--crm-ink); opacity: .94; }
.crm-md__ul { margin: 0 0 8px; padding-left: 20px; }
.crm-md__ul li { font-size: 13.5px; line-height: 1.6; margin-bottom: 3px; }
/* Mouvements */
.crm-mv__group + .crm-mv__group { margin-top: 12px; }
.crm-mv__label { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.crm-mv__label--ok { color: var(--crm-ok-ink); } .crm-mv__label--crit { color: var(--crm-crit-ink); }
.crm-mv__label--accent { color: var(--crm-accent); } .crm-mv__label--warn { color: var(--crm-warn-ink); }
.crm-mv__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-mv__pill { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--crm-ink); background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .12s ease, transform .12s ease; }
.crm-mv__pill:hover { background: var(--crm-accent-soft); transform: translateY(-1px); }
.crm-mv__delta { font-size: 11px; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
/* Priorités */
.crm-rep + .crm-rep { margin-top: 16px; }
.crm-rep__name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; margin-bottom: 10px; }
.crm-prio { background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.crm-prio__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.crm-prio__name { background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--crm-ink); cursor: pointer; }
.crm-prio__name:hover { color: var(--crm-accent); }
.crm-prio__score { font-size: 11.5px; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
.crm-prio__seen { font-size: 10.5px; font-weight: 600; color: var(--crm-ink-3); background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.crm-prio__channel { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--crm-accent); background: var(--crm-accent-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.crm-prio__why { font-size: 13px; color: var(--crm-ink-2); margin-top: 6px; line-height: 1.5; }
.crm-prio__how { font-size: 13px; font-weight: 550; margin-top: 4px; }
.crm-prio__warn { font-size: 12px; color: var(--crm-warn-ink); margin-top: 7px; }
/* Brouillon de courriel */
.crm-draft { margin-top: 10px; border-top: 1px dashed var(--crm-line); padding-top: 9px; }
.crm-draft__toggle { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--crm-accent); cursor: pointer; }
.crm-draft__body { margin-top: 9px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 11px; padding: 11px 13px; }
.crm-draft__subject { font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.crm-draft__text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: var(--crm-ink); opacity: .92; }
.crm-draft__copy { margin-top: 9px; }

/* --- File d'approbation des courriels ---------------------------------------------- */
.crm-appr { padding: 14px 0; }
.crm-appr + .crm-appr { border-top: 1px solid var(--crm-line); margin-top: 6px; }
.crm-appr__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-appr__store { background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 650; color: var(--crm-ink); cursor: pointer; }
.crm-appr__store:hover { color: var(--crm-accent); }
.crm-appr__to { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--crm-ink-2); }
.crm-appr__to svg { color: var(--crm-ink-3); }
.crm-appr__rep { font-size: 11.5px; color: var(--crm-ink-3); }
.crm-appr__status { margin-left: auto; font-size: 11px; font-weight: 650; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.crm-appr__status--accent { background: var(--crm-accent-soft); color: var(--crm-accent); }
.crm-appr__status--ok { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-appr__status--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
.crm-appr__status--muted { background: var(--crm-card-2); color: var(--crm-ink-2); border: 1px solid var(--crm-line); }
.crm-appr__subject { width: 100%; box-sizing: border-box; border: 1px solid var(--crm-line); border-radius: 11px; padding: 9px 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--crm-ink); background: var(--crm-card); margin-bottom: 8px; }
.crm-appr__body { width: 100%; box-sizing: border-box; border: 1px solid var(--crm-line); border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--crm-ink); background: var(--crm-card); resize: vertical; }
.crm-appr__subject:focus, .crm-appr__body:focus { outline: none; border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-accent-soft); }
.crm-appr__subject:disabled, .crm-appr__body:disabled { background: var(--crm-card-2); color: var(--crm-ink-2); }
.crm-appr__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.crm-appr__send { display: inline-flex; align-items: center; gap: 7px; background: var(--crm-accent); color: var(--crm-accent-ink); border: none; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 16px; cursor: pointer; transition: filter .13s ease, transform .13s ease; }
.crm-appr__send:hover { filter: brightness(1.05); } .crm-appr__send:active { transform: scale(.99); }
.crm-appr__send:disabled { opacity: .55; cursor: default; }
.crm-appr__err { margin-top: 9px; font-size: 12.5px; color: var(--crm-crit-ink); background: var(--crm-crit-bg); border-radius: 9px; padding: 8px 11px; }
.crm-appr__ok { margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--crm-ok-ink); background: var(--crm-ok-bg); border-radius: 9px; padding: 8px 11px; }
.crm-appr__meta { font-size: 11.5px; color: var(--crm-ink-3); margin-top: 8px; }

/* --- Lightbox photo ---------------------------------------------------------------- */

/* --- Agriculture -------------------------------------------------------------------- */
.agri-late { font-style: italic; color: var(--crm-ink-2); opacity: .85; }

/* --- Divers ----------------------------------------------------------------------- */
.crm-soon { color: var(--crm-ink-3); font-size: 13px; padding: 6px 0; }


/* =====================================================================
   Icônes — le sprite natif à la place des emojis
   ---------------------------------------------------------------------
   `CRM.format.icone(nom)` (public/js/modules/crm/format.js) émet un
   <svg class="gicon crm-ic"><use href="…#nom"></use></svg>.

   `.gicon` est défini pour le rail (display:block, 1.25em) : dans le CRM
   les icônes vivent DANS le fil du texte, donc inline, et calées sur la
   ligne de base optique. Elles héritent la couleur du texte — c'est tout
   l'intérêt par rapport à un emoji, qui arrivait toujours en couleur.
   ===================================================================== */
/* Filet de sécurité, à égalité de spécificité avec `.gicon` de shell.css —
   crm.css est chargé APRÈS, donc c'est celle-ci qui gagne. Elle rattrape une
   icône du CRM rendue hors des quatre racines ci-dessous : une bulle Leaflet
   déplacée sous <body>, un toast, un portail. Sans elle, l'icône hériterait du
   `display:block` du rail et casserait la ligne de texte. */
.crm-ic { display: inline-block; vertical-align: -.16em; width: 1.05em; height: 1.05em; flex: none; overflow: visible; }
#crm-view .crm-ic, #crm-tabbar .crm-ic, .crm-sheet-ov .crm-ic, .crm-rt-notepop .crm-ic {
  display: inline-block; vertical-align: -.16em;
  width: 1.05em; height: 1.05em; flex: none; overflow: visible;
}
/* Dans un conteneur flex (chip, bouton, tuile) l'alignement se fait par le
   flex : le décalage optique ci-dessus ferait alors descendre l'icône. */
#crm-view .crm-ic:only-child, .crm-sheet-ov .crm-ic:only-child { vertical-align: middle; }

/* Tailles fixes là où l'icône ne doit pas suivre la taille du texte : barre
   d'onglets, tuiles de KPI, gros états vides. Ces sélecteurs portent un ID
   pour passer devant le socle ci-dessus — sans quoi ils seraient ignorés. */
#crm-tabbar .crm-otab__ic .crm-ic { width: 15px; height: 15px; vertical-align: middle; }
#crm-view .crm-ck-chip .crm-ic, #crm-view .crm-store-cardlink .crm-ic { width: 14px; height: 14px; }
#crm-view .crm-empty .crm-ic, .crm-sheet-ov .crm-empty .crm-ic { width: 30px; height: 30px; vertical-align: middle; opacity: .55; }

/* Pastilles d'état — 🟢🟡🔴⚪ étaient des emojis de couleur, donc hors palette
   et illisibles en mode sombre. Un disque CSS suit les jetons du thème et
   n'a pas besoin d'être dessiné. Toujours accompagné d'un libellé : la
   couleur seule n'est pas une information accessible. */
.crm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: .04em; margin-right: 6px; flex: none; background: var(--crm-ink-3); }
.crm-dot--ok { background: var(--crm-ok-dot); }
.crm-dot--warn { background: var(--crm-warn-dot); }
.crm-dot--crit { background: var(--crm-crit-dot); }
.crm-dot--info { background: var(--crm-info-dot); }
.crm-dot--muet { background: var(--crm-line-strong); }

/* =====================================================================
   Responsive — mobile d'abord pour les reps sur la route
   ===================================================================== */
@media (max-width: 860px) {
  .crm-thead { display: none; }
  .crm-row { grid-template-columns: 42px 1fr auto; gap: 12px; padding: 12px 16px; }
  .crm-list--sel .crm-row { grid-template-columns: 26px 42px 1fr auto; }
  .crm-row__cell, .crm-row__num { display: none; }
  .crm-row__mob { display: block !important; }
  .crm-info { grid-template-columns: 1fr; }
}
@media (min-width: 861px) {
  .crm-row__mob { display: none !important; }
}
@media (max-width: 640px) {
  .crm-head__title { font-size: 21px; }
  .crm-kpis { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px 12px; padding: 4px; }
  .crm-kpis::-webkit-scrollbar { display: none; }
  .crm-kpi { flex: 0 0 auto; min-width: 96px; padding: 11px 14px 10px; }
  .crm-kpi__n { font-size: 19px; }
  .crm-toolbar { gap: 6px; }
  .crm-filter { flex: 1; min-width: 0; }
  /* Le filtre à cases suit la même règle que les <select> voisins : il partage
     la rangée au lieu de la piloter. Le panneau, lui, garde sa largeur propre
     (bornée au viewport) — c'est une liste à lire, pas un filtre à ranger. */
  .crm-multi { flex: 1; min-width: 0; }
  .crm-multi__btn { max-width: none; width: 100%; }
  .crm-segrow { width: 100%; }
  .crm-segrow button { flex: 1; }
  .crm-hero { padding: 16px; gap: 13px; }
  .crm-hero__name { white-space: normal; font-size: 17px; }
  .crm-mono--lg { width: 50px; height: 50px; font-size: 16px; border-radius: 15px; }
  .crm-fkpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .crm-actions { flex-wrap: wrap; }
  .crm-action { flex: 1 1 40%; }
  .crm-card { padding: 15px 16px; border-radius: 16px; }
  .crm-table-scroll { margin: 0 -16px; padding: 0 16px; }
  .crm-table th.opt, .crm-table td.opt { display: none; }
  .crm-tab { padding: 9px 10px; font-size: 12.5px; }
  /* Sur téléphone la place manque : l'étiquette rétrécit, l'icône reste (c'est
     elle qui distingue une fiche d'une route d'un coup d'œil). */
  .crm-otab { max-width: 150px; padding: 8px 6px 8px 9px; font-size: 12.5px; }
  .crm-contacts { grid-template-columns: 1fr; }
  .crm-form-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   COCKPIT REP — accueil mobile-first (§ « Mon territoire »)
   ===================================================================== */
.crm-ck { max-width: 980px; margin: 0 auto; color: var(--crm-ink); }

/* Barre du haut : marque + sélecteur rep */
.crm-ck-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.crm-ck-brand { display: inline-flex; align-items: center; gap: 9px; }
.crm-ck-brand__ic { font-size: 22px; }
.crm-ck-brand__t { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.crm-ck-top__r { display: flex; align-items: center; gap: 8px; }

/* Chips de navigation (défilement horizontal sur mobile) */
.crm-ck-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px 14px; padding: 2px 4px; }
.crm-ck-chips::-webkit-scrollbar { display: none; }
.crm-ck-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 550; color: var(--crm-ink); padding: 8px 14px; cursor: pointer; box-shadow: var(--crm-shadow); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.crm-ck-chip:hover { transform: translateY(-1px); box-shadow: var(--crm-shadow-lift); border-color: var(--crm-line-strong); }

/* Héros : salutation + pouls du territoire */
.crm-ck-hero { background: linear-gradient(150deg, var(--crm-card) 60%, var(--crm-accent-soft)); border: 1px solid var(--crm-line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--crm-shadow); margin-bottom: 14px; animation: crm-in .3s ease both; }
.crm-ck-hero__hi { font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.crm-ck-hero__sub { font-size: 13px; color: var(--crm-ink-2); margin-top: 4px; }
.crm-ck-segs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crm-ck-seg { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.crm-ck-seg b { color: var(--crm-ink); font-weight: 650; }

/* Fraîcheur des données (sous les classes A/B/C/D/P).
   Discret par défaut : c'est un gage de confiance, pas une alerte. Il ne monte
   en visibilité que lorsqu'il a quelque chose à signaler — sinon il deviendrait
   du bruit qu'on cesse de lire, et il ne servirait plus le jour où ça casse. */
.crm-ck-fresh { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.crm-ck-fresh__i {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--crm-ink-3);
    cursor: pointer;   /* infobulle au survol, toast au toucher — le détail doit rester atteignable sur téléphone */
}
.crm-ck-fresh__i b { font-size: 9px; line-height: 1; }
.crm-ck-fresh__i--vieilli { color: var(--crm-warning, #a86b00); font-weight: 600; }
.crm-ck-fresh__i--echec { color: var(--crm-danger, #b42318); font-weight: 650; }
.crm-ck-fresh__i--inconnu { opacity: .65; font-style: italic; }

/* Recherche rapide (collante sous la barre) */
.crm-ck-search { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 9px; background: var(--crm-card); border: 1px solid var(--crm-line-strong); border-radius: 14px; padding: 0 14px; height: 48px; box-shadow: var(--crm-shadow); color: var(--crm-ink-3); margin-bottom: 6px; }
.crm-ck-search:focus-within { border-color: var(--crm-accent); }
.crm-ck-search input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; font: inherit; font-size: 15px; color: var(--crm-ink); outline: none; }
.crm-ck-results { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 14px; box-shadow: var(--crm-shadow-lift); overflow: hidden; margin-bottom: 14px; }
.crm-ck-res { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--crm-line); }
.crm-ck-res:first-child { border-top: none; }
.crm-ck-res--none { padding: 14px; color: var(--crm-ink-3); font-size: 13px; }
.crm-ck-res__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: none; border: none; font: inherit; color: var(--crm-ink); text-align: left; padding: 12px 14px; cursor: pointer; }
.crm-ck-res__main:hover { background: var(--crm-card-2); }
.crm-ck-res__name { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ck-res__city { font-size: 12px; color: var(--crm-ink-3); margin-left: auto; white-space: nowrap; }
.crm-ck-res__add { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; align-self: stretch; background: var(--crm-accent-soft); border: none; border-left: 1px solid var(--crm-line); color: var(--crm-accent); cursor: pointer; }
.crm-ck-res__add:hover { background: var(--crm-accent); color: var(--crm-accent-ink); }

/* KPI cliquables → liste filtrée */
.crm-ck-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-bottom: 16px; }
.crm-ck-kpi { text-align: left; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 15px; padding: 13px 14px; cursor: pointer; font: inherit; color: inherit; box-shadow: var(--crm-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.crm-ck-kpi:hover { transform: translateY(-2px); box-shadow: var(--crm-shadow-lift); }
.crm-ck-kpi__n { font-size: 22px; font-weight: 680; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.crm-ck-kpi__l { font-size: 11.5px; color: var(--crm-ink-2); margin-top: 3px; }
.crm-ck-kpi--actif .crm-ck-kpi__n { color: var(--crm-ok-ink); }
.crm-ck-kpi--ralentit .crm-ck-kpi__n { color: var(--crm-warn-ink); }
.crm-ck-kpi--dormant .crm-ck-kpi__n { color: var(--crm-crit-ink); }
.crm-ck-kpi--prospect .crm-ck-kpi__n { color: var(--crm-ink-3); }
.crm-ck-kpi--opp .crm-ck-kpi__n { color: var(--crm-warn-ink); }

/* Sections */
.crm-ck-sec { margin-bottom: 18px; }
.crm-ck-sec__h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 620; margin-bottom: 11px; }
.crm-ck-sec__badge { font-size: 11px; font-weight: 600; background: var(--crm-accent-soft); color: var(--crm-accent); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }

/* Cartes d'action */
.crm-ck-acts { display: grid; gap: 10px; }
.crm-ck-act { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 15px; padding: 13px 15px; box-shadow: var(--crm-shadow); animation: crm-in .3s ease both; }
.crm-ck-act__head { display: flex; align-items: center; gap: 9px; }
.crm-ck-act__name { background: none; border: none; font: inherit; font-size: 14.5px; font-weight: 620; color: var(--crm-ink); cursor: pointer; padding: 0; text-align: left; }
.crm-ck-act__name:hover { color: var(--crm-accent); text-decoration: underline; }
.crm-ck-act__tag { margin-left: auto; font-size: 11px; color: var(--crm-ink-2); background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.crm-ck-act__why { font-size: 13px; color: var(--crm-ink); margin-top: 7px; line-height: 1.45; }
.crm-ck-act__how { font-size: 12.5px; color: var(--crm-ink-2); margin-top: 3px; }
.crm-ck-act__warn { font-size: 12px; color: var(--crm-warn-ink); margin-top: 6px; }
.crm-ck-act__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.crm-ck-act__cta { display: inline-flex; align-items: center; gap: 6px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--crm-ink); padding: 8px 12px; cursor: pointer; text-decoration: none; transition: transform .14s ease, border-color .14s ease; }
.crm-ck-act__cta:hover { transform: translateY(-1px); border-color: var(--crm-line-strong); }
.crm-ck-act__cta--go { background: var(--crm-accent); color: var(--crm-accent-ink); border-color: transparent; }
.crm-ck-act__cta--go:hover { filter: brightness(1.05); }

/* Carte */
.crm-ck-maplegend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-size: 12px; color: var(--crm-ink-2); }
.crm-ck-maplegend span { display: inline-flex; align-items: center; gap: 5px; }
.crm-ck-maplegend i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--crm-line-strong); }
.crm-ck-map { height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid var(--crm-line); box-shadow: var(--crm-shadow); background: var(--crm-card-2); }
.crm-ck-map .leaflet-container { height: 100%; width: 100%; background: var(--crm-card-2); font: inherit; }
.crm-map__err { padding: 24px; text-align: center; color: var(--crm-ink-3); font-size: 13px; background: var(--crm-card-2); border-radius: 16px; }
.crm-map__clip { background: rgba(0,0,0,.62); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 8px; }
/* Fond de carte tombé : la couche de tuiles est retirée, on garde un aplat
   neutre sous les marqueurs plutôt qu'un damier vide (ou, avant le correctif,
   une grille de pavés « Access blocked » servis par le fournisseur bloqué). */
.crm-map--nobase, .crm-map--nobase.leaflet-container { background: var(--crm-card-2); }
.crm-map__nobase { max-width: 260px; line-height: 1.35; white-space: normal; }

/* Popup de la carte */
.crm-mapp { min-width: 150px; }
.crm-mapp__seg { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 0 6px; }
.crm-mapp__name { font-size: 14px; font-weight: 650; margin-top: 6px; color: #282521; }
.crm-mapp__city { font-size: 12px; color: #6b6355; }
.crm-mapp__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.crm-mapp__btn, .crm-mapp__dir { display: inline-flex; align-items: center; gap: 4px; background: #A8863F; color: #fff; border: none; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 550; padding: 6px 10px; cursor: pointer; text-decoration: none; }
.crm-mapp__btn--soft { background: #f0e9d8; color: #6b5320; }
/* Leaflet colore les <a> de popup en bleu (.leaflet-container a) : on reprend la main (spécificité classe+classe+élément). */
.crm-mapp a.crm-mapp__dir, .crm-mapp a.crm-mapp__dir:hover { color: #fff; text-decoration: none; }

/* Toast */
/* Même réserve que le toast global (#toast, style.css) : sans elle le texte de
   confirmation est rogné par la barre gestuelle en PWA. */
.crm-toast { position: fixed; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); transform: translate(-50%, 12px); background: var(--crm-ink); color: var(--crm-card); font-size: 13.5px; font-weight: 550; padding: 11px 18px; border-radius: 12px; box-shadow: var(--crm-shadow-lift); opacity: 0; z-index: 9999; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.crm-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 861px) {
  .crm-ck-map { height: 440px; }
}
@media (max-width: 640px) {
  .crm-ck-brand__t { font-size: 18px; }
  .crm-ck-hero { padding: 16px; border-radius: 18px; }
  .crm-ck-hero__hi { font-size: 20px; }
  .crm-ck-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .crm-ck-map { height: 280px; }
  .crm-ck-top__r .crm-filter { max-width: 190px; }
}

/* =====================================================================
   ADMIN REPS + ROUTES DE VISITE
   ===================================================================== */
/* — Champs de formulaire partagés (sheet large) — */
.crm-sheet--wide { max-width: 620px; }
.crm-fld { display: flex; flex-direction: column; gap: 4px; }
.crm-fld > span { font-size: 12px; color: var(--crm-ink-2); font-weight: 550; }
.crm-fld--wide { grid-column: 1 / -1; }
.crm-fld input { height: 42px; border: 1px solid var(--crm-line); border-radius: 11px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box; transition: border-color .13s ease; }
.crm-fld input:focus { outline: none; border-color: var(--crm-accent); }
.crm-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--crm-ink); margin: 12px 0 2px; cursor: pointer; }
.crm-check input { width: 17px; height: 17px; accent-color: var(--crm-accent); }
.crm-rep-pinmap { height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid var(--crm-line); margin-top: 10px; background: var(--crm-card-2); }
.crm-rep-pinmap .leaflet-container { height: 100%; width: 100%; font: inherit; }
.crm-mappin { background: none; border: none; font-size: 22px; line-height: 1; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* — Cartes rep — */
.crm-rep-card { display: flex; align-items: center; gap: 14px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 15px; padding: 14px 16px; box-shadow: var(--crm-shadow); margin-bottom: 10px; animation: crm-in .3s ease both; }
.crm-rep-card__main { flex: 1; min-width: 0; }
.crm-rep-card__name { font-size: 15px; font-weight: 620; display: flex; align-items: center; gap: 8px; }
.crm-rep-card__off { font-size: 11px; font-weight: 550; color: var(--crm-ink-3); background: var(--crm-card-2); border-radius: 999px; padding: 1px 8px; }
.crm-rep-card__sub { font-size: 12.5px; color: var(--crm-ink-2); margin-top: 2px; }
.crm-rep-card__meta { font-size: 12px; color: var(--crm-ink-2); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-rep-card__meta b { color: var(--crm-ink); }
.crm-rep-home { display: inline-flex; align-items: center; gap: 4px; font-weight: 550; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.crm-rep-home--ok { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-rep-home--no { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.crm-rep-card__acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.crm-rep-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--crm-ink); padding: 7px 11px; cursor: pointer; transition: transform .13s ease, border-color .13s ease; }
.crm-rep-btn:hover { transform: translateY(-1px); border-color: var(--crm-line-strong); }
.crm-rep-btn--go { background: var(--crm-accent); color: var(--crm-accent-ink); border-color: transparent; }
.crm-rep-btn--del { color: var(--crm-crit-ink); }

/* — Assignation par rayon — */
.crm-radius { background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 13px; padding: 12px 14px; margin-bottom: 12px; }
.crm-radius__label { font-size: 12.5px; font-weight: 600; color: var(--crm-ink); margin-bottom: 9px; }
.crm-radius__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-radius__row input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--crm-accent); }
.crm-radius__km { font-size: 13px; color: var(--crm-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-radius__km b { color: var(--crm-ink); font-size: 15px; }
.crm-radius__count { font-size: 12.5px; font-weight: 600; color: var(--crm-accent); background: var(--crm-accent-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.crm-radius__opt { margin: 9px 0 0; font-size: 12.5px; }

/* — Assignation — */
.crm-assign-hint { font-size: 12px; color: var(--crm-ink-2); margin: 4px 0 8px; }
.crm-assign-list { display: flex; flex-direction: column; }
.crm-assign-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--crm-line); cursor: pointer; }
.crm-assign-row:first-child { border-top: none; }
.crm-assign-row input { width: 18px; height: 18px; accent-color: var(--crm-accent); flex: none; }
.crm-assign-row__name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-assign-row__city { font-size: 12px; color: var(--crm-ink-3); white-space: nowrap; }
.crm-assign-row__cur { font-size: 11px; color: var(--crm-warn-ink); background: var(--crm-warn-bg); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }

/* — Planificateur de routes — */
.crm-rt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.crm-rt-num { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--crm-ink-2); }
.crm-rt-num input { width: 56px; height: 40px; border: 1px solid var(--crm-line); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box; }
.crm-rt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.crm-rt-map { height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid var(--crm-line); box-shadow: var(--crm-shadow); background: var(--crm-card-2); margin-bottom: 16px; }
.crm-rt-map .leaflet-container { height: 100%; width: 100%; font: inherit; background: var(--crm-card-2); }
.crm-rt-tip { background: transparent !important; border: none !important; box-shadow: none !important; color: #fff; font-weight: 700; font-size: 11px; }
.crm-rt-warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); border-radius: 14px; padding: 16px 18px; font-size: 14px; line-height: 1.5; }
.crm-rt-days { display: grid; gap: 12px; }
.crm-rt-day { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 15px; padding: 13px 15px; box-shadow: var(--crm-shadow); }
.crm-rt-day__h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.crm-rt-day__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.crm-rt-day__meta { font-size: 12.5px; color: var(--crm-ink-2); }
.crm-rt-day__maps { margin-left: auto; font-size: 12.5px; font-weight: 550; color: var(--crm-accent); text-decoration: none; background: var(--crm-accent-soft); border-radius: 9px; padding: 5px 10px; }
.crm-rt-day__maps:hover { background: var(--crm-accent); color: var(--crm-accent-ink); }
.crm-rt-day__clip { font-size: 11px; color: var(--crm-warn-ink); background: var(--crm-warn-bg); border-radius: 999px; padding: 1px 8px; }

/* =====================================================================
   TABLEAU DE STATS
   ===================================================================== */
.crm-stats-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-stats-kpis { margin-bottom: 16px; }
.crm-fkpi--btn { cursor: pointer; text-align: left; font: inherit; color: inherit; transition: transform .14s ease, box-shadow .14s ease; }
.crm-fkpi--btn:hover { transform: translateY(-2px); box-shadow: var(--crm-shadow-lift); }
.crm-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.crm-stats-toggle { flex: none; }
.crm-stats-hint { font-size: 12px; color: var(--crm-ink-3); margin: 6px 0 11px; }
/* Avis « le sell-through ne connaît qu'une marque » : posé sous la rangée de
   tuiles quand le filtre de marque porte sur une autre. Il remonte contre les
   tuiles pour rester lisiblement rattaché à elles plutôt qu'au bloc suivant.
   Valeur accordée au rythme serré de l'écran redessiné — .crm-stx-kpis ferme
   à 9 px, pas aux 16 px de l'ancienne rangée. */
.crm-stats-brandnote { margin: -3px 0 9px; }
.crm-stats-segs { display: flex; flex-direction: column; gap: 9px; }
.crm-stats-seg { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.crm-stats-seg b { min-width: 34px; font-variant-numeric: tabular-nums; }
.crm-stats-seg__bar { flex: 1; height: 8px; border-radius: 5px; background: var(--crm-card-2); overflow: hidden; }
.crm-stats-seg__bar > i { display: block; height: 100%; border-radius: 5px; opacity: .85; }
.crm-stats-trow[data-rep] { cursor: pointer; }
.crm-stats-trow[data-rep]:hover { background: var(--crm-card-2); }
.crm-rt-stops { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-rt-stop { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.crm-rt-stop:hover { background: var(--crm-card-2); }
.crm-rt-stop__n { flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* Le nom est un <button> dans les deux modes (aperçu + figé) → reset de bouton ici. */
.crm-rt-stop__name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: none; font-family: inherit; color: var(--crm-ink); cursor: pointer; text-align: left; padding: 0; }
.crm-rt-stop__name:hover { color: var(--crm-accent); }
.crm-rt-day__date { font-size: 12px; color: var(--crm-ink-2); font-weight: 500; }
.crm-rt-stop__info { flex: none; background: none; border: none; cursor: pointer; font-size: 12.5px; line-height: 1; padding: 3px 5px; border-radius: 6px; opacity: .55; }
.crm-rt-stop__info:hover { opacity: 1; background: var(--crm-card-2); }
.crm-rt-extra { margin-top: 16px; }

/* --- Notes de visite (« insights ») : consigne AVANT la visite --------------
   Le nom passe dans une colonne pour que la note se lise SOUS lui, dans la ligne,
   sans repousser ↑ ↓ ✕ hors de l'écran. Palette --crm-info-* et non de nouveaux
   jetons : elle existe déjà en clair ET en sombre, réglée pour le contraste, et
   se distingue de l'or de l'accent (qui, lui, veut dire « action »). */
.crm-rt-stop__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.crm-rt-stop__main > .crm-rt-stop__name { flex: none; width: 100%; }
/* Plus appuyé que ✕ et ↑↓ (--crm-ink-3, opacité .42/.55) : c'est l'affordance
   NEUVE de la ligne. Au banc, --crm-ink-3 × .5 disparaissait en thème sombre. */
.crm-rt-stop__note { flex: none; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; color: var(--crm-ink-2); padding: 3px 6px; border-radius: 6px; opacity: .6; }
.crm-rt-stop__note:hover { opacity: 1; background: var(--crm-card-2); color: var(--crm-accent); }
/* État VISIBLE quand la ligne porte une consigne : sur tactile, aucun `title`
   ne s'affiche jamais — sans ce contraste il faudrait cliquer pour savoir. */
.crm-rt-stop__note.is-on { opacity: 1; font-size: 12.5px; font-weight: 400; background: var(--crm-info-bg); color: var(--crm-info-ink); }
.crm-rt-note { display: flex; align-items: flex-start; gap: 6px; width: 100%; box-sizing: border-box; text-align: left; font-family: inherit; cursor: pointer; background: var(--crm-info-bg); color: var(--crm-info-ink); border: 1px solid transparent; border-left: 3px solid var(--crm-info-dot); border-radius: 7px; padding: 4px 8px; }
.crm-rt-note:hover { border-color: var(--crm-info-dot); }
.crm-rt-note__ic { flex: none; font-size: 10.5px; line-height: 1.5; }
.crm-rt-note__b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Bornée à 2 lignes : un jour compte jusqu'à 9 arrêts et une note peut faire
   500 caractères — le texte entier reste dans le `title` et dans l'éditeur.
   `anywhere` : une chaîne de 500 caractères sans espace ne doit pas élargir la ligne. */
.crm-rt-note__t { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.7em; }
.crm-rt-note__m { font-size: 10.5px; color: var(--crm-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-rt-stop--check.is-done .crm-rt-note { opacity: .8; }
/* Notes ORPHELINES (bloc « sans arrêt cette semaine ») : même vignette que dans
   la ligne, avec en plus le nom du magasin — il n'y a plus d'arrêt pour le dire. */
/* Écrans très étroits (iPhone SE 1re gén., écran de couverture d'un pliable,
   Android en écran partagé). MESURÉ au banc : le budget INCOMPRESSIBLE d'une
   ligne de jour figé est de 275 px ; avec les 20 px de `.container-dashboard` et
   les 16 px de `.crm-rt-day` de chaque côté, la ligne déborde de sa carte sous
   ~347 px de fenêtre. Avant le bouton « + » de note elle tenait tout juste
   (248/248 à 320 px) — c'est donc bien ce bouton qui fait basculer. On laisse la
   ligne passer à deux rangées plutôt que de sortir ✕ et ↓ hors de la carte ;
   aucune affordance n'est perdue. */
@media (max-width: 360px) {
  .crm-rt-stop { flex-wrap: wrap; }
  .crm-rt-stop__main { flex: 1 0 100%; }
}
.crm-rt-orphans { display: flex; flex-direction: column; gap: 6px; }
.crm-rt-note__n { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* L'éditeur : ancré à la ligne, jamais une modale — la route doit rester
   lisible pendant qu'on écrit la consigne. z-index sous .crm-toast (9999) et
   au-dessus de la feuille (.crm-sheet-ov, 1000) : un toast d'erreur reste vu. */
.crm-rt-notepop { position: fixed; z-index: 1200; box-sizing: border-box; width: min(340px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 7px; background: var(--crm-card); color: var(--crm-ink); border: 1px solid var(--crm-line-strong); border-radius: 13px; box-shadow: var(--crm-shadow-lift); padding: 11px; animation: crm-in .16s ease both; }
.crm-rt-notepop__h { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; font-weight: 650; }
.crm-rt-notepop__store { min-width: 0; flex: 1; font-size: 11.5px; font-weight: 500; color: var(--crm-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-rt-notepop__ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 9px; font: inherit; font-size: 13px; line-height: 1.4; color: var(--crm-ink); padding: 8px 10px; }
.crm-rt-notepop__ta:focus { outline: none; border-color: var(--crm-accent); }
.crm-rt-notepop__hint { font-size: 11px; color: var(--crm-ink-3); line-height: 1.35; }
.crm-rt-notepop__err { font-size: 12px; font-weight: 550; color: var(--crm-crit-ink); background: var(--crm-crit-bg); border-radius: 8px; padding: 6px 9px; }
.crm-rt-notepop__f { display: flex; align-items: center; gap: 7px; }
.crm-rt-notepop__f > button { flex: none; font: inherit; font-size: 12.5px; font-weight: 550; border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.crm-rt-notepop__f > button:disabled { opacity: .55; cursor: default; }
.crm-rt-notepop__del { margin-right: auto; background: var(--crm-crit-bg); color: var(--crm-crit-ink); border: 1px solid transparent; }
.crm-rt-notepop__del:hover:not(:disabled) { border-color: var(--crm-crit-dot); }
.crm-rt-notepop__cancel { margin-left: auto; background: var(--crm-card-2); color: var(--crm-ink); border: 1px solid var(--crm-line); }
.crm-rt-notepop__save { background: var(--crm-accent); color: var(--crm-accent-ink); border: none; }
.crm-rt-notepop__save:hover:not(:disabled) { filter: brightness(1.05); }

/* Routes figées : figer + progression + cases à cocher */
.crm-rt-freezebtn { display: inline-flex; align-items: center; gap: 8px; background: var(--crm-accent); color: var(--crm-accent-ink); border: none; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; padding: 12px 18px; cursor: pointer; box-shadow: var(--crm-shadow); margin-bottom: 16px; width: 100%; justify-content: center; transition: filter .14s ease, transform .14s ease; }
.crm-rt-freezebtn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.crm-rt-freeze { display: flex; align-items: center; gap: 12px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 14px; padding: 12px 16px; box-shadow: var(--crm-shadow); margin-bottom: 16px; }
.crm-rt-prog { flex: 1; min-width: 0; }
.crm-rt-prog__bar { height: 9px; border-radius: 6px; background: var(--crm-card-2); overflow: hidden; }
.crm-rt-prog__bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--crm-ok-dot), var(--crm-accent)); transition: width .3s ease; }
.crm-rt-prog__lbl { display: inline-block; margin-top: 5px; font-size: 12.5px; font-weight: 550; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.crm-rt-regen { flex: none; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--crm-ink); padding: 8px 12px; cursor: pointer; }
.crm-rt-regen:hover { border-color: var(--crm-line-strong); }
.crm-rt-stop--check { align-items: center; }
.crm-rt-check { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.crm-rt-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.crm-rt-checkbox { width: 21px; height: 21px; border: 2px solid var(--crm-line-strong); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; background: var(--crm-card); transition: background .12s, border-color .12s; }
.crm-rt-check:hover .crm-rt-checkbox { border-color: var(--crm-ok-dot); }
.crm-rt-check input:checked + .crm-rt-checkbox { background: var(--crm-ok-dot); border-color: var(--crm-ok-dot); }
/* La coche de « visite faite » était un caractère ✓ posé en `content:` — donc
   dessiné par la fonte du poste, à une graisse qui n'existe pas partout. Ici
   c'est le tracé du sprite, en masque : la couleur reste pilotée par le CSS
   (blanc sur le carré vert), et le dessin ne dépend plus de la machine.
   `-webkit-mask` reste nécessaire pour Safari. */
.crm-rt-check input:checked + .crm-rt-checkbox::after {
  content: ''; width: 13px; height: 13px; background: #fff;
  -webkit-mask: var(--crm-coche) center / contain no-repeat;
          mask: var(--crm-coche) center / contain no-repeat;
}
.crm-rt-stop--check.is-done .crm-rt-stop__name { text-decoration: line-through; color: var(--crm-ink-3); }
.crm-rt-stop--check.is-done { opacity: .72; }
.crm-rt-stop--check .crm-rt-stop__name { background: none; border: none; font: inherit; color: var(--crm-ink); cursor: pointer; text-align: left; padding: 0; }
.crm-rt-stop--check .crm-rt-stop__name:hover { color: var(--crm-accent); }

/* Figeage par jour + édition d'un jour figé (v2) */
.crm-rt-day.is-frozen { border-color: var(--crm-ok-dot); box-shadow: inset 3px 0 0 var(--crm-ok-dot), var(--crm-shadow); }
.crm-rt-lock { font-size: 12px; }
.crm-rt-daybtn { margin-left: 8px; flex: none; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 9px; font: inherit; font-size: 12px; font-weight: 550; color: var(--crm-ink); padding: 5px 10px; cursor: pointer; }
.crm-rt-daybtn:hover { border-color: var(--crm-line-strong); }
.crm-rt-daybtn--freeze { background: var(--crm-accent-soft); color: var(--crm-accent); border-color: transparent; }
.crm-rt-daybtn--freeze.is-dirty { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.crm-rt-dirty { font-size: 11px; color: var(--crm-warn-ink); background: var(--crm-warn-bg); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.crm-rt-drag { flex: none; cursor: grab; color: var(--crm-ink-3); font-size: 14px; line-height: 1; user-select: none; padding: 0 2px; }
.crm-rt-stop.is-dragging { opacity: .45; }
.crm-rt-stop--over { box-shadow: inset 0 2px 0 var(--crm-accent); }
.crm-rt-stop__rm { flex: none; background: none; border: none; cursor: pointer; font-size: 12px; color: var(--crm-ink-3); padding: 3px 5px; border-radius: 6px; }
.crm-rt-stop__rm:hover { color: var(--crm-danger-ink, #c0574e); background: var(--crm-card-2); }
.crm-rt-add { display: flex; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--crm-line); }
.crm-rt-add__in { flex: 1; min-width: 0; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 9px; font: inherit; font-size: 13px; color: var(--crm-ink); padding: 7px 10px; }
.crm-rt-add__btn { flex: none; background: var(--crm-accent-soft); color: var(--crm-accent); border: none; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; cursor: pointer; }
.crm-rt-add__btn:hover { background: var(--crm-accent); color: var(--crm-accent-ink); }
.crm-rt-freeze__hint { flex: 1; font-size: 12.5px; color: var(--crm-ink-2); }
.crm-rt-past { display: flex; align-items: center; gap: 8px; background: var(--crm-warn-bg); color: var(--crm-warn-ink); border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 550; margin-bottom: 14px; }
.crm-rt-hist { display: flex; flex-direction: column; gap: 8px; }
.crm-rt-hist__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 13px; padding: 13px 16px; cursor: pointer; font: inherit; text-align: left; box-shadow: var(--crm-shadow); }
.crm-rt-hist__row:hover { border-color: var(--crm-accent); }
.crm-rt-hist__wk { font-size: 14px; font-weight: 600; color: var(--crm-ink); }
.crm-rt-hist__meta { font-size: 12.5px; color: var(--crm-ink-2); }

@media (max-width: 640px) {
  .crm-rt-map { height: 300px; }
  .crm-rt-kpis { gap: 8px; }
  .crm-rep-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .crm-rep-card__acts { justify-content: flex-start; }
  .crm-sheet--wide .crm-form-grid { grid-template-columns: 1fr; }
}

/* ═══════════ Suivi de classification (onglet + fiche) ═══════════ */
.crm-classif { display: flex; flex-direction: column; gap: 14px; padding: 0 clamp(18px, 2.5vw, 44px); box-sizing: border-box; }
.crm-classif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crm-classif-title { font-size: 1.15rem; font-weight: 800; color: var(--crm-ink); }
.crm-classif-sub { font-size: .85rem; color: var(--crm-ink-3); margin-top: -8px; }
.crm-classif-pers { display: inline-flex; gap: 6px; }
.crm-classif-per { border: 1px solid var(--crm-line); background: var(--crm-card); color: var(--crm-ink-2); border-radius: 999px; padding: 5px 11px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.crm-classif-per.on { background: var(--crm-accent-soft); color: var(--crm-accent); border-color: transparent; }
.crm-classif-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crm-classif-kpi { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 14px; padding: 12px 14px; text-align: center; }
.crm-classif-kpi__n { font-size: 1.35rem; font-weight: 800; color: var(--crm-ink); font-variant-numeric: tabular-nums; }
.crm-classif-kpi__l { font-size: .72rem; color: var(--crm-ink-3); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.crm-classif-kpi--up .crm-classif-kpi__n { color: var(--crm-ok-ink); }
.crm-classif-kpi--down .crm-classif-kpi__n { color: var(--crm-warn-ink); }
@media (max-width: 640px) { .crm-classif-kpis { grid-template-columns: repeat(2, 1fr); } }
.crm-classif-dist { display: flex; flex-direction: column; gap: 9px; }
.crm-classif-seg { display: flex; flex-direction: column; gap: 4px; }
.crm-classif-seg__head { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--crm-ink-2); }
.crm-classif-seg__head b { color: var(--crm-ink); }
.crm-classif-seg__pct { margin-left: auto; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
.crm-classif-seg__bar { height: 8px; border-radius: 5px; background: var(--crm-card-2); overflow: hidden; }
.crm-classif-seg__bar > i { display: block; height: 100%; border-radius: 5px; opacity: .9; }
.crm-classif-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: .78rem; color: var(--crm-ink-3); }
.crm-classif-legend span { display: inline-flex; align-items: center; gap: 5px; }
.crm-classif-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.crm-classif-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .crm-classif-cols { grid-template-columns: 1fr; } }

/* Admin › Paramètres — réglages des moteurs (lot 0 Sales Intelligence).
   Même grammaire que le Suivi : en-tête, cartes, puces ; chaque paramètre est
   une ligne description + champ, groupée par famille repliable. */
.crm-cfg { display: flex; flex-direction: column; gap: 14px; padding: 0 clamp(18px, 2.5vw, 44px) 40px; box-sizing: border-box; }
.crm-cfg-status { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-left: 4px solid var(--crm-ok-dot); }
.crm-cfg-status--legacy { border-left-color: var(--crm-warn-dot); }
.crm-cfg-status__main { font-size: .92rem; color: var(--crm-ink); line-height: 1.45; }
.crm-cfg-status__side { font-size: .8rem; color: var(--crm-ink-3); text-align: right; white-space: nowrap; }
.crm-cfg-errors { border-left: 4px solid var(--crm-crit-dot); color: var(--crm-crit-ink); font-size: .9rem; }
.crm-cfg-errors ul { margin: 6px 0 0; padding-left: 20px; }
.crm-cfg-fam { padding: 0; overflow: hidden; }
.crm-cfg-fam__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; cursor: pointer; list-style: none; }
.crm-cfg-fam__head::-webkit-details-marker { display: none; }
.crm-cfg-fam__head .crm-section__label { margin: 0; }
.crm-cfg-fam__count { font-size: .78rem; color: var(--crm-ink-3); }
.crm-cfg-fam__count b { color: var(--crm-accent); }
.crm-cfg-fam[open] .crm-cfg-fam__head { border-bottom: 1px solid var(--crm-line); }
.crm-cfg-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px 18px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--crm-line); }
.crm-cfg-row:first-of-type { border-top: none; }
.crm-cfg-row--changed { background: var(--crm-accent-soft); }
.crm-cfg-row--error { box-shadow: inset 4px 0 0 var(--crm-crit-dot); }
.crm-cfg-row__key { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--crm-ink); }
.crm-cfg-row__key code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 7px; padding: 1px 7px; }
.crm-cfg-row__unit { font-size: .72rem; font-weight: 600; color: var(--crm-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.crm-cfg-row__desc { font-size: .85rem; color: var(--crm-ink-2); margin-top: 4px; line-height: 1.4; }
.crm-cfg-row__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: var(--crm-ink-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.crm-cfg-row__meta b { color: var(--crm-ink); font-weight: 600; }
.crm-cfg-row__err { font-size: .8rem; color: var(--crm-crit-ink); margin-top: 5px; }
.crm-cfg-row__input input, .crm-cfg-row__input select, .crm-cfg-row__input textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--crm-line); border-radius: 11px; padding: 9px 11px; font-size: 14px; font-family: inherit; color: var(--crm-ink); background: var(--crm-card); transition: border-color .13s ease, box-shadow .13s ease; }
.crm-cfg-row__input textarea { resize: vertical; min-height: 42px; font-size: 13px; }
.crm-cfg-row__input input:focus, .crm-cfg-row__input select:focus, .crm-cfg-row__input textarea:focus { outline: none; border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-accent-soft); }
.crm-cfg-row__input :disabled { opacity: .7; cursor: not-allowed; background: var(--crm-card-2); }
.crm-cfg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: sticky; bottom: 0; z-index: 5; padding: 10px 0; background: linear-gradient(to top, var(--crm-ground) 70%, transparent); }
.crm-cfg-actions__spacer { flex: 1; }
.crm-cfg-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--crm-ink); background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 12px; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.crm-cfg-btn:hover:not(:disabled) { background: var(--crm-accent-soft); transform: translateY(-1px); box-shadow: var(--crm-shadow); }
.crm-cfg-btn:disabled { opacity: .5; cursor: default; }
.crm-cfg-btn--primary { background: var(--crm-accent); color: #fff; border-color: transparent; }
.crm-cfg-btn--primary:hover:not(:disabled) { background: var(--crm-accent); filter: brightness(1.06); }
.crm-cfg-sim { border-left: 4px solid var(--crm-accent); }
.crm-cfg-sim__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.crm-cfg-sim__reorder { margin-top: 10px; }
.crm-cfg-sim__reorder b { color: var(--crm-ink); }

/* ---- Signaux (Sales Intelligence v2.3) : pastilles, lignes, feuille d'action ---- */
.crm-sg-badge, .crm-sg-recence { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--crm-line); background: var(--crm-card-2); color: var(--crm-ink-2); white-space: nowrap; }
.crm-sg-badge--crit, .crm-sg-recence--crit { color: var(--crm-crit-ink); border-color: var(--crm-crit-ink); }
.crm-sg-badge--warn, .crm-sg-recence--warn { color: var(--crm-warn-ink); border-color: var(--crm-warn-ink); }
.crm-sg-badge--ok, .crm-sg-recence--ok { color: var(--crm-ok-ink); border-color: var(--crm-ok-ink); }
.crm-sg-badge--cold, .crm-sg-recence--cold { color: var(--crm-ink-3); }
.crm-sg-badge--info { color: var(--crm-accent); border-color: var(--crm-accent); }
.crm-sg-main { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--crm-accent); font-weight: 700; }
.crm-sg-row { padding: 10px 0; border-top: 1px solid var(--crm-line); }
.crm-sg-row:first-of-type { border-top: 0; }
.crm-sg-row--off { opacity: .6; }
.crm-sg-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-sg-row__why { margin: 6px 0 4px; font-size: .9rem; color: var(--crm-ink); line-height: 1.45; }
.crm-sg-row__action { font-size: .86rem; color: var(--crm-ink-2); line-height: 1.45; }
.crm-sg-row__action b { color: var(--crm-ink); margin-right: 4px; }
.crm-sg-row__btn { margin-top: 8px; }
.crm-sg-history { margin-top: 10px; font-size: .85rem; }
.crm-sg-history summary { cursor: pointer; color: var(--crm-ink-2); }
.crm-sg-act { padding: 6px 0; border-top: 1px solid var(--crm-line); color: var(--crm-ink-2); }
.crm-sg-conv { color: var(--crm-ok-ink); font-weight: 700; }
.crm-sg-sheet .crm-sheet__body { display: grid; gap: 12px; }
.crm-sg-sheet__signal p { margin: 6px 0 2px; color: var(--crm-ink); }
.crm-sg-sheet__signal b { font-size: .9rem; color: var(--crm-ink-2); }
.crm-sg-form { display: grid; gap: 10px; }
.crm-sg-form fieldset { border: 1px solid var(--crm-line); border-radius: 12px; padding: 8px 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.crm-sg-form legend { font-size: .78rem; color: var(--crm-ink-3); padding: 0 4px; }
.crm-sg-form__row { display: grid; gap: 4px; font-size: .85rem; color: var(--crm-ink-2); }
.crm-sg-form__row select, .crm-sg-form__row input, .crm-sg-form__row textarea { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--crm-line); background: var(--crm-card); color: var(--crm-ink); }
.crm-sg-form__err { color: var(--crm-crit-ink); font-size: .85rem; }
.crm-sg-form__actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Accueil : Focus du jour v2.3 et bandeaux */
.crm-ck-kpi--risk .crm-ck-kpi__n { color: var(--crm-crit-ink); }
.crm-ck-kpi--recovery .crm-ck-kpi__n { color: var(--crm-warn-ink); }
.crm-ck-kpi--late .crm-ck-kpi__n, .crm-ck-kpi--lapsed .crm-ck-kpi__n { color: var(--crm-ink-3); }
.crm-ck-kpi--signals .crm-ck-kpi__n { color: var(--crm-accent); }
.crm-ck-quality { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--crm-warn-ink); background: var(--crm-card); color: var(--crm-ink); font-size: .88rem; margin: 10px 0; }
.crm-ck-province { margin: 10px 0; }
.crm-ck-province .crm-sg-row { padding: 8px 0; }
.crm-ck-priority-why { white-space: normal; }
/* Admin › Imports, Produits, Qualité des données (lot 1) */
.crm-imp-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.crm-imp-form { display: grid; gap: 10px; }
.crm-imp-file { display: grid; gap: 6px; font-size: .88rem; color: var(--crm-ink-2); }
.crm-imp-file input { font: inherit; }
.crm-imp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
.crm-imp-kpis > div { background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 12px; padding: 10px 12px; }
.crm-imp-kpis b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--crm-ink); }
.crm-imp-kpis small { color: var(--crm-ink-3); font-size: .74rem; }
.crm-imp-list { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; color: var(--crm-ink-2); line-height: 1.55; }
.crm-imp-list--warn { color: var(--crm-warn-ink); }
.crm-imp-details { margin-top: 10px; font-size: .86rem; }
.crm-imp-details summary { cursor: pointer; color: var(--crm-ink-2); }
.crm-imp-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .82rem; }
.crm-imp-table th, .crm-imp-table td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--crm-line); vertical-align: top; }
.crm-imp-table th { color: var(--crm-ink-3); font-weight: 600; }
.crm-imp-st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid var(--crm-line); color: var(--crm-ink-2); }
.crm-imp-st--ACTIVE, .crm-imp-st--CERTIFIED { color: var(--crm-ok-ink); border-color: var(--crm-ok-ink); }
.crm-imp-st--LAUNCH_CAMPAIGN, .crm-imp-st--PROPOSED { color: var(--crm-accent); border-color: var(--crm-accent); }
.crm-imp-st--COMING_SOON { color: var(--crm-warn-ink); border-color: var(--crm-warn-ink); }
.crm-imp-st--DISCONTINUED, .crm-imp-st--INACTIVE, .crm-imp-st--UNMATCHED { color: var(--crm-ink-3); }
.crm-imp-journal { display: grid; gap: 6px; }
.crm-imp-jrow { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--crm-line); font-size: .86rem; }
.crm-imp-jrow:first-child { border-top: 0; }
.crm-imp-jrow span, .crm-imp-jrow small { color: var(--crm-ink-3); }
.crm-pm-search { margin-bottom: 12px; }
.crm-pm-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--crm-line); align-items: start; }
.crm-pm-row__name { font-weight: 700; color: var(--crm-ink); }
.crm-pm-row__name small { font-weight: 500; color: var(--crm-ink-3); }
.crm-pm-row__meta { font-size: .8rem; color: var(--crm-ink-3); margin-top: 2px; }
.crm-pm-row__edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.crm-pm-row__edit label { display: grid; gap: 3px; font-size: .76rem; color: var(--crm-ink-3); }
.crm-pm-row__edit select, .crm-pm-row__edit input[type="date"], .crm-pm-row__edit input[type="number"] { font: inherit; font-size: .84rem; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--crm-line); background: var(--crm-card); color: var(--crm-ink); }
.crm-pm-row__edit input[type="number"] { width: 70px; }
.crm-pm-check { align-self: center; }
@media (max-width: 760px) { .crm-pm-row { grid-template-columns: 1fr; } }
/* Ponts WeedCrawler (phase 2, lot 0) : compteur, propositions, codes-barres côte à côte. */
.crm-pt { margin-bottom: 14px; }
.crm-pt__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.crm-pt__count { margin-top: 6px; font-size: .92rem; color: var(--crm-ink); }
.crm-pt__count b { font-size: 1.15rem; }
.crm-pt__bar { margin-top: 6px; height: 6px; width: min(320px, 100%); border-radius: 99px; background: var(--crm-line); overflow: hidden; }
.crm-pt__bar span { display: block; height: 100%; background: var(--crm-ok-dot); border-radius: 99px; }
.crm-pt__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-pt__src { font-size: .8rem; color: var(--crm-ink-3); margin: 8px 0 4px; }
.crm-pt .crm-classif-sub { margin-top: 10px; }   /* la marge négative de l'intro de page passerait sous la barre */
.crm-pt-group { border-top: 1px solid var(--crm-line); padding: 8px 0 2px; }
.crm-pt-group > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; padding: 4px 0; }
.crm-pt-group > summary::-webkit-details-marker { display: none; }
.crm-pt-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--crm-line); align-items: center; }
.crm-pt-group > summary + .crm-pt-row, .crm-pt-choice__label + .crm-pt-row { border-top: 0; }
.crm-pt .crm-flag { white-space: nowrap; }
.crm-pt-row__act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.crm-pt-var { margin-top: 2px; }
.crm-pt-var__name { font-size: .86rem; color: var(--crm-ink); }
.crm-pt-var__name small, .crm-pt-var__meta { color: var(--crm-ink-3); }
.crm-pt-var__meta { font-size: .78rem; margin-top: 1px; }
.crm-pt-code { font-size: .78rem; padding: 1px 5px; border-radius: 6px; background: var(--crm-accent-soft); }
.crm-pt-code--ok { color: var(--crm-ok-ink); background: var(--crm-ok-bg); }
.crm-pt-code--diff { color: var(--crm-crit-ink); background: var(--crm-crit-bg); }
.crm-pt-choice { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--crm-line); }
.crm-pt-group > summary + .crm-pt-choice { border-top: 0; }
.crm-pt-choice__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-ink-3); margin-bottom: 4px; }
.crm-pt-choice__wc { border-left: 2px solid var(--crm-line); padding-left: 12px; }
@media (max-width: 760px) { .crm-pt-row, .crm-pt-choice { grid-template-columns: 1fr; } .crm-pt-row__act { justify-content: flex-start; } .crm-pt-choice__wc { border-left: 0; padding-left: 0; } }
.crm-fiche-know ul { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; color: var(--crm-ink); line-height: 1.55; }
.crm-as-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--crm-line); font-size: .88rem; align-items: center; }
.crm-as-row:first-of-type { border-top: 0; }
.crm-as-row b { color: var(--crm-ink); }
.crm-as-row small { color: var(--crm-ink-3); }
.crm-as-row__r { color: var(--crm-ink-2); font-size: .82rem; text-align: right; }
@media (max-width: 640px) { .crm-as-row { grid-template-columns: 1fr; } .crm-as-row__r { text-align: left; } }
.crm-dq-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.crm-dq-kpi { cursor: default; }
.crm-dq-kpi:hover { transform: none; }
.crm-dq-kpi .crm-ck-kpi__n { font-size: 1.25rem; display: flex; align-items: center; gap: 6px; }
.crm-dir-check { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--crm-ink-2); }
.crm-dir-check input { margin-right: 6px; }
.crm-row__sub .crm-sg-recence { margin-left: 6px; font-size: .68rem; padding: 1px 7px; }
.crm-cfg-sim__box { background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 14px; padding: 12px 14px; }
.crm-cfg-sim__n { font-size: 1.5rem; font-weight: 800; color: var(--crm-ink); font-variant-numeric: tabular-nums; }
.crm-cfg-sim__l { font-size: .75rem; color: var(--crm-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.crm-cfg-sim__flux { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crm-cfg-flux { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--crm-ink-2); background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 999px; padding: 3px 10px; }
.crm-cfg-flux i { font-style: normal; font-weight: 700; color: var(--crm-ink); }
.crm-cfg-sim__changes { margin-top: 12px; }
.crm-cfg-sim__changes ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--crm-ink-2); line-height: 1.6; }
.crm-cfg-sim__changes b { color: var(--crm-ink); }
.crm-cfg-sim__signals { margin-top: 10px; }
.crm-cfg-publish { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.crm-cfg-publish input { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; border: 1px solid var(--crm-line); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 13.5px; color: var(--crm-ink); background: var(--crm-card); }
.crm-cfg-publish input:focus { outline: none; border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-accent-soft); }
.crm-cfg-versions { display: flex; flex-direction: column; gap: 4px; }
.crm-cfg-ver { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: .85rem; color: var(--crm-ink-2); }
.crm-cfg-ver.on { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-cfg-ver__n { font-weight: 800; color: var(--crm-ink); min-width: 34px; font-variant-numeric: tabular-nums; }
.crm-cfg-ver__meta { flex: 1; min-width: 0; }
.crm-cfg-ver__cur { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.crm-cfg-ver .crm-cfg-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.crm-toast--err { background: var(--crm-crit-ink); }
@media (max-width: 720px) {
  .crm-cfg-row { grid-template-columns: 1fr; }
  .crm-cfg-sim__grid { grid-template-columns: 1fr; }
  .crm-cfg-status { flex-direction: column; }
  .crm-cfg-status__side { text-align: left; white-space: normal; }
  .crm-cfg-publish { flex-direction: column; align-items: stretch; }
}
.crm-hint { font-weight: 500; color: var(--crm-ink-3); font-size: .8em; }
/* Lignes de mouvement */
.crm-mv-list { display: flex; flex-direction: column; gap: 2px; }
.crm-mv { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--crm-ink); }
.crm-mv:hover { background: var(--crm-card-2); }
.crm-mv__segs { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.crm-mv__arr { font-weight: 800; }
.crm-mv__arr--up { color: var(--crm-ok-ink); }
.crm-mv__arr--down { color: var(--crm-warn-ink); }
.crm-mv__arr--set { color: var(--crm-ink-3); }
.crm-mv__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.crm-mv__date { flex: 0 0 auto; font-size: .76rem; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
/* Timeline fiche */
.crm-timeline { display: flex; flex-direction: column; gap: 2px; }
.crm-tl-row { display: flex; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--crm-line); }
.crm-tl-row:last-child { border-bottom: none; }
.crm-tl-ic { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; }
.crm-tl-main { min-width: 0; }
.crm-tl-t { font-size: .9rem; color: var(--crm-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-tl-meta { font-size: .76rem; color: var(--crm-ink-3); margin-top: 2px; }
/* Légende carte = filtre par classe (boutons cliquables) */
.crm-ck-legbtn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 9px; cursor: pointer; color: var(--crm-ink-2); font-size: .8rem; font-weight: 600; }
.crm-ck-legbtn i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.crm-ck-legbtn:hover { background: var(--crm-card-2); }
.crm-ck-legbtn.off { opacity: .38; }
.crm-ck-legbtn.off i { filter: grayscale(1); }

/* --- Agriculture --------------------------------------------------------- */
#agriculture-view { color: var(--crm-ink); }
#agriculture-view > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.crm-cockpit { display: flex; flex-direction: column; gap: 12px; animation: crm-in .3s ease both; }
/* Ligne simple champ/section (≠ .crm-row, la grille 8 colonnes de la table clients CRM) */
.agri-row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-top: 1px solid var(--crm-line); font: inherit; color: var(--crm-ink); text-align: left; padding: 12px 4px; cursor: pointer; border-radius: 0; }
.agri-row:first-child { border-top: none; }
.agri-row:hover { background: var(--crm-card-2); }
.agri-row b { font-size: 14.5px; font-weight: 620; white-space: nowrap; }
.agri-row span { font-size: 12.5px; color: var(--crm-ink-2); margin-left: auto; text-align: right; }
/* ── Agriculture : tâches terrain ── */
.agri-task { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--crm-line); }
.agri-task:first-of-type { border-top: none; }
.agri-task__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agri-task__main b { font-size: 14.5px; font-weight: 620; }
.agri-task__detail { font-size: 12.5px; color: var(--crm-ink-2); }
.agri-task__meta { font-size: 11.5px; color: var(--crm-ink-2); opacity: 0.8; }
.agri-task__done { margin-left: auto; flex-shrink: 0; font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--crm-line); background: var(--crm-card-2); color: var(--crm-ink); cursor: pointer; }
.agri-task__add { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--crm-line); background: none; color: var(--crm-ink); cursor: pointer; float: right; }
.agri-act__task { font-size: 12.5px; color: var(--crm-ink-2); margin: 2px 0; }
/* Timeline de la fiche section : elle réutilise .crm-act, mais son en-tête
   porte DEUX dates — « 27 août, 10:19 (ajoutée le 27 août, 14:22) » — là où le
   CRM n'en affiche qu'une. Soit ~280px que .crm-act__when refuse de replier
   (white-space: nowrap). Le type ne pouvait donc pas tenir sur la même ligne :
   l'en-tête passe à la ligne au lieu d'élargir la carte. */
.crm-act--agri .crm-act__top { flex-wrap: wrap; row-gap: 2px; }
.crm-act--agri .crm-act__ic { font-size: 17px; }
@media (max-width: 640px) {
  /* Sous 640px, la double date dépasse même seule sur sa ligne (~255px de
     large utile sur un 360px) : on la laisse se replier plutôt que de laisser
     le document déborder — c'est ce débordement qui obligeait D. Lefebvre à
     dézoomer à 79% pour lire la fiche. Ticket iwwngJfoO2p3SCLwqIe5. */
  .crm-act--agri .crm-act__top { justify-content: flex-start; gap: 8px; }
  .crm-act--agri .crm-act__when { white-space: normal; }
}
.agri-log__row { display: flex; align-items: baseline; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--crm-line); font-size: 13px; flex-wrap: wrap; }
.agri-log__row:first-of-type { border-top: none; }
.agri-log__when { color: var(--crm-ink-2); font-size: 12px; white-space: nowrap; }
.agri-log__what { min-width: 0; }
.agri-log__by { margin-left: auto; color: var(--crm-ink-2); font-size: 12px; }
.agri-log__more { display: block; margin: 10px auto 0; font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--crm-line); background: var(--crm-card-2); color: var(--crm-ink); cursor: pointer; }
.agri-row--task b { color: var(--crm-ink); }
/* Modal « Nouvelle activité » — vignette photo avec bouton de suppression (crm-sheet__thumb seul n'a pas ce besoin côté CRM). */
.agri-thumb { position: relative; display: inline-block; line-height: 0; }
.agri-thumb__rm { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--crm-crit-ink, #8a3b34); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* ── Agriculture V1.1 : onglets cockpit/fiche ── */
.agri-tabs { margin: 10px 0; }
.agri-tabs .crm-ck-chip.on { background: var(--crm-ink); color: var(--crm-card, #fff); border-color: var(--crm-ink); }
.agri-map { height: min(70vh, 520px); border-radius: 12px; overflow: hidden; }
.agri-sec-label { background: rgba(255,255,255,.85); border: none; box-shadow: none; font-size: 11px; font-weight: 650; color: #2b2b2b; padding: 1px 4px; border-radius: 4px; }
.agri-fiche-chips { margin: 10px 0 4px; }
.agri-apercu div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--crm-line); }
.agri-apercu div:first-child { border-top: none; }
.agri-apercu b { font-size: 13px; font-weight: 620; }
.agri-apercu span { font-size: 13px; color: var(--crm-ink-2); text-align: right; }
/* ═══════════════════════════════════════════════════════════════════
   Agriculture V1.5 — accueil du module
   Bandeau météo, KPIs, champs dépliables et colonne « aujourd'hui ».
   Couleurs prises au thème CRM (--crm-*) : l'écran suit clair/sombre
   sans règle dédiée. Seule la courbe de température a sa propre teinte,
   validée via le skill dataviz (contraste + CVD, light et dark).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bandeau : salutation à gauche, météo à droite ── */
.agri-hero { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.6fr); gap: 18px; align-items: center; }
.agri-hero__hello { display: flex; align-items: center; gap: 13px; min-width: 0; }
.agri-hero__leaf { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.agri-hero__leaf svg { width: 22px; height: 22px; }
.agri-hero__hello h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.agri-hero__hello p { margin: 2px 0 0; font-size: 13px; color: var(--crm-ink-2); }
.agri-hero__wx { display: flex; flex-direction: column; gap: 7px; min-width: 0; border-left: 1px solid var(--crm-line); padding-left: 18px; }
.agri-wx-now { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.agri-wx-ic { font-size: 21px; line-height: 1; }
.agri-wx-now b { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.agri-wx-desc { font-size: 13px; color: var(--crm-ink-2); }
.agri-wx-strip { --agri-temp: #d2691e; }
body[data-gtheme="dark"] .agri-wx-strip { --agri-temp: #e8894a; }
.agri-wx-hs { display: grid; grid-template-columns: repeat(var(--agri-wx-n, 6), 1fr); }
.agri-wx-h { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.agri-wx-h span { font-size: 11px; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
.agri-wx-h b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agri-wx-curve { display: block; width: 100%; height: 26px; margin-top: 2px; }
.agri-wx-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--crm-ink-2); }
.agri-wx-range { font-weight: 600; color: var(--crm-ink); font-variant-numeric: tabular-nums; }
.agri-wx-bit { display: inline-flex; align-items: center; gap: 5px; }
.agri-wx-bit svg { width: 15px; height: 15px; opacity: .75; }

/* ── KPIs : pastille d'icône + chiffre + sous-ligne factuelle ── */
.agri-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.agri-kpi { display: flex; align-items: flex-start; gap: 11px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 16px; padding: 14px 15px; box-shadow: var(--crm-shadow); animation: crm-in .34s ease both; }
.agri-kpi:nth-child(2) { animation-delay: .03s; } .agri-kpi:nth-child(3) { animation-delay: .06s; }
.agri-kpi:nth-child(4) { animation-delay: .09s; } .agri-kpi:nth-child(5) { animation-delay: .12s; }
.agri-kpi__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; }
.agri-kpi__ic svg { width: 18px; height: 18px; }
.agri-kpi__ic--ok { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.agri-kpi__ic--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.agri-kpi__body { min-width: 0; }
.agri-kpi__n { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.agri-kpi__l { font-size: 12px; color: var(--crm-ink-2); margin-top: 2px; }
.agri-kpi__sub { display: block; font-size: 11.5px; font-weight: 600; margin-top: 4px; }
.agri-kpi__sub--warn { color: var(--crm-warn-ink); }
.agri-kpi__sub--ok { color: var(--crm-ok-ink); }

/* ── En-tête de l'onglet Sections ── */
.agri-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.agri-sec-head h3 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.agri-sec-head p { margin: 3px 0 0; font-size: 13px; color: var(--crm-ink-2); }
.agri-sec-head .crm-search { flex: 0 1 340px; }
.agri-results { margin-bottom: 12px; }

/* ── Deux colonnes : les champs / ce qu'il faut faire ── */
.agri-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.agri-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.agri-card-h { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; }

/* ── Champ dépliable ── */
.agri-field { border-top: 1px solid var(--crm-line); }
.agri-field:first-of-type { border-top: none; }
.agri-field__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 2px; cursor: pointer; list-style: none; }
.agri-field__head::-webkit-details-marker { display: none; }
.agri-field__head:hover { background: var(--crm-card-2); }
.agri-field__head:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: -2px; border-radius: 8px; }
.agri-field__chev { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--crm-ink-3); transition: transform .18s ease; }
.agri-field__chev svg { width: 16px; height: 16px; }
.agri-field[open] .agri-field__chev { transform: rotate(90deg); }
.agri-field__head b { font-size: 15px; font-weight: 650; }
.agri-field__sub { font-size: 12.5px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.agri-field__pills { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.agri-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--crm-ink-2); white-space: nowrap; }
.agri-pill > i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.agri-pill--ok > i { background: var(--crm-ok-dot); }
.agri-pill--warn > i { background: var(--crm-warn-dot); }
.agri-pill--crit > i { background: var(--crm-crit-dot); }

/* ── Tableau des sections ── */
.agri-tb-wrap { overflow-x: auto; padding-bottom: 2px; }
.agri-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.agri-tb th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--crm-ink-3); text-transform: none; padding: 7px 10px; border-bottom: 1px solid var(--crm-line); white-space: nowrap; }
.agri-tb td { padding: 10px; border-bottom: 1px solid var(--crm-line); white-space: nowrap; }
.agri-tb tbody tr:last-child td { border-bottom: none; }
.agri-tb tbody tr { cursor: pointer; }
.agri-tb tbody tr:hover { background: var(--crm-card-2); }
.agri-tb tbody tr:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: -2px; }
.agri-tb__b { font-weight: 620; }
.agri-tb__n { text-align: right; font-variant-numeric: tabular-nums; }
.agri-tb__d { color: var(--crm-ink-2); }
.agri-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.agri-state > i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--crm-ink-3); }
.agri-state--ok > i { background: var(--crm-ok-dot); }
.agri-state--warn > i { background: var(--crm-warn-dot); }
.agri-state--crit > i { background: var(--crm-crit-dot); }
.agri-state--muted { color: var(--crm-ink-3); }

/* ── Colonne de droite : priorités et alertes ── */
.agri-side__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.agri-side__head h3 { margin: 0; font-size: 15.5px; font-weight: 650; }
.agri-side__count { font-size: 12px; color: var(--crm-ink-2); white-space: nowrap; }
.agri-prog__bar { height: 6px; border-radius: 6px; background: var(--crm-line); overflow: hidden; margin-bottom: 12px; }
.agri-prog__bar > i { display: block; height: 100%; border-radius: 6px; background: var(--crm-ok-dot); transition: width .3s ease; }
.agri-prio { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--crm-line); }
.agri-prio:first-of-type { border-top: none; }
.agri-prio__main { min-width: 0; flex: 1; }
.agri-prio__t { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.agri-prio__t b { font-size: 14px; font-weight: 620; }
.agri-badge { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--crm-info-bg); color: var(--crm-info-ink); }
.agri-prio__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--crm-ink-2); margin-top: 3px; }
.agri-prio__where { display: inline-flex; align-items: center; gap: 4px; }
.agri-prio__where svg { width: 13px; height: 13px; opacity: .7; }
.agri-prio__go { flex: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 10px; border: none; background: var(--crm-ok-ink); color: #fff; cursor: pointer; transition: filter .15s ease; }
.agri-prio__go:hover { filter: brightness(1.12); }
.agri-prio__x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: var(--crm-ink-3); cursor: pointer; }
.agri-prio__x:hover { background: var(--crm-card-2); color: var(--crm-ink); }
.agri-prio__x svg { width: 16px; height: 16px; }
.agri-more { display: flex; align-items: center; gap: 5px; margin-top: 12px; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 2px; border: none; background: none; color: var(--crm-ok-ink); cursor: pointer; }
.agri-more svg { width: 15px; height: 15px; }
.agri-alert { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--crm-line); cursor: pointer; }
.agri-alert:first-of-type { border-top: none; }
.agri-alert--flat { cursor: default; }
.agri-alert:not(.agri-alert--flat):hover { background: var(--crm-card-2); }
.agri-alert__ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; }
.agri-alert__ic svg { width: 15px; height: 15px; }
.agri-alert__ic--info { background: var(--crm-info-bg); color: var(--crm-info-ink); }
.agri-alert__ic--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.agri-alert__ic--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
.agri-alert__main { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.agri-alert__main b { font-size: 13.5px; font-weight: 620; }
.agri-alert__where { font-size: 12px; color: var(--crm-ink-2); }
.agri-alert__when { font-size: 11.5px; color: var(--crm-ink-3); white-space: nowrap; }

/* ── Adaptations écran étroit ──
   Sous 1080 px la colonne de droite passe SOUS les champs plutôt que de
   comprimer le tableau ; sous 720 px on masque les colonnes secondaires
   (le tableau reste défilable, mais l'essentiel tient sans geste). */
@media (max-width: 1080px) {
  .agri-cols { grid-template-columns: 1fr; }
  .agri-hero { grid-template-columns: 1fr; }
  .agri-hero__wx { border-left: none; padding-left: 0; border-top: 1px solid var(--crm-line); padding-top: 14px; }
}
@media (max-width: 900px) {
  .agri-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .agri-tb th:nth-child(2), .agri-tb td:nth-child(2),
  .agri-tb th:nth-child(4), .agri-tb td:nth-child(4) { display: none; }
  .agri-field__pills { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .agri-kpis { grid-template-columns: repeat(2, 1fr); }
  .agri-sec-head .crm-search { flex: 1 1 100%; }
  .agri-prio { flex-wrap: wrap; }
  .agri-prio__go { margin-left: auto; }
}

/* ── Agriculture V1.4 : flux « Activités » (journal + panneau de détail) ──
   L'onglet Activités est le seul écran à deux colonnes du module : le cockpit
   reçoit .agri-wide pour desserrer le gabarit 980 px commun (règle ci-dessus). */
#agriculture-view > .crm-cockpit.agri-wide { max-width: 1340px; }
.agri-feed { display: flex; flex-direction: column; }
.agri-check { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px solid var(--crm-line); border-radius: 13px; background: var(--crm-card); font-size: 13px; color: var(--crm-ink); cursor: pointer; white-space: nowrap; }
.agri-check input { accent-color: var(--crm-accent); width: 15px; height: 15px; cursor: pointer; }
/* Sans sélection, le journal prend toute la largeur : pas de colonne vide. */
.agri-feed__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.agri-feed__split.on { grid-template-columns: minmax(0, 1fr) 350px; }
.agri-feed__list { min-width: 0; }

/* Journal : un jour = un intertitre collant, puis les observations. */
.agri-obs__day { position: sticky; top: 0; z-index: 2; background: var(--crm-card); font-size: 11.5px; font-weight: 650; letter-spacing: .04em; color: var(--crm-ink-2); padding: 8px 2px 8px 12px; margin: 0 -2px; }
.agri-obs { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px; padding: 14px 4px 15px 12px; border-top: 1px solid var(--crm-line); cursor: pointer; transition: background .12s ease; }
.agri-obs:hover { background: var(--crm-card-2); }
.agri-obs:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: -2px; border-radius: 10px; }
.agri-obs.on { background: var(--crm-card-2); }
.agri-obs.on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--crm-accent); }
.agri-obs__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.agri-obs__time { font-size: 12.5px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.agri-obs__badge { font-size: 11px; font-weight: 620; color: var(--crm-warn-ink); background: var(--crm-warn-bg); border-radius: 7px; padding: 2px 7px; white-space: nowrap; }
.agri-obs__place { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--crm-ink-2); cursor: pointer; text-align: left; }
.agri-obs__place:hover { color: var(--crm-ink); text-decoration: underline; }
.agri-obs__who { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--crm-ink-2); min-width: 0; }
.agri-obs__av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--crm-accent-soft); color: var(--crm-accent); font-size: 10px; font-weight: 700; }
.agri-obs__main { min-width: 0; }
.agri-obs__plant { margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.agri-obs__lead { margin: 0 0 6px; font-size: 14px; font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }
.agri-obs__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--crm-ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.agri-obs__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.agri-tag { font-size: 11.5px; font-weight: 550; color: var(--crm-ok-ink); background: var(--crm-ok-bg); border-radius: 7px; padding: 3px 9px; }
.agri-tag--more { color: var(--crm-ink-2); background: var(--crm-card-2); border: 1px solid var(--crm-line); }
.agri-obs__media { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.agri-obs__thumb { width: 122px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--crm-line); }

/* Lecteur vocal : barres décoratives, progression et durée réelles. */
.agri-audio { display: flex; align-items: center; gap: 9px; box-sizing: border-box; width: 200px; padding: 6px 11px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 12px; }
.agri-audio audio { display: none; }
.agri-audio__play { width: 26px; height: 26px; flex: none; border: none; border-radius: 50%; background: var(--crm-ink); color: var(--crm-card); font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.agri-audio__play:hover { filter: brightness(1.2); }
.agri-audio__wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 22px; cursor: pointer; }
.agri-audio__wave i { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: var(--crm-ink-3); opacity: .5; transition: background .1s linear, opacity .1s linear; }
.agri-audio__wave i.on { background: var(--crm-accent); opacity: 1; }
.agri-audio__t { font-size: 11.5px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.agri-audio--lg { width: 100%; margin: 12px 0 4px; }

/* Panneau de détail (colonne de droite en desktop, feuille en mobile). */
.agri-feed__detail { position: sticky; top: 10px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 18px; box-shadow: var(--crm-shadow); overflow: hidden; max-height: calc(100dvh - 30px); display: flex; flex-direction: column; animation: crm-in .2s ease both; }
.agri-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--crm-line); }
.agri-detail__head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.agri-detail__body { padding: 14px 16px 18px; overflow-y: auto; }
.agri-detail__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.agri-detail__photo { width: 100%; max-height: 190px; object-fit: cover; border-radius: 12px; border: 1px solid var(--crm-line); }
.agri-detail__line { display: flex; align-items: baseline; gap: 9px; font-size: 13px; color: var(--crm-ink-2); padding: 4px 0; }
.agri-detail__line span { color: var(--crm-ink); min-width: 0; overflow-wrap: anywhere; }
.agri-detail__sec { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--crm-ink-3); margin: 14px 0 6px; }
.agri-detail__tr { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--crm-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.agri-detail__acts { display: flex; gap: 8px; margin-top: 16px; }
.agri-detail__acts .crm-sheet__save { flex: 2; }
.agri-detail__acts .crm-sheet__btn { flex: 1; }
.agri-pick { max-height: 52dvh; overflow-y: auto; }

@media (max-width: 980px) {
  #agriculture-view > .crm-cockpit.agri-wide { max-width: 980px; }
  .agri-feed__split, .agri-feed__split.on { grid-template-columns: minmax(0, 1fr); }
  .agri-feed__detail { position: fixed; inset: auto 0 0 0; top: auto; z-index: 900; max-height: 88dvh; border-radius: 20px 20px 0 0; border-bottom: none; box-shadow: 0 -8px 40px rgba(0, 0, 0, .18); }
  .agri-detail__body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  /* Sans base explicite, les deux <select> se réduisent à leur contenu tronqué. */
  .agri-feed .crm-filter { flex: 1 1 42%; min-width: 0; }
  .agri-feed .agri-check { flex: 1 1 100%; }
  .agri-obs { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .agri-obs__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .agri-obs__media { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .agri-obs__thumb { width: 92px; height: 70px; }
  .agri-audio { width: 100%; }
}

/* Fournisseurs (lot 1 : consultation du référentiel FormAchat) */
.crm-sup-notes { margin-top: 6px; font-size: 12.5px; color: var(--crm-ink-3); white-space: pre-wrap; }
/* Provenance des données : le dire évite de croire que l'information manque
   alors qu'elle se saisit simplement ailleurs. */
.crm-sup-src { margin-top: 16px; font-size: 12px; color: var(--crm-ink-3); font-style: italic; line-height: 1.5; }

/* Fournisseurs — lot 2 : profil d'enrichissement */
.crm-sup-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.crm-sup-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 550; padding: 3px 8px; border-radius: 999px;
    background: var(--crm-accent-soft, rgba(168,134,63,.1)); color: var(--crm-ink-2, #6b6455);
    white-space: nowrap;
}
.crm-sup-card--off { opacity: .55; }
/* Case à cocher « Fournisseur actif ».
   Deux règles GLOBALES du hub s'appliquaient ici et cassaient la rangée :
   `input { width:100% }` étirait la case sur toute la largeur en repoussant le
   texte à droite (même piège que le <select> à 872 px des grandeurs
   d'uniforme), et `label { text-transform:uppercase; font-weight:700 }` mettait
   l'intitulé en capitales comme un titre de champ — alors que c'est une phrase
   qu'on lit, pas une étiquette. On les neutralise explicitement. */
.crm-sup-check { display: flex; align-items: center; gap: 9px; font-size: 14px;
    margin: 4px 0 16px; cursor: pointer;
    text-transform: none; font-weight: 500; color: var(--crm-ink, #4a4438); letter-spacing: 0; }
.crm-sup-check input[type="checkbox"] {
    width: 17px; height: 17px; min-width: 17px; margin: 0; padding: 0;
    flex: 0 0 auto; accent-color: var(--crm-accent, #A8863F); cursor: pointer;
}
.crm-field__hint { font-size: 11.5px; color: var(--crm-ink-3, #9a927f); margin-top: 4px; line-height: 1.4; }
/* Profil dont le fournisseur a disparu côté FormAchat (suppression définitive,
   sans journal) : c'est le seul indice qu'une fiche a été détruite. */
.crm-sup-orph {
    margin-top: 14px; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
    background: var(--crm-warning-soft, rgba(200,140,0,.09)); color: var(--crm-warning, #a86b00);
}

/* Fiche fournisseur — contacts, fermetures, hausses de prix */
.crm-sup-open { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.crm-sup-open:hover { text-decoration: underline; }
.crm-sup-contact { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--crm-line, #ece4d6); }
.crm-sup-contact:last-of-type { border-bottom: 0; }
.crm-sup-contact__n { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.crm-sup-contact__c { font-size: 12.5px; color: var(--crm-ink-2, #6b6455); margin-top: 2px; }
.crm-sup-vac { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--crm-line, #ece4d6); }
.crm-sup-vac:last-of-type { border-bottom: 0; }
.crm-sup-tag--warn { background: var(--crm-warning-soft, rgba(200,140,0,.14)); color: var(--crm-warning, #a86b00); }
/* La « séquence » : la lecture qui transforme un journal en information. */
.crm-sup-seq { margin: 8px 0 12px; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-sup-seq--thin { background: none; padding: 4px 0; color: var(--crm-ink-3, #9a927f); font-style: italic; }
.crm-sup-price { display: grid; grid-template-columns: minmax(90px, auto) minmax(64px, auto) 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--crm-line, #ece4d6); font-size: 13.5px; }
.crm-sup-price:last-of-type { border-bottom: 0; }
.crm-sup-price__d { color: var(--crm-ink-2, #6b6455); font-variant-numeric: tabular-nums; }
.crm-sup-price__p { font-weight: 650; font-variant-numeric: tabular-nums; }
.crm-sup-price__nopct { font-weight: 400; font-style: italic; color: var(--crm-ink-3, #9a927f); }
.crm-sup-price__m { color: var(--crm-ink-2, #6b6455); min-width: 0; }
@media (max-width: 560px) { .crm-sup-price { grid-template-columns: 1fr auto; } .crm-sup-price__m { grid-column: 1 / -1; } }

/* =====================================================================
   Ambassadeurs MDH — espacement et champs du module
   Une SEULE échelle verticale (--amb-gap), pour que le rythme entre
   cartes ne dépende plus d'un style inline posé au jugé. Rappel :
   .crm-card porte déjà margin-bottom:12px — n'ajouter une marge ici
   que pour SÉPARER des blocs, jamais pour recréer celle de la carte.
   Tout est scopé #ambassadeurs-view ; hérite des tokens --crm-* (clair
   ET sombre, cf. les deux sélecteurs en tête de fichier).
   ===================================================================== */
#ambassadeurs-view {
  --amb-gap: 14px;          /* respiration entre sections d'une même vue */
  --amb-gap-s: 8px;         /* entre éléments d'un même groupe */
  --amb-field-h: 42px;      /* hauteur commune des contrôles */
  --amb-radius: 11px;
}

/* --- Rythme vertical -------------------------------------------------- */
.amb-sec { margin-top: var(--amb-gap); }
.amb-sec:first-child { margin-top: 0; }
.amb-gap-s { margin-top: var(--amb-gap-s); }
/* Titre de section : h3 sans marge propre, l'espacement vient du parent. */
.amb-h { margin: 0 0 var(--amb-gap-s); font-size: 18px; font-weight: 650; color: var(--crm-ink); }
.amb-h--row { display: flex; align-items: center; gap: var(--amb-gap-s); }
.amb-h--row .amb-h { margin-bottom: 0; flex: 1; min-width: 0; }

/* --- Micro-utilitaires (remplacent les inline répétés) ---------------- */
.amb-right { margin-left: auto; white-space: nowrap; }   /* méta en bout de ligne */
.amb-fix { flex: 0 0 auto; }
.amb-click { cursor: pointer; }
.amb-quote { font-style: italic; color: var(--crm-ink-2); }
/* Message court DANS un formulaire. .crm-error / .crm-empty sont des états
   PLEINE PAGE (padding 40px, texte centré) : sans ce correctif, une erreur
   de saisie s'affiche centrée au milieu d'un grand vide sous le champ. */
.amb-msg { padding: var(--amb-gap-s) 0; text-align: left; }
.amb-crit { color: var(--crm-crit-ink); }                /* couleur seule, sans l'état pleine page */
.amb-card--warn { border-color: var(--crm-warn-dot); }
.amb-card--accent { border-color: var(--crm-accent); }

/* --- Contrôles de formulaire ----------------------------------------- */
/* Un seul jeu de règles : avant, chaque select/textarea portait sa copie
   de border/radius/padding en inline, avec des valeurs qui divergeaient. */
.amb-input, .amb-select, .amb-ta {
  font: inherit; color: var(--crm-ink); background: var(--crm-card);
  border: 1px solid var(--crm-line); border-radius: var(--amb-radius);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.amb-input, .amb-select { height: var(--amb-field-h); padding: 0 10px; }
.amb-ta { padding: 10px; line-height: 1.45; resize: vertical; min-height: 76px; }
.amb-input:focus, .amb-select:focus, .amb-ta:focus {
  outline: none; border-color: var(--crm-accent);
  box-shadow: 0 0 0 3px var(--crm-accent-soft);
}
.amb-file { font: inherit; font-size: 13px; color: var(--crm-ink-2); }
.amb-grow { flex: 1; min-width: 180px; }

/* .crm-fld habille `input` mais PAS `select` ni `textarea` : sans ces deux
   règles, un select apparaît à la taille native du navigateur à côté d'un
   input de 42 px. C'est ce qui rendait les formulaires bancals. */
#ambassadeurs-view .crm-fld select {
  height: var(--amb-field-h); border: 1px solid var(--crm-line);
  border-radius: var(--amb-radius); padding: 0 10px; font: inherit; font-size: 14px;
  color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box;
  transition: border-color .13s ease;
}
#ambassadeurs-view .crm-fld textarea {
  border: 1px solid var(--crm-line); border-radius: var(--amb-radius);
  padding: 10px; font: inherit; font-size: 14px; line-height: 1.45;
  color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box;
  resize: vertical; transition: border-color .13s ease;
}
#ambassadeurs-view .crm-fld select:focus,
#ambassadeurs-view .crm-fld textarea:focus { outline: none; border-color: var(--crm-accent); }
/* .crm-form-grid porte `gap: 0 12px` : aucun espace VERTICAL entre les
   rangées, les champs se touchent. On rétablit le rythme dans le module. */
#ambassadeurs-view .crm-form-grid { gap: var(--amb-gap-s) 12px; }

/* --- Grilles de KPI (le module en a 3 ou 4, pas les 5 du CRM) --------- */
.amb-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.amb-kpis--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Écran de validation : captures | champs -------------------------- */
.amb-split { display: flex; gap: var(--amb-gap); flex-wrap: wrap; align-items: flex-start; }
.amb-split__shots { flex: 1 1 260px; min-width: 220px; }
.amb-split__form { flex: 2 1 380px; min-width: 300px; }
.amb-shot {
  width: 100%; display: block; border: 1px solid var(--crm-line);
  border-radius: 12px; margin-bottom: 10px; background: var(--crm-card-2);
}

/* --- Choix d'un candidat / d'un thème --------------------------------- */
.amb-pick { display: flex; align-items: center; gap: var(--amb-gap-s); cursor: pointer; padding: 7px 0; }
.amb-pick + .amb-pick { border-top: 1px solid var(--crm-line); }
.amb-pick input { flex: 0 0 auto; accent-color: var(--crm-accent); }
.amb-check {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 10px 6px 0; font-size: 13px; color: var(--crm-ink-2); cursor: pointer;
}
.amb-check input { accent-color: var(--crm-accent); }

/* --- Barre empilée des sentiments ------------------------------------- */
.amb-bar { display: flex; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; background: var(--crm-card-2); }

/* --- Squelettes de chargement ----------------------------------------- */
.amb-skel--list { height: 200px; }
.amb-skel--fiche { height: 220px; }
.amb-skel--kpi { height: 120px; }

/* --- Salve dépliée ---------------------------------------------------- */
.amb-sub { margin: 6px 0 var(--amb-gap) 26px; }

/* ── Graphiques du cockpit (HTML/CSS pur, aucune lib) ────────────────────
   Le principe : des empilements de <span> dimensionnés en %, séparés par un
   interstice de 2px COULEUR DE SURFACE (le gap du conteneur) — jamais un
   contour dessiné autour des segments. Les couleurs viennent des variables
   --amb-s-* : elles changent avec le thème sans une ligne de JS. */
.amb-hbar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; }
.amb-hbar .amb-seg { display: block; min-width: 3px; }

.amb-filtres { display: flex; gap: var(--amb-gap-s); flex-wrap: wrap; align-items: center; }
.amb-filtres .amb-filtre { max-width: 220px; flex: 1 1 140px; font-size: 13px; }

.amb-cols { display: flex; gap: 6px; align-items: flex-end; height: 150px; padding-top: 4px; }
.amb-col { flex: 1 1 0; min-width: 0; max-width: 40px; display: flex; flex-direction: column;
  align-items: stretch; height: 100%; }
.amb-col__n { font-size: 11px; color: var(--crm-ink-3); text-align: center; height: 16px;
  font-variant-numeric: tabular-nums; }
.amb-col__stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px; border-bottom: 1px solid var(--crm-line-strong); }
.amb-col__stack .amb-seg { display: block; border-radius: 3px 3px 0 0; min-height: 3px; }
.amb-col__l { font-size: 11px; color: var(--crm-ink-3); text-align: center; padding-top: 3px;
  font-variant-numeric: tabular-nums; }

.amb-prod { margin-top: var(--amb-gap-s); }
.amb-prod:first-child { margin-top: 0; }
.amb-prod__t { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.amb-prod__n { font-size: 14px; font-weight: 600; color: var(--crm-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amb-prod__b { min-width: 40px; margin-top: 3px; }

.amb-metre { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.amb-metre__l { flex: 0 0 88px; font-size: 13px; color: var(--crm-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amb-metre__t { flex: 1; height: 10px; border-radius: 5px; background: var(--crm-card-2); overflow: hidden; }
.amb-metre__b { display: block; height: 100%; border-radius: 5px; background: var(--crm-accent); }
.amb-metre__n { flex: 0 0 auto; font-size: 13px; color: var(--crm-ink-2);
  font-variant-numeric: tabular-nums; }

/* ── Chips (produits, thèmes) ─────────────────────────────────────────────
   L'identité d'un produit est portée par le TEXTE de la chip, pas par une
   couleur : 73 produits, aucune palette catégorielle ne tiendrait. */
.amb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.amb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border: 1px solid var(--crm-line); border-radius: 999px; background: var(--crm-card-2);
  font-size: 12.5px; color: var(--crm-ink-2); white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; }
.amb-chip--ghost { border-style: dashed; background: transparent; font-style: italic; }

/* Jours d'attente (file de relance) — l'urgence est doublée par le nombre. */
.amb-days { flex: 0 0 auto; align-self: center; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--crm-card-2); color: var(--crm-ink-2); }
.amb-days--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.amb-days--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }

/* Badge de source du sentiment : ✨ IA conservée / ✎ humain. */
.amb-src { font-size: 12px; color: var(--crm-ink-3); white-space: nowrap; }

/* ── Fiche : identité compacte en grille, actions dans l'en-tête ────────── */
.amb-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--amb-gap-s) 16px; }
.amb-ident__l { font-size: 12px; color: var(--crm-ink-3); }
.amb-ident__v { font-size: 14px; color: var(--crm-ink); overflow-wrap: anywhere; }
.amb-shot--mini { width: 72px; height: 72px; object-fit: cover; margin: 0;
  border-radius: 8px; cursor: zoom-in; }
.amb-histo { display: inline-flex; gap: 3px; align-items: center; font-size: 15px;
  letter-spacing: 1px; }

@media (max-width: 720px) {
  .amb-kpis--3, .amb-kpis--4 { grid-template-columns: repeat(2, 1fr); }
  .amb-split__shots, .amb-split__form { flex-basis: 100%; min-width: 0; }
}

/* =====================================================================
   DIFFUSIONS — demandes d'annonces traduites à toute l'équipe
   Hérite des tokens --crm-* (sélecteurs en tête de fichier, clair ET
   sombre). Tout est scopé .diff-* ou #diffusions-view.
   ===================================================================== */

/* --- Entrée de rail : fermée par défaut (deny-by-default) -------------
   Ses quatre sœurs (crm, plan, agriculture, ambassadeurs) vivent dans
   public/style.css:8439-8442. Celle-ci est ici parce que style.css était
   en cours de modification par un autre chantier au moment de l'écriture
   — la règle est identique et fonctionne à l'identique, mais si vous
   cherchiez les cinq au même endroit : c'est cette ligne qui manque.
   La déplacer auprès des autres est une amélioration, pas un correctif. */
body:not(.diff-access) [data-gs-route="diffusions"]{display:none !important}

#diffusions-view {
  --diff-gap: 14px;
  --diff-gap-s: 8px;
  --diff-radius: 11px;
}

/* --- Rythme vertical --------------------------------------------------- */
.diff-gap { margin-top: var(--diff-gap); }
.diff-gap-s { margin-top: var(--diff-gap-s); }
.diff-intro { margin-bottom: var(--diff-gap); line-height: 1.5; }
.diff-hint { margin-top: var(--diff-gap-s); }
.diff-msg { margin-top: var(--diff-gap-s); }
.diff-right { flex: 0 0 auto; align-self: center; white-space: nowrap; }
.diff-fix { flex: 0 0 auto; }

/* --- Champs de saisie (le shell ne stylise que les <input type=text>) --- */
#diffusions-view .crm-fld select,
#diffusions-view .crm-fld input[type="date"],
#diffusions-view .crm-fld input[type="time"] {
  width: 100%; height: 38px; border: 1px solid var(--crm-line);
  border-radius: var(--diff-radius); padding: 0 10px; font: inherit; font-size: 14px;
  color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box;
  transition: border-color .13s ease;
}
#diffusions-view .crm-fld textarea {
  width: 100%; border: 1px solid var(--crm-line); border-radius: var(--diff-radius);
  padding: 10px; font: inherit; font-size: 14px; line-height: 1.5;
  color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box;
  resize: vertical; transition: border-color .13s ease;
}
#diffusions-view .crm-fld textarea[readonly] { background: var(--crm-card-2); color: var(--crm-ink-2); }
#diffusions-view .crm-fld select:focus,
#diffusions-view .crm-fld input:focus,
#diffusions-view .crm-fld textarea:focus { outline: none; border-color: var(--crm-accent); }
/* .crm-form-grid porte `gap: 0 12px` : aucun espace VERTICAL entre les
   rangées. On rétablit le rythme, comme le fait le module Ambassadeurs. */
#diffusions-view .crm-form-grid { gap: var(--diff-gap-s) 12px; }
.diff-fld--lang { max-width: 260px; }
.diff-fld--text { display: block; margin-top: var(--diff-gap-s); }
.diff-when { margin-top: var(--diff-gap); max-width: 460px; }

/* --- Compteur de caractères -------------------------------------------- */
.diff-count { text-align: right; margin-top: 3px; font-variant-numeric: tabular-nums; }
/* Au-delà de ~600 caractères personne ne lit sur un téléphone : on avertit
   sans interdire — la limite dure reste MAX_DIFFUSION côté serveur. */
.diff-count--long { color: var(--crm-warn-ink); font-weight: 600; }

/* --- Pastilles de statut ----------------------------------------------- */
/* La couleur ne porte JAMAIS l'information seule : l'icône et le libellé
   sont toujours affichés avec elle (accessibilité, impression N&B). */
.diff-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--crm-card-2); color: var(--crm-ink-2);
}
.diff-pill--ok { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.diff-pill--attente { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.diff-pill--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }

/* `.dim` sert de « texte secondaire » dans les trois modules à onglets, mais
   n'est stylée NULLE PART hors de .crm-table : dans une ligne de liste elle ne
   fait donc rien du tout, et les dates s'affichent au même poids que le reste.
   On la définit ici pour cette vue seulement — la corriger globalement
   changerait l'apparence du CRM et des Ambassadeurs, ce qui n'appartient pas à
   ce chantier. */
#diffusions-view .dim {
  color: var(--crm-ink-3); font-size: 12.5px; font-weight: 400; white-space: nowrap;
}

/* --- Étiquettes fines (langue de rédaction, repli, vide) ---------------- */
.diff-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--crm-accent-soft); color: var(--crm-ink-2);
}
.diff-tag--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }

/* --- Lignes de liste ---------------------------------------------------- */
.diff-click { cursor: pointer; }
.diff-row { cursor: default; }
.diff-excerpt {
  margin-top: 3px; font-size: 13px; color: var(--crm-ink-2); line-height: 1.45;
  overflow-wrap: anywhere;
}
.diff-verdict {
  margin-top: 6px; padding: 6px 10px; border-radius: var(--diff-radius);
  font-size: 13px; line-height: 1.45; background: var(--crm-card-2); color: var(--crm-ink-2);
  overflow-wrap: anywhere;
}
.diff-verdict--ok { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
/* Un refus n'est notifié NULLE PART ailleurs (décision du 18 août) : c'est
   le seul endroit où il se lit. Il ne doit pas se lire comme une note. */
.diff-verdict--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); font-weight: 500; }

/* --- Relecture des trois traductions ------------------------------------ */
/* Côte à côte sur un écran large — c'est tout l'intérêt de l'écran : voir
   d'un coup si l'espagnol dit bien ce que dit le français. Sur téléphone,
   auto-fit les empile plutôt que de rendre trois colonnes illisibles. */
.diff-tr-grid, .diff-trs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--diff-gap);
}
.diff-tr {
  border: 1px solid var(--crm-line); border-radius: var(--diff-radius);
  padding: 10px; background: var(--crm-card-2);
}
.diff-tr__h { font-size: 13px; font-weight: 650; color: var(--crm-ink); margin-bottom: 6px; }
.diff-tr__b { font-size: 13px; line-height: 1.5; color: var(--crm-ink-2); white-space: pre-wrap;
  overflow-wrap: anywhere; }
.diff-tr-fld { display: block; }
.diff-src { margin-bottom: var(--diff-gap); }
.diff-src .crm-action { margin-top: var(--diff-gap-s); }
.diff-editor { margin: 6px 0 var(--diff-gap) 26px; }
.diff-reject { margin-top: var(--diff-gap); padding-top: var(--diff-gap);
  border-top: 1px solid var(--crm-line); }
/* La barre de filtres réutilise .crm-tabs pour son allure — mais PAS son
   `position: sticky; top: 0`. L'écran du valideur porte déjà une barre
   d'onglets collante : deux éléments épinglés au même `top` se recouvrent dès
   qu'on fait défiler la file. Le filtre défile donc avec la page. */
.diff-filters { position: static; z-index: auto; margin-bottom: var(--diff-gap-s); }

/* --- Bandeau d'audience ------------------------------------------------- */
/* La raison d'être du lot 2 : dire ce qu'on SUPPOSE, pas seulement ce qu'on
   compte. Un écran qui n'affiche que « 107 destinataires » ment par omission. */
.diff-audience {
  margin-top: var(--diff-gap); padding: 10px 12px; border-radius: var(--diff-radius);
  border: 1px solid var(--crm-line); background: var(--crm-card-2);
}
.diff-audience__h { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: 15px; color: var(--crm-ink); }
.diff-audience__langs { font-size: 14px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.diff-note {
  margin-top: 6px; padding: 5px 9px; border-radius: 8px; font-size: 12.5px;
  line-height: 1.45; overflow-wrap: anywhere;
  background: var(--crm-info-bg); color: var(--crm-info-ink);
}
.diff-note--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.diff-note--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }

/* --- Pièce jointe -------------------------------------------------------- */
/* « je veux faire un long message important à tous mais je dois mettre une
   image » (M. Poulin, 21/09). Aucun jeton nouveau : tout emprunte --crm-*,
   comme le reste du module, pour que le thème sombre suive sans rien ajouter. */
.diff-att { margin-top: var(--diff-gap); }
.diff-fld--att { max-width: 320px; }

/* La boîte d'aperçu. `align-items: center` et non baseline : elle aligne une
   vignette et du texte, pas deux lignes de texte. */
.diff-att__box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--diff-gap-s); padding: 8px 10px;
  border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card-2);
}
.diff-att__meta { font-size: 13px; color: var(--crm-ink-2); overflow-wrap: anywhere; flex: 1 1 140px; }
.diff-att__icon { font-size: 26px; line-height: 1; }
.diff-att__rm { flex: 0 0 auto; }
.diff-att__state { margin-top: var(--diff-gap-s); }

/* Vignette du formulaire : bornée, pour qu'un plan de 4000 pixels de large ne
   pousse pas le bouton « Envoyer la demande » hors de l'écran. */
.diff-att__img {
  width: 72px; height: 72px; object-fit: cover; flex: 0 0 auto;
  border-radius: 8px; border: 1px solid var(--crm-line); background: var(--crm-card);
}

/* Écran du valideur : EN GRAND, et `contain` plutôt que `cover`. C'est le seul
   endroit où l'on peut encore voir qu'une flèche est illisible ou qu'un plan est
   recadré de travers — une vignette rognée y cacherait précisément le défaut
   qu'on cherche. Hauteur bornée quand même : l'éditeur reste défilable. */
.diff-att--review { padding-top: var(--diff-gap); border-top: 1px solid var(--crm-line); }
.diff-att__img--lg {
  width: 100%; height: auto; max-height: 340px; object-fit: contain;
  margin-top: var(--diff-gap-s);
}

/* --- Compte rendu de dépôt ---------------------------------------------- */
.diff-card--accent { border-left: 3px solid var(--crm-accent); }

/* --- Squelette de chargement -------------------------------------------- */
.diff-skel--list { height: 200px; }

/* =====================================================================
   LISTES DE DIFFUSION — « un espace pour cocher à qui c'est destiné »
   =====================================================================
   Ticket XbmXEq4fdue2LHqC7tW2 (M. Poulin, 26/08). Les listes sont les groupes
   d'employés du hub (routes/employee-groups.js) : aucune couleur propre, aucun
   jeton nouveau — tout emprunte --crm-*, comme le reste du module. */

/* Le sélecteur « À qui ? » a la même largeur que celui de la langue : les deux
   sont côte à côte dans .crm-form-grid, et deux largeurs différentes pour deux
   listes déroulantes voisines se lisent comme un défaut d'alignement. */
.diff-fld--cible { max-width: 320px; }

/* Case à cocher de tête (« Prévoir un rappel »). Alignement baseline et non
   center : le libellé peut passer sur deux lignes en espagnol, et un centrage
   ferait alors flotter la case au milieu du texte. */
.diff-check {
  display: flex; align-items: baseline; gap: 8px; margin-top: var(--diff-gap);
  font-size: 14px; color: var(--crm-ink); cursor: pointer;
}
.diff-check input { width: 16px; height: 16px; accent-color: var(--crm-accent); cursor: pointer; }

/* Le tableau de cases. Hauteur BORNÉE et défilement interne : l'annuaire
   dépasse cent fiches, et une liste déroulée en entier repousserait le bouton
   « Enregistrer » à deux écrans de distance — on cocherait sans jamais
   enregistrer. auto-fill plutôt que auto-fit : avec trois personnes trouvées,
   auto-fit étirerait chaque carte sur un tiers d'écran. */
.diff-picks {
  margin-top: var(--diff-gap-s); max-height: 340px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px; padding: 8px; border: 1px solid var(--crm-line);
  border-radius: var(--diff-radius); background: var(--crm-card-2);
}
.diff-pick {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-items: center; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--diff-radius);
  background: var(--crm-card); cursor: pointer;
}
.diff-pick:hover { border-color: var(--crm-line); }
/* La sélection ne tient PAS à la seule couleur de fond : la case cochée reste
   la marque première, et le liseré ne fait que la doubler (même règle que les
   pastilles de statut ci-dessus). */
.diff-pick--on { border-color: var(--crm-accent); background: var(--crm-accent-soft); }
.diff-pick input { grid-row: 1 / 3; width: 16px; height: 16px; accent-color: var(--crm-accent); }
.diff-pick__n { font-size: 13px; font-weight: 600; color: var(--crm-ink); overflow-wrap: anywhere; }
.diff-pick__e { font-size: 11.5px; color: var(--crm-ink-3); overflow-wrap: anywhere; }
/* L'éditeur de liste n'est pas indenté sous une ligne dépliée quand il s'agit
   d'une NOUVELLE liste : il n'a alors aucune ligne mère au-dessus de lui. */
.diff-lists__ed { margin-left: 0; }

@media (max-width: 720px) {
  .diff-editor { margin-left: 0; }
  .diff-fld--lang { max-width: none; }
  .diff-fld--cible { max-width: none; }
  /* Sur téléphone la page défile déjà : un second ascenseur imbriqué dans le
     tableau de cases est impossible à attraper au doigt. */
  .diff-picks { max-height: none; grid-template-columns: 1fr; }
}

/* =====================================================================
   LIGNE DU TEMPS SQDC / OCS — vue Horizons
   =====================================================================
   Trois piles, pas une frise : le Gantt a été rejeté par David (« ingérable
   dès 6 produits par Product Call »). L'ordre des colonnes EST l'information —
   gauche = urgent, droite = lointain.

   Aucune couleur propre au module. Les trois horizons empruntent les jetons de
   statut du hub (crit / warn / ok), déjà réglés pour le thème sombre : une
   quatrième palette maison aurait divergé au premier ajustement. La couleur ne
   porte jamais le sens seule — chaque colonne écrit son titre et son délai en
   toutes lettres, chaque retard est doublé d'un ⚠️ et du mot « échu ».
   ===================================================================== */

/* --- Repères synthétiques ------------------------------------------------ */
.ldt-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem; margin-bottom: .75rem;
}
.ldt-kpi {
  display: grid; grid-template-columns: 32px auto 1fr; align-items: center;
  gap: .65rem; min-width: 0;
  background: var(--crm-card); border: 1px solid var(--crm-line);
  border-radius: 13px; padding: .62rem .72rem; box-shadow: var(--crm-shadow);
}
.ldt-kpi-ic {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; background: var(--crm-card-2); color: var(--crm-ink-2);
}
.ldt-kpi-ic svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ldt-kpi strong {
  font-size: 1.22rem; line-height: 1; color: var(--crm-ink);
  font-variant-numeric: tabular-nums;
}
.ldt-kpi > span:last-child {
  min-width: 0; font-size: .7rem; line-height: 1.25; color: var(--crm-ink-2);
}
.ldt-kpi--crit .ldt-kpi-ic { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
.ldt-kpi--warn .ldt-kpi-ic { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.ldt-kpi--accent .ldt-kpi-ic { background: var(--crm-accent-soft); color: var(--crm-accent); }

/* --- Barre de filtres ---------------------------------------------------- */
.ldt-bar {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  background: var(--crm-card); border: 1px solid var(--crm-line);
  border-radius: 15px; padding: .55rem .7rem; box-shadow: var(--crm-shadow);
  margin-bottom: 1.1rem;
}
.ldt-search { flex: 1 1 260px; min-width: 200px; max-width: 380px; }

/* Le <select> portait `crm-search`, qui est un conteneur flex — sur un select
   ça ne donne ni chevron ni cadre cohérent. Il se style donc pour lui-même,
   en annulant au passage `select{width:100%;padding:12px 15px}` de style.css. */
.ldt-select {
  width: auto; max-width: 220px; height: 38px;
  padding: 0 1.9rem 0 .75rem;
  border: 1px solid var(--crm-line); border-radius: 11px;
  background: var(--crm-card-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23837c6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center;
  font: inherit; font-size: .78rem; font-weight: 500; color: var(--crm-ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}

/* Les puces d'un même filtre vivent sur un rail : sans lui, trois boutons
   fantômes flottent côte à côte et rien ne dit qu'ils s'excluent. */
.ldt-chips {
  display: inline-flex; gap: 2px; padding: 3px; flex-wrap: wrap;
  background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 11px;
}
.ldt-chip { white-space: nowrap; }
.ldt-moi { margin-left: auto; }

/* Compteur dans une puce. Le second, en rouge, ne s'affiche que s'il y a du
   retard : un « 0 » permanent finirait par ne plus être lu. */
.ldt-col-n {
  display: inline-block; min-width: 1.35em; padding: .15em .5em; margin-left: .35em;
  border-radius: 99px; background: var(--crm-card-2); border: 1px solid var(--crm-line);
  color: var(--crm-ink-2); font-size: .68rem; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ldt-col-n--retard { background: var(--crm-crit-bg); border-color: transparent; color: var(--crm-crit-ink); }

/* --- Colonnes ------------------------------------------------------------ */
.ldt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; align-items: start; }

/* Chaque horizon est un PANNEAU, pas une colonne nue : on voit où finit une
   pile et où commence la suivante, y compris quand elle est vide. */
.ldt-col {
  background: rgba(255, 255, 255, .46);
  border: 1px solid var(--crm-line);
  border-radius: 16px;
  padding: 0 .6rem .6rem;
}
body[data-gtheme="dark"] .ldt-col { background: rgba(255, 255, 255, .03); }

.ldt-col-head {
  position: relative;
  margin: 0 -.6rem .6rem; padding: .95rem .85rem .7rem;
  border-bottom: 1px solid var(--crm-line);
}
/* Le bandeau teinté et le numéro forment une balise lisible avant même les
   cartes. Le texte garde le sens complet : la couleur reste redondante. */
.ldt-col-head::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--crm-line-strong); border-radius: 16px 16px 0 0;
}
.ldt-col-t { font-weight: 600; font-size: .87rem; letter-spacing: -.005em; display: flex; align-items: center; gap: .45rem; color: var(--crm-ink); }
.ldt-col-t .ldt-col-n { margin-left: auto; }
.ldt-dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; background: var(--crm-ink-3); flex: 0 0 auto; }
.ldt-step {
  width: 25px; height: 25px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--crm-line-strong); color: var(--crm-card);
  font-size: .68rem; font-weight: 700; line-height: 1;
}
.ldt-col-s { font-size: .72rem; color: var(--crm-ink-2); margin-top: .3rem; font-weight: 500; }
.ldt-col-q { font-size: .72rem; color: var(--crm-ink-3); font-style: italic; }

.ldt-col--crit   .ldt-col-head { background: var(--crm-crit-bg); }
.ldt-col--crit   .ldt-col-head::before { background: var(--crm-crit-dot); }
.ldt-col--crit   .ldt-dot, .ldt-col--crit .ldt-step { background: var(--crm-crit-dot); }
.ldt-col--warn   .ldt-col-head { background: var(--crm-warn-bg); }
.ldt-col--warn   .ldt-col-head::before { background: var(--crm-warn-dot); }
.ldt-col--warn   .ldt-dot, .ldt-col--warn .ldt-step { background: var(--crm-warn-dot); }
.ldt-col--ok     .ldt-col-head { background: var(--crm-ok-bg); }
.ldt-col--ok     .ldt-col-head::before { background: var(--crm-ok-dot); }
.ldt-col--ok     .ldt-dot, .ldt-col--ok .ldt-step { background: var(--crm-ok-dot); }
.ldt-col--neutre .ldt-col-head::before { background: var(--crm-line-strong); }

.ldt-col-body { display: flex; flex-direction: column; gap: .6rem; }

/* La pile « sans échéance » est mise à part, en pleine largeur, APRÈS les trois
   horizons : ces jalons existent (le moteur refuse d'inventer une date quand
   l'ancre du cycle est inconnue) mais ils ne sont datables par personne. Les
   glisser dans « à faire là » serait leur donner une urgence qu'ils n'ont pas. */
.ldt-sansdate { margin-top: 1.4rem; }
.ldt-sansdate .ldt-col-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }

/* --- Carte --------------------------------------------------------------- */
.ldt-card {
  position: relative;
  background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 13px;
  padding: .8rem .9rem .75rem; box-shadow: var(--crm-shadow);
  animation: crm-in .18s ease both;
}
.ldt-col--crit .ldt-card { border-left: 3px solid var(--crm-crit-dot); }
.ldt-col--warn .ldt-card { border-left: 3px solid var(--crm-warn-dot); }
.ldt-col--ok .ldt-card { border-left: 3px solid var(--crm-ok-dot); }
.ldt-card--fini { opacity: .68; }

/* Liseré d'urgence. Il ne porte JAMAIS l'information seul : la pastille
   d'échéance en dessous écrit « échu depuis 2 j » en toutes lettres. */
.ldt-card--retard::before {
  content: ''; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 4px;
  border-radius: 0 3px 3px 0; background: var(--crm-crit-dot);
}

.ldt-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.ldt-card-title { font-weight: 600; font-size: .88rem; line-height: 1.32; letter-spacing: -.012em; margin: 0; color: var(--crm-ink); }
.ldt-card-tools { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.ldt-edit { width: 1.85rem; height: 1.85rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--crm-line); border-radius: .55rem; background: var(--crm-card-2); color: var(--crm-ink-2); cursor: pointer; transition: .15s ease; }
.ldt-edit:hover { color: var(--crm-ink); border-color: var(--crm-accent); background: var(--crm-accent-soft); transform: translateY(-1px); }
.ldt-edit:disabled { opacity: .45; cursor: wait; transform: none; }
.ldt-edit svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ldt-frac {
  flex: 0 0 auto;
  font-weight: 600; font-size: .68rem;
  background: var(--crm-card-2); border: 1px solid var(--crm-line); color: var(--crm-ink-2);
  padding: .22rem .45rem; border-radius: 99px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ldt-frac--plein { background: var(--crm-ok-bg); border-color: transparent; color: var(--crm-ok-ink); }

/* Rail d'avancement : le chiffre reste exact, mais on n'a plus à le lire pour
   savoir où en est la carte. Purement redondant, donc jamais seul porteur. */
.ldt-rail { height: 3px; border-radius: 99px; background: var(--crm-card-2); margin-top: .55rem; overflow: hidden; }
.ldt-rail > i { display: block; height: 100%; border-radius: 99px; background: var(--crm-accent); }
.ldt-rail--plein > i { background: var(--crm-ok-dot); }

/* --- Cases à cocher, une par SKU ---------------------------------------- */

/* ATTENTION — ce qui suit ANNULE `style.css`. Ce n'est pas de la décoration.
   `style.css` (547 ko, chargée AVANT celle-ci) pose deux sélecteurs d'élément
   nus qui traversent tout le hub :

     input, select { width: 100%; padding: 12px 15px; }                (L1053)
     label { display:block; font-size:12px; font-weight:700;
             text-transform:uppercase; color:#666; margin-bottom:8px } (L1042)

   Les autres modules CRM y échappent par accident : aucun n'écrit de <label>
   porteur de texte, et tous enveloppent leur champ de recherche dans
   `<label class="crm-search">…<input></label>`. La Ligne du temps fait
   exactement les deux choses qu'ils évitent — une vraie <input type=checkbox>
   par SKU et un <label> par nom de produit — donc elle les prend de plein
   fouet :

     · la case s'étire sur 100 % de la ligne. Le carré se dessine au MILIEU de
       la carte et le nom du produit est éjecté hors du cadre, écrasé à la
       largeur de son mot le plus long ;
     · le nom sort en MAJUSCULES GRASSES GRISES. Preuve : la donnée dit
       « 1x0.5g », l'écran affichait « 1X0.5G » ;
     · `margin-bottom:8px` sur chaque libellé fait tripler la hauteur des
       cartes, d'où les colonnes 2 et 3 rejetées loin sous le pli.

   C'est ça, le « full broken » — pas un écart de maquette. Le hub connaît
   déjà ce piège : `.dup-modal input[type=checkbox]`, `.bcm-row
   input[type=checkbox]` et `.rn-meet-opt input[type=checkbox]` posent tous le
   même antidote. Ce module ne l'avait jamais posé.

   Ne pas « nettoyer » ces annulations sans avoir d'abord retiré les sélecteurs
   nus de style.css — sinon le défaut revient tel quel. */
.ldt-skus { list-style: none; margin: .55rem 0 0; padding: 0; font-size: .78rem; }
.ldt-sku { display: flex; gap: .55rem; align-items: flex-start; padding: .18rem 0; color: var(--crm-ink); }

/* Au-delà de cinq SKU la carte cesse d'être lisible d'un coup d'œil. Le reste
   n'est pas retiré du DOM — il est masqué, donc ni tabulable ni lu à voix
   haute tant qu'il est replié, et les cases restent branchées au dépliage. */
.ldt-sku--cache { display: none; }
.ldt-skus--tout .ldt-sku--cache { display: flex; }
.ldt-plus {
  margin: .35rem 0 0 1.55rem; padding: 0; border: 0; background: none;
  font: inherit; font-size: .74rem; font-weight: 500; color: var(--crm-ink-2);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ldt-skus--tout ~ .ldt-plus { display: none; }

.ldt-bx {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: 16px; height: 16px;   /* contre input{width:100%} */
  min-width: 0;
  padding: 0;                  /* contre input{padding:12px 15px} */
  margin: .12rem 0 0;
  border: 1.5px solid var(--crm-line-strong); border-radius: 5px;
  background: var(--crm-card);
  cursor: pointer;
}
.ldt-bx:checked {
  background: var(--crm-ok-dot) no-repeat center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'><path d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  border-color: var(--crm-ok-dot);
}
.ldt-bx:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
.ldt-bx:disabled { cursor: progress; opacity: .5; }

.ldt-sku label {
  min-width: 0;             /* le nom se replie DANS la carte */
  margin: 0;                /* contre label{margin-bottom:8px} */
  font: inherit;            /* contre label{font-size:12px;font-weight:700} */
  line-height: 1.38;        /* après `font:`, qui réinitialise line-height */
  text-transform: none;     /* un nom de SKU n'est pas un cri */
  letter-spacing: normal;
  color: inherit;           /* contre label{color:#666} */
  overflow-wrap: anywhere;  /* un code sans espace ne perce pas la carte */
  cursor: pointer;
}
/* Le format se détache du nom sans quitter la ligne : même taille, encre plus
   douce. Deux lignes coûteraient la moitié de la hauteur de la carte. */
.ldt-sku label em { font-style: normal; color: var(--crm-ink-3); }
.ldt-sku--fait { color: var(--crm-ink-3); }
.ldt-sku--fait label { text-decoration: line-through; text-decoration-color: var(--crm-ink-3); }

/* --- Pied de carte ------------------------------------------------------- */
.ldt-card-foot {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-top: .7rem; font-size: .74rem; color: var(--crm-ink-2);
}

/* Responsable ET échéance sur la même ligne — point ⑤ de l'anatomie validée.
   Les deux étaient empilés, ce qui donnait deux pieds de carte pour un. */
.ldt-meta {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--crm-line);
}
.ldt-who { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; font-weight: 500; color: var(--crm-ink-2); }
.ldt-who > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldt-av {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; letter-spacing: .02em; font-style: normal;
  background: var(--crm-accent-soft); color: var(--crm-accent);
}

.ldt-tag { padding: .28rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 600; letter-spacing: .01em; }
.ldt-tag--ocs { background: var(--crm-info-bg); color: var(--crm-info-ink); }
.ldt-tag--sqdc { background: var(--crm-accent-soft); color: var(--crm-accent); }
/* Le cycle est un CONTOUR, le réseau un aplat : deux pastilles côte à côte qui
   se ressemblent se lisent comme une seule information. */
.ldt-tag--cyc { background: transparent; color: var(--crm-ink-2); border: 1px solid var(--crm-line-strong); font-weight: 500; }

.ldt-due {
  flex: 0 0 auto; white-space: nowrap;
  padding: .22rem .5rem; border-radius: 99px;
  background: var(--crm-card-2); color: var(--crm-ink-2); font-weight: 500;
}
.ldt-due--retard { background: var(--crm-crit-bg); color: var(--crm-crit-ink); font-weight: 600; }

/* Refus d'écriture (403 : le jalon n'est pas le vôtre). Message sur la carte
   elle-même, pas en bandeau global — on doit voir QUELLE case a refusé. */
.ldt-card-msg:empty { display: none; }
.ldt-card-msg {
  margin-top: .5rem; padding: .35rem .5rem; border-radius: 6px;
  background: var(--crm-crit-bg); color: var(--crm-crit-ink); font-size: .72rem;
}

/* Éditeur de jalon : panneau latéral dans le même module, aucune navigation. */
.ldt-editor-veil { position: fixed; z-index: 1300; inset: 0; display: flex; justify-content: flex-end; background: rgba(31,29,25,.34); backdrop-filter: blur(2px); }
.ldt-editor { width: min(31rem, 94vw); height: 100%; overflow: auto; background: var(--crm-card); color: var(--crm-ink); border-left: 1px solid var(--crm-line); box-shadow: -1rem 0 3rem rgba(24,22,18,.16); animation: ldt-editor-in .18s ease-out; }
@keyframes ldt-editor-in { from { transform: translateX(1.5rem); opacity: .4; } }
.ldt-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.35rem 1rem; border-bottom: 1px solid var(--crm-line); }
.ldt-editor-head h3 { margin: 0; font-size: 1.05rem; }
.ldt-editor-head p { margin: .25rem 0 0; color: var(--crm-ink-2); font-size: .78rem; }
.ldt-editor-x { border: 0; background: none; color: var(--crm-ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ldt-editor-form { padding: 1.15rem 1.35rem 1.5rem; }
.ldt-editor-form label { display: grid; gap: .38rem; margin-bottom: .95rem; color: var(--crm-ink-2); font-size: .72rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.ldt-editor-form input, .ldt-editor-form select { width: 100%; min-height: 2.65rem; padding: 0 .75rem; border: 1px solid var(--crm-line); border-radius: .65rem; background: var(--crm-card-2); color: var(--crm-ink); font: inherit; text-transform: none; letter-spacing: normal; }
.ldt-editor-form input:focus, .ldt-editor-form select:focus { outline: 2px solid color-mix(in srgb, var(--crm-accent) 25%, transparent); border-color: var(--crm-accent); }
.ldt-editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ldt-editor-error { min-height: 1.2rem; margin: .2rem 0; color: var(--crm-crit-ink); font-size: .8rem; }
.ldt-editor-actions { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; padding-top: 1rem; border-top: 1px solid var(--crm-line); }
.ldt-editor-sync { margin-right: auto; color: var(--crm-ok-ink); font-size: .73rem; font-weight: 650; }
@media (max-width: 560px) { .ldt-editor-row { grid-template-columns: 1fr; gap: 0; } .ldt-editor-actions { flex-wrap: wrap; } .ldt-editor-sync { width: 100%; } }

/* Onglet Jalons : une liste dense, mais ponctuée de repères stables. */
.ldt-jalons { padding: 1.35rem 0 2.5rem; }
.ldt-jhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.ldt-jhead h2 { margin: .1rem 0; font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -.035em; }
.ldt-jhead p { margin: 0; color: var(--crm-ink-2); font-size: .82rem; }
.ldt-jeyebrow { color: var(--crm-accent) !important; text-transform: uppercase; letter-spacing: .09em; font-size: .68rem !important; font-weight: 750; }
.ldt-jhead-actions { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }
.ldt-jbtn { min-height: 2.5rem; padding: 0 .9rem; border: 1px solid var(--crm-accent); border-radius: .7rem; background: var(--crm-accent); color: var(--crm-accent-ink, #fff); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ldt-jbtn--soft { background: var(--crm-card); color: var(--crm-ink); border-color: var(--crm-line); }
.ldt-jbtn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ldt-jbtn:disabled { opacity: .55; transform: none; cursor: wait; }
.ldt-jtools { display: grid; grid-template-columns: minmax(15rem, 1fr) auto; gap: .65rem; padding: .7rem; margin-bottom: .7rem; border: 1px solid var(--crm-line); border-radius: .9rem; background: var(--crm-card); }
.ldt-jsearch { display: flex; align-items: center; gap: .55rem; color: var(--crm-ink-3); }
.ldt-jsearch input, .ldt-jtools select { width: 100%; min-height: 2.35rem; padding: 0 .7rem; border: 0; border-radius: .55rem; background: var(--crm-card-2); color: var(--crm-ink); font: inherit; font-size: .8rem; }
.ldt-jtools select { width: auto; min-width: 11rem; }
.ldt-jlabels, .ldt-jrow { display: grid; grid-template-columns: 8.1rem minmax(15rem, 2fr) minmax(9rem, 1fr) minmax(8rem, 1fr) 3rem 4.5rem; gap: .8rem; align-items: center; }
.ldt-jlabels { padding: .45rem .85rem; color: var(--crm-ink-3); font-size: .64rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ldt-jlist { border: 1px solid var(--crm-line); border-radius: .9rem; overflow: hidden; background: var(--crm-card); }
.ldt-jrow { position: relative; min-height: 4.7rem; padding: .7rem .85rem; border-bottom: 1px solid var(--crm-line); }
.ldt-jrow:last-child { border-bottom: 0; }
.ldt-jrow::before { content: ''; position: absolute; inset: .75rem auto .75rem 0; width: 3px; border-radius: 0 4px 4px 0; background: var(--crm-accent); }
.ldt-jdate { color: var(--crm-ink); font-size: .78rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.ldt-jmain { display: grid; gap: .2rem; min-width: 0; }
.ldt-jmain strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.ldt-jmain span, .ldt-jsector, .ldt-jowner, .ldt-jprogress { color: var(--crm-ink-2); font-size: .72rem; }
.ldt-jsector { display: inline-flex; width: fit-content; padding: .25rem .45rem; border-radius: 999px; background: var(--crm-card-2); }
.ldt-jprogress { font-variant-numeric: tabular-nums; font-weight: 700; }
.ldt-jactions { display: flex; gap: .35rem; justify-content: flex-end; }
.ldt-jactions button { width: 1.9rem; height: 1.9rem; border: 1px solid var(--crm-line); border-radius: .55rem; background: var(--crm-card-2); color: var(--crm-ink-2); cursor: pointer; }
.ldt-jactions button:hover { color: var(--crm-accent); border-color: var(--crm-accent); }
.ldt-jempty { padding: 2.5rem 1rem; text-align: center; color: var(--crm-ink-3); }
.ldt-import-note, .ldt-import-success { margin: .4rem 0 .9rem; padding: .75rem; border-radius: .65rem; background: var(--crm-accent-soft); color: var(--crm-ink-2); font-size: .78rem; line-height: 1.45; }
.ldt-jrevue { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .8rem .9rem; border: 1px solid var(--crm-accent); border-radius: .9rem; background: var(--crm-accent-soft); color: var(--crm-ink); font-size: .82rem; }
@media (max-width: 640px) { .ldt-jrevue { flex-direction: column; align-items: stretch; } }
.ldt-import-success { color: var(--crm-ok-ink); }
.ldt-editor-form input[type="file"] { padding: .65rem; }
@media (max-width: 900px) {
  .ldt-jlabels { display: none; }
  .ldt-jrow { grid-template-columns: 6.8rem minmax(10rem, 1fr) auto; }
  .ldt-jsector, .ldt-jowner { display: none; }
  .ldt-jprogress { grid-column: 1; }
  .ldt-jactions { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
  .ldt-jhead { align-items: flex-start; flex-direction: column; }
  .ldt-jhead-actions, .ldt-jbtn { width: 100%; }
  .ldt-jtools { grid-template-columns: 1fr; }
  .ldt-jtools select { width: 100%; }
  .ldt-jrow { grid-template-columns: 1fr auto; gap: .4rem .65rem; }
  .ldt-jdate { grid-column: 1; }
  .ldt-jmain { grid-column: 1; }
  .ldt-jprogress { grid-column: 1; }
  .ldt-jactions { grid-column: 2; grid-row: 1 / span 3; }
}

/* --- Vides et notes ------------------------------------------------------ */
/* Une pile vide dit ce qu'elle ATTEND. « Rien ici. » se lit comme une panne ;
   « dès que l'ancre du cycle sera posée » se lit comme une file d'attente. */
.ldt-vide {
  border: 1px dashed var(--crm-line-strong); border-radius: 11px;
  padding: 1.2rem .9rem; text-align: center;
  font-size: .74rem; line-height: 1.5; color: var(--crm-ink-3);
}
.ldt-vide b { display: block; font-weight: 600; font-size: .78rem; color: var(--crm-ink-2); margin-bottom: .15rem; }
.ldt-note { font-size: .74rem; color: var(--crm-ink-3); margin-top: 1rem; text-align: center; }
.ldt-skel { height: 260px; }
.ldt-erreur {
  border: 1px solid var(--crm-danger, #B4402F); border-radius: 11px;
  padding: .9rem; font-size: .78rem; color: var(--crm-danger, #B4402F);
}

/* =====================================================================
   LIGNE DU TEMPS — onglet Produits (fiche SKU + journal), lot 4
   ===================================================================== */
/* Une ligne par SKU, dépliable. Pas de tableau : sur téléphone une grille à
   cinq colonnes se replie en bouillie, alors qu'une ligne souple garde son
   sens en s'enroulant. Aucun token nouveau — tout vient des --crm-* déjà
   posés en tête de ce fichier. */
.ldt-fiches { display: flex; flex-direction: column; gap: 6px; }

.ldt-fiche-row {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--crm-card); border: 1px solid var(--crm-line);
  border-radius: 11px; padding: .6rem .75rem;
  font: inherit; color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.ldt-fiche-row:hover { border-color: var(--crm-line-strong); background: var(--crm-card-2); }
.ldt-fiche-row[aria-expanded="true"] {
  border-color: var(--crm-accent, var(--crm-line-strong));
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.ldt-fiche-nom { font-weight: 600; font-size: .82rem; flex: 1 1 12rem; min-width: 0; }
.ldt-fiche-sku { font-size: .7rem; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
.ldt-fiche-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.ldt-fiche-date { font-size: .72rem; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
/* Une date de lancement absente n'est pas un détail : c'est elle qui manque
   pour que tout le rétroplanning marketing existe. On l'affiche en creux
   plutôt que de laisser un blanc qui se lit comme « rien à signaler ». */
.ldt-fiche-date--vide { color: var(--crm-ink-3); font-style: italic; }

/* Pastille de macro-statut. Le texte accompagne TOUJOURS la couleur — un
   code couleur seul est muet pour qui ne distingue pas les teintes. */
.ldt-tag--st { font-weight: 600; }
.ldt-st--selection        { background: #E4EEF7; color: #2C5A82; }
.ldt-st--soumis           { background: #EBE4F7; color: #5A3E86; }
.ldt-st--attente_decision { background: #F5EEDC; color: #7A6224; }
.ldt-st--execution        { background: #F7E7D8; color: #8A4B18; }
.ldt-st--pret             { background: #E1F0E2; color: #2F6B36; }
.ldt-st--lance            { background: #DCEBF5; color: #1F5B7A; }
.ldt-st--evaluation       { background: #EDEAE3; color: #55503F; }
.ldt-st--refuse           { background: #F6E0DC; color: #8C3323; }
.ldt-st--retire           { background: #E8E5E0; color: #5B564E; }
/* Le point discret qui signale « statut déduit, aucune porte franchie ».
   Le titre du <span> porte l'explication complète. */
.ldt-deduit { opacity: .55; font-weight: 400; }

.ldt-fiche-detail {
  border: 1px solid var(--crm-accent, var(--crm-line-strong)); border-top: 0;
  border-radius: 0 0 11px 11px; padding: .8rem .9rem;
  background: var(--crm-card-2);
}
.ldt-fiche-corps { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.ldt-fiche-corps h4 {
  margin: 0 0 .5rem; font-size: .76rem; font-weight: 600;
  color: var(--crm-ink-2); display: flex; align-items: baseline; gap: .4rem;
}
.ldt-compte { font-size: .7rem; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }

.ldt-jalons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ldt-jalon { display: flex; align-items: baseline; gap: .45rem; font-size: .75rem; }
.ldt-jalon--fait { opacity: .55; }
.ldt-jalon--fait .ldt-jalon-titre { text-decoration: line-through; }
.ldt-jalon-etat { color: var(--crm-ink-3); width: 1em; flex: none; }
.ldt-jalon-titre { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.ldt-jalon-titre:hover { text-decoration: underline; }
.ldt-jalon-date { color: var(--crm-ink-3); font-variant-numeric: tabular-nums; flex: none; }

.ldt-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ldt-journal-ligne {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline;
  font-size: .73rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--crm-line);
}
.ldt-journal-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.ldt-journal-date { color: var(--crm-ink-3); font-variant-numeric: tabular-nums; flex: none; }
.ldt-journal-type { font-weight: 600; }
.ldt-journal-delta { flex: 1 1 100%; color: var(--crm-ink-2); }
.ldt-journal-qui { color: var(--crm-ink-3); }
.ldt-journal-motif { flex: 1 1 100%; color: var(--crm-ink-3); font-style: italic; }

/* Sous 720 px, les deux colonnes du détail s'empilent : jalons puis journal,
   dans cet ordre — on veut savoir ce qui reste à faire avant de lire ce qui
   s'est passé. */
@media (max-width: 720px) {
  .ldt-fiche-corps { grid-template-columns: 1fr; }
  .ldt-fiche-sku { flex: 1 1 100%; }
}

/* --- Téléphone : trois panneaux qu'on fait glisser ------------------------ */
/* Le plan ne décrit QUE l'écran large. Empiler les trois horizons — ce que
   faisait `grid-template-columns: 1fr` — détruit l'idée entière de la vue :
   gauche = urgent, droite = lointain. Sur un téléphone ça donnait une liste
   rouge sans fin, et il fallait dépasser 26 cartes pour découvrir que les deux
   autres horizons existaient et étaient vides.

   On garde donc les colonnes côte à côte et on les fait défiler du doigt, avec
   accrochage. Même patron que le kanban des Tâches (`.tasks-kanban-wrap`), qui
   règle déjà ce problème ailleurs dans l'app — deux mécaniques différentes pour
   un même geste, c'est une de trop.

   La largeur à 87 % est le seul indice qui dit « glisse » : le bord de
   l'horizon suivant dépasse toujours. Des points de pagination demanderaient du
   JS et un état à tenir à jour ; un débordement visible ne peut pas se
   désynchroniser. */
@media (max-width: 900px) {
  .ldt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ldt-cols {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    gap: .7rem;
    /* Les marges négatives laissent le panneau suivant toucher le bord de
       l'écran : sans ça, le débordement s'arrête sur la marge et ne se lit plus
       comme « il y a autre chose à droite ». */
    margin-inline: -.2rem;
    padding: 0 .2rem .4rem;
    scrollbar-width: none;
  }
  .ldt-cols::-webkit-scrollbar { display: none; }

  /* Portée `.ldt-cols >` OBLIGATOIRE : la pile « sans échéance » est aussi un
     `.ldt-col`, mais elle vit hors du tableau glissant, en pleine largeur. Sans
     cette portée elle hériterait des 87 % et du plafond de hauteur, et se
     retrouverait tronquée en bas de page. */
  .ldt-cols > .ldt-col {
    flex: 0 0 87%;
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    /* dvh d'abord si le navigateur sait : sur iOS, 100vh compte la barre
       d'adresse rétractée et le bas du panneau passe sous le pouce. */
    max-height: 66vh;
    max-height: 66dvh;
  }
  .ldt-cols > .ldt-col > .ldt-col-head { flex: 0 0 auto; }

  /* Les cartes défilent DANS le panneau, pas avec la page. L'en-tête d'horizon
     reste donc toujours visible — on sait ce qu'on lit — et glisser vers un
     horizon vide n'affiche plus 3 000 px de blanc parce qu'on était descendu
     dans la 26ᵉ carte du précédent. */
  .ldt-cols > .ldt-col > .ldt-col-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-right: .15rem;
  }

  .ldt-sansdate .ldt-col-body { grid-template-columns: 1fr; }
  .ldt-moi { margin-left: 0; }
}

/* =====================================================================
   Onglet « Tâches » de la fiche magasin
   Aucune couleur en dur autre que le blanc du ✓ posé sur une pastille
   pleine : tout vient des jetons --crm-*, qui existent DANS LES DEUX
   thèmes (cf. les deux blocs en tête de fichier). Un bloc sombre dédié
   serait donc une redite — et le jour où l'on en ajouterait une seule
   couleur ici, elle manquerait à l'autre thème.
   ===================================================================== */
.crm-taches { display: flex; flex-direction: column; gap: 8px; }
.crm-tache {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--crm-card-2); border: 1px solid var(--crm-line);
  border-radius: 14px; padding: 11px 13px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.crm-tache:hover { transform: translateY(-1px); box-shadow: var(--crm-shadow); }

/* Case à cocher : bouton pour qui peut écrire, simple pastille sinon —
   même règle que le reste de la fiche (« Consulter » lit, n'écrit pas). */
.crm-tache__ck {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--crm-line-strong); border-radius: 50%;
  background: transparent; color: transparent;
  font-size: 12px; font-weight: 800; line-height: 1;
  cursor: pointer; padding: 0;
  transition: background .13s ease, border-color .13s ease;
}
.crm-tache__ck:hover { border-color: var(--crm-ok-dot); background: var(--crm-ok-bg); }
.crm-tache__ck.on { background: var(--crm-ok-dot); border-color: var(--crm-ok-dot); color: #fff; }
.crm-tache__ck:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
span.crm-tache__ck { cursor: default; }

.crm-tache__main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.crm-tache__main:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 3px; border-radius: 8px; }
/* `anywhere` et pas `break-word` : un titre collé sans espace (une URL, un
   code produit) déborderait sinon de la carte sur mobile. */
.crm-tache__title { font-size: 14px; font-weight: 550; line-height: 1.35; color: var(--crm-ink); overflow-wrap: anywhere; }
.crm-tache__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--crm-ink-2); }
.crm-tache__statut { color: var(--crm-ink-2); }

.crm-tache__prio { border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.crm-tache__prio--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
.crm-tache__prio--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.crm-tache__prio--info { background: var(--crm-info-bg); color: var(--crm-info-ink); }
.crm-tache__prio--low { background: var(--crm-line); color: var(--crm-ink-2); }

.crm-tache__due { display: inline-flex; align-items: center; gap: 4px; }
/* Le retard ne se dit pas qu'en rouge : le libellé porte « en retard ». */
.crm-tache__due--late { background: var(--crm-crit-bg); color: var(--crm-crit-ink); border-radius: 999px; padding: 1px 8px; font-weight: 600; }

.crm-tache__avs { display: inline-flex; flex: none; padding-left: 6px; }
.crm-tache__av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--crm-info-bg); color: var(--crm-info-ink);
  border: 1.5px solid var(--crm-card-2);
  font-size: 10.5px; font-weight: 650; margin-left: -7px;
}
.crm-tache__av:first-child { margin-left: 0; }

.crm-tache--done { opacity: .62; }
.crm-tache--done .crm-tache__title { text-decoration: line-through; }

/* Ligne en cours d'enregistrement : le retour visuel se joue SUR LA LIGNE
   qu'on vient de cocher — la liste entière ne clignote plus en squelette
   pendant l'aller-retour (cf. tachesPane, `charge({ squelette: false })`). */
.crm-tache[aria-busy="true"] { opacity: .5; pointer-events: none; }

.crm-taches-done { margin-top: 12px; }
.crm-taches-done > summary { cursor: pointer; font-size: 12.5px; color: var(--crm-ink-2); padding: 6px 2px; list-style-position: inside; }
.crm-taches-done > summary:hover { color: var(--crm-ink); }
.crm-taches-done[open] > summary { margin-bottom: 8px; }

/* --- Création rapide (le formulaire complet reste dans le module Tâches) --- */
.crm-tache-formzone:empty { display: none; }
.crm-tache-form {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--crm-card-2); border: 1px solid var(--crm-line);
  border-radius: 14px; padding: 12px 13px; margin-bottom: 12px;
}
.crm-tache-form input, .crm-tcom-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  color: var(--crm-ink); background: var(--crm-card);
  border: 1px solid var(--crm-line); border-radius: 11px; padding: 9px 11px;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.crm-tache-form input:focus, .crm-tcom-form textarea:focus {
  outline: none; border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-accent-soft);
}
.crm-tache-form input::placeholder, .crm-tcom-form textarea::placeholder { color: var(--crm-ink-3); }
.crm-tache-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.crm-tache-form__lab { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--crm-ink-3); }
.crm-tache-form__lab--grow { flex: 1 1 200px; min-width: 0; }
.crm-tache-form__cancel {
  background: none; border: 1px solid var(--crm-line-strong); border-radius: 11px;
  font: inherit; font-size: 13px; color: var(--crm-ink-2); padding: 8px 14px; cursor: pointer;
}
.crm-tache-form__cancel:hover { color: var(--crm-ink); border-color: var(--crm-accent); }
/* Message d'erreur DANS le formulaire : .crm-error est un état pleine page
   (40 px de padding, texte centré) — il s'afficherait au milieu d'un vide. */
.crm-tache-form__msg { font-size: 12.5px; color: var(--crm-crit-ink); }
.crm-tache-retry { text-align: center; margin-top: 12px; }

/* --- Sélecteur de personnes (assignés) ---------------------------------
   Toutes les couleurs sortent des jetons --crm-* définis pour les DEUX
   thèmes en tête de fichier : rien ici n'est peint dans un seul thème. */
/* Le bloc du sélecteur compte une rangée de plus que le champ « Échéance »
   d'à côté (libellé, pastilles, champ). La rangée est en `align-items: center`
   — qu'on ne touche PAS, la même classe porte la rangée « Créer / Annuler »,
   qui doit rester centrée : on aligne donc ces deux blocs-ci par le BAS, pour
   que les deux champs de la rangée retrouvent la même ligne de base. */
.crm-tache-form__row > .crm-tache-form__lab { align-self: flex-end; }
.crm-pick { position: relative; }
.crm-pick__lab { font-size: 11.5px; color: var(--crm-ink-3); }
.crm-pick__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 20px; }
.crm-pick__vide { font-size: 12px; color: var(--crm-ink-3); font-style: italic; }
/* `align-items: center` et non `baseline` : la pastille peut porter DEUX
   lignes (nom + courriel) quand deux homonymes sont choisis, et le × doit
   rester en regard du bloc entier. */
.crm-pick__chip {
  display: inline-flex; align-items: center; gap: 3px;
  max-width: 100%; min-width: 0;
  font-size: 12px; line-height: 1.2; color: var(--crm-ink);
  background: var(--crm-accent-soft); border: 1px solid var(--crm-line-strong);
  border-radius: 999px; padding: 3px 4px 3px 9px;
  overflow-wrap: anywhere;
}
.crm-pick__cw { display: flex; flex-direction: column; min-width: 0; }
.crm-pick__cnom { overflow-wrap: anywhere; }
/* Le courriel d'une pastille : montré SEULEMENT quand le nom ne suffit plus à
   distinguer deux personnes choisies (deux « Melissa Roy »). */
.crm-pick__cml { font-size: 10.5px; color: var(--crm-ink-3); overflow-wrap: anywhere; }
.crm-pick__x {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; line-height: 1;
  color: var(--crm-ink-3); padding: 0 3px; border-radius: 999px;
}
.crm-pick__x:hover { color: var(--crm-crit-ink); }
.crm-pick__x:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }

/* La liste flotte : le formulaire est court, la pousser vers le bas ferait
   sauter le bouton « Créer » sous le doigt au moment de le viser. */
.crm-pick__list {
  position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: 4px;
  max-height: 244px; overflow-y: auto;
  background: var(--crm-card); border: 1px solid var(--crm-line-strong);
  border-radius: 12px; box-shadow: var(--crm-shadow-lift); padding: 4px;
}
.crm-pick__list[hidden] { display: none; }
.crm-pick__opt {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
}
/* Le survol et la ligne visée au clavier se ressemblent VOLONTAIREMENT :
   c'est la même « ligne sur laquelle Entrée agit ». */
.crm-pick__opt:hover, .crm-pick__opt.is-active { background: var(--crm-accent-soft); }
.crm-pick__opt.is-active { box-shadow: inset 0 0 0 1px var(--crm-accent); }
.crm-pick__ph {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; background: var(--crm-card-2);
}
.crm-pick__ph--ltr {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--crm-ink-2);
  border: 1px solid var(--crm-line);
}
.crm-pick__who { min-width: 0; display: flex; flex-direction: column; }
/* Un nom ou un courriel long ne doit pas élargir la liste : il se coupe. */
.crm-pick__nom { font-size: 13px; color: var(--crm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-pick__ml { font-size: 11.5px; color: var(--crm-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-pick__aucun { font-size: 12.5px; color: var(--crm-ink-3); padding: 8px 9px; }
/* Repli quand la liste des membres ne répond pas (Clavardage éteint). */
.crm-pick__note { font-size: 11.5px; color: var(--crm-warn-ink); }

/* --- Détail d'une tâche --- */
.crm-tdet__back {
  background: none; border: none; font: inherit; font-size: 13px;
  color: var(--crm-ink-2); cursor: pointer; padding: 4px 0;
}
.crm-tdet__back:hover { color: var(--crm-ink); }
.crm-tdet__link { font-size: 13px; color: var(--crm-accent); text-decoration: none; font-weight: 550; }
.crm-tdet__link:hover { text-decoration: underline; }
.crm-tdet__title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--crm-ink); overflow-wrap: anywhere; }
.crm-tdet__meta { margin: 8px 0 14px; }
/* pre-wrap : une description et un commentaire sont saisis avec des retours
   à la ligne ; les écraser change le sens du texte. */
.crm-tdet__desc { font-size: 13.5px; line-height: 1.55; color: var(--crm-ink); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 16px; }
.crm-tdet__desc--none { color: var(--crm-ink-3); font-style: italic; }

.crm-tcoms { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.crm-tcom { background: var(--crm-card-2); border: 1px solid var(--crm-line); border-radius: 13px; padding: 10px 12px; }
.crm-tcom__head { font-size: 11.5px; color: var(--crm-ink-3); margin-bottom: 4px; }
.crm-tcom__body { font-size: 13.5px; line-height: 1.5; color: var(--crm-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Un commentaire supprimé garde sa place : un trou dans le fil laisserait
   croire qu'on n'a jamais répondu. */
.crm-tcom--del .crm-tcom__body { color: var(--crm-ink-3); font-style: italic; }
.crm-tcom-form { display: flex; flex-direction: column; gap: 9px; }
.crm-tcom-form textarea { resize: vertical; min-height: 62px; line-height: 1.45; }

@media (max-width: 560px) {
  .crm-tache { padding: 10px 11px; gap: 9px; }
  .crm-tache__avs { padding-left: 0; }
  .crm-tache-form__lab--grow { flex-basis: 100%; }
}

/* =====================================================================
   Écran de contrôle avant la feuille ShipStation
   =====================================================================
   Hiérarchie voulue : ce qui demande une décision est en haut et coloré,
   ce qui est propre est replié et gris. Un écran où tout se ressemble ne
   serait qu'un tableau de plus — et c'est un tableau de plus qui a laissé
   passer 71 mauvaises adresses le 24 août 2026. */
.crm-sheet--wide { max-width: 680px; }
.crm-ship__loading { padding: 28px 0; text-align: center; color: var(--crm-ink-3, #9a927f); font-size: 14px; }
.crm-ship__sum { font-size: 14px; color: var(--crm-ink-2, #6f6857); margin-bottom: 14px; }
.crm-ship__k--bloq { color: #b3261e; }
.crm-ship__k--warn { color: #8a6d1f; }

.crm-ship__parcel { border: 1px solid var(--crm-line, #ece4d6); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.crm-ship__parcel-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--crm-ink-3, #9a927f); margin-bottom: 10px; }
.crm-ship__parcel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .crm-ship__parcel-grid { grid-template-columns: repeat(4, 1fr); } }
.crm-ship__parcel-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--crm-ink-2, #6f6857); }
.crm-ship__parcel-grid input { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--crm-line, #ece4d6); border-radius: 11px; background: var(--crm-card, #fff); color: var(--crm-ink, #282521); box-sizing: border-box; width: 100%; }
.crm-ship__parcel-grid input:focus { outline: none; border-color: var(--crm-accent, #A8863F); box-shadow: 0 0 0 3px var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-ship__parcel-grid.crm-ship__parcel-grid--seul { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.crm-ship__hint { font-size: 12px; color: var(--crm-ink-3, #9a927f); margin-top: 9px; }

/* Import d'envois d'échantillons (ticket eADlWN8X). Trois champs empilés plutôt
   qu'une grille : ils se lisent dans l'ordre où on les remplit — lot, type,
   fichier — et le libellé d'un lot (« EE60603E-S — BLANH INDICA (3.5 g) ») est
   trop long pour une colonne étroite. */
.crm-simp__f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--crm-ink-2, #6f6857); margin-bottom: 10px; }
.crm-simp__f select,
.crm-simp__f textarea,
.crm-simp__f input[type="file"] { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--crm-line, #ece4d6); border-radius: 11px; background: var(--crm-card, #fff); color: var(--crm-ink, #282521); box-sizing: border-box; width: 100%; }
.crm-simp__f select:focus,
.crm-simp__f textarea:focus,
.crm-simp__f input[type="file"]:focus { outline: none; border-color: var(--crm-accent, #A8863F); box-shadow: 0 0 0 3px var(--crm-accent-soft, rgba(168,134,63,.1)); }
/* Le courriel collé garde ses paragraphes : il est relu tel quel dans l'aperçu,
   et c'est cette forme-là qui partira dans la fiche (ticket hrniGw9KI1pQNOWa9BBG). */
.crm-simp__f textarea { resize: vertical; min-height: 74px; line-height: 1.5; }

.crm-ship__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.crm-ship__row { border: 1px solid var(--crm-line, #ece4d6); border-left: 3px solid #d8b34a; border-radius: 12px; padding: 11px 13px; }
.crm-ship__row--bloq { border-left-color: #b3261e; }
.crm-ship__title { font-size: 14px; font-weight: 600; color: var(--crm-ink, #282521); }
.crm-ship__num { font-variant-numeric: tabular-nums; color: var(--crm-ink-3, #9a927f); font-weight: 500; }
.crm-ship__addr { font-size: 13px; color: var(--crm-ink-2, #6f6857); margin: 3px 0 7px; }
.crm-ship__flag { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; padding: 7px 9px; border-radius: 9px; margin-top: 6px; background: var(--crm-accent-soft, rgba(168,134,63,.07)); }
.crm-ship__flag b { font-weight: 600; color: var(--crm-ink, #282521); }
.crm-ship__flag span { color: var(--crm-ink-2, #6f6857); }
.crm-ship__flag--bloquant { background: rgba(179, 38, 30, .07); }
.crm-ship__flag--info { background: var(--crm-line, rgba(40,34,24,.05)); }

.crm-ship__more { font: inherit; font-size: 13px; background: none; border: none; cursor: pointer; color: var(--crm-ink-2, #6f6857); padding: 8px 0; text-align: left; }
.crm-ship__more:hover { color: var(--crm-ink, #282521); }
.crm-ship__clean { margin-bottom: 12px; }
.crm-ship__cleanrow { font-size: 13px; color: var(--crm-ink-2, #6f6857); padding: 5px 0; border-bottom: 1px solid var(--crm-line, rgba(40,34,24,.06)); }
.crm-ship__cleanrow i { display: block; font-style: normal; font-size: 12px; color: var(--crm-ink-3, #9a927f); }
/* « La note telle qu'elle sera écrite » : telle quelle veut dire avec ses sauts
   de ligne. Sans ça, un courriel collé s'aplatit en un pavé que la fiche, elle,
   affichera en paragraphes — l'aperçu montrerait autre chose que le résultat. */
.crm-ship__cleanrow--note { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Tags en lot (tags-lot.js) : une case de fichier ou une liste de tags sans
   espace ne doit jamais élargir la feuille au-delà de l'écran (375 px). */
.crm-tl .crm-ship__addr, .crm-tl .crm-ship__cleanrow, .crm-tl .crm-ship__sum, .crm-tl .crm-ship__hint { overflow-wrap: anywhere; }
.crm-ship__note { font-size: 12.5px; color: var(--crm-ink-2, #6f6857); background: var(--crm-line, rgba(40,34,24,.05)); border-radius: 10px; padding: 9px 11px; margin-bottom: 12px; }
/* Pendant la génération : où regarder (ticket 2o1tYJkW6imP9CiNf85Y). Vide = ne prend pas de place. */
.crm-ship__wait { font-size: 13px; color: var(--crm-ink-2, #6f6857); text-align: center; }
.crm-ship__wait:not(:empty) { margin-bottom: 10px; }
/* Feuille générée : l'écran reste ouvert et dit où est la feuille, avec un vrai bouton pour l'ouvrir. */
.crm-ship__done { text-align: center; padding: 8px 0 2px; }
.crm-ship__done-ic .crm-ic { width: 38px; height: 38px; color: var(--crm-ok-ink, #1f6b3a); }
.crm-ship__done--warn .crm-ship__done-ic .crm-ic { color: var(--crm-crit-ink, #8a3b34); }
.crm-ship__done-h { font-size: 16px; font-weight: 600; color: var(--crm-ink, #282521); margin-top: 8px; }
.crm-ship__done-t { font-size: 13px; color: var(--crm-ink-3, #9a927f); margin-top: 3px; overflow-wrap: anywhere; }
.crm-ship__done-p { font-size: 13.5px; line-height: 1.45; color: var(--crm-ink-2, #6f6857); margin: 12px 0 16px; }
a.crm-ship__open { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; text-decoration: none; margin-bottom: 8px; }
a.crm-ship__open:hover, a.crm-ship__open:focus-visible { color: var(--crm-accent-ink, #fff); }
.crm-ship__close { flex: none; width: 100%; }

/* --- Ventes sans magasin (rattachement manuel) --- */
.crm-orph{padding:0 2px}
.crm-orph-q{display:flex;width:100%;margin:10px 0 14px}
/* `.crm-search` porte la loupe et le cadre ; le champ lui-même reste nu.
   NE PAS revenir à `.crm-filter` ici : cette classe est un style de <select>
   (chevron en image de fond, curseur pointeur) — sur un champ de texte, elle
   dessine une flèche de menu déroulant qui ne s'ouvre jamais. */
.crm-orph-when{margin-top:10px;font-size:11.5px;color:var(--crm-ink-3);font-variant-numeric:tabular-nums}
.crm-orph-intro{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--crm-ink-2)}
.crm-orph-sum{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--crm-ink-3)}
.crm-orph-item{border:1px solid var(--crm-line);border-radius:10px;padding:13px 15px;
  margin-bottom:10px;background:var(--crm-card)}
.crm-orph-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.crm-orph-head strong{font-size:15px;line-height:1.3}
.crm-orph-adr{margin-top:3px;font-size:12.5px;color:var(--crm-ink-2);line-height:1.45}
/* Le compteur est l'information qui décide de l'ordre du travail : c'est le
   nombre de lignes de vente qui attendent ce rattachement. */
.crm-orph-count{flex:0 0 auto;min-width:34px;text-align:center;padding:3px 8px;border-radius:999px;
  background:var(--crm-accent-soft);color:var(--crm-accent-ink);font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.crm-orph-dates{margin-top:6px;font-size:11.5px;color:var(--crm-ink-3);font-variant-numeric:tabular-nums}
.crm-orph-act{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
@media (max-width:520px){.crm-orph-act .btn{width:100%}}

/* --- Sélecteur de magasin ---
   Remplace une liste déroulante native de 1 893 entrées qui n'affichait que
   « Nom — Ville » : sans la rue ni le code postal, rien ne distinguait les
   quatre « Big River Cannabis ». */
.crm-orph-item.is-open{border-color:var(--crm-line-strong)}
.crm-orph-pick{margin-top:12px;border-top:1px solid var(--crm-line);padding-top:12px}
.crm-orph-q{display:flex;width:100%;margin-bottom:10px}
.crm-orph-res{max-height:320px;overflow-y:auto;border:1px solid var(--crm-line);
  border-radius:10px;background:var(--crm-card-2)}
.crm-orph-row{display:block;width:100%;text-align:left;border:none;background:none;
  font:inherit;color:inherit;cursor:pointer;padding:9px 12px;
  border-bottom:1px solid var(--crm-line);transition:background .12s ease}
.crm-orph-row:last-child{border-bottom:none}
.crm-orph-row:hover{background:var(--crm-card)}
.crm-orph-row.on{background:var(--crm-accent-soft)}
.crm-orph-row:focus-visible{outline:2px solid var(--crm-accent);outline-offset:-2px}
.crm-orph-row__n{display:block;font-size:13.5px;font-weight:650;line-height:1.35}
/* L'ADRESSE est la raison d'être de ce panneau : elle ne se cache jamais. */
.crm-orph-row__a{display:block;font-size:12.5px;color:var(--crm-ink-2);margin-top:2px;
  font-variant-numeric:tabular-nums}
.crm-orph-row__x{display:block;font-size:11px;color:var(--crm-ink-3);margin-top:2px}
.crm-orph-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;vertical-align:1px}
.crm-orph-tag--ok{background:var(--crm-ok-bg);color:var(--crm-ok-ink)}
.crm-orph-tag--warn{background:var(--crm-warn-bg);color:var(--crm-warn-ink)}
.crm-orph-tag--neutre{background:var(--crm-card);color:var(--crm-ink-3)}
.crm-orph-vide{margin:0;padding:16px 12px;font-size:13px;color:var(--crm-ink-3);text-align:center}
.crm-orph-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.crm-orph-cnt{font-size:11.5px;color:var(--crm-ink-3);font-variant-numeric:tabular-nums}
@media (max-width:520px){.crm-orph-foot{flex-direction:column;align-items:stretch}
  .crm-orph-foot .btn{width:100%}}

/* =====================================================================
   GROUPES DE MAGASINS (ticket dvR8pctH2SR8HbRJ7f2U)
   =====================================================================
   La pastille de groupe se distingue de celle de BANNIÈRE, et il le faut :
   les deux se suivent sur la même sous-ligne. La bannière est une identité
   (accent doré, plein) ; un groupe est une liste de travail — même géométrie,
   mais en trait, sans remplissage, pour qu'un coup d'œil sépare « à qui ce
   magasin appartient » de « avec qui je le traite ». */
.crm-group-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 150px;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.55;
  padding: 0 8px; border-radius: 999px;
  border: 1px dashed var(--crm-line-strong, rgba(40, 34, 24, .28));
  background: transparent; color: var(--crm-ink-2, #6f6857);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default; transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.crm-group-chip--btn { cursor: pointer; }
.crm-group-chip--btn:hover {
  border-style: solid; border-color: var(--crm-accent); color: var(--crm-accent);
  background: var(--crm-accent-soft);
}
.crm-group-chip--btn:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
/* Le « +3 » n'est pas un bouton : il n'ouvre rien et ne filtre rien. */
.crm-group-chip--more { cursor: default; opacity: .7; }
.crm-row .crm-group-chip { max-width: 96px; }

/* --- Le gestionnaire ------------------------------------------------- */
.crm-grpm-newrow { display: flex; gap: 8px; align-items: center; }
.crm-grpm-newrow input { flex: 1; }
.crm-grpm-newrow .crm-sheet__btn { flex: 0 0 auto; min-width: 44px; }
.crm-grpm-card { border: 1px solid var(--crm-line, #ece4d6); border-radius: 14px; margin-bottom: 9px; overflow: hidden; }
.crm-grpm-card.on { border-color: var(--crm-accent); }
.crm-grpm-card > header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; }
.crm-grpm-open {
  display: inline-flex; align-items: center; gap: 7px; flex: 1 1 180px;
  font: inherit; font-size: 14px; text-align: left;
  background: none; border: none; cursor: pointer; color: var(--crm-ink, #282521); padding: 2px 0;
}
.crm-grpm-open:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; border-radius: 6px; }
.crm-grpm-n {
  font-size: 11px; font-weight: 600; color: var(--crm-ink-3, #9a927f);
  border: 1px solid var(--crm-line, #ece4d6); border-radius: 999px; padding: 0 7px;
}
.crm-grpm-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-grpm-acts .crm-sheet__btn { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
.crm-grpm-members { list-style: none; margin: 0; padding: 0 12px 10px; max-height: 260px; overflow-y: auto; }
.crm-grpm-members li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--crm-line, #f0eade); }
.crm-grpm-x { background: none; border: none; cursor: pointer; color: var(--crm-ink-3, #9a927f); font-size: 12px; padding: 2px 6px; border-radius: 6px; }
.crm-grpm-x:hover { background: var(--crm-accent-soft); color: var(--crm-crit-ink, #8a3b34); }
.crm-grpm-link { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--crm-accent); cursor: pointer; text-decoration: underline; }
/* La description d'un groupe (ticket QTEjBmIpMZoeLttOvCH5) : posée sous
   l'en-tête de la carte, jamais dans le bouton d'ouverture — cliquer pour lire
   un texte qui replie la liste serait un piège. */
.crm-grpm-desc { margin: -4px 12px 8px; font-size: 12.5px; color: var(--crm-ink-2, #6f6857); }
/* « Supprimer » se distingue sans crier : la teinte critique sur le TEXTE, le
   fond réservé au survol. Un bouton rouge plein au milieu de cinq autres
   attirerait l'œil avant « Écrire au groupe », qui est le geste courant. */
.crm-sheet__btn--danger { color: var(--crm-crit-ink, #93443B); }
.crm-sheet__btn--danger:hover { background: var(--crm-crit-bg, #F7E9E6); border-color: var(--crm-crit-ink, #93443B); }
.crm-group-count { font-size: 13px; color: var(--crm-ink-2, #6f6857); margin: 0 0 10px; }

/* --- Le composeur de groupe ------------------------------------------ */
.crm-gm-dest { border: 1px solid var(--crm-line, #ece4d6); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.crm-gm-dest__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; }
.crm-gm-dest__head span { color: var(--crm-ink-3, #9a927f); }
.crm-gm-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.crm-gm-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--crm-line, #f0eade); }
.crm-gm-list label { display: flex; align-items: center; gap: 7px; min-width: 0; }
.crm-gm-list label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* L'adresse est de la donnée de vérification : lisible, mais elle ne doit pas
   concurrencer le nom du magasin, qui est ce qu'on relit pour décocher. */
.crm-gm-mail { font-size: 11.5px; color: var(--crm-ink-3, #9a927f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.crm-gm-skip { margin-top: 8px; font-size: 12.5px; color: var(--crm-ink-2, #6f6857); }
.crm-gm-skip summary { cursor: pointer; }
.crm-gm-skip ul { margin: 6px 0 0; padding-left: 18px; }
.crm-gm-gone { margin: 8px 0 0; font-size: 12.5px; color: var(--crm-ink-3, #9a927f); }

/* Zone de dépôt. L'état `on` doit se voir sans déplacer quoi que ce soit :
   une bordure qui pousserait le contenu ferait sauter la feuille sous le
   curseur au moment précis où on relâche le fichier. */
.crm-gm-drop { border: 1px dashed transparent; border-radius: 12px; transition: border-color .12s ease, background .12s ease; }
.crm-gm-drop.on { border-color: var(--crm-accent); background: var(--crm-accent-soft); }
.crm-gm-drop__hint { font-size: 12px; color: var(--crm-ink-3, #9a927f); }
@media (hover: none) {
  /* Sans souris, il n'y a rien à glisser : la mention serait une consigne
     impossible à suivre. Le bouton « Joindre » reste, lui. */
  .crm-gm-drop__hint { display: none; }
}
/* Intertitre « Afficher par groupe ». Il réutilise `.crm-dir-group`
   (ux-refresh.css) : mêmes hauteur, bordures et fond que les intertitres « À
   prioriser » / « Autres comptes », pour que la liste garde un seul rythme
   quel que soit le rangement choisi. Seul le liseré change, et il reprend la
   couleur des pastilles de groupe. */
.crm-dir-group--tag { box-shadow: inset 3px 0 0 var(--crm-accent); }

/* =====================================================================
   « Mes tâches » et « Tâches de l'équipe » — ticket dvR8pctH2SR8HbRJ7f2U
   =====================================================================
   Deux écrans transversaux : les tâches du CRM vues autrement que magasin
   par magasin. Ils ne dessinent presque rien en propre — l'en-tête, les
   tuiles, les pastilles, l'état vide et le squelette sont ceux du module.
   Ce bloc n'ajoute que ce qui n'existait pas : la LIGNE de tâche, la
   CARTE de groupe et la barre d'avancement.

   Le fil conducteur : deux niveaux de regroupement, jamais trois. Une
   section (« Mes tâches », par échéance) ou une carte (« l'équipe », par
   personne), puis des lignes. Empiler un troisième cadre rendrait la
   page illisible bien avant qu'elle soit pleine.
   ===================================================================== */

/* Quatre tuiles ici, pas cinq comme dans la liste des magasins. */
.crm-tk-kpis { grid-template-columns: repeat(4, 1fr); }
.crm-tk-kpi--late .crm-kpi__n { color: var(--crm-crit-ink); }

/* Chips de portée et d'axe. Plus grandes que `.crm-tag`, qui est une
   étiquette de lecture : celles-ci sont la commande principale de
   l'écran et doivent se viser au doigt. */
.crm-tk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.crm-tk-chip { max-width: none; font-size: 12.5px; padding: 6px 13px; gap: 6px; }

/* ------------------------------------------------------------- la ligne */
.crm-tk-rows { display: flex; flex-direction: column; }
.crm-tk-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 10px 4px;
}
.crm-tk-row + .crm-tk-row { border-top: 1px solid var(--crm-line); }
.crm-tk-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-tk-row__title { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.crm-tk-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Une tâche faite reste lisible : elle s'efface, elle ne disparaît pas.
   Les gens relisent ce qu'ils viennent de cocher pour vérifier. */
.crm-tk-row--done .crm-tk-row__title { color: var(--crm-ink-3); text-decoration: line-through; }

/* La pastille. `<button>` quand elle agit, `<span>` inerte quand la tâche
   n'a pas de magasin (le serveur refuserait) — même dessin, mais le
   curseur et le survol ne promettent rien dans le second cas. */
.crm-tk-ck {
  width: 20px; height: 20px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--crm-line-strong); border-radius: 7px;
  background: var(--crm-card); color: var(--crm-accent-ink);
  font: inherit; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
button.crm-tk-ck:hover { border-color: var(--crm-accent); background: var(--crm-accent-soft); }
button.crm-tk-ck:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
.crm-tk-ck.on { background: var(--crm-accent); border-color: var(--crm-accent); }
span.crm-tk-ck { cursor: default; opacity: .6; }
#crm-view .crm-tk-ck .crm-ic { width: 13px; height: 13px; vertical-align: middle; }

/* Le nom du magasin est l'information qui situe la tâche : il a droit à
   plus que les 130 px d'une étiquette ordinaire. */
/* `gap` et pas l'espace du gabarit : `.crm-tag` est un `inline-flex`, et un
   conteneur flex supprime les nœuds de texte blancs. L'espace écrit entre
   l'icône et le nom dans le HTML n'existe donc pas à l'écran — il faut le
   demander ici. (Vu en capture : « 🏪SQDC Sainte-Foy », collé.) */
.crm-tk-store { max-width: 220px; gap: 5px; }
.crm-tk-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 550; color: var(--crm-ink-3);
  text-decoration: none; white-space: nowrap;
}
.crm-tk-link:hover { color: var(--crm-accent); text-decoration: underline; }

/* L'échéance est en chiffres tabulaires : une colonne de dates qui ne
   s'aligne pas se relit deux fois. */
.crm-tk-due {
  font-size: 12px; color: var(--crm-ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.crm-tk-due--late { color: var(--crm-crit-ink); font-weight: 600; }

/* ---------------------------------------------- sections (« Mes tâches ») */
.crm-tk-grp {
  background: var(--crm-card); border: 1px solid var(--crm-line);
  border-radius: 16px; padding: 6px 16px 10px; margin-bottom: 12px;
  box-shadow: var(--crm-shadow); animation: crm-in .3s ease both;
}
.crm-tk-grp__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 0 8px; border-bottom: 1px solid var(--crm-line);
  font-size: 13px; margin-bottom: 2px;
}
.crm-tk-grp__h span { font-size: 12px; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
/* Le retard est le seul groupe qui se signale — s'ils se signalaient tous,
   aucun ne se signalerait. Un liseré, pas un fond : la liste doit rester
   lisible en dessous. */
.crm-tk-grp--retard { box-shadow: inset 3px 0 0 var(--crm-crit-dot), var(--crm-shadow); }
.crm-tk-grp--retard .crm-tk-grp__h strong { color: var(--crm-crit-ink); }

/* -------------------------------------------- cartes (« Tâches de l'équipe ») */
.crm-tk-card {
  background: var(--crm-card); border: 1px solid var(--crm-line);
  border-radius: 16px; padding: 4px 16px 10px; margin-bottom: 12px;
  box-shadow: var(--crm-shadow); animation: crm-in .3s ease both;
}
.crm-tk-card__h {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 0 10px; border-bottom: 1px solid var(--crm-line);
}
.crm-tk-card__id { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.crm-tk-card__id strong { font-size: 13.5px; font-weight: 600; }
.crm-tk-card__id small { font-size: 11.5px; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }
.crm-tk-card__prog { display: flex; align-items: center; gap: 8px; }
.crm-tk-card__prog small { font-size: 11.5px; color: var(--crm-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* « Sans responsable » : le seul groupe marqué. Une tâche que personne ne
   porte n'avancera pas — c'est le trou que cet écran doit rendre gênant. */
.crm-tk-card--orphelin { border-color: var(--crm-warn-ink); background: var(--crm-warn-bg); }
.crm-tk-card--orphelin .crm-tk-av { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }

.crm-tk-av {
  width: 34px; height: 34px; flex: none; border-radius: 11px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--crm-card-2); color: var(--crm-ink-2);
  font-size: 12px; font-weight: 650; letter-spacing: .02em;
}
.crm-tk-av img { width: 100%; height: 100%; object-fit: cover; }
#crm-view .crm-tk-av .crm-ic { width: 16px; height: 16px; vertical-align: middle; }

.crm-tk-latetag { gap: 4px; color: var(--crm-crit-ink); border-color: var(--crm-crit-ink); background: var(--crm-crit-bg); cursor: default; }
.crm-tk-latetag:hover { color: var(--crm-crit-ink); border-color: var(--crm-crit-ink); background: var(--crm-crit-bg); }

/* ------------------------------------------------------------ la synthèse */
.crm-tk-synth {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--crm-card); border: 1px solid var(--crm-line);
  border-radius: 16px; padding: 14px 18px; margin-bottom: 14px;
  box-shadow: var(--crm-shadow); animation: crm-in .3s ease both;
}
.crm-tk-synth__nums { display: flex; gap: 26px; flex-wrap: wrap; }
.crm-tk-synth__n { display: flex; flex-direction: column; }
.crm-tk-synth__n b { font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crm-tk-synth__n small { font-size: 11.5px; color: var(--crm-ink-2); margin-top: 2px; }
.crm-tk-synth__n--late b { color: var(--crm-crit-ink); }
.crm-tk-synth__n--orphan b { color: var(--crm-warn-ink); }
.crm-tk-synth__prog { display: flex; align-items: center; gap: 10px; min-width: 190px; flex: 1; }
.crm-tk-pct { font-size: 12.5px; font-weight: 600; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }

/* La barre. `<i>` porte la largeur en style inline (c'est une donnée, pas
   une décoration) ; la transition la fait bouger quand on coche. */
.crm-tk-bar { flex: 1; min-width: 90px; height: 6px; border-radius: 999px; background: var(--crm-card-2); overflow: hidden; display: block; }
.crm-tk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--crm-accent); transition: width .3s ease; }

/* ------------------------------------------------------------- le reste */
.crm-tk-cap { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--crm-ink-3); margin: 10px 2px 0; }
.crm-tk-who { min-width: 180px; }
.crm-tk-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--crm-card); color: var(--crm-ink); border: 1px solid var(--crm-line);
  border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 10px 16px; cursor: pointer; box-shadow: var(--crm-shadow);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.crm-tk-secondary:hover { transform: translateY(-1px); box-shadow: var(--crm-shadow-lift); background: var(--crm-accent-soft); }
.crm-tk-secondary:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }

/* « Nouvelle tâche » des écrans Tâches : la feuille qui demande le magasin
   (taches-vue.js, choisirMagasin). Ancrée au <body> comme les autres feuilles. */
.crm-tk-pick .crm-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.crm-tk-pick .crm-search input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--crm-ink); outline: none; }
.crm-tk-pick__list { display: flex; flex-direction: column; gap: 2px; max-height: min(52dvh, 420px); overflow-y: auto; }
.crm-tk-pick__row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--crm-ink); background: none; border: none; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.crm-tk-pick__row:hover, .crm-tk-pick__row:focus-visible { background: var(--crm-accent-soft); outline: none; }
.crm-tk-pick__row svg { flex: none; color: var(--crm-ink-3); }
.crm-tk-pick__row span { display: flex; flex-direction: column; min-width: 0; }
.crm-tk-pick__row strong { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-tk-pick__row small { font-size: 12px; color: var(--crm-ink-3); }
.crm-tk-pick__vide { padding: 14px 10px; font-size: 13px; color: var(--crm-ink-3); }

/* Sur téléphone, quatre tuiles sur une ligne donnent quatre colonnes de
   40 px : les nombres s'y coupent. Deux par deux, ils restent lisibles. */
@media (max-width: 720px) {
  .crm-tk-kpis { grid-template-columns: repeat(2, 1fr); }
  .crm-tk-synth__nums { gap: 18px; }
  .crm-tk-row { gap: 10px; }
}

/* =====================================================================
   La relance à X jours — bloc de la feuille d'activité
   =====================================================================
   Ticket dvR8pctH2SR8HbRJ7f2U. Il vit DANS `.crm-samples`, dont la case
   « j'ai laissé des échantillons » pilote déjà la visibilité — et côté
   serveur le délai fait partie du même couple atomique que les lots.

   Le liseré ambre à gauche est le seul écart de couleur du formulaire :
   c'est le seul champ qui engage quelque chose pour PLUS TARD. Tout le
   reste de la feuille décrit ce qui vient d'avoir lieu.
   ===================================================================== */
.crm-relance {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 11px; border: 1px solid var(--crm-line, #ece4d6);
  box-shadow: inset 3px 0 0 var(--crm-warn-ink, #96632a);
  background: var(--crm-card-2, #FAF6EC);
}
.crm-relance__t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--crm-ink, #282521); }
.crm-relance__sub { font-size: 12px; color: var(--crm-ink-2, #6b6355); margin-top: 2px; }
.crm-relance__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
/* Largeur fixe : le champ contient au plus trois chiffres, et un champ
   nombre pleine largeur donne l'impression qu'on attend une phrase. */
.crm-relance__n {
  width: 74px; box-sizing: border-box; font: inherit; font-size: 14px;
  border: 1px solid var(--crm-line, #ece4d6); border-radius: 10px; padding: 8px 10px;
  background: var(--crm-card, #fff); color: var(--crm-ink, #282521);
  font-variant-numeric: tabular-nums;
}
.crm-relance__n:focus { outline: none; border-color: var(--crm-accent, #A8863F); box-shadow: 0 0 0 3px var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-relance__u { font-size: 13px; color: var(--crm-ink-2, #6b6355); margin-right: 4px; }
.crm-relance__presets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.crm-relance__presets button {
  font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--crm-line-strong, #ded2bb);
  background: var(--crm-card, #fff); color: var(--crm-ink-2, #6b6355);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.crm-relance__presets button:hover { border-color: var(--crm-accent, #A8863F); color: var(--crm-accent, #A8863F); }
.crm-relance__presets button:focus-visible { outline: 2px solid var(--crm-accent, #A8863F); outline-offset: 1px; }
.crm-relance__presets button.on { background: var(--crm-accent, #A8863F); border-color: var(--crm-accent, #A8863F); color: var(--crm-accent-ink, #fff); }

/* L'ENGAGEMENT DE L'ÉCRAN. Cette ligne annonce la tâche exacte et sa
   date avant l'enregistrement ; c'est pour la tenir que le serveur
   refuse un délai hors bornes au lieu de le rogner. Elle est donc
   traitée comme une phrase à lire, pas comme une note de bas de page :
   séparée par un filet, et rouge quand elle ne peut plus rien promettre. */
.crm-relance__preview {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--crm-line-strong, #ded2bb);
  font-size: 12.5px; color: var(--crm-ink-2, #6b6355);
}
.crm-relance__preview--err { color: var(--crm-crit-ink, #a8342c); font-weight: 550; }

/* =====================================================================
   IMPORT — PLUSIEURS LOTS, AVEC LEURS QUANTITÉS
   Ticket dvR8pctH2SR8HbRJ7f2U (M. Poulin, chantier 5).
   « plusieurs lots à la fois (bouton rajouter en dessous) et indiquer le
     NOMBRE de sample du lot »
   ===================================================================== */

/* Une ligne = un lot et sa quantité. La grille donne au champ de nombre une
   largeur FIXE : en `1fr`, il occuperait la moitié de la ligne et se lirait
   comme aussi important que le lot, alors qu'on y tape deux caractères. */
.crm-simp__lot {
  display: grid; grid-template-columns: 1fr 74px 34px;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
/* `.crm-simp__f select` cible déjà les listes ; le champ de nombre n'hérite de
   rien et doit s'aligner dessus au pixel, sans quoi la ligne paraît bancale. */
.crm-simp__lot input[type="number"] {
  font: inherit; font-size: 14px; padding: 9px 8px; text-align: center;
  border: 1px solid var(--crm-line, #ece4d6); border-radius: 11px;
  background: var(--crm-card, #fff); color: var(--crm-ink, #282521);
  box-sizing: border-box; width: 100%;
}
.crm-simp__lot input[type="number"]:focus {
  outline: none; border-color: var(--crm-accent, #A8863F);
  box-shadow: 0 0 0 3px var(--crm-accent-soft, rgba(168,134,63,.1));
}
.crm-simp__lotx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--crm-ink-3, #9a927f); cursor: pointer;
}
.crm-simp__lotx:hover { background: var(--crm-crit-bg, #fdf0ee); color: var(--crm-crit-ink, #a8342c); }
.crm-simp__lotx svg { width: 16px; height: 16px; }
/* La seule ligne présente n'a pas de croix : on ne retire pas le dernier champ.
   `hidden` doit l'emporter sur l'`inline-flex` ci-dessus, qui sinon gagne. */
.crm-simp__lotx[hidden] { display: none; }

.crm-simp__add {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  padding: 7px 12px; border-radius: 10px;
  border: 1px dashed var(--crm-line-strong, #ded2bb);
  background: transparent; color: var(--crm-accent, #A8863F);
}
.crm-simp__add:hover:not(:disabled) { background: var(--crm-accent-soft, rgba(168,134,63,.1)); }
.crm-simp__add:disabled { opacity: .45; cursor: default; }
.crm-simp__add svg { width: 14px; height: 14px; }

/* Le total. Il doit se distinguer des consignes grises qui l'entourent : c'est
   le seul chiffre de cet écran qu'on confronte à la boîte qu'on vient de faire.
   `margin-top: 0` annule celui de `.crm-ship__hint` : à distance égale du bloc
   des lots et du champ suivant, il se lisait comme la légende du champ Fichier —
   vu au rendu, pas deviné. Il doit coller à ce qu'il totalise. */
#crm-simp-total:not(:empty) {
  color: var(--crm-ink-2, #6b6355); font-weight: 550; margin-top: 0;
}
#crm-simp-lot-f { margin-bottom: 18px; }

@media (max-width: 420px) {
  .crm-simp__lot { grid-template-columns: 1fr 62px 30px; }
  .crm-simp__lotx { width: 30px; height: 30px; }
}

/* =====================================================================
   NOTES PARTAGÉES DE MAGASIN (ticket dvR8pctH2SR8HbRJ7f2U)
   =====================================================================
   Onglet « Notes » de la fiche : ce qu'il faut savoir AVANT d'y aller, par
   opposition au journal qui raconte ce qui a eu lieu.
   Le corps rendu (`.crm-note__body`) porte du GMK v1 : ses puces, citations et
   écarts de paragraphe viennent du bloc « Mise en forme » de public/style.css,
   où cette classe est nommée avec les trois autres surfaces. Ne pas les
   redéfinir ici — deux allures pour un même format finiraient par diverger. */

/* Le composeur. Une bordure en pointillé plutôt qu'une carte pleine : ce n'est
   pas encore une note, c'est l'endroit où l'on en écrit une. */
.crm-note-new { border-style: dashed; }
.crm-note-new .crm-section__label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crm-note-new__scope {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 11.5px; color: var(--crm-ink-3);
}
.crm-note-new__send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
/* `.crm-ship__hint` porte une marge haute faite pour un empilement vertical :
   sur une rangée, elle décale le texte sous le bouton. */
.crm-note-new__send .crm-ship__hint { margin-top: 0; }

/* Le champ. Le <textarea> reste la source de vérité même quand l'éditeur
   enrichi le masque (richtext.js le rend mandataire) : les deux surfaces
   doivent donc avoir EXACTEMENT la même allure, sinon la boîte saute au
   montage de l'éditeur. */
.crm-note-field textarea,
.crm-note-field .grt-editor {
  width: 100%; box-sizing: border-box; min-height: 76px;
  background: var(--crm-card-2); border: 1px solid var(--crm-line);
  border-radius: 12px; padding: 10px 12px;
  font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--crm-ink);
  resize: vertical;
}
.crm-note-field textarea:focus,
.crm-note-field .grt-editor:focus { outline: none; border-color: var(--crm-accent); }
.crm-note-field textarea::placeholder { color: var(--crm-ink-3); }
.crm-note-field__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.crm-note-field__foot .crm-ship__hint { margin-top: 0; }
/* Ancre du bouton « Aa » et de son infobulle de mise en forme
   (richtext.js, `barContainer`). Sans `position: relative`, l'infobulle se
   positionnerait par rapport à la fiche entière. */
.crm-note-bar { position: relative; display: inline-flex; align-items: center; }

/* Une note. */
.crm-note {
  background: var(--crm-card); border: 1px solid var(--crm-line);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--crm-shadow);
}
.crm-note__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.crm-note__head .crm-mono {
  width: 32px; height: 32px; border-radius: 10px; font-size: 11.5px;
  background: var(--crm-accent-soft); color: var(--crm-accent);
}
.crm-note__who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.crm-note__who strong { font-size: 13.5px; font-weight: 600; color: var(--crm-ink); }
.crm-note__who em { font-style: normal; font-size: 12px; color: var(--crm-ink-3); }
.crm-note__edited { font-size: 11.5px; color: var(--crm-ink-3); font-style: italic; }

/* Les deux actions restent DISCRÈTES : sur une note qu'on relit, « Supprimer »
   ne doit pas peser autant que le texte. Elles apparaissent au survol de la
   carte, mais restent visibles en permanence au doigt — sur mobile il n'y a
   pas de survol, et une action qu'on ne voit jamais n'existe pas. */
.crm-note__actions { display: flex; gap: 4px; flex: none; opacity: .35; transition: opacity .14s ease; }
.crm-note:hover .crm-note__actions,
.crm-note:focus-within .crm-note__actions { opacity: 1; }
.crm-note__actions button {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--crm-ink-2); padding: 5px 8px;
}
.crm-note__actions button:hover { background: var(--crm-accent-soft); color: var(--crm-ink); }
.crm-note__actions svg { width: 13px; height: 13px; }

/* Le corps. `pre-wrap` sert le chemin SANS mise en forme (texte nu échappé) :
   les retours à la ligne y sont la seule mise en page disponible, et les
   perdre collerait quatre lignes de consignes en un bloc. Le rendu GMK, lui,
   fabrique ses propres blocs — d'où le retour à `normal` sous ses éléments. */
.crm-note__body { font-size: 13.5px; line-height: 1.6; color: var(--crm-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-note__body .grt-p, .crm-note__body .grt-h, .crm-note__body li,
.crm-note__body .grt-quote, .crm-note__body .grt-pre { white-space: normal; }
.crm-note__body .grt-pre { white-space: pre-wrap; }
/* En correction, le corps n'affiche plus une note mais un formulaire : les
   sauts de ligne du gabarit ne doivent plus compter. */
.crm-note__body--edit { white-space: normal; }
.crm-note__body a { color: var(--crm-accent); }

.crm-note-edit__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* Au doigt, il n'y a pas de survol : les actions restent pleinement visibles.
   Leur libellé aussi — deux boutons réduits à un crayon et une poubelle se
   confondent, et « Supprimer » est la seule action qu'on ne peut pas défaire. */
@media (hover: none) {
  .crm-note__actions { opacity: 1; }
}

/* Le bouton « Aa » de mise en forme (richtext.js, `barContainer`). Sa taille
   par défaut — 42 px, Georgia 18 px — est celle de la rangée d'outils du
   composeur de chat. Posé ici sur une ligne de légende de 12 px, il pèse comme
   un titre et ne se lit plus comme un bouton. Le chat fait déjà exactement cet
   ajustement pour sa boîte de MODIFICATION (style.css, .chat-msg-editwrap). */
.crm-note-field .grt-fmt-btn {
  width: 30px; height: 30px; font-size: 14px; border-radius: 9px;
  border-color: var(--crm-line); color: var(--crm-ink-2);
  /* « Aa » se coupait en deux lignes dans la boîte de correction, plus
     étroite. Le chat porte déjà ces deux mêmes déclarations pour la sienne. */
  white-space: nowrap; word-wrap: normal;
}
.crm-note-field .grt-fmt-btn:hover { background: var(--crm-accent-soft); color: var(--crm-ink); }

/* L'infobulle de mise en forme s'ouvre depuis le bouton « Aa », qui est ici à
   l'EXTRÊME GAUCHE du champ. Centrée sur lui (`left:50%` + `translateX(-50%)`,
   le réglage du chat où le bouton siège au milieu d'une rangée d'outils), elle
   débordait de 130 px hors de la carte : gras, italique, souligné et barré
   sortaient de l'écran. Ancrée à gauche, elle s'ouvre vers la droite.
   La flèche suit le bouton (30 px de large, donc son milieu à 15 px). */
.crm-note-field .grt-bar.grt-pop { left: 0; transform: none; }
.crm-note-field .grt-bar.grt-pop::after { left: 15px; transform: none; }

/* =====================================================================
   FILTRE DE LECTURE DU JOURNAL D'ACTIVITÉS
   =====================================================================
   Depuis que les commandes s'inscrivent toutes seules, une fiche accumule des
   entrées que personne n'a écrites. La rangée n'apparaît que s'il y a au moins
   deux types à distinguer (public/js/modules/crm/activities.js) : sur une
   fiche qui n'a que des visites, elle serait un décor. */
.crm-act-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.crm-act-filter {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--crm-card-2); border: 1px solid var(--crm-line);
  border-radius: 999px; padding: 5px 11px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--crm-ink-2);
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.crm-act-filter:hover { border-color: var(--crm-accent); color: var(--crm-ink); }
.crm-act-filter.on {
  background: var(--crm-accent); border-color: var(--crm-accent);
  color: var(--crm-accent-ink); font-weight: 550;
}
/* Le compte vit DANS la pastille : posé à côté, il se lirait comme un second
   bouton. Sur la pastille active il doit rester lisible sur fond doré. */
.crm-act-filter span {
  font-size: 11px; font-weight: 600; opacity: .7;
  background: rgba(40, 34, 24, .08); border-radius: 999px; padding: 1px 6px;
}
.crm-act-filter.on span { background: rgba(255, 255, 255, .22); opacity: 1; }
body[data-gtheme="dark"] .crm-act-filter span { background: rgba(221, 203, 164, .14); }

/* ---- Sondages budtenders (public/js/modules/crm/sondages.js) ----
   Reprend la grille des ventes sans magasin (.crm-orph-*) : même liste,
   même sélecteur de boutique. Ici seulement ce qui lui est propre. */
.crm-sond-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.crm-sond-tools .crm-orph-q { flex: 1 1 220px; margin: 0; }
.crm-sond-note { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--crm-social-bg, #efe7fb); color: var(--crm-social, #6b3fa0); }
.crm-sond-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.crm-sond-store { background: none; border: 0; padding: 0; color: var(--accent, #2457c5); font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.crm-sond-store:hover { text-decoration: underline; }
.crm-sond-item .crm-orph-act { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-sond-detail { margin-top: 12px; border-top: 1px solid var(--border, #e3e8ef); padding-top: 12px; }
.crm-sond-meta, .crm-sond-qas { margin: 0; display: grid; gap: 8px; }
.crm-sond-meta { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 14px; }
.crm-sond-meta dt, .crm-sond-qa dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6b7785); margin: 0 0 2px; }
.crm-sond-meta dd, .crm-sond-qa dd { margin: 0; font-size: 14px; white-space: pre-wrap; }
.crm-sond-skip { color: var(--text-muted, #6b7785); font-style: italic; }

/* ==============================================================
   Tableau de bord KPI Bleuh Ontario (ticket yRKEOJAIPzTcF7V7DUOn)
   Jetons de couleur PAR FONCTION, validés au script (contraste vs carte,
   daltonismes protan/deutan, écart en vision normale) en clair ET en sombre :
     • une teinte fixe par source (règle 3 du script : jamais mélangées) ;
     • les paliers de récence sur deux bras — actifs en vert, inactifs en terre
       cuite, chacun foncé à l'extrême (Récent, Perdu) — et « jamais commandé »
       en neutre ; en sombre l'escalier s'inverse : le fort est le clair ;
     • une seule teinte dorée, du clair au foncé, pour les cartes de chaleur.
   ===================================================================== */
.crm-tb {
  /* Bleuh dans ses comparaisons (indice de prix) : le bleu de la marque, pas une couleur de source. */
  --tb-bleuh: #0533A1;
  --tb-commande: #A07B25; --tb-forecast: #3568B8; --tb-officielle: #C9533A; --tb-cin7: #118A6A; --tb-panel: #8E5FB5;
  --tb-actif-1: #1F6B46; --tb-actif-2: #3E9A64; --tb-actif-3: #74B98D;
  --tb-inactif-1: #D9907D; --tb-inactif-2: #C4614F; --tb-inactif-3: #8C3A2E;
  --tb-neutre: #D9D3C7;
  --tb-gain-1: #1F6B46; --tb-gain-2: #74B98D; --tb-perte: #C4614F;
  --tb-heat-1: #F1E7D0; --tb-heat-2: #E2CF9F; --tb-heat-3: #CDB070; --tb-heat-4: #B08F48; --tb-heat-5: #8C6E2F; --tb-heat-6: #5E4820;
  /* Statut d'entente sur la carte (page 3) : bleu, doré, terre cuite — validés au script (daltonismes, vision normale) ; « sans entente » = gris plein. */
  --tb-ent-above: #2F6DB5; --tb-ent-pace: #D9A621; --tb-ent-below: #B5482A; --tb-ent-sans: #A39C90;
  /* Fond de la carte : les voisins, l'Ontario un ton plus clair, l'eau. */
  --tb-carte-voisins: #ECE7DC; --tb-carte-terre: #FBF9F4; --tb-carte-eau: #CFDDE6; --tb-carte-bord: rgba(40, 34, 24, .28);
  max-width: 1220px; margin: 0 auto; color: var(--crm-ink);
}
body[data-gtheme="dark"] .crm-tb {
  --tb-bleuh: #92C0E9;
  --tb-commande: #AD8834; --tb-forecast: #5A8BD6; --tb-officielle: #DE6648; --tb-cin7: #169A78; --tb-panel: #A47ED2;
  --tb-actif-1: #8CCBA3; --tb-actif-2: #4F9E70; --tb-actif-3: #2F6E4A;
  --tb-inactif-1: #9A4A3C; --tb-inactif-2: #C26A59; --tb-inactif-3: #E6A598;
  --tb-neutre: #4A443A;
  --tb-gain-1: #8CCBA3; --tb-gain-2: #4F9E70; --tb-perte: #C26A59;
  --tb-heat-1: #3A3326; --tb-heat-2: #54472E; --tb-heat-3: #725F37; --tb-heat-4: #937A44; --tb-heat-5: #B79B5A; --tb-heat-6: #D9C084;
  --tb-ent-above: #5A8BD6; --tb-ent-pace: #B18A22; --tb-ent-below: #BF4B2F; --tb-ent-sans: #847C6F;
  --tb-carte-voisins: #26231e; --tb-carte-terre: #3a352d; --tb-carte-eau: #1f2d36; --tb-carte-bord: rgba(221, 203, 164, .3);
}
.crm-tb.is-charge .crm-tb-corps { opacity: .55; transition: opacity .15s ease; }

/* En-tête de page : la question est le titre (script §6, une question par page). */
.crm-tb-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 2px 14px; }
.crm-tb-surtitre { display: block; color: var(--crm-accent); font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.crm-tb-tete h1 { margin: 4px 0 0; font: 700 26px/1.15 'Outfit', sans-serif; letter-spacing: -.02em; }
.crm-tb-tete p { margin: 4px 0 0; color: var(--crm-ink-2); font-size: 12.5px; }
.crm-tb-retour, .crm-tb-btn, .crm-tb-reset, .crm-tb-export { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--crm-line); border-radius: 8px; background: var(--crm-card); color: var(--crm-ink); font: 600 12.5px 'Inter', sans-serif; cursor: pointer; }
.crm-tb-retour:hover, .crm-tb-btn:hover, .crm-tb-reset:hover:not(:disabled), .crm-tb-export:hover { border-color: var(--crm-line-strong); }
.crm-tb-retour:focus-visible, .crm-tb-btn:focus-visible, .crm-tb-reset:focus-visible, .crm-tb-export:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
.crm-tb-reset:disabled { opacity: .5; cursor: default; }
.crm-tb-export { min-height: 32px; padding: 0 10px; font-size: 12px; }
.crm-tb .gicon { width: 15px; height: 15px; flex: none; }

/* Les six pages : un onglet par question. */
.crm-tb-pages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.crm-tb-page { display: flex; align-items: flex-start; gap: 9px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card); color: var(--crm-ink); text-align: left; cursor: pointer; font: inherit; }
.crm-tb-page span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-tb-page b { font-size: 12.5px; font-weight: 650; }
.crm-tb-page small { font-size: 11px; color: var(--crm-ink-2); line-height: 1.3; }
.crm-tb-page:hover { border-color: var(--crm-line-strong); }
.crm-tb-page.on { border-color: var(--crm-accent); box-shadow: 0 0 0 1px var(--crm-accent) inset; background: var(--crm-accent-soft); }
.crm-tb-page:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }

/* La barre de filtres : une seule, au-dessus de tout ce qu'elle découpe. */
.crm-tb-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding: 10px 12px; margin: 0 0 14px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card); }
.crm-tb-filtre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crm-tb-filtre__lbl { font-size: 10.5px; font-weight: 650; color: var(--crm-ink-2); letter-spacing: .02em; }
.crm-tb-filtre__sel { height: 36px; max-width: 220px; padding: 0 28px 0 10px; border: 1px solid var(--crm-line); border-radius: 8px; background-color: var(--crm-card); color: var(--crm-ink); font: 500 12.5px 'Inter', sans-serif; }
.crm-tb-filtre__sel:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
.crm-tb-filtre.is-grise { opacity: .45; }
.crm-tb-filtre.is-grise .crm-tb-filtre__lbl::after { content: ' · non filtré'; font-weight: 500; }
.crm-tb-bascule { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--crm-line); border-radius: 8px; background: var(--crm-card-2); }
.crm-tb-bascule button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--crm-ink-2); font: 600 12px 'Inter', sans-serif; cursor: pointer; }
.crm-tb-bascule button[aria-pressed="true"] { background: var(--crm-ink); color: var(--crm-card); }
.crm-tb-cases { display: flex; flex-wrap: wrap; gap: 4px 10px; min-height: 36px; align-items: center; font-size: 12px; }
.crm-tb-fixe { display: inline-flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 8px; background: var(--crm-card-2); font-size: 12.5px; }
.crm-tb-reset { margin-left: auto; }

/* Corps : deux colonnes sur grand écran, une sur téléphone. */
.crm-tb-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.crm-tb-corps > .crm-tb-tuiles, .crm-tb-corps > .crm-tb-carte--large, .crm-tb-corps > .crm-tb-duo, .crm-tb-corps > .crm-tb-etat, .crm-tb-corps > .crm-tb-nd--page, .crm-tb-corps > .crm-error { grid-column: 1 / -1; }
.crm-tb-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* La tuile standard : valeur, écart, mini-courbe, source. */
.crm-tb-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
/* Une rangée de tuiles tient sur une ligne au bureau (6, 4 ou 3), puis se replie
   en colonnes égales — jamais une tuile orpheline sur sa ligne. */
.crm-tb-tuiles--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.crm-tb-tuiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.crm-tb-tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crm-tb-tuiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .crm-tb-tuiles--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-tb-tuiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .crm-tb-tuiles--6, .crm-tb-tuiles--5, .crm-tb-tuiles--4, .crm-tb-tuiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm-tb-tuile { position: relative; padding: 13px 15px 12px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card); min-height: 132px; }
.crm-tb-tuile header { display: flex; flex-direction: column; gap: 2px; padding-right: 26px; }
.crm-tb-tuile h3 { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--crm-ink-2); }
.crm-tb-source { font-size: 10.5px; color: var(--crm-ink-3); }
.crm-tb-tuile__valeur { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crm-tb-tuile__valeur strong { font: 700 30px/1.05 'Outfit', sans-serif; letter-spacing: -.02em; }
.crm-tb-tuile.is-nd .crm-tb-tuile__valeur strong { color: var(--crm-ink-3); }
.crm-tb-tuile__sous, .crm-tb-tuile__detail, .crm-tb-tuile__nd { margin: 5px 0 0; font-size: 11.5px; color: var(--crm-ink-2); }
.crm-tb-tuile__nd { color: var(--crm-ink-3); }
.crm-tb-tuile__alerte { margin: 6px 0 0; display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--crm-warn-ink); }
.crm-tb-tuile__info { position: absolute; top: 9px; right: 9px; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--crm-ink-3); cursor: help; }
.crm-tb-tuile__info:hover, .crm-tb-tuile__info:focus-visible { color: var(--crm-ink); background: var(--crm-card-2); outline: none; }
.crm-tb-spark { display: block; width: 100%; max-width: 160px; height: 30px; margin-top: 8px; overflow: visible; }
.crm-tb-spark path { fill: none; stroke: var(--crm-ink-3); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.crm-tb-spark circle { fill: var(--crm-accent); stroke: var(--crm-card); stroke-width: 2; }
.crm-tb-ecart { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; border: 1px solid var(--crm-line); }
.crm-tb-ecart .gicon { width: 12px; height: 12px; }
.crm-tb-ecart--bon { color: var(--crm-ok-ink); background: var(--crm-ok-bg); border-color: transparent; }
.crm-tb-ecart--mauvais { color: var(--crm-crit-ink); background: var(--crm-crit-bg); border-color: transparent; }
.crm-tb-ecart--neutre, .crm-tb-ecart--nd { color: var(--crm-ink-2); background: var(--crm-card-2); }

/* La carte d'un graphique : titre, ⓘ, non filtré, corps, légende, données. */
.crm-tb-carte { position: relative; margin: 0; padding: 15px 16px 14px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card); min-width: 0; }
.crm-tb-carte__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.crm-tb-carte__tete h3 { margin: 0; font: 650 16px/1.25 'Outfit', sans-serif; }
.crm-tb-carte__tete p { margin: 3px 0 0; font-size: 12px; color: var(--crm-ink-2); line-height: 1.4; }
.crm-tb-carte__actions { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.crm-tb-infobtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--crm-line); border-radius: 8px; background: var(--crm-card); color: var(--crm-ink-2); cursor: pointer; }
.crm-tb-infobtn[aria-expanded="true"] { border-color: var(--crm-accent); color: var(--crm-ink); }
.crm-tb-infobtn:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
.crm-tb-infopanel { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--crm-card-2); font-size: 12px; }
.crm-tb-infopanel[hidden] { display: none; }
.crm-tb-infopanel div { display: contents; }
.crm-tb-infopanel dt { color: var(--crm-ink-2); font-weight: 600; }
.crm-tb-infopanel dd { margin: 0; }
.crm-tb-nonfiltre { display: flex; align-items: center; gap: 5px; margin: 0 0 8px; font-size: 11.5px; color: var(--crm-ink-3); }
.crm-tb-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--crm-ink-2); }
.crm-tb-cle { display: inline-flex; align-items: center; gap: 6px; }
.crm-tb-cle__carre { width: 10px; height: 10px; border-radius: 3px; }
.crm-tb-cle__trait { width: 16px; height: 2px; border-radius: 2px; }
.crm-tb-donnees { margin-top: 10px; font-size: 12px; }
.crm-tb-donnees summary { cursor: pointer; color: var(--crm-ink-2); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.crm-tb-donnees summary:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; border-radius: 6px; }
.crm-tb-tablewrap { overflow-x: auto; }
.crm-tb-tablewrap table, .crm-tb-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.crm-tb-tablewrap th, .crm-tb-tablewrap td { padding: 6px 8px; border-bottom: 1px solid var(--crm-line); text-align: right; white-space: nowrap; }
.crm-tb-tablewrap th:first-child, .crm-tb-tablewrap td:first-child { text-align: left; }
.crm-tb-tablewrap thead th { color: var(--crm-ink-2); font-weight: 650; font-size: 11px; }
.crm-tb-table tbody th { font-weight: 600; }
.crm-tb-table td.crm-tb-texte { text-align: left; white-space: normal; min-width: 160px; }
.crm-tb-cliquable { cursor: pointer; }
.crm-tb-cliquable:hover, .crm-tb-cliquable:focus-visible { background: var(--crm-accent-soft); outline: none; }
.crm-tb-groupe th { white-space: nowrap; }
.crm-tb-sous th { padding-left: 34px; font-weight: 500; }
.crm-tb-deplier { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--crm-ink-2); cursor: pointer; vertical-align: middle; }
.crm-tb-deplier .gicon { transition: transform .15s ease; }
.crm-tb-deplier[aria-expanded="true"] .gicon { transform: rotate(90deg); }
.crm-tb-lien { border: 0; padding: 0; background: none; color: var(--crm-ink); font: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: var(--crm-line-strong); text-underline-offset: 3px; cursor: pointer; }
.crm-tb-lien:hover, .crm-tb-lien:focus-visible { text-decoration-color: var(--crm-accent); outline: none; }
.crm-tb-vide { margin: 8px 0; font-size: 12px; color: var(--crm-ink-3); }
.crm-tb-alerte { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--crm-warn-bg); color: var(--crm-warn-ink); font-size: 12px; }

/* L'état vide : N/D et sa raison — jamais une courbe plate à zéro. */
.crm-tb-nd { display: grid; place-items: center; gap: 4px; min-height: 120px; padding: 18px; border: 1px dashed var(--crm-line-strong); border-radius: 10px; text-align: center; }
.crm-tb-nd b { font: 700 20px 'Outfit', sans-serif; color: var(--crm-ink-3); }
.crm-tb-nd p { margin: 0; max-width: 60ch; font-size: 12.5px; color: var(--crm-ink-2); }
.crm-tb-nd--page { min-height: 220px; background: var(--crm-card); }

/* Les graphiques SVG : marques fines, grille en filet, axes discrets. */
.crm-tb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.crm-tb-grille { stroke: var(--crm-line); stroke-width: 1; }
.crm-tb-base { stroke: var(--crm-line-strong); stroke-width: 1; }
.crm-tb-axe { fill: var(--crm-ink-3); font: 500 10.5px 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.crm-tb-etiq { fill: var(--crm-ink); font: 650 11.5px 'Inter', sans-serif; }
.crm-tb-hit { fill: transparent; cursor: pointer; }
.crm-tb-hit.is-survol, .crm-tb-hit:focus-visible { fill: var(--crm-accent-soft); outline: none; }
.crm-tb-ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.crm-tb-ligne--encre { stroke: var(--crm-ink); }
.crm-tb-point { stroke: var(--crm-card); stroke-width: 2; }
.crm-tb-point--encre { fill: var(--crm-ink); }

/* Barre segmentée (répartition par palier) et sa légende chiffrée. */
.crm-tb-segbar { display: flex; gap: 2px; height: 34px; border-radius: 8px; overflow: hidden; }
.crm-tb-seg { display: grid; place-items: center; min-width: 3px; border: 0; padding: 0; cursor: pointer; font: 650 11.5px 'Inter', sans-serif; }
.crm-tb-seg:focus-visible, .crm-tb-seg.is-survol { outline: 2px solid var(--crm-ink); outline-offset: -2px; }
.crm-tb-seg--RECENT, .crm-tb-seg--SLOWING, .crm-tb-seg--DELINQUENT, .crm-tb-seg--LAPSED { color: #fff; }
.crm-tb-seg--AT_RISK_ACTIVE, .crm-tb-seg--RECOVERY, .crm-tb-seg--NONE { color: #282521; }
body[data-gtheme="dark"] .crm-tb-seg--RECENT, body[data-gtheme="dark"] .crm-tb-seg--LAPSED { color: #241f16; }
body[data-gtheme="dark"] .crm-tb-seg--AT_RISK_ACTIVE, body[data-gtheme="dark"] .crm-tb-seg--RECOVERY, body[data-gtheme="dark"] .crm-tb-seg--NONE { color: #fff; }
.crm-tb-palliste { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.crm-tb-palliste button { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--crm-ink); font: 500 12.5px 'Inter', sans-serif; text-align: left; cursor: pointer; }
.crm-tb-palliste button:hover, .crm-tb-palliste button:focus-visible { background: var(--crm-card-2); outline: none; }
.crm-tb-palliste i { width: 10px; height: 10px; border-radius: 3px; }
.crm-tb-palliste b { font-variant-numeric: tabular-nums; }
.crm-tb-palliste small { color: var(--crm-ink-3); font-variant-numeric: tabular-nums; }

/* Carte de chaleur : un tableau dont la couleur souligne la grandeur. */
.crm-tb-heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.crm-tb-heat th { padding: 6px 8px; font-weight: 600; color: var(--crm-ink-2); font-size: 11px; white-space: nowrap; border: 0; }
.crm-tb-heat__coin span { display: block; font-size: 10px; color: var(--crm-ink-3); }
.crm-tb-heat__c { min-width: 52px; padding: 9px 6px; text-align: center !important; border-radius: 4px; border: 0 !important; background: var(--crm-card-2); color: var(--crm-ink-3); cursor: default; }
.crm-tb-heat__c--1 { background: var(--tb-heat-1); color: #282521; }
.crm-tb-heat__c--2 { background: var(--tb-heat-2); color: #282521; }
.crm-tb-heat__c--3 { background: var(--tb-heat-3); color: #282521; }
.crm-tb-heat__c--4 { background: var(--tb-heat-4); color: #fff; }
.crm-tb-heat__c--5 { background: var(--tb-heat-5); color: #fff; }
.crm-tb-heat__c--6 { background: var(--tb-heat-6); color: #fff; }
body[data-gtheme="dark"] .crm-tb-heat__c--1, body[data-gtheme="dark"] .crm-tb-heat__c--2, body[data-gtheme="dark"] .crm-tb-heat__c--3 { color: #fff; }
body[data-gtheme="dark"] .crm-tb-heat__c--4, body[data-gtheme="dark"] .crm-tb-heat__c--5, body[data-gtheme="dark"] .crm-tb-heat__c--6 { color: #241f16; }
.crm-tb-heat__c.is-diag { box-shadow: 0 0 0 2px var(--crm-ink) inset; }
.crm-tb-heat__c:focus-visible, .crm-tb-heat__c.is-survol { outline: 2px solid var(--crm-accent); outline-offset: 0; }
/* Colonne des libellés figée au défilement horizontal (cadence : 26 semaines) ; l'ombre de la carte couvre l'espacement des cellules. */
.crm-tb-heat th[scope="row"], .crm-tb-heat .crm-tb-heat__coin { position: sticky; left: 0; z-index: 1; background: var(--crm-card); text-align: left; box-shadow: -2px 0 0 var(--crm-card), 2px 0 0 var(--crm-card); }
.crm-tb-heat .crm-tb-heat__coin { z-index: 2; }
/* Un filet sous chaque libellé et la ligne survolée surlignée : l'œil suit le SKU jusqu'à ses cellules. */
.crm-tb-heat th[scope="row"] { border-bottom: 1px solid var(--crm-line-strong); }
.crm-tb-heat tr:hover > th[scope="row"] { background: var(--crm-card-2); color: var(--crm-ink); box-shadow: -2px 0 0 var(--crm-card-2), 2px 0 0 var(--crm-card-2); }
.crm-tb-heat tr:hover > .crm-tb-heat__c { box-shadow: 0 -1px 0 var(--crm-ink-3) inset, 0 1px 0 var(--crm-ink-3) inset; }
.crm-tb-heat tr:hover > .crm-tb-heat__c.is-diag { box-shadow: 0 0 0 2px var(--crm-ink) inset; }
.crm-tb-heatcle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 11px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.crm-tb-heatcle__pas { display: inline-flex; align-items: center; gap: 5px; }
.crm-tb-heatcle__pas i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 14px; border-radius: 3px; font-style: normal; }
.crm-tb-heatcle__pas i.crm-tb-heat__c--0 { background: var(--crm-card-2); color: var(--crm-ink-3); }
.crm-tb-heatcle__bout { font-weight: 600; color: var(--crm-ink); }
.crm-tb-heatcle__unite { color: var(--crm-ink-3); }

/* L'infobulle : la valeur d'abord, le libellé ensuite. */
.crm-tb-tip { position: absolute; z-index: 30; min-width: 160px; max-width: 280px; padding: 8px 10px; border: 1px solid var(--crm-line); border-radius: 8px; background: var(--crm-card); box-shadow: var(--crm-shadow-lift); font-size: 12px; pointer-events: none; }
.crm-tb-tip__titre { margin-bottom: 4px; color: var(--crm-ink-2); font-weight: 600; }
.crm-tb-tip__ligne { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.crm-tb-tip__ligne i { width: 12px; height: 2px; border-radius: 2px; flex: none; }
.crm-tb-tip__ligne b { font-variant-numeric: tabular-nums; }
.crm-tb-tip__ligne span { color: var(--crm-ink-2); }

/* La barre d'état, en bas de chaque page. */
.crm-tb-etat { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 2px 2px; border-top: 1px solid var(--crm-line); font-size: 11.5px; color: var(--crm-ink-2); }
.crm-tb-etat__alerte { display: inline-flex; align-items: center; gap: 5px; color: var(--crm-warn-ink); }

@media (max-width: 1100px) {
  .crm-tb-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .crm-tb-pages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .crm-tb-page { flex: 0 0 210px; scroll-snap-align: start; min-height: 64px; }
  .crm-tb-corps, .crm-tb-duo { grid-template-columns: minmax(0, 1fr); }
  .crm-tb-tete { flex-direction: column; align-items: flex-start; }
  .crm-tb-filtre__sel { max-width: none; }
  .crm-tb-filtre { flex: 1 1 140px; }
  .crm-tb-reset { margin-left: 0; }
}
.crm-tb-actions-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.crm-tb-ligne--forte { stroke-width: 2.5; }
.crm-tb-point--creux { fill: var(--crm-card); stroke-width: 2; }
.crm-tb-etiq--ecart { fill: var(--crm-ink-2); font-weight: 600; }
.crm-tb-petite { display: block; width: 100%; height: auto; max-height: 72px; }
.crm-tb-bout { margin: 0 0 6px; font-size: 12.5px; color: var(--crm-ink-2); }
/* Matrice de transition : comment la lire, au-dessus du tableau. */
.crm-tb-lecture { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--crm-ink-2); line-height: 1.45; }
.crm-tb-lecture li + li { margin-top: 2px; }
.crm-tb-bout b { color: var(--crm-ink); }
.crm-tb-skus { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.crm-tb-sku { padding: 12px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card); }
.crm-tb-sku header { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.crm-tb-sku__rang { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--crm-card-2); font: 700 13px 'Outfit', sans-serif; flex: none; }
.crm-tb-sku h4 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.3; }
.crm-tb-sku small { color: var(--crm-ink-3); font-size: 11px; }
.crm-tb-sku dl { margin: 0; display: grid; gap: 4px; font-size: 12px; }
.crm-tb-sku dl div { display: flex; justify-content: space-between; gap: 8px; }
.crm-tb-sku dt { color: var(--crm-ink-2); }
.crm-tb-sku dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.crm-tb-alertes { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.crm-tb-alertes button { display: grid; grid-template-columns: 1fr auto 16px; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--crm-ink); font: 500 12.5px 'Inter', sans-serif; text-align: left; cursor: pointer; }
.crm-tb-alertes button:hover, .crm-tb-alertes button:focus-visible { background: var(--crm-card-2); outline: none; }
.crm-tb-alertes b { font-variant-numeric: tabular-nums; }
/* Commandé et Vendu : deux sections titrées, jamais combinées (§6, page 4).
   Empilées : un tableau de SKU à huit colonnes ne tient pas dans une demi-largeur. */
.crm-tb-colonnes { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.crm-tb-colonnes > div { display: grid; gap: 14px; min-width: 0; }
.crm-tb-colonne__titre { display: flex; align-items: center; gap: 8px; margin: 0; font: 650 14px 'Outfit', sans-serif; }
.crm-tb-colonne__titre i { width: 12px; height: 12px; border-radius: 3px; }
.crm-tb-heat__c { min-width: 30px; padding: 6px 4px; font-size: 11px; }
.crm-tb-barrette { display: inline-block; width: 90px; height: 8px; margin-right: 8px; border-radius: 4px; background: var(--crm-card-2); vertical-align: middle; overflow: hidden; }
.crm-tb-barrette i { display: block; height: 100%; background: var(--tb-gain-1); }
.crm-tb-barrette.is-negatif i { background: var(--tb-perte); }
.crm-tb-lancements { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.crm-tb-lancement { padding: 12px; border: 1px solid var(--crm-line); border-radius: 10px; }
.crm-tb-lancement h4 { margin: 0 0 6px; font-size: 13px; font-weight: 650; }
.crm-tb-lancement h4 small { color: var(--crm-ink-3); font-weight: 500; }
.crm-tb-lancement p { margin: 4px 0 0; font-size: 11.5px; color: var(--crm-ink-2); }

/* ── Tableau de bord KPI : écrans d'administration (lot 3) ──────────────
   Personnes et rôles, Ententes, Journal : le gabarit d'Admin › Paramètres
   (crm-cfg), avec leurs tableaux et leurs formulaires. */
.crm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crm-tba .crm-card { margin-bottom: 14px; }
.crm-tba-bandeau { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--crm-ink-2); background: var(--crm-accent-soft); border-color: var(--crm-accent); }
.crm-tba-puce { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; margin: 1px 2px 1px 0; border-radius: 999px; background: var(--crm-card-2); border: 1px solid var(--crm-line); font-size: 11.5px; font-weight: 600; color: var(--crm-ink); }
.crm-tba-puce--off { background: transparent; color: var(--crm-ink-2); border-style: dashed; }
.crm-tba-recherche { width: 100%; max-width: 360px; height: 36px; margin: 4px 0 10px; padding: 0 10px; border: 1px solid var(--crm-line); border-radius: 8px; background: var(--crm-card); color: var(--crm-ink); font: 500 12.5px 'Inter', sans-serif; }
.crm-tba-recherche:focus-visible, .crm-tba input:focus-visible, .crm-tba select:focus-visible, .crm-tba textarea:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
.crm-tba-table tr.is-ouvert td { background: var(--crm-card-2); }
.crm-tba-edit td { background: var(--crm-card-2); padding: 12px; }
.crm-tba-editgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.crm-tba-editgrid fieldset { margin: 0; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card); }
.crm-tba-editgrid legend { padding: 0 4px; font-size: 11px; font-weight: 700; color: var(--crm-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.crm-tba-editgrid textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--crm-line); border-radius: 8px; padding: 6px 8px; background: var(--crm-card); color: var(--crm-ink); font: 500 12px 'Inter', sans-serif; }
.crm-tba-case { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 12.5px; cursor: pointer; }
.crm-tba-case input { width: 16px; height: 16px; accent-color: var(--crm-accent); }
.crm-tba-roles th.crm-tba-perm { min-width: 74px; max-width: 96px; font-size: 10.5px; line-height: 1.25; white-space: normal; vertical-align: bottom; }
.crm-tba-roles td.crm-tba-perm { text-align: center; }
.crm-tba-roles td.crm-tba-perm input { width: 17px; height: 17px; accent-color: var(--crm-accent); }
.crm-tba-roles th[scope="row"] input { display: block; width: 100%; max-width: 220px; margin: 2px 0; height: 30px; padding: 0 8px; border: 1px solid var(--crm-line); border-radius: 6px; background: var(--crm-card); color: var(--crm-ink); }
.crm-tba-btns { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.crm-tba-histo, .crm-tba-evs { list-style: none; margin: 0; padding: 0; }
.crm-tba-histo li { padding: 7px 0; border-top: 1px solid var(--crm-line); font-size: 12.5px; }
.crm-tba-histo li:first-child { border-top: 0; }
.crm-tba-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; margin: 6px 0 14px; }
.crm-tba-champs label, .crm-tba-filtres label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 650; color: var(--crm-ink-2); }
.crm-tba-champs input, .crm-tba-champs select, .crm-tba-champs textarea, .crm-tba-filtres input, .crm-tba-filtres select { min-height: 36px; padding: 0 10px; border: 1px solid var(--crm-line); border-radius: 8px; background: var(--crm-card); color: var(--crm-ink); font: 500 12.5px 'Inter', sans-serif; }
.crm-tba-champs textarea { padding: 8px 10px; min-height: 52px; }
.crm-tba-champs input[type="file"] { padding: 6px 8px; }
.crm-tba-large { grid-column: 1 / -1; }
.crm-tba-repart tr.is-exclu td { color: var(--crm-ink-3); }
.crm-tba-num { width: 110px; min-height: 30px; padding: 0 8px; border: 1px solid var(--crm-line); border-radius: 6px; background: var(--crm-card); color: var(--crm-ink); font: 600 12.5px 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.crm-tba-avert { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; }
.crm-tba-histo-ent { margin-top: 12px; font-size: 12.5px; }
.crm-tba-histo-ent summary { cursor: pointer; font-weight: 650; }
.crm-tba-filtres { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.crm-tba-ev { padding: 10px 0; border-top: 1px solid var(--crm-line); }
.crm-tba-ev:first-child { border-top: 0; }
.crm-tba-ev__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.crm-tba-ev p { margin: 4px 0; font-size: 12.5px; color: var(--crm-ink-2); }
.crm-tba-ev--import_refuse .crm-tba-puce { border-color: var(--crm-danger, #C4614F); }
.crm-tba-abos { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.crm-tb-exportmsg { margin: 0 2px 10px; font-size: 12.5px; color: var(--crm-ink-2); }
.crm-tb-exportmsg:empty { display: none; }
@media (max-width: 720px) {
  .crm-tba-roles th.crm-tba-perm { min-width: 58px; }
  .crm-tba-num { width: 86px; }
}
/* Page 6 : le début de l'entente, trait vertical pointillé. */
.crm-tb-repere { stroke: var(--crm-ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
/* La fiche magasin : le bloc « Entente » (§5.4). */
.crm-tba-fiche__ent { padding: 8px 0; border-top: 1px solid var(--crm-line); font-size: 12.5px; }
.crm-tba-fiche__ent:first-of-type { border-top: 0; }
.crm-tba-fiche__ent dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 6px 0 0; }
.crm-tba-fiche__ent dl div { display: contents; }
.crm-tba-fiche__ent dt { color: var(--crm-ink-2); }
.crm-tba-fiche__ent dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.crm-tba-fiche__ent .gicon { width: 14px; height: 14px; vertical-align: -2px; }
/* Les écrans d'administration ont leurs propres étiquettes : la règle globale
   `label { display:block; text-transform:uppercase; font-weight:700 }` de style.css
   mettrait les cases et les champs en capitales (même piège que plus haut). */
.crm-tba label { text-transform: none; letter-spacing: normal; margin: 0; }
.crm-tba .crm-tba-case { display: flex; font-weight: 500; color: var(--crm-ink); font-size: 12.5px; }
.crm-tba .crm-tba-champs label, .crm-tba .crm-tba-filtres label { display: flex; font-weight: 650; color: var(--crm-ink-2); font-size: 11px; }
/* Les tableaux d'administration sont des tableaux de texte : en-têtes à gauche, cases centrées. */
.crm-tba .crm-tba-table th, .crm-tba .crm-tba-table td { text-align: left; }
.crm-tba .crm-tba-roles th.crm-tba-perm { text-align: center; }
.crm-tba .crm-tba-table td:last-child, .crm-tba .crm-tba-roles td:last-child { text-align: right; }
.crm-tba .crm-tba-btns { flex-wrap: nowrap; }
.crm-tba .crm-tba-repart th, .crm-tba .crm-tba-repart td { text-align: left; }
.crm-tba .crm-tba-repart td:nth-child(3), .crm-tba .crm-tba-repart td:nth-child(4) { text-align: right; }
.crm-tba-ev .crm-tb-lien { margin-left: 8px; font-size: 12px; font-weight: 600; }
.crm-tb-tablewrap thead th.crm-tb-texte { text-align: left; }

/* ── Pages 3 et 5 (lot 4) ─────────────────────────────────────────────── */
.crm-tb-carte-pt { stroke: var(--crm-ink); stroke-width: 1; stroke-opacity: .55; fill-opacity: .85; }
.crm-tb-carte-pt--SANS { stroke: var(--crm-ink-2); fill-opacity: .7; }
.crm-tb-carte-pt--NEUTRE { fill: var(--tb-neutre); }
.crm-tb-carte-ville { font-size: 10.5px; fill: var(--crm-ink-3); }
.crm-tb-carte-fond { fill: var(--tb-carte-voisins); }
.crm-tb-carte-ontario { fill: var(--tb-carte-terre); stroke: var(--tb-carte-bord); stroke-width: 1; stroke-linejoin: round; }
.crm-tb-carte-eau { fill: var(--tb-carte-eau); stroke: var(--tb-carte-bord); stroke-width: .6; stroke-opacity: .6; }
.crm-tb-carte-ville { paint-order: stroke; stroke: var(--tb-carte-terre); stroke-width: 3px; stroke-linejoin: round; }
.crm-tb-carte-ville { pointer-events: none; }
.crm-tb-carte-ville--zoom:not(.is-vue) { display: none; }
.crm-tb-carte-vue path { vector-effect: non-scaling-stroke; }
.crm-tb-carte-zoom { position: relative; user-select: none; -webkit-user-select: none; }
.crm-tb-carte-zoom.is-zoome svg { cursor: grab; touch-action: none; }
.crm-tb-carte-zoom.is-zoome svg:active { cursor: grabbing; }
.crm-tb-carte-zoom__outils { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.crm-tb-carte-zoom__btn { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--crm-line); border-radius: 7px; background: var(--crm-card); color: var(--crm-ink); font: 600 17px/1 'Outfit', sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.crm-tb-carte-zoom__btn:hover { background: var(--crm-bg, var(--crm-card)); border-color: var(--crm-ink-3); }
.crm-tb-carte-zoom__btn .crm-ic { width: 16px; height: 16px; }
.crm-tb-carte-zoom__btn[hidden] { display: none; }
.crm-tb-carte-zoom__aide { margin: 6px 0 0; font-size: 11.5px; color: var(--crm-ink-3); }
.crm-tb-cle--note { color: var(--crm-ink-3); font-style: italic; }
.crm-tb-cle__rond { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--crm-ink-2); }
.crm-tb-presence { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; }
.crm-tb-segsel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.crm-tb-segsel button { min-height: 30px; padding: 0 10px; border: 1px solid var(--crm-line); border-radius: 999px; background: var(--crm-card); color: var(--crm-ink); font: 600 11.5px 'Inter', sans-serif; cursor: pointer; }
.crm-tb-segsel button[aria-pressed="true"] { background: var(--crm-ink); color: var(--crm-card); border-color: var(--crm-ink); }
.crm-tb-segsel button:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; }
.crm-tb-run { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-card); font-size: 12.5px; color: var(--crm-ink-2); }
.crm-tb-run b { color: var(--crm-ink); }
.crm-tb-run details { flex-basis: 100%; }
.crm-tb-run pre { max-height: 260px; overflow: auto; white-space: pre-wrap; font: 500 11.5px/1.45 ui-monospace, monospace; background: var(--crm-card-2); padding: 8px 10px; border-radius: 8px; }
.crm-tb-indices { display: grid; gap: 4px; }
.crm-tb-indice { display: grid; grid-template-columns: minmax(160px, 1.2fr) 3fr 64px; align-items: center; gap: 10px; font-size: 12px; }
.crm-tb-indice__nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-tb-indice__val { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.crm-tb-indice svg { width: 100%; height: 22px; }
.crm-tb-indice__pt { fill: var(--crm-ink-3); fill-opacity: .55; }
.crm-tb-indice__bleuh { fill: var(--tb-bleuh); stroke: var(--crm-card); stroke-width: 2; }
.crm-tb-indice__med { stroke: var(--crm-ink); stroke-width: 1.5; }
.crm-tb-ligne-bleuh th, .crm-tb-ligne-bleuh td { background: var(--crm-accent-soft); }
.crm-tb-corps > .crm-tb-run, .crm-tb-corps > .crm-tb-segsel { grid-column: 1 / -1; }
.crm-tb-indice svg { display: block; }
/* Le classement du Top 400 : onze colonnes qui tiennent dans la carte ; seul le magasin garde de la largeur. */
.crm-tb-table.crm-tb-classement td.crm-tb-texte { min-width: 0; }
.crm-tb-table.crm-tb-classement td:nth-child(3) { min-width: 150px; }
.crm-tb-table.crm-tb-classement th, .crm-tb-table.crm-tb-classement td { padding-left: 6px; padding-right: 6px; }
.crm-tb-classement .crm-tb-ecart, .crm-tb-classement .crm-tb-presence { white-space: nowrap; }
.crm-tb-mouv { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.crm-tb-mouv .gicon { width: 12px; height: 12px; }
.crm-tb-mouv--haut .gicon { color: var(--tb-gain-1); }
.crm-tb-mouv--bas .gicon { color: var(--tb-perte); }
/* Duel par SKU (ticket byOrWKAuTYOIiK3ajzxE) : la période sous l'en-tête, « Nouveau », le mode d'emploi. */
.crm-tb-th-sous { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; color: var(--crm-ink-3); }
.crm-tb-tablewrap thead th[title] { cursor: help; }
.crm-tb-mouv--nouveau { padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--crm-ink-2); background: var(--crm-accent-soft); }
.crm-tb-lire { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--crm-line); border-radius: 8px; font-size: 12px; color: var(--crm-ink-2); }
.crm-tb-lire ul { margin: 4px 0 0; padding-left: 18px; }
.crm-tb-lire li + li { margin-top: 3px; }
=======
/* ---- Sièges sociaux (ticket nbKeDgzOxEEBxY63aNbh, public/js/modules/crm/sieges.js) ----
   La liste des sièges, l'onglet d'un siège et leurs outils. La page reprend le
   gabarit de la fiche magasin (.crm-store-fiche, .crm-store-hero, cartes
   .crm-store-sidecard, ux-refresh.css) : un siège est un « grand magasin »
   qu'on lit de la même façon. Seuls les tableaux, les pastilles de statut
   comptées et les outils sont propres à l'écran — même échelle typographique
   que la liste Magasins (crm-dir-*), mêmes jetons, donc le sombre suit seul. */
/* La couleur du texte, comme .crm-fiche : sans elle, le sombre héritait de
   l'encre du corps de page et le nom du siège disparaissait. */
.crm-sg { color: var(--crm-ink); }
.crm-sg-head { margin: 0 2px 12px; }
.crm-sg-title { font: 720 28px/1.14 'Outfit', sans-serif; letter-spacing: -.025em; color: var(--crm-ink); }
.crm-sg-sub { margin-top: 5px; color: var(--crm-ink-2); font-size: 12px; }
.crm-sg-new { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px; border-radius: 10px; font-size: 11px; }
#crm-view .crm-sg-new .crm-ic { width: 13px; height: 13px; }
.crm-sg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px; border: 1px solid var(--crm-line); border-radius: 12px; background: var(--crm-card); box-shadow: var(--ux-shadow, var(--crm-shadow)); }
.crm-sg-toolbar .crm-search { flex: 1 1 260px; min-width: 200px; height: 36px; padding-inline: 11px; border-radius: 8px; background: var(--crm-card-2); }
.crm-sg-toolbar .crm-search input { font-size: 11px; }
#crm-view .crm-sg-toolbar .crm-search .crm-ic { width: 14px; height: 14px; color: var(--crm-ink-3); }
.crm-sg-toolbar .crm-filter { height: 36px; border-radius: 8px; font-size: 10.5px; font-weight: 650; }
.crm-sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 0 11px; border: 1px solid var(--crm-line); border-radius: 8px; background: var(--crm-card); color: var(--crm-ink); font: 700 9.5px 'Inter', sans-serif; white-space: nowrap; cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.crm-sg-btn:hover:not(:disabled) { border-color: var(--crm-line-strong); background: var(--crm-card-2); }
.crm-sg-btn:disabled { opacity: .55; cursor: default; }
#crm-view .crm-sg-btn .crm-ic, .crm-sheet-ov .crm-sg-btn .crm-ic { width: 12px; height: 12px; }
.crm-sg-btn--main { border-color: var(--crm-accent); background: var(--crm-accent); color: var(--crm-accent-ink); }
.crm-sg-btn--main:hover:not(:disabled) { border-color: var(--crm-accent); background: var(--crm-accent); filter: brightness(1.06); }
.crm-sg-muted { color: var(--crm-ink-3); }
.crm-sg-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--crm-ok-ink); font-weight: 650; }
#crm-view .crm-sg-ok .crm-ic { width: 11px; height: 11px; }
.crm-sg-todo { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--crm-warn-bg); color: var(--crm-warn-ink); font-size: 9px; font-weight: 700; white-space: nowrap; }
.crm-sg-why { display: inline-flex; margin: 1px 4px 1px 0; padding: 2px 8px; border-radius: 999px; background: var(--crm-info-bg); color: var(--crm-info-ink); font-size: 8.5px; font-weight: 700; white-space: nowrap; }
.crm-sg-warn { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--crm-crit-dot) 30%, var(--crm-line)); border-radius: 10px; background: var(--crm-crit-bg); color: var(--crm-crit-ink); font-size: 10.5px; }
.crm-sg-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--crm-accent) 35%, var(--crm-line)); border-radius: 12px; background: color-mix(in srgb, var(--crm-accent-soft) 70%, var(--crm-card)); font-size: 11px; color: var(--crm-ink); }
.crm-sg-banner > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--crm-card); color: var(--crm-accent); font-style: normal; }
#crm-view .crm-sg-banner > i .crm-ic { width: 14px; height: 14px; }
.crm-sg-banner > span { flex: 1 1 260px; }
.crm-sg-caution { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; color: var(--crm-ink-2); font-size: 10px; line-height: 1.45; }
#crm-view .crm-sg-caution .crm-ic { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--crm-info-ink); }

/* Tableaux : une grille par ligne plutôt qu'un <table>, pour les mêmes raisons
   que la liste Magasins — la ligne entière est cliquable, et sous 760 px elle
   se replie en carte sans réécrire le balisage. */
.crm-sg-table { overflow: hidden; border: 1px solid var(--crm-line); border-radius: 12px; background: var(--crm-card); box-shadow: var(--ux-shadow, var(--crm-shadow)); }
.crm-sg-row { display: grid; align-items: center; gap: 10px; min-height: 50px; padding: 7px 13px; border-top: 1px solid var(--crm-line); font-size: 10.5px; color: var(--crm-ink); }
.crm-sg-row:first-child { border-top: 0; }
#crm-sg-rows > .crm-sg-row:first-child, #crm-sg-mrows > .crm-sg-row:first-child { border-top: 1px solid var(--crm-line); }
.crm-sg-row--head { min-height: 34px; background: var(--crm-card-2); color: var(--crm-ink-3); font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.crm-sg-row[data-siege], .crm-sg-table--magasins .crm-sg-row[data-store] { cursor: pointer; transition: background .12s ease; }
.crm-sg-row[data-siege]:hover, .crm-sg-table--magasins .crm-sg-row[data-store]:hover { background: color-mix(in srgb, var(--crm-accent-soft) 60%, var(--crm-card)); }
.crm-sg-row:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: -2px; }
.crm-sg-row small { color: var(--crm-ink-3); font-size: 8.5px; font-weight: 500; }
.crm-sg-name small { display: block; margin-top: 1px; }
.crm-sg-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-sg-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.crm-sg-name > b, .crm-sg-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-sg-name b { font-weight: 650; }
.crm-sg-mono { width: 32px; height: 32px; border-radius: 9px; font-size: 10px; background: var(--crm-accent-soft); color: var(--crm-accent); }
.crm-sg-table--magasins .crm-mono--actif { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-sg-table--magasins .crm-mono--ralentit, .crm-sg-table--sugg .crm-mono--ralentit { background: var(--crm-warn-bg); color: var(--crm-warn-ink); }
.crm-sg-table--magasins .crm-mono--dormant, .crm-sg-table--sugg .crm-mono--dormant { background: var(--crm-crit-bg); color: var(--crm-crit-ink); }
.crm-sg-table--magasins .crm-mono--prospect, .crm-sg-table--sugg .crm-mono--prospect { background: var(--crm-info-bg); color: var(--crm-info-ink); }
.crm-sg-table--sugg .crm-mono--actif { background: var(--crm-ok-bg); color: var(--crm-ok-ink); }
.crm-sg-reps { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-sg-reps small { display: inline; }
.crm-sg-table--sieges .crm-sg-row { grid-template-columns: minmax(0, 2.2fr) 70px minmax(0, 1.2fr) minmax(0, 1.8fr) 56px 110px; }
.crm-sg-table--magasins .crm-sg-row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.1fr) 70px 104px 120px; }
.crm-sg-table--magasins.crm-sg-table--sel .crm-sg-row { grid-template-columns: 22px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.1fr) 70px 104px 120px; }
.crm-sg-table--sugg .crm-sg-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.5fr) auto; }
.crm-sg-table--acreer .crm-sg-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) 70px 56px auto; }
.crm-sg-site { overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.crm-sg-acts { display: flex; justify-content: flex-end; gap: 5px; }
.crm-sg-cb input { width: 15px; height: 15px; margin: 0; accent-color: var(--crm-accent); cursor: pointer; }
.crm-sg-st { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-sg-st > i { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-ink-3); }
.crm-sg-st--actif > i { background: var(--crm-ok-dot); }
.crm-sg-st--ralentit > i { background: var(--crm-warn-dot); }
.crm-sg-st--dormant > i { background: var(--crm-crit-dot); }
.crm-sg-st--prospect > i { background: var(--crm-info-dot); }
.crm-sg-legend { display: flex; flex-wrap: wrap; gap: 4px 2px; margin: 8px 4px 0; color: var(--crm-ink-3); }
.crm-sg-legend .crm-sg-st { font-weight: 500; font-size: 9px; }
.crm-sg-empty { padding: 26px 16px; color: var(--crm-ink-3); font-size: 11px; text-align: center; }
.crm-sg-empty--big { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; border: 1px dashed var(--crm-line-strong); border-radius: 14px; background: var(--crm-card); }
#crm-view .crm-sg-empty--big .crm-ic { width: 26px; height: 26px; color: var(--crm-ink-3); }
.crm-sg-empty--big b { color: var(--crm-ink); font-size: 13px; }
.crm-sg-empty--big p { max-width: 460px; margin: 0; line-height: 1.5; }

/* L'onglet d'un siège : le bandeau garde le ton doré de l'identité
   (le siège n'a pas de statut commercial à lui, ses magasins en ont). */
.crm-sg-hero > .crm-sg-mono { width: 60px; height: 60px; border-radius: 15px; font-size: 16px; }
.crm-sg-hero .crm-store-eyebrow { color: var(--crm-accent); }
.crm-sg-hero .crm-store-eyebrow > span { background: var(--crm-accent); }
#crm-view .crm-sg-hero .crm-store-actions .crm-ic { width: 12px; height: 12px; }
.crm-sg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 9px 0; align-items: start; }
.crm-sg-grid > .crm-store-sidecard:only-child { grid-column: 1 / -1; }
.crm-sg-coords .crm-store-coords__body { padding: 11px 12px; }
.crm-sg-coords .crm-info__k { font-size: 7px; margin-bottom: 1px; }
.crm-sg-coords .crm-info__v { font-size: 9.5px; line-height: 1.45; }
.crm-sg-coords .crm-info__v a { color: var(--crm-accent); }
.crm-sg-coords > header .crm-sg-btn { flex: none; }
.crm-sg-coords__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px; }
.crm-sg-coords__empty p { margin: 0; color: var(--crm-ink-2); font-size: 10px; line-height: 1.5; }
.crm-sg-kpigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--crm-line); }
.crm-sg-kpigrid > div { min-width: 0; padding: 11px 12px; background: var(--crm-card); }
.crm-sg-kpigrid b { display: block; font: 700 17px/1.15 'Outfit', sans-serif; color: var(--crm-ink); font-variant-numeric: tabular-nums; }
.crm-sg-kpigrid span { display: block; margin-top: 3px; color: var(--crm-ink-3); font-size: 8.5px; line-height: 1.35; }
.crm-sg .crm-tabs { margin-top: 0; }
.crm-sg-selbar { margin: 0 0 8px; }
.crm-sg-suivi__body { padding: 4px 12px 8px; }
.crm-sg-suivi .crm-tl-t { font-size: 10.5px; }
.crm-sg-suivi .crm-tl-meta { font-size: 8.5px; }
#crm-view .crm-sg-suivi .crm-tl-ic .crm-ic { width: 13px; height: 13px; color: var(--crm-ink-3); }
.crm-sg-link { cursor: pointer; }
.crm-sg-link:hover { color: var(--crm-accent); }
#crm-sg-acreer { margin: 0 0 10px; }
#crm-sg-acreer > .crm-sg-caution { padding: 9px 13px 0; }
#crm-sg-acreer > .crm-sg-table { border-width: 1px 0 0; border-radius: 0; box-shadow: none; }

/* Les feuilles : rattacher, chercher des magasins, modifier le siège. */
.crm-sg-opts { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; max-height: 230px; overflow-y: auto; }
.crm-sg-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--crm-line); border-radius: 9px; background: var(--crm-card); color: var(--crm-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.crm-sg-opt small { color: var(--crm-ink-3); font-size: 11.5px; white-space: nowrap; }
.crm-sg-opt.on { border-color: var(--crm-accent); background: var(--crm-accent-soft); font-weight: 600; }
.crm-sg-opt--new { justify-content: flex-start; border-style: dashed; color: var(--crm-ink-2); cursor: default; }
.crm-sheet-ov .crm-sg-opt--new .crm-ic { width: 13px; height: 13px; }
.crm-sg-pickq { margin-bottom: 8px; }
.crm-sg-pick { max-height: 46vh; overflow-y: auto; margin-bottom: 10px; border: 1px solid var(--crm-line); border-radius: 12px; }
.crm-sg-pick:empty { display: none; }
.crm-sg-pick > p { margin: 0; padding: 12px; font-size: 12.5px; }
.crm-sg-pickrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--crm-line); cursor: pointer; }
.crm-sg-pickrow:first-child { border-top: 0; }
.crm-sg-pickrow input { width: 16px; height: 16px; margin: 0; accent-color: var(--crm-accent); }
.crm-sg-pickrow b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sg-pickrow small { display: block; color: var(--crm-ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sg-pickrow em { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--crm-accent-soft); color: var(--crm-accent); font-size: 11px; font-style: normal; font-weight: 600; }
.crm-sg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-sg-2col + .crm-sg-2col { margin-top: 8px; }
.crm-sg-2col > div > label { display: block; font-size: 12px; font-weight: 500; color: var(--crm-ink-2); margin-bottom: 4px; }
.crm-sg-contact { display: grid; grid-template-columns: 1.1fr .9fr 1.3fr 1fr 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.crm-sg-contact input { min-width: 0; }
.crm-sg-x { width: 30px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--crm-line); border-radius: 9px; background: var(--crm-card); color: var(--crm-ink-3); cursor: pointer; }
.crm-sg-x:hover { color: var(--crm-crit-ink); border-color: var(--crm-crit-dot); }
.crm-sheet-ov .crm-sg-x .crm-ic { width: 13px; height: 13px; }
.crm-sg-linkbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; border: 0; background: none; color: var(--crm-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.crm-sheet-ov .crm-sg-linkbtn .crm-ic { width: 13px; height: 13px; }

/* Les tailles d'icônes passent par #crm-view / .crm-sheet-ov : la règle
   générique `#crm-view .crm-ic` (plus haut) gagnerait sinon sur une simple
   classe, et les pictogrammes resteraient à 1,05 em partout. */

/* La carte « Siège social » dans l'Aperçu d'une fiche magasin (M7). */
.crm-sg-fichecard > header h3 { display: flex; align-items: center; gap: 6px; }
#crm-view .crm-sg-fichecard > header h3 .crm-ic { width: 13px; height: 13px; color: var(--crm-accent); }
.crm-sg-fichecard__body { padding: 11px 12px 4px; font-size: 10px; color: var(--crm-ink); }
.crm-sg-fichecard__body > b { display: block; font-size: 11.5px; }
.crm-sg-fichecard__body p { margin: 5px 0 0; line-height: 1.45; }
.crm-sg-fichecard__acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px 12px; }

/* Le toast qui propose de défaire : cliquable, contrairement à l'accusé simple. */
.crm-toast--action { display: flex; align-items: center; gap: 14px; pointer-events: auto; max-width: min(92vw, 560px); }
.crm-toast--action button { flex: none; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--crm-card) 40%, transparent); border-radius: 8px; background: transparent; color: var(--crm-card); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.crm-toast--action button:hover { background: color-mix(in srgb, var(--crm-card) 14%, transparent); }

@media (max-width: 1120px) {
  .crm-sg-table--sieges .crm-sg-row { grid-template-columns: minmax(0, 2fr) 60px minmax(0, 1.2fr) minmax(0, 1.5fr) 50px 100px; }
}
@media (max-width: 760px) {
  .crm-sg-head { flex-wrap: wrap; }
  .crm-sg-title { font-size: 24px; }
  .crm-sg-grid { grid-template-columns: 1fr; }
  .crm-sg-kpigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sous 760 px, chaque ligne devient une carte : le nom en tête, le reste
     en petites cases dessous. Les en-têtes de colonnes n'ont plus de sens. */
  .crm-sg-row--head { display: none; }
  .crm-sg-table .crm-sg-row, .crm-sg-table--magasins.crm-sg-table--sel .crm-sg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; }
  .crm-sg-row > .crm-sg-name, .crm-sg-row > .crm-sg-site { grid-column: 1 / -1; }
  .crm-sg-row > .crm-sg-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .crm-sg-row .crm-sg-n { text-align: left; }
  /* Avec cases à cocher : la case reste à gauche du nom, sur la même ligne,
     et les autres cases s'alignent dessous, en deux colonnes. */
  .crm-sg-table--magasins.crm-sg-table--sel .crm-sg-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); }
  .crm-sg-table--sel .crm-sg-row > .crm-sg-cb { grid-column: 1; grid-row: 1; }
  .crm-sg-table--sel .crm-sg-row > .crm-sg-name { grid-column: 2 / -1; }
  .crm-sg-table--sel .crm-sg-row > :nth-child(odd):nth-child(n+3) { grid-column: 2; }
  .crm-sg-table--sel .crm-sg-row > :nth-child(even):nth-child(n+4) { grid-column: 3; }
  .crm-sg-contact { grid-template-columns: 1fr 1fr; }
  .crm-sg-contact .crm-sg-x { justify-self: end; grid-column: 2; }
  .crm-sg-2col { grid-template-columns: 1fr; }
}
/* `hidden` doit gagner sur le `display: flex` de .crm-selbar : sans ça, la
   barre « 0 boutique sélectionnée » restait affichée à vide. */
.crm-sg-selbar[hidden] { display: none; }
.crm-sg-toolbar .crm-filter { flex: 0 0 auto; width: auto; min-width: 230px; }
.crm-store-hero .crm-store-identity .crm-banner-chip { max-width: 260px; }