/* ============================================================
   MAPi · Composants partagés
   Briques identiques dans les quatre plateformes (Expert, Client,
   Partenaire, Admin). Une seule définition, ici. Les surcharges de
   contexte (taille, couleurs sur fond bleu) restent chez chaque
   espace : seule la base est mutualisée.
   ============================================================ */

/* ---------- Texte réservé aux lecteurs d'écran ----------
   Utilitaire commun : l'espace Client s'en servait (#dcfLive) sans
   jamais le définir, son contenu se serait affiché à l'écran.
   !important : un .sr-only peut tomber dans un conteneur qui stylise ses
   inputs (ex. .cmp-field input { width: 100% }) et déborder du panneau. */
.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- Notation par étoiles (scoreGauge de js/ui.js) ----------
   Ne jamais recréer une jauge de score : appeler scoreGauge(n, d). */
.pearl-rating { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pr-stars { position: relative; display: flex; gap: 6px; padding: 4px 2px; }
.pr-star { position: relative; width: 31px; height: 31px; flex-shrink: 0; display: inline-flex; }
.pr-star svg { width: 100%; height: 100%; display: block; }
.pr-star.on svg { fill: url(#mapiStarGrad); filter: drop-shadow(0 2px 3px rgba(233, 111, 31, .28)); }
.pr-star.off svg, .pr-star.half svg:not(.pr-half) { fill: #E3E9F2; }
.pr-half { position: absolute; inset: 0; fill: url(#mapiStarGrad); clip-path: inset(0 50% 0 0); filter: drop-shadow(0 2px 3px rgba(233, 111, 31, .28)); }
.pr-num { display: flex; align-items: baseline; gap: 1px; line-height: 1; }
.pr-num b { font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 900; font-size: 27px; letter-spacing: -.02em; color: var(--text-primary); }
.pr-num .sep { font-size: 17px; font-weight: 700; color: var(--gray-300); margin: 0 2px; }
.pr-num i { font-style: normal; font-weight: 700; font-size: 16px; color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
    .pr-star.on, .pr-star.half { animation: pr-star-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--pd, 0s); }
}
@keyframes pr-star-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* ============================================================
   Sélecteur de plateforme (js/platform.js)
   Le bouton se pose sur le chrome de marque, quel qu'il soit :
   bleu MAPi, ciel Horizon, nuit Sombre, ou la couleur primaire
   d'une marque blanche. D'où le blanc translucide comme base et
   trois surcharges seulement (Horizon clair, Admin, mini-rail).
   ============================================================ */
/* Fond transparent au repos, voile SOMBRE au survol : un voile blanc
   éclaircit le chrome sous le libellé et le fait tomber sous 4.5:1 (3,90
   sur le bleu de marque, 3,50 au survol). Ici le texte blanc garde son
   contraste d'origine (4,77 sur le bleu, 5,76 sur l'ocre CrediPro) et le
   survol le renforce au lieu de l'éroder. Le liseré porte l'affordance. */
.plt-btn {
    position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .38); background: none;
    color: #fff; font: inherit; font-weight: 800; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.plt-btn:hover { background: rgba(0, 0, 0, .14); border-color: rgba(255, 255, 255, .8); }
.plt-btn .plt-ico { display: inline-flex; flex-shrink: 0; }
.plt-btn .plt-lbl { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.plt-btn .plt-chev { opacity: .75; transition: transform .18s cubic-bezier(.22, 1, .36, 1); }
.plt-btn[aria-expanded="true"] .plt-chev { transform: rotate(180deg); }

/* Variante rail : en pied de navbar, au gabarit des entrées de nav */
.plt-btn--rail {
    flex-direction: column; justify-content: center; gap: 3px;
    width: 58px; min-height: 46px; padding: 6px 2px;
    border-radius: 12px; font-size: 9.5px; line-height: 1.2; text-align: center;
}
/* Variante barre : pilule de header, là où il n'y a pas de navbar.
   36 px visuels + 4 px de débord tout autour = 44 px de cible tactile,
   sans grossir la pilule (même procédé que .rail-min et .rail-chrome) */
.plt-btn--bar { gap: 7px; height: 36px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; }
.plt-btn--bar::after { content: ''; position: absolute; inset: -4px; }

/* Admin : la plateforme interne se signale, comme l'ancien tag */
.plt-btn.is-admin { background: var(--orange); border-color: var(--orange); color: #4A2408; }
.plt-btn.is-admin:hover { background: #FFA469; border-color: #FFA469; }

/* Chrome Horizon (clair) : le blanc translucide n'y tient pas */
html[data-chrome="c"] .plt-btn { border-color: rgba(0, 109, 236, .28); background: var(--surface); color: var(--blue-dark); }
html[data-chrome="c"] .plt-btn:hover { border-color: var(--blue); background: var(--blue-pale); }
html[data-chrome="c"] .plt-btn.is-admin { background: var(--orange); border-color: var(--orange); color: #4A2408; }

/* Rail réduit : l'icône seule, le libellé reste lisible aux lecteurs d'écran */
.sb.is-mini .plt-btn--rail { width: 42px; }
.sb.is-mini .plt-btn--rail .plt-lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Le panneau (porté sur <body>, position fixe) ----------
   Couche dédiée : au-dessus de tout le chrome des trois espaces
   (max 95), sous les plein-écran de l'espace client (300). */
.plt-pop {
    position: fixed; z-index: 210; width: 336px; display: none;
    background: var(--surface); border: 1px solid var(--gray-200); border-radius: 16px;
    box-shadow: var(--shadow-lg); padding: 8px;
}
.plt-pop.is-open { display: block; }
/* Sans « both » : la keyframe finit sur l'état naturel du panneau, donc le
   remplissage n'apporte rien et ne peut plus le figer à opacity 0 si
   l'animation ne joue pas (onglet en arrière-plan, rendu headless). */
@media (prefers-reduced-motion: no-preference) {
    .plt-pop.is-open { animation: plt-pop-in .2s cubic-bezier(.22, 1, .36, 1); }
    @keyframes plt-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
}
.plt-pop-h {
    padding: 7px 10px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--gray-200);
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-secondary);
}
.plt-it {
    display: flex; align-items: center; gap: 11px; width: 100%; min-height: 52px;
    padding: 7px 10px; border: none; background: none; border-radius: 12px;
    cursor: pointer; text-align: left; font: inherit; transition: background .13s;
}
.plt-it:hover { background: var(--gray-100); }
.plt-it .plt-g {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--blue-pale); color: var(--blue-dark);
}
.plt-it .plt-tx { flex: 1; min-width: 0; }
.plt-it .plt-tx b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text-primary); line-height: 1.3; }
.plt-it .plt-tx span { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.35; }
.plt-it .plt-ok { flex-shrink: 0; color: var(--blue); }
.plt-it[data-plt-go="admin"] .plt-g { background: var(--orange-soft); color: var(--orange-ink); }
.plt-it[aria-current="true"] { background: var(--blue-pale); }
.plt-it[aria-current="true"] .plt-g { background: var(--blue); color: #fff; }
.plt-it[aria-current="true"][data-plt-go="admin"] .plt-g { background: var(--orange); color: #4A2408; }
.plt-it[aria-current="true"][data-plt-go="admin"] { background: var(--orange-soft); }
.plt-it[aria-current="true"][data-plt-go="admin"] .plt-ok { color: var(--orange-ink); }

/* ============================================================
   ÉDITEUR DE TEXTE des mails (préfixe ed-)
   Partagé par la boîte Mail, la séance focus des Tâches, les
   modèles de mail et les emails de séquence : partout où l'on
   écrit un message, la même barre et la même zone de saisie.
   Le <textarea> d'origine reste sous la zone, en sr-only : il
   porte le texte brut que le reste du code continue de lire.
   ============================================================ */
.ed { border: 1.5px solid var(--gray-300); border-radius: 12px; background: var(--surface); overflow: hidden; }
.ed:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 22%, transparent); }
.ed-bar {
    display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 6px 8px;
    border-bottom: 1px solid var(--gray-200); background: var(--gray-100);
}
.ed-b {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 32px; height: 32px; padding: 0 7px; border: none; border-radius: 8px; background: none;
    font: inherit; color: var(--text-secondary); cursor: pointer; transition: background .13s, color .13s;
}
/* La cible réelle fait 44px sans gonfler la barre */
.ed-b::after { content: ''; position: absolute; inset: -6px; }
.ed-b:hover { background: var(--gray-200); color: var(--text-primary); }
.ed-b[aria-pressed="true"] { background: var(--blue-pale); color: var(--blue-dark); }
.ed-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ed-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--gray-300); }
.ed-sel {
    min-height: 32px; padding: 0 26px 0 9px; border: 1px solid var(--gray-300); border-radius: 8px;
    background: var(--surface); font: inherit; font-size: 12px; font-weight: 700; color: var(--text-secondary);
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236E7A8E' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.ed-sel:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
/* Les pages hôtes étirent volontiers leurs `select` sur toute la largeur du
   champ (.mm-f, .cmp-field…) : la barre d'outils, elle, se lit en ligne. */
.ed-bar .ed-sel { width: auto; max-width: 46%; flex: 0 0 auto; }
.ed-bar .ed-b { flex: 0 0 auto; }
/* Couleur : le bouton porte la teinte courante en soulignement */
.ed-coul { position: relative; display: inline-flex; }
.ed-b--coul { flex-direction: column; gap: 1px; }
.ed-b--coul i { display: block; width: 15px; height: 3px; border-radius: 2px; }
.ed-pal {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    display: flex; gap: 5px; padding: 7px; border: 1px solid var(--gray-200); border-radius: 11px;
    background: var(--surface); box-shadow: var(--shadow-lg);
}
.ed-pal[hidden] { display: none; }
.ed-pal button {
    position: relative; width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px;
    background: none; cursor: pointer;
}
.ed-pal button::after { content: ''; position: absolute; inset: -8px; }
.ed-pal button i { display: block; width: 100%; height: 100%; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ed-pal button:hover i, .ed-pal button:focus-visible i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--blue); }
.ed-zone {
    min-height: 130px; max-height: 46vh; overflow-y: auto; padding: 13px 14px;
    font-size: 13.5px; line-height: 1.65; color: var(--text-primary); background: var(--surface);
    overflow-wrap: break-word;
}
.ed-zone:focus { outline: none; }
.ed-zone:empty::before { content: attr(data-vide); color: var(--text-secondary); }
.ed-zone p { margin: 0 0 10px; }
.ed-zone p:last-child { margin-bottom: 0; }
.ed-zone h2 { font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 900; font-size: 18px; margin: 4px 0 8px; color: var(--text-primary); }
.ed-zone h3 { font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 800; font-size: 15.5px; margin: 4px 0 6px; color: var(--text-primary); }
.ed-zone ul, .ed-zone ol { margin: 0 0 10px; padding-left: 22px; }
.ed-zone li { margin-bottom: 3px; }
.ed-zone a { color: var(--blue-dark); }
.ed-zone blockquote {
    margin: 0 0 10px; padding: 2px 0 2px 13px; border-left: 3px solid var(--blue-muted);
    color: var(--text-secondary); font-style: italic;
}
/* Le même rendu, en lecture, pour un message déjà envoyé */
.ed-rendu p { margin: 0 0 10px; }
.ed-rendu p:last-child { margin-bottom: 0; }
.ed-rendu h2 { font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 900; font-size: 17px; margin: 4px 0 8px; }
.ed-rendu h3 { font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 800; font-size: 15px; margin: 4px 0 6px; }
.ed-rendu ul, .ed-rendu ol { margin: 0 0 10px; padding-left: 22px; }
.ed-rendu a { color: var(--blue-dark); }
.ed-rendu blockquote { margin: 0 0 10px; padding: 2px 0 2px 13px; border-left: 3px solid var(--blue-muted); color: var(--text-secondary); font-style: italic; }

/* ---------- Theme Sombre (chrome d) ---------- */
html[data-chrome="d"] .ed-pal button i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* ============================================================
   VUES UNIFIÉES (2026-08-05) · préfixes ulst- (liste) et ukb- (kanban)
   ------------------------------------------------------------
   UNE liste, UN kanban pour tout le produit. La liste reprend
   VERBATIM la grammaire des lignes de tâches (taches.html, tk-task) ;
   le kanban celle du pipe commercial (dossiers.html, pc-col/pc-card).
   Consommées par les vues du CRM (crm.html) et les bases incorporées
   de Notion (js/notion-base.js). Si l'un des deux originaux évolue,
   ces classes se réalignent : ne pas les laisser diverger.
   ============================================================ */
/* — La liste (grammaire tk-task) — */
.ulst { display: flex; flex-direction: column; gap: 9px; }
.ulst-r {
    display: flex; align-items: center; gap: 12px; background: var(--surface);
    border: 1.5px solid var(--gray-200); border-radius: 13px; padding: 12px 15px;
    transition: border-color .15s, background .15s;
    content-visibility: auto; contain-intrinsic-size: auto 62px;
    text-decoration: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ulst-r:hover { border-color: var(--blue-muted); }
.ulst-r:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ulst-ava { width: 34px; height: 34px; font-size: 12px; flex-shrink: 0; }
.ulst-ava.is-emoji { background: var(--gray-100); font-size: 17px; }
.ulst-main { flex: 1; min-width: 0; }
.ulst-t { font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.ulst-sub { margin-top: 5px; display: flex; align-items: center; gap: 6px 9px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-secondary); }
.ulst-sub b { font-weight: 800; color: var(--text-primary); }
.ulst-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ulst-num { font-size: 12px; font-weight: 800; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ulst-open {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--gray-300); border-radius: 50%; background: var(--surface);
    color: var(--text-secondary); cursor: pointer; text-decoration: none; position: relative;
    transition: border-color .15s, background .15s, color .15s;
}
.ulst-open::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; }
.ulst-open:hover { border-color: var(--blue); background: var(--blue-pale); color: var(--blue-dark); }
.ulst-vide { padding: 18px 10px; text-align: center; font-size: 12px; color: var(--text-muted); }
/* — Cocher, dans la liste comme dans le kanban (2026-08-05) —
   La case vit à CÔTÉ de la ligne, jamais dedans : la ligne est un lien,
   et un contrôle dans un <a> se coche en naviguant. */
.ulst-row { display: flex; align-items: center; gap: 10px; }
.ulst-row > .ulst-r { flex: 1; min-width: 0; }
.ulst-row.is-sel > .ulst-r { border-color: var(--blue); background: var(--blue-pale); }
.ulst-cbl, .ukb-cbl { display: inline-flex; align-items: center; position: relative; flex-shrink: 0; }
/* Cible de 44 px sans grossir la case : l'aire cliquable déborde. */
.ulst-cbl::after, .ukb-cbl::after { content: ''; position: absolute; inset: -13px; }
.ukb-head { display: flex; align-items: flex-start; gap: 8px; }
.ukb-head > .ukb-t { flex: 1; min-width: 0; }
.ukb-cbl { margin-top: 1px; }
/* Déclaré APRÈS `.ukb-card:hover` (même spécificité, l'ordre tranche) :
   sinon survoler une carte cochée lui reprenait son liseré bleu. */

/* — Le kanban (grammaire pc-col / pc-card) — */
.ukb { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.ukb-col { flex: 0 0 276px; width: 276px; display: flex; flex-direction: column; min-height: 0; }
/* Sur téléphone la colonne prend presque l'écran, la suivante dépasse
   d'un bord : c'est elle qui dit « ça continue ». Même geste que le
   Pipe et les Tâches, mêmes 84vw. */
@media (max-width: 720px) { .ukb-col { flex-basis: 84vw; width: 84vw; } }
.ukb-colh {
    display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 13px 13px 0 0;
    background: var(--kb-hbg, var(--gray-200)); color: var(--kb-hink, var(--text-secondary));
}
.ukb-colh h3, .ukb-colh b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ukb-cn { flex-shrink: 0; font-size: 11.5px; font-weight: 800; background: rgba(255, 255, 255, .62); border-radius: var(--radius-pill); padding: 1px 8px; color: var(--text-primary); }
.ukb-colsum { padding: 7px 13px; background: var(--surface); border: 1px solid var(--gray-200); border-bottom: 0; border-top: 0; font-size: 11.5px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* Pas de `max-height` ici : il plafonnait le corps à 62dvh pendant que le
   plateau, lui, était dimensionné à la fenêtre. La colonne s'arrêtait donc
   avant son propre bas. La hauteur vient de la chaîne flex (voir .pl-*). */
.ukb-colbody {
    flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
    display: flex; flex-direction: column; gap: 9px; padding: 10px;
    background: var(--gray-100); border: 1px solid var(--gray-200); border-top: 0; border-radius: 0 0 13px 13px;
}
/* Hors chaîne flex (bases incorporées de Notion, blocs de la doc), le corps
   reprend un plafond : sans lui, une colonne de 800 fiches pousserait la page. */
.ukb:not(.pl-plein) .ukb-colbody { max-height: min(62dvh, 640px); }
.ukb-col.is-over .ukb-colbody { background: var(--blue-pale); }
.ukb-col.is-over .ukb-colh { box-shadow: inset 0 -2px 0 var(--blue); }
.ukb-vide { padding: 18px 10px; text-align: center; font-size: 12px; color: var(--text-muted); }
.ukb-card {
    display: flex; flex-direction: column; gap: 7px; padding: 12px 13px;
    background: var(--surface); border: 1px solid var(--gray-200); border-radius: 12px;
    box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; font: inherit; text-align: left;
}
.ukb-card[draggable="true"] { cursor: grab; }
.ukb-card[draggable="true"]:active { cursor: grabbing; }
.ukb-card.is-dragging, .ukb-card.is-traine { opacity: .45; }
.ukb-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); }
.ukb-card.is-sel, .ukb-card.is-sel:hover { border-color: var(--blue); background: var(--blue-pale); }
.ukb-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ukb-t { font-size: 13px; font-weight: 800; color: var(--text-primary); line-height: 1.3; display: flex; align-items: baseline; gap: 6px; }
.ukb-lien { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: 12px; font-weight: 700; color: var(--blue-dark); text-decoration: none; }
.ukb-lien:hover { text-decoration: underline; }
.ukb-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ukb-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ukb-m { font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 900; font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ukb-meta { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- Les propriétés choisies, SUR la carte (2026-08-05) ----------
   La carte n'affichait que deux champs, pris en dur : choisir des
   propriétés dans les réglages ne changeait rien à ce qu'on lisait sur le
   plateau. Une paire libellé/valeur par ligne, le libellé en colonne fixe
   pour que l'œil descende droit d'une carte à l'autre. */
.ukb-props { display: grid; gap: 6px 10px; margin: 1px 0 0; }
.ukb-prop { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 9px; min-width: 0; }
/* Le libellé n'est PAS en `--text-muted` : à 10,5 px il tombait à 4,34:1
   sur blanc, sous le plancher de 4,5. C'est la taille et la graisse qui
   le mettent au second plan, pas un gris trop clair. */
.ukb-prop dt {
    font-size: 10.5px; font-weight: 600; line-height: 1.55; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La valeur se replie sur deux lignes plutôt que d'être coupée net : un
   courriel tronqué à 130 px ne dit plus rien. Au-delà, l'infobulle. */
.ukb-prop dd {
    margin: 0; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--text-primary);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
/* La valeur adopte la typo de la carte : les cellules du tableau portent
   leurs propres tailles et un gris à 4,34:1, illisible à 12 px. Seules les
   pastilles et les jetons de relation gardent leur forme, qui EST leur sens. */
.ukb-prop dd .crm-mut, .ukb-prop dd .crm-mail, .ukb-prop dd .crm-num, .ukb-prop dd .crm-id-tx span {
    color: inherit; font-size: inherit; font-weight: inherit;
}
.ukb-prop dd .badge { font-size: 10.5px; padding: 1px 7px; }
/* Une propriété demandée mais vide se DIT : la voir absente est une
   information, la voir disparaître n'en est pas une. */
.ukb-prop dd.is-vide::after { content: 'Non renseigné'; font-weight: 500; color: var(--text-muted); }
/* La carte des tâches et celle du pipe portent la même grille : leur
   propre conteneur, mais la même paire libellé/valeur. */
/* « Tout sélectionner » est collé à ce qu'il sélectionne, au-dessus de la
   première ligne : dans la barre de commande il coûtait 151 px pour une
   action qui ne concerne que le corps. */
.tk-selline {
    display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 7px 12px;
    border: 1.5px dashed var(--gray-300); border-radius: var(--radius-pill); background: var(--surface);
    font-size: 12.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; width: fit-content;
    transition: border-color .15s, color .15s;
}
.tk-selline:hover { border-color: var(--blue); color: var(--text-primary); }
.tk-selline input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.tk-selline i { font-style: normal; font-weight: 600; color: var(--text-muted); }
.tk-selline:has(input:checked) { border-style: solid; border-color: var(--blue); color: var(--blue-dark); background: var(--blue-pale); }
.tk-props { flex-shrink: 0; }
#tkPropsP { right: 0; top: calc(100% + 8px); }
/* La liste reprend la même paire, en ligne, dans sa sous-ligne. */
.ulst-sub .ulst-p { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.ulst-sub .ulst-p i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.ulst-sub .ulst-p b { font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ukb-plus { padding: 6px 4px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
/* Teintes d'en-tête : la roue des quatre familles de la charte. On les pose
   par variables (--kb-hbg / --kb-hink), comme le pipe pose ses phases. */
.ukb-ton-0 { --kb-hbg: var(--blue-pale); --kb-hink: var(--blue-dark); }
.ukb-ton-1 { --kb-hbg: var(--green-soft); --kb-hink: var(--green-ink); }
.ukb-ton-2 { --kb-hbg: var(--orange-soft); --kb-hink: var(--orange-ink); }
.ukb-ton-3 { --kb-hbg: var(--gray-200); --kb-hink: var(--text-secondary); }

html[data-chrome="d"] .ukb-cn { background: rgba(11, 18, 32, .5); color: var(--text-primary); }

/* --- Le glisser-déposer du kanban unifié (repris du pipe, 2026-08-05) --- */
/* Le trou qui s'ouvre sous le curseur (.pc-gap du pipe) : il dit OÙ la carte
   va tomber, ce qu'un simple surlignage de colonne ne dit pas. */
.ukb-gap { flex-shrink: 0; height: 0; opacity: 0; border: 1.5px dashed var(--blue); border-radius: 12px; background: var(--blue-pale); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .ukb-gap { transition: height .16s cubic-bezier(.22, 1, .36, 1), opacity .16s; }
}
.ukb-gap.is-on { height: 76px; opacity: 1; }
.ukb-colbody:has(.ukb-gap.is-on) .ukb-vide { display: none; }
/* Le déplacement au clavier : sans lui, un kanban ne s'utilise qu'à la
   souris. Même rôle que le `.pc-move` du pipe. */
.ukb-move {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: 1px solid var(--gray-200); border-radius: 7px;
    background: var(--surface); color: var(--text-secondary); cursor: pointer; position: relative; flex: none;
}
.ukb-move::after { content: ''; position: absolute; inset: -8px; }
.ukb-move:hover { border-color: var(--blue); background: var(--blue-pale); color: var(--blue-dark); }
.ukb-move:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ukb-card a.ukb-t { text-decoration: none; color: var(--text-primary); }
.ukb-card a.ukb-t:hover { text-decoration: underline; }
/* Quand le groupement ne s'écrit pas, on le dit sous le plateau plutôt que
   de laisser essayer de déplacer une carte qui ne bougera pas. */
.ukb-fige {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 13px;
    border-radius: 10px; background: var(--gray-100); color: var(--text-secondary);
    font-size: 12.5px; line-height: 1.5;
}
.ukb-fige svg { flex: none; margin-top: 1px; color: var(--text-muted); }


/* ============================================================
   LA LIGNE DE COMMANDE PARTAGÉE (2026-08-05)
   ------------------------------------------------------------
   Onglets de vue, filet, recherche, icônes filtre et tri, compte,
   actions : LA MÊME ligne dans le CRM (crm.html) et dans le Pipe
   commercial (dossiers.html). Elle vivait dans css/crm.css, que le
   Pipe ne charge pas ; unifier les deux écrans imposait de la
   sortir. Le préfixe `crm-` est HISTORIQUE : ces classes ne
   décrivent plus une page mais une grammaire. Une seule hauteur,
   `--crm-h`.
   ============================================================ */
/* ─── LA LIGNE DE COMMANDE (2026-08-05) ───
   Vues et outils formaient deux rangées de cinq hauteurs différentes
   (31, 32, 36, 40 et 44 px). Des commandes de même rang à cinq tailles :
   l'œil cherche une règle et n'en trouve aucune, et 95 px de chrome
   séparaient les onglets du tableau. Tout tient sur UNE ligne à UNE
   hauteur, `--crm-h` = 36 px, la taille `btn--sm` déjà en place
   (« Ajouter » y était déjà : on tire tout vers l'existant plutôt que
   d'inventer une sixième mesure). La ligne se lit de gauche à droite :
   ce que je regarde (les vues), un filet, comment je le resserre
   (recherche, filtres), puis à droite ce que ça donne (le compte) et ce
   que j'en fais (réglages, ajout).
   LE « ⋯ » A DISPARU LE 2026-08-19. Il vivait entre les réglages et
   l'ajout et portait l'export, l'import et le modèle de données : deux
   portes voisines vers des réglages de la même base, sans rien qui dise
   laquelle portait quoi. Ses trois actions sont des rangées du panneau
   Réglages. Les règles qui le visaient (`.crm-io*`) sont parties avec
   lui, y compris dans les replis mobiles où il partageait un sélecteur
   avec les filtres. */
/* ============================================================
   [hidden] VEUT DIRE CACHÉ (2026-08-05)
   La règle de l'agent utilisateur pèse (0,0,1) : le moindre
   `display: flex` de composant la bat, et l'élément reste peint
   alors que le code le croit fermé. Le dépôt a payé ce piège
   quatre fois (pastilles de filtre, barre de filtres avancés,
   « Charger plus » du CRM qui gardait 56 px de vide sous le
   plateau). Une seule règle le referme pour de bon ; les rares
   composants qui doivent rester visibles malgré l'attribut le
   déclarent explicitement, comme avant.
   ============================================================ */
[hidden] { display: none !important; }

:root { --crm-h: 36px; }

/* ============================================================
   UN PLATEAU REMPLIT SON CADRE (préfixe pl-, 2026-08-05)
   Trois hauteurs se disputaient la place dans le kanban du CRM :
   le `max-height` du corps de colonne, la hauteur posée en JS sur
   le plateau et le `maxHeight` posé sur la colonne. Résultat : les
   colonnes s'arrêtaient avant le bas et DEUX ascenseurs se
   superposaient, celui de la page et celui de la colonne. Ici, une
   seule chaîne flex : la page occupe le cadre, le plateau prend ce
   qui reste, et lui seul défile. Aucune mesure, aucun écouteur de
   redimensionnement, donc rien à resynchroniser.
   ============================================================ */
/* `main.page` pèse (0,1,1) et garde ses 90 px de pied : il faut au moins
   autant de poids pour les rendre, sinon le plateau s'arrête trop haut. */
main.pl-page { display: flex; flex-direction: column; height: 100%; padding-bottom: 22px; }
.pl-chaine { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pl-zone { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Le plateau lui-même : ce qui le suit (bandeau d'explication, compteur)
   garde sa taille, lui prend le reste. */
.pl-zone > .ukb, .pl-zone > .pc-board, .pl-zone > .kb-board, .pl-zone > .brd { flex: 1; min-height: 0; }
.pl-zone > :not(.ukb):not(.pc-board):not(.kb-board):not(.brd) { flex: none; }
/* UNE SEULE RANGÉE, TOUJOURS (2026-08-05, second passage).
   `flex-wrap: wrap` était une politesse qui se retournait contre la ligne :
   dès qu'une vue de plus ne tenait pas, TOUT le groupe de droite basculait
   d'un cran et l'écran gagnait une rangée fantôme. Ici rien ne plie : c'est
   la barre de VUES qui cède, parce qu'elle est la seule liste ouverte (on en
   crée autant qu'on veut) et la seule qui sache défiler sans rien perdre.
   Le repli n'existe plus qu'en dessous de 901 px, où la scène change (le
   seuil était à 760 jusqu'au 2026-08-09 : voir plus bas, une tablette en
   portrait n'a pas la place d'un seul rang). */
.crm-top { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 10px 0 12px; min-width: 0; }
/* Le filet sépare les lunettes des requêtes : deux familles, une ligne. */
.crm-top-sep { flex: 0 0 1px; width: 1px; height: 20px; background: var(--gray-300); border-radius: 1px; }
/* `flex: 1 0 auto` REFUSAIT DE RENDRE CINQ PIXELS. Base automatique,
   croissance oui, rétrécissement NON : la barre prenait la largeur de
   son contenu et sortait du cadre plutôt que de demander à la
   recherche de céder un peu (mesuré à 1101 px : 684 réclamés dans un
   cadre de 679, et la section défilait sur le côté pour ces 5 px).
   Elle rétrécit désormais, et c'est le champ qui absorbe, plancher à
   132 px : l'ordre voulu, les vues d'abord, la recherche ensuite,
   jamais un bouton. */
.crm-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
/* Loupe en SVG et non en background-image : le data-uri figeait sa couleur
   en #6E7A8E, illisible sur le fond sombre du thème « d ». */
/* La recherche ne prend plus toute la place disponible : dans une base
   déjà bornée par un onglet, une vue et des filtres, c'est un outil de
   plus, pas le sujet de l'écran. 420 px en faisaient le plus gros objet
   de la page. */
.crm-find { position: relative; flex: 0 1 250px; min-width: 132px; display: flex; align-items: center; }
.crm-find > svg { position: absolute; left: 13px; color: var(--text-muted); pointer-events: none; }
.crm-find input {
    width: 100%; min-width: 0; min-height: var(--crm-h); padding: 0 14px 0 35px;
    border: 1.5px solid var(--gray-300); border-radius: var(--radius-pill);
    font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface);
}
.crm-find input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
/* ---------- Filtres : un bouton, un panneau, un compteur ---------- */
.crm-filt { flex-shrink: 0; }
.crm-filt-b {
    display: inline-flex; align-items: center; gap: 7px; min-height: var(--crm-h); padding: 0 13px;
    border: 1.5px solid var(--gray-300); border-radius: var(--radius-pill); background: var(--surface);
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-primary); cursor: pointer;
    white-space: nowrap; transition: border-color .15s, background .15s;
}
/* En icône seule, le bouton devient carré : deux entonnoirs de largeurs
   différentes ne se liraient pas comme une paire. Le compteur passe en
   pastille d'angle, faute de place à côté du mot. */
.crm-filt-b--ic { position: relative; width: var(--crm-h); padding: 0; justify-content: center; }
.crm-filt-b--ic .crm-filt-n {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px;
}
.crm-filt-b:hover { border-color: var(--blue); background: var(--blue-pale); }
.crm-filt-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.crm-filt-b svg { color: var(--text-secondary); }
.crm-filt.is-open .crm-filt-b { border-color: var(--blue); background: var(--blue-pale); }
/* Le compteur dit combien de filtres mordent sans avoir à rouvrir le panneau */
.crm-filt-n {
    display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--radius-pill); background: var(--blue); color: #fff; font-size: 11px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* Le panneau n'est plus une liste de puces mais un composeur de règles :
   trois contrôles par ligne demandent de la largeur, sinon les libellés
   de champ (« Type de rattachement ») sont tronqués et on filtre à
   l'aveugle. */
.crm-filt-p { left: 0; right: auto; min-width: 380px; max-width: min(580px, calc(100vw - 32px)); padding: 14px; }
.crm-filt-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.crm-filt-h b { font-size: 12.5px; font-weight: 800; color: var(--text-primary); }
.crm-filt-clr, .crm-ctx-clr {
    margin-left: auto; border: none; background: none; padding: 4px 2px; font: inherit; font-size: 12px;
    font-weight: 700; color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.crm-filt-clr:hover, .crm-ctx-clr:hover { color: var(--text-primary); }
.crm-filt-clr:focus-visible, .crm-ctx-clr:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.crm-filt-g + .crm-filt-g { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.crm-filt-l { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
/* ─── Règles du panneau de filtres ───
   Même grammaire que les règles du constructeur de segment : c'est le même
   langage, ce qu'on compose ici s'enregistre là-bas sans traduction. */
.crm-frs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.crm-fr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1.1fr) 30px; gap: 6px; align-items: center; }
/* « est vide » n'a pas de valeur : la colonne libérée revient à l'opérateur
   plutôt que de laisser un trou qui ferait sauter la grille d'une ligne à
   l'autre. */
.crm-fr:not(:has(.sgf-v)) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.05fr) 30px; }
.crm-filt-vide { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
.crm-fradd { align-self: flex-start; }
.crm-filt-v { display: flex; flex-wrap: wrap; gap: 7px; }
/* Les puces font 30 px de haut : on étend la zone de clic à 44 px sans
   les grossir, l'écart de 7 px suffit pour ne pas les faire se recouvrir. */
.crm-filt-v .chip { position: relative; }
.crm-filt-v .chip::after { content: ''; position: absolute; inset: -7px -3px; }


.crm-vues { position: relative; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; margin: 0; }
.crm-vue {
    display: inline-flex; align-items: center; gap: 7px; border: 0; background: none;
    font: 700 13px/1 'Mukta Mahee', sans-serif; color: var(--text-secondary);
    min-height: var(--crm-h); padding: 0 11px; border-radius: 9px; cursor: pointer;
    white-space: nowrap; transition: background .15s, color .15s;
}
.crm-vue svg { opacity: .75; }
.crm-vue:hover { background: var(--gray-100); color: var(--text-primary); }
.crm-vue[aria-current="true"] { background: var(--blue-pale); color: var(--blue-dark); }
.crm-vue[aria-current="true"] svg { opacity: 1; }
.crm-vue:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.crm-vue--plus { padding: 0 9px; color: var(--text-muted); }
/* Le groupe a quitté le bout des onglets pour le groupe de droite de la
   barre d'outils : ce sont des actions sur la vue, elles se rangent avec
   les autres actions. Plus de `margin-left: auto`, la barre s'en charge. */
/* LA BARRE DE VUES EST CELLE QUI CÈDE, et elle défile latéralement au-delà
   d'un seuil : c'est la seule liste que l'utilisateur allonge lui-même, donc
   la seule qui doive savoir se serrer. Les commandes gardent leur taille :
   une icône de tri à moitié coupée ne vaut rien. */
/* Un facteur de rétrécissement ÉNORME : sans lui, flexbox répartit la
   pression entre la barre de vues et le groupe de commandes, et la ligne
   débordait quand même de cent pixels. Ici la barre de vues encaisse
   tout, jusqu'à ses 84 px, avant que quoi que ce soit d'autre ne cède. */
.crm-top > .crm-vues { flex: 0 1000 auto; min-width: 84px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.crm-top > .crm-vues::-webkit-scrollbar { display: none; }
/* LE MENU « + NOUVELLE VUE » SORTAIT ROGNÉ (2026-08-18) : la barre de vues
   défile (overflow) et clippait le panneau absolu posé dedans, au CRM
   comme dans Notion ; et le panneau ouvert, comptant dans le débordement,
   déclenchait le dégradé de bord (mask-image), qui l'effaçait tout entier.
   Le temps qu'il est ouvert, la barre laisse dépasser et lâche son masque ;
   les deux reprennent à sa fermeture. */
.crm-top > .crm-vues:has(.crm-vplus-p:not([hidden])) { overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* Un dégradé de bord dit qu'il y a la suite, comme l'ombre des plateaux. */
.crm-top > .crm-vues.is-plus {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.crm-vues-r { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Les pastilles de filtres actifs, SANS leur bouton : dans une ligne de
   commande, l'entonnoir est dans la ligne (voir .fx-btn--ic), seules les
   pastilles gardent une rangée à elles, sous la ligne qu'elles commentent. */
.fx-chips--seule { margin: -2px 0 12px; }
.fx-chips--seule[hidden] { display: none; }
.crm-vb {
    position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--gray-300);
    background: var(--surface); border-radius: var(--radius-pill); color: var(--text-secondary);
    font: 700 12.5px/1 'Mukta Mahee', sans-serif; min-height: var(--crm-h); padding: 0 12px; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.crm-vb:hover { border-color: var(--blue); color: var(--blue-dark); }
.crm-vb:focus-visible { outline: 2px solid var(--blue); outline-offset: -1.5px; }
.crm-vb-n {
    position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--blue); color: #fff; font-size: 10px; font-style: normal; font-weight: 800;
}

/* Le menu « Partir de zéro ».
   IL NE S'AFFICHAIT PAS (corrigé le 2026-08-05). Il porte `.dd-panel`, dont
   la règle générique est `display: none` levée par `.dd.is-open .dd-panel` ;
   or ce menu-ci se commande par l'attribut `hidden`, jamais par la classe
   `is-open`. Il restait donc invisible en toutes circonstances, et seuls des
   clics simulés (qui atteignent un élément en display:none) le faisaient
   « marcher ». C'est l'ouverture qui décide, et elle passe par `hidden`. */
.crm-vplus { position: relative; }
.crm-vplus-p { display: block; position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: 210px; padding: 10px; }
.crm-vplus-p[hidden] { display: none; }
.crm-vplus-t { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 2px 6px 8px; }
.crm-vplus-o {
    display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none;
    font: 700 13px/1 'Mukta Mahee', sans-serif; color: var(--text-primary);
    padding: 9px 8px; border-radius: 8px; cursor: pointer; text-align: left;
}
.crm-vplus-o:hover { background: var(--blue-pale); color: var(--blue-dark); }
/* Les chips de la vue (tris + règles), sous la barre */
.crm-vchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0 0; }
.crm-vchip {
    display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--blue-muted, #BDDCFF);
    background: var(--blue-pale); color: var(--blue-dark); border-radius: 999px;
    font: 700 12px/1 'Mukta Mahee', sans-serif; padding: 5px 10px;
}
button.crm-vchip { cursor: pointer; }
.crm-vchip-x { border: 0; background: none; color: var(--blue-dark); font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.crm-vchip-x:hover { background: rgba(0, 109, 236, .14); }


/* Les onglets de base / de cible, au-dessus de la ligne de commande */
.crm-tabs { margin-bottom: 14px; }
/* L'icône de base : elle se reconnaît avant le mot, et s'allume avec l'onglet */
.crm-tab { display: inline-flex; align-items: center; gap: 8px; }
.crm-tab svg { flex-shrink: 0; color: var(--text-secondary); transition: color .15s; }
.crm-tab[aria-selected="true"] svg { color: var(--blue); }
.crm-tab:hover svg { color: var(--text-primary); }
.crm-tabs .tab b {
    display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: var(--radius-pill);
    background: var(--gray-200); color: var(--text-secondary); font-size: 11px; font-weight: 800;
}
.crm-tabs .tab[aria-selected="true"] b { background: var(--blue-pale); color: var(--blue-dark); }

/* Actions de la base, groupées à droite : le compte, puis ce qu'on peut
   faire de ce qu'on lit (l'enregistrer en segment, y ajouter une ligne) */
.crm-count { margin-left: auto; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-bar > .btn { flex-shrink: 0; }
/* [hidden] doit gagner sur le display du composant : .btn est en
   inline-flex et .crm-ctx en flex, l'attribut seul ne les masquait pas. */
.crm-bar > .btn[hidden], .crm-ctx[hidden], .crm-filt-n[hidden] { display: none; }
/* Sous 760 px, un pli assumé : recherche seule puis filtres et actions */
/* Le libellé le plus long de la ligne (186 px) cède en premier : l'icône
   de signet et l'aria-label portent le sens, la ligne tient jusqu'à 1024. */
@media (max-width: 1180px) {
    .crm-save span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .crm-save { padding: 0 11px; }
    /* 74 px manquaient pour tenir la ligne à 1024. C'est la recherche qui
       les rend, pas un libellé : un champ plus court reste un champ, un
       bouton sans mot devient une devinette. « Rechercher… » tient encore. */
    .crm-find { flex-basis: 175px; }
}
/* Le compte est la seule chose de la ligne qui ne soit pas une commande :
   c'est lui qui cède quand la place manque, pas un bouton. */
@media (max-width: 1080px) {
    .crm-count { order: 9; }
}
/* ============================================================
   SOUS 761 px, UNE SEULE GRILLE POUR TOUTE LA LIGNE DE COMMANDE
   ------------------------------------------------------------
   La ligne tient dans DEUX boîtes : `.crm-top` porte la pastille de
   vue, `.crm-bar` porte la recherche et les six commandes. Tant que
   les deux existent, elles ne peuvent pas partager une ligne de flex,
   et la pastille se retrouvait seule sur 44 px de haut à côté de
   200 px de vide, la recherche seule sur la ligne suivante, les
   commandes sur la troisième : 194 px de chrome mesurés à 600, 180 à
   375, avant la première donnée.

   `display: contents` retire la boîte de `.crm-bar` sans toucher au
   balisage : ses enfants deviennent les items de `.crm-top`, qui les
   répartit lui-même. Elle n'a ni fond ni bordure, il n'y a rien à
   perdre. On passe à trois lignes : vue et recherche, les commandes,
   la légende. Mesuré : 130 px, à 375 comme à 600.

   LE PLI SE RÈGLE À LA BASE DU CHAMP, ET LA FENÊTRE EST ÉTROITE. Trop
   courte, le premier bouton monte s'asseoir à côté (mesuré à 120 px :
   la ligne finissait à 343 pile, filtre compris) ; trop longue, le
   champ descend et la pastille reste seule. 52 % du cadre tient les
   deux bouts à toutes les largeurs. La pastille, elle, est plafonnée à
   40 % et défile chez elle si son nom est long : sinon un intitulé de
   vue bavard ferait sauter le calcul sur un écran de 320.

   EFFET DE BORD BIENVENU : le panneau de réglages est posé dans
   `.crm-top` mais son `--vp-top` se calculait depuis `.crm-bar`, qui
   était le parent positionné. Sans cette boîte, la mesure et le
   placement partagent enfin la même origine. */
/* JUSQU'OÙ LE REPLI ? DEUX PALIERS, PARCE QUE CE SONT DEUX PROBLÈMES.
   ------------------------------------------------------------
   Sur un seul rang, la ligne réclame 882 px. Un cadre plus étroit et
   elle déborde : `nowrap` la laissait dépasser, et c'est la SECTION
   entière qui défilait sur le côté, tableau compris (128 px mesurés sur
   une tablette en portrait, 14 sur un petit portable à 1000). Ce qui
   bloquait, c'est `.crm-bar` en `flex: 1 0 auto` : un bloc qui refuse de
   rétrécir ne passe jamais à la ligne, il prend la largeur de son
   contenu et sort du cadre. `display: contents` le retire du calcul, ses
   enfants deviennent les items de la ligne, et flex peut enfin plier. Il
   n'a ni fond ni bordure, il n'y a rien à perdre.

   Premier palier, jusqu'à 1100 : on autorise le pli, rien de plus. Le
   cadre y offre 968 px, la ligne s'y range en un ou deux rangs sans que
   rien ne dépasse. Ce palier reste nécessaire même depuis que la barre
   rétrécit (voir plus haut) : sur Tâches, dont la bascule aligne quatre
   vues, le champ touche son plancher de 132 px et il manque encore 78 px
   à 1000. Rétrécir ne suffit pas toujours, il faut pouvoir plier.

   Second palier, jusqu'à 900 : la scène change pour de bon, et les
   tailles avec (voir le bloc suivant).

   POURQUOI DES SEUILS PLUTÔT QUE DU `wrap` PARTOUT : au-dessus, la
   règle d'origine veut que ce soit la barre de VUES qui cède, parce
   qu'elle sait défiler sans rien perdre. Or flex décide du repli AVANT
   de rétrécir : `wrap` partout ferait plier la ligne sur un grand écran
   au lieu de resserrer les vues (mesuré sur Tâches à 1280, qui gagnait
   un rang pour rien). D'où le seuil, à défaut de mieux. */
@media (max-width: 1100px) {
    .crm-top { flex-wrap: wrap; }
    .crm-bar { display: contents; }
}
@media (max-width: 900px) {
    .crm-top > .crm-vues { flex: 0 1 auto; max-width: 40%; }
    .crm-top-sep { display: none; }
    /* LA BASCULE DES VUES GARDE SA LIGNE, TOUJOURS (2026-08-13).
       ------------------------------------------------------------
       Elle ne la gardait que « quand elle porte plusieurs vues » :
       Tâches en aligne quatre et prenait sa rangée, le CRM n'en montre
       qu'une et la partageait donc avec la RECHERCHE. Deux écrans
       voisins, deux agencements, et surtout un rangement qui ne veut
       rien dire : la recherche se retrouvait à côté des vues, c'est-à-
       dire au niveau des ONGLETS, alors qu'elle appartient à la même
       famille que filtrer, trier et régler. On la cherchait en bas et
       elle était en haut.

       Ce n'était pas une décision, c'était un `flex-wrap` qui tombait
       d'un côté ou de l'autre selon le NOMBRE de vues. Les vues
       prennent maintenant leur rangée dans tous les cas, et la ligne
       suivante réunit la recherche et les commandes, sur les quatre
       écrans à vues. */
    .crm-top > .crm-vues { flex: 1 0 100%; max-width: none; }
    /* Et alors la base du champ n'a plus rien à retenir : elle servait à
       pousser le premier bouton à la ligne, or la bascule s'en charge.
       Rendue à 120 px, la ligne des commandes se referme d'un cran.

       ET IL NE GRANDIT PAS. Avec `flex-grow: 1` il avalait la place
       restante de sa ligne, et le dernier bouton — le « + », celui qui
       crée — passait seul à la ligne suivante. Mesuré : champ à 111 px,
       31 px libres, 44 nécessaires. Un champ de recherche n'a aucune
       raison de pousser une commande hors de sa rangée : il prend ce
       qu'on lui laisse, il ne se sert pas. */
    .crm-find { flex: 0 1 120px; min-width: 0; }
}
/* ============================================================
   SOUS 720 px, TOUTE LA LIGNE TIENT SUR UN RANG : LES VUES, LE
   FILET, « ⋯ » ET « + » (2026-08-14)
   ------------------------------------------------------------
   Le rang des commandes alignait six pastilles et une recherche qui,
   serrée au pixel, finissait par afficher « Rec ». Arbitré : sur
   téléphone il ne reste que CRÉER (« + ») et TOUT LE RESTE (« ⋯ »,
   le menu injecté par js/vues-mob.js : rechercher, filtrer, trier,
   réglages, import). Les vues remontent sur la même ligne, séparées
   des actions par le filet vertical, et défilent latéralement : elles
   savent céder de la place sans rien perdre.

   LES DÉCLENCHEURS D'ORIGINE NE SONT PAS RETIRÉS : cachés. Le menu ne
   fait rien lui-même, chaque entrée renvoie le clic au vrai bouton,
   et il n'y a qu'un seul comportement à maintenir. Leurs boîtes
   passent en `display: contents` : une boîte vide de 0 px consomme
   quand même sa gouttière de flex, quatre fantômes coûtaient 40 px
   aux vues ; sans boîte, leurs panneaux s'ancrent sur `.crm-top` et
   les règles ci-dessous les étalent sur la ligne entière. */
@media (max-width: 720px) {
    /* BASE 0, PAS auto : flex décide du repli AVANT de rétrécir, et
       avec leur largeur de contenu pour base (379 px sur Tâches), les
       vues prenaient la rangée entière et expédiaient « ⋯ » et « + »
       à la ligne. Base nulle : elles ne pèsent rien au placement, puis
       grandissent dans ce qui reste, et défilent dedans. */
    .crm-top > .crm-vues { flex: 1 1 0; max-width: none; min-width: 0; }
    .crm-top-sep { display: block; }
    .crm-find { display: none; }
    .crm-filt, .fx, [id$="FxHost"] { display: contents; }
    /* `.crm-top` en préfixe : filtres.css se charge APRÈS ce fichier et
       son `.fx-btn { display: inline-flex }` regagnait à ordre égal. */
    .crm-top .crm-filt-b, .crm-top .fx-btn,
    .crm-top .crm-vues-r, .crm-top .crm-save { display: none; }
    .crm-filt-p, .fx-pan { left: 0; right: 0; min-width: 0; max-width: none; width: auto; }
    /* Le panneau de réglages n'a RIEN à corriger ici : sous 760 il est
       déjà une feuille ancrée en bas d'écran (position: fixed, voir le
       bloc « les onglets défilent » plus bas), qui se moque de son
       ancre cachée. Lui rendre un `top` le sortait de l'écran. */
    /* La recherche, invoquée depuis « ⋯ » : elle prend sa propre rangée
       sous la ligne, et la garde tant qu'elle porte une requête
       (js/vues-mob.js la replie au flou du champ vide). */
    .crm-top.is-cherche .crm-find { display: flex; flex: 1 0 100%; order: 5; }
    /* Le compte n'est pas une commande : il descend sur sa propre
       ligne, fine, sous les boutons. C'est une légende. */
    .crm-count { margin-left: 0; order: 9; flex: 1 0 100%; margin-top: 2px; }
}
/* Préfixe vm- (le module js/vues-mob.js) et PAS crm-more : ce nom-là
   existe déjà dans crm.css, c'est la rangée « voir plus » du tableau,
   et son coussin de 16 px désaxait le rond. En flex : la ligne de base
   d'un bloc ajoutait son vide sous le bouton. */
.vm-more { display: flex; }
.vm-more-b {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--crm-h, 36px); height: var(--crm-h, 36px); padding: 0;
    border: 1.5px solid var(--gray-300); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--text-secondary); cursor: pointer;
}
.vm-more-b:hover { border-color: var(--blue); color: var(--text-primary); }
.vm-more-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Un filtre ou un tri posé et invisible est un piège : le point le
   dit, comme sur l'engrenage du mail. `:has` le tient en phase avec
   les compteurs des vrais boutons, sans une ligne de script. */
.crm-top:has(.crm-filt-n:not([hidden])) .vm-more-b::after,
.crm-top:has(.fx-btn.is-on) .vm-more-b::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--orange);
    box-shadow: 0 0 0 2px var(--surface);
}
.vm-more-p { min-width: 232px; padding: 6px; }
.vm-more-p .dd-item svg { flex-shrink: 0; color: var(--text-muted); }
/* APRÈS les règles de base, sinon elles regagneraient à ordre égal
   (display compris : écrit avant, le `flex` de base rendait le menu au
   bureau). Sur téléphone le rond prend la cible pleine ; au-dessus, le
   menu n'existe pas, chaque commande garde sa porte dans la ligne. */
@media (max-width: 720px) {
    .vm-more-b { width: 44px; height: 44px; }
}
@media (min-width: 721px) { .vm-more { display: none; } }

/* ============================================================
   SUR TÉLÉPHONE, TOUTES LES ACTIONS TIENNENT SUR UNE LIGNE
   ------------------------------------------------------------
   Mesuré : elles en occupaient TROIS, plus la recherche, plus le
   compte, soit 168 px de commandes avant la première donnée, sur un
   écran qui en offre 650. Deux libellés à eux seuls prenaient 246 px :
   « Réglages » (97) et « Ajouter un contact » (149), quand leurs
   voisins font 36 px et disent la même chose d'un pictogramme.

   Ils passent donc en icône seule, comme le filtre, le tri, les
   automatisations et l'import. Rien n'est perdu pour qui n'y voit
   pas : chaque bouton porte déjà son `aria-label` complet
   (« Réglages de la vue et de la base de données », « Ajouter un
   contact »), et c'est lui que lit un lecteur d'écran, pas le mot.

   POURQUOI `font-size: 0` ET PAS UNE CLASSE. Le mot « Réglages » est
   un noeud de texte NU, sans balise autour, écrit à l'identique dans
   quatre écrans (CRM, les deux Pipe, Tâches). On ne peut pas le viser
   par un sélecteur ; on peut annuler sa taille, et les SVG voisins
   portent leurs dimensions en attribut, donc ne bougent pas. Une règle
   ici vaut mieux que quatre retouches de balisage à garder synchrones.

   Résultat mesuré à 375 px : six actions sur une ligne de 36 px là où
   il en fallait trois. (Le compte, lui, descend sur sa propre ligne
   dès 760 px : c'est une légende, pas une commande, et la règle vit
   dans le bloc au-dessus.) */
@media (max-width: 560px) {
    .crm-vb--set { gap: 0; padding: 0; width: 36px; font-size: 0; justify-content: center; }
    .crm-bar > .btn--primary { gap: 0; padding: 0; width: 44px; min-width: 44px; }
    .crm-bar > .btn--primary > span {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
}
.crm-count b { color: var(--text-primary); }

/* ============================================================
   LES VUES, PARTOUT (façon base de données universelle)
   Barre de vues, panneau de réglages en pile, menu contextuel,
   sélecteur de propriété, contrôles de formulaire des panneaux.
   Venu de css/crm.css le 2026-08-05 : le Pipe et la Production
   parlent la même langue et ne chargent pas ce fichier-là. Le
   préfixe crm- reste historique, il ne dit plus la page.
   ============================================================ */
/* Les onglets de vue ouvrent la ligne de commande : plus de rangée à eux,
   plus de filet sous eux (c'est `.crm-top-sep` qui sépare, à la verticale,
   les lunettes des requêtes). `flex-wrap: nowrap` garde les vues groupées ;
   quand elles se multiplient, c'est la barre d'outils qui passe à la ligne
   (flex-wrap sur `.crm-top`), jamais un onglet qui se détache du lot. */
/* Le panneau « Vue ».
   MÊME PANNE, MÊME CAUSE (corrigé le 2026-08-05) : `.dd-panel` le mettait en
   `display: none` et rien ne l'en sortait, ce panneau n'étant pas dans un
   `.dd`. Il n'existe dans le DOM que pendant qu'il est ouvert (créé par
   `renderVueParam`, retiré à la fermeture) : son display n'a donc aucune
   raison d'être conditionnel. */
.crm-vuep {
    display: block; position: absolute; z-index: 65; right: 0; top: var(--vp-top, calc(100% + 6px));
    width: 330px; max-height: min(66vh, 560px); overflow-y: auto; scrollbar-width: thin; padding: 14px;
}
.crm-vuep-note { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.crm-vuep-nom input { width: 100%; min-height: 36px; padding: 0 10px; border: 1.5px solid var(--gray-300); border-radius: 9px; font: 800 14px/1.2 'Mukta Mahee', sans-serif; color: var(--text-primary); background: var(--surface); }
.crm-vuep-nom input:focus-visible { outline: 2px solid var(--blue); outline-offset: -1.5px; border-color: var(--blue); }
.crm-vuep-s { margin-top: 12px; }
.crm-vuep-s > p { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.crm-vuep-disp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.crm-vuep-d {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border: 1.5px solid var(--gray-300); border-radius: 10px; background: none;
    font: 700 11.5px/1 'Mukta Mahee', sans-serif; color: var(--text-secondary); padding: 10px 4px; cursor: pointer;
}
.crm-vuep-d[aria-pressed="true"] { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-pale); }
.crm-vuep-det { margin-top: 12px; border-top: 1px solid var(--gray-200); padding-top: 8px; }
.crm-vuep-det > summary { font-size: 12.5px; font-weight: 800; color: var(--text-primary); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.crm-vuep-det > summary::-webkit-details-marker { display: none; }
.crm-vuep-det > summary i { font-style: normal; font-size: 11px; color: var(--blue-dark); background: var(--blue-pale); border-radius: 999px; padding: 1px 7px; }
.crm-vuep-det > summary::after { content: '+'; margin-left: auto; color: var(--text-muted); }
.crm-vuep-det[open] > summary::after { content: '−'; }
.crm-vuep-props { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }
.crm-vuep-prop { display: flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); padding: 3px 2px; }
.crm-vuep-prop span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-vuep-prop button { border: 0; background: none; color: var(--text-muted); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.crm-vuep-prop button:hover:not(:disabled) { background: var(--gray-100); color: var(--text-primary); }
.crm-vuep-prop button:disabled { opacity: .3; cursor: default; }
.crm-vuep-add { margin-top: 6px; width: 100%; }
.crm-vuep-regles { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.crm-vuep-regles .crm-fr { display: grid; grid-template-columns: 1fr 1fr auto; gap: 5px; }
.crm-vuep-regles .crm-fr .sgf-v { grid-column: 1 / 3; }
.crm-vuep-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; border-top: 1px solid var(--gray-200); padding-top: 12px; }
.crm-vuep-sup { color: var(--danger-ink); }
/* ---------- Le menu contextuel des vues (clic droit) et les réglages ---------- */
/* Le chrome du panneau est recopié de .dd-panel SANS sa classe : son ancre
   `right: 0` tirait le menu hors écran une fois `left` posé au clic. */
.crm-vuectx, .crm-vuectx-p {
    background: var(--surface); border: 1px solid var(--gray-200); border-radius: 14px;
    box-shadow: var(--shadow-lg); padding: 6px;
}
.crm-vuectx { display: block; position: fixed; z-index: 96; min-width: 235px; }
.crm-vuectx-sep { border: 0; border-top: 1px solid var(--gray-200); margin: 5px 0; }
.crm-vuectx-sub { position: relative; }
.crm-vuectx-p { display: block; position: absolute; left: calc(100% - 8px); top: -4px; z-index: 97; min-width: 185px; }
.crm-vuectx-p[hidden] { display: none; }
/* La rangée commune du menu contextuel ET du panneau des réglages */
.crm-set-t { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 10px 10px 5px; }
.crm-set-t:first-child { padding-top: 4px; }
.crm-set-r {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 4px 10px;
    border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left;
    font: 600 13px/1.3 'Mukta Mahee', sans-serif; color: var(--text-primary); text-decoration: none;
}
.crm-set-r:hover { background: var(--gray-100); }
.crm-set-r:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.crm-set-r > svg:first-child { flex-shrink: 0; color: var(--text-secondary); }
.crm-set-r span { flex: 1; min-width: 0; }
.crm-set-r span small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.crm-set-r i { flex-shrink: 0; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text-muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-set-chev { flex-shrink: 0; color: var(--gray-300); }
.crm-set-r.is-danger, .crm-set-r.is-danger > svg:first-child { color: var(--danger-ink); }
.crm-set-r.is-danger:hover { background: var(--danger-soft); }
.crm-setp { padding: 8px; }
.crm-setp .sw { pointer-events: none; }

/* ============================================================
   LE SÉLECTEUR DE PROPRIÉTÉ (préfixe crm-cp-)
   ------------------------------------------------------------
   Un <select> de 404 entrées ne se lit pas : sur les contacts, le
   modèle en compte autant. Le sélecteur montre d'abord les
   propriétés qui portent VRAIMENT une valeur sur les fiches, et
   ouvre la recherche sur tout le reste. Partagé par le panneau de
   filtres, le tri et les automatisations : un seul vocabulaire.
   ============================================================ */
.crm-cp { position: fixed; z-index: 97; width: 330px; max-height: min(70dvh, 560px); display: flex; flex-direction: column; padding: 0; }
.crm-cp-q { padding: 10px 10px 8px; border-bottom: 1px solid var(--gray-200); }
.crm-cp-q input {
    width: 100%; min-height: 34px; padding: 0 11px; border: 1.5px solid var(--blue);
    border-radius: 9px; background: var(--surface); color: var(--text-primary); font: inherit; font-size: 13px;
}
.crm-cp-q input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.crm-cp-l { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 5px; }
.crm-cp-t {
    display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted); padding: 9px 9px 5px;
}
.crm-cp-t i { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 700; }
.crm-cp-i {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 3px 9px;
    border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
    font: 600 13px/1.3 'Mukta Mahee', sans-serif; color: var(--text-primary);
}
.crm-cp-i:hover, .crm-cp-i.is-act { background: var(--gray-100); }
.crm-cp-i > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-cp-i small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La pastille de type : « Aa », « # », une icône. Elle tient la colonne
   de gauche à largeur fixe pour que les noms s'alignent. */
.crm-cp-ty {
    flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: 10.5px; font-weight: 800; font-style: normal;
}
.crm-cp-hs { flex-shrink: 0; font-size: 10px; font-weight: 800; color: var(--green-ink); background: var(--green-soft); border-radius: 5px; padding: 1px 6px; font-style: normal; }
.crm-cp-plus { border-top: 1px solid var(--gray-200); padding: 5px; }
.crm-cp-plus .crm-cp-i { color: var(--blue-dark); font-weight: 700; }
.crm-cp-vide { padding: 14px 12px; font-size: 12.5px; color: var(--text-muted); }
.crm-cp-note { padding: 4px 10px 9px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }

/* Le champ d'une règle : un bouton qui ouvre le sélecteur, plus un select
   de 404 entrées. Il garde la largeur de l'ancien <select>. */
.crm-fchamp {
    display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 34px; padding: 0 9px;
    border: 1.5px solid var(--gray-300); border-radius: 9px; background: var(--surface);
    font: 600 12.5px/1.2 'Mukta Mahee', sans-serif; color: var(--text-primary); cursor: pointer; text-align: left;
}
.crm-fchamp:hover { border-color: var(--blue); }
.crm-fchamp:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.crm-fchamp span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-fchamp svg { flex-shrink: 0; color: var(--text-muted); }
/* Une règle posée sur une propriété qu'aucune fiche ne porte encore */
.crm-fr-warn { grid-column: 1 / -1; margin: -2px 0 2px; font-size: 11.5px; color: var(--orange-ink); display: flex; align-items: center; gap: 6px; }

/* Le tri, même grammaire que les filtres */
.crm-tri-p { left: auto; right: 0; min-width: 330px; max-width: min(430px, calc(100vw - 32px)); padding: 14px; }
.crm-tr { display: grid; grid-template-columns: minmax(0, 1fr) 128px 30px; gap: 6px; align-items: center; }
.crm-tri-vide { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }

/* ============================================================
   LES CONTRÔLES DE FORMULAIRE DES PANNEAUX (2026-08-05)
   ------------------------------------------------------------
   `.sgf-f`, `.sgf-o`, `.sgf-v` n'avaient AUCUN style : c'étaient
   des <select> et des <input> système, au milieu de panneaux
   dessinés au pixel. Le chevron natif est remplacé par le nôtre
   (un SVG en background, teinté par thème), la hauteur s'aligne
   sur les autres contrôles de la page.
   ============================================================ */
.sgf-f, .sgf-o, .sgf-v, .crm-au-f select, .crm-au-f input, .crm-set-l select {
    min-width: 0; min-height: 34px; padding: 0 10px;
    border: 1.5px solid var(--gray-300); border-radius: 9px; background: var(--surface);
    color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 600;
}
select.sgf-f, select.sgf-o, select.sgf-v, .crm-au-f select, .crm-set-l select {
    appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
    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='%236E7A8E' stroke-width='2.6' 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 9px center;
}
html[data-chrome="d"] select.sgf-f, html[data-chrome="d"] select.sgf-o, html[data-chrome="d"] select.sgf-v,
html[data-chrome="d"] .crm-au-f select, html[data-chrome="d"] .crm-set-l select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B98AE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.sgf-f:hover, .sgf-o:hover, .sgf-v:hover, .crm-au-f select:hover, .crm-set-l select:hover { border-color: var(--blue-muted); }
.sgf-f:focus-visible, .sgf-o:focus-visible, .sgf-v:focus-visible,
.crm-au-f select:focus-visible, .crm-au-f input:focus-visible, .crm-set-l select:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
input.sgf-v::placeholder { color: var(--text-muted); font-weight: 500; }

/* ============================================================
   LE PANNEAU DE RÉGLAGES EN PILE (crm-set-)
   ============================================================ */
.crm-setp { padding: 0; width: 340px; display: flex; flex-direction: column; }
.crm-set-h {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    padding: 11px 12px 10px; border-bottom: 1px solid var(--gray-200);
}
.crm-set-h > b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-set-h--racine { padding-bottom: 9px; }
.crm-set-h .crm-vuep-nom { flex: 1; min-width: 0; }
.crm-set-back, .crm-set-x {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
    width: 28px; height: 28px; border: 0; border-radius: 8px; background: none;
    color: var(--text-secondary); cursor: pointer; position: relative;
}
.crm-set-back::after, .crm-set-x::after { content: ''; position: absolute; inset: -7px; }
.crm-set-back:hover, .crm-set-x:hover { background: var(--gray-100); color: var(--text-primary); }
.crm-set-q { flex: 0 0 auto; padding: 10px 10px 8px; border-bottom: 1px solid var(--gray-200); }
.crm-set-q input {
    width: 100%; min-height: 34px; padding: 0 11px; border: 1.5px solid var(--blue);
    border-radius: 9px; background: var(--surface); color: var(--text-primary); font: inherit; font-size: 13px;
}
.crm-set-q input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.crm-set-l { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 5px; }
.crm-set-l--pad { padding: 12px; }
.crm-set-aide { font-size: 12px; line-height: 1.5; color: var(--text-secondary); padding: 4px 9px 8px; }
.crm-set-l--pad .crm-set-aide { padding: 0 0 10px; }
.crm-set-ok { font-style: normal; color: var(--blue-dark); font-weight: 800; }
.crm-setp .crm-vuep-disp { padding: 4px; }

/* Les propriétés : poignée, type, nom, ordre, œil */
.crm-vp-t {
    display: flex; align-items: center; gap: 8px; padding: 10px 9px 5px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.crm-vp-all {
    margin-left: auto; border: 0; background: none; padding: 2px; font: inherit; font-size: 11.5px;
    font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--blue-dark);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.crm-vp-all:hover { color: var(--text-primary); }
.crm-vp-r { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 2px 8px 2px 2px; border-radius: 8px; }
.crm-vp-r:hover { background: var(--gray-100); }
.crm-vp-r.is-traine { opacity: .4; }
.crm-vp-r.is-cible { box-shadow: inset 0 2px 0 var(--blue); }
.crm-vp-grip { flex: 0 0 16px; text-align: center; color: var(--gray-300); font-size: 11px; cursor: grab; letter-spacing: -2px; user-select: none; }
.crm-vp-grip.is-off { cursor: default; }
.crm-vp-r .crm-cp-ty { flex: 0 0 18px; width: 18px; }
.crm-vp-n { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-vp-n small { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.crm-vp-ord { display: flex; gap: 1px; opacity: 0; }
.crm-vp-r:hover .crm-vp-ord, .crm-vp-ord:focus-within { opacity: 1; }
.crm-vp-ord button {
    width: 22px; height: 22px; border: 0; border-radius: 6px; background: none;
    color: var(--text-muted); cursor: pointer; font-size: 12px;
}
.crm-vp-ord button:hover:not(:disabled) { background: var(--gray-200); color: var(--text-primary); }
.crm-vp-ord button:disabled { opacity: .3; cursor: default; }
.crm-vp-eye {
    flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px; background: none; color: var(--text-secondary); cursor: pointer; position: relative;
}
.crm-vp-eye::after { content: ''; position: absolute; inset: -7px; }
.crm-vp-eye:hover:not(:disabled) { background: var(--gray-200); color: var(--text-primary); }
.crm-vp-eye[aria-pressed="false"] { color: var(--gray-300); }
.crm-vp-eye:disabled { opacity: .35; cursor: default; }

/* La colonne des commandes, en bout d'en-tête : « + » ajoute une
   propriété, « ⋯ » ouvre leur visibilité. Elle ne prend que sa largeur
   et laisse le tableau respirer. */
.crm-th-plus { width: 72px; white-space: nowrap; }
.crm-th-plus button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: 0; border-radius: 7px; background: none;
    /* `--text-secondary` et non `--text-muted` : sur le gris de l'en-tête,
       le second tombait à 4,34:1 (mesuré). */
    color: var(--text-secondary); cursor: pointer; position: relative; vertical-align: middle;
}
.crm-th-plus button + button { margin-left: 2px; }
.crm-th-plus button::after { content: ''; position: absolute; inset: -8px; }
.crm-th-plus button:hover { background: var(--gray-200); color: var(--text-primary); }
.crm-th-plus button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Le menu à deux chemins du « + » */
.crm-cp--menu { width: 300px; max-height: none; padding: 6px; }
.crm-cp--menu .crm-cp-t { padding: 6px 9px 4px; }
.crm-cp--menu .crm-cp-i { min-height: 44px; }

/* Le formulaire de création, celui du modèle de données */
.crm-cre-modes { display: inline-flex; gap: 3px; padding: 4px; background: var(--gray-100); border-radius: var(--radius-pill); margin-bottom: 14px; }
.crm-cre-mode {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px;
    border: 0; border-radius: var(--radius-pill); background: none; font: inherit;
    font-size: 12.5px; font-weight: 800; color: var(--text-secondary); cursor: pointer;
    transition: background .15s, color .15s;
}
.crm-cre-mode[aria-selected="true"] { background: var(--surface); color: var(--blue-dark); box-shadow: var(--shadow-sm); }
.crm-cre-mode:not([aria-selected="true"]):hover { color: var(--text-primary); }
.ovl .crm-au-f { margin-bottom: 12px; }
.ovl .crm-au-f textarea {
    width: 100%; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--gray-300);
    border-radius: 9px; background: var(--surface); color: var(--text-primary);
    font: inherit; font-size: 12.5px; resize: vertical;
}
.ovl .crm-au-f textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.ovl .crm-au-f input[readonly] { background: var(--gray-100); color: var(--text-secondary); }
.crm-cre-help { display: block; margin-top: 4px; font-size: 11.5px; font-style: normal; line-height: 1.45; color: var(--text-muted); }
.crm-cre-ia { border: 1px solid var(--blue-muted); background: var(--blue-pale); border-radius: 11px; padding: 12px; }
.crm-cre-ia b { display: block; font-size: 12.5px; color: var(--blue-dark); margin-bottom: 7px; }
.crm-cre-ia textarea {
    width: 100%; padding: 8px 10px; border: 1.5px solid var(--blue-muted); border-radius: 9px;
    background: var(--surface); color: var(--text-primary); font: inherit; font-size: 12.5px; resize: vertical;
}
.crm-cre-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; cursor: pointer; }
.crm-cre-check input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--blue); flex: none; }
.crm-cre-check b { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.crm-cre-check em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-muted); }

/* Le kanban */
.crm-kb { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding: 12px 2px 16px; scrollbar-width: thin; }
.crm-kb-col { flex: 0 0 240px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px; padding: 8px; }
.crm-kb-h { display: flex; align-items: center; gap: 7px; padding: 4px 6px 8px; font-size: 12.5px; }
.crm-kb-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.crm-kb-h i { font-style: normal; font-weight: 800; font-size: 11px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--gray-200); border-radius: 999px; padding: 1px 7px; }
.crm-kb-card {
    display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--gray-200);
    border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; text-decoration: none;
    box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s;
}
.crm-kb-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.crm-kb-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.crm-kb-card b { font-size: 13px; color: var(--text-primary); }
.crm-kb-card span { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-kb-plus { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-align: center; padding: 4px 0 2px; }
/* La liste */
.crm-lst { display: flex; flex-direction: column; padding: 8px 0; }
.crm-lst-r {
    display: flex; align-items: baseline; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--gray-200);
    text-decoration: none; border-radius: 8px;
}
.crm-lst-r:hover { background: var(--gray-100); }
.crm-lst-r:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.crm-lst-r b { flex: 0 0 auto; min-width: 200px; font-size: 13.5px; color: var(--text-primary); }
.crm-lst-r span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-lst-r i { flex: none; color: var(--text-muted); font-style: normal; }
/* Les automatisations */
.crm-au { border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.crm-au.is-off { opacity: .55; }
.crm-au-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.crm-au-nom { flex: 1; min-width: 0; border: 1.5px solid transparent; border-radius: 8px; padding: 5px 8px; font: 800 13.5px/1.2 'Mukta Mahee', sans-serif; color: var(--text-primary); background: none; }
.crm-au-nom:hover { border-color: var(--gray-300); }
.crm-au-nom:focus-visible { outline: 2px solid var(--blue); outline-offset: -1.5px; border-color: var(--blue); }
.crm-au-sw { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 0; background: var(--gray-300); cursor: pointer; transition: background .15s; flex: none; }
.crm-au-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.crm-au-sw[aria-checked="true"] { background: var(--green, #2DAE54); }
.crm-au-sw[aria-checked="true"] i { transform: translateX(14px); }
.crm-au-sw:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.crm-au-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.crm-au-l .sgf-f, .crm-au-l .sgf-v { flex: 1; min-width: 130px; }
.crm-au-l .crm-fchamp { flex: 1 1 150px; min-width: 0; }
/* La règle en une phrase, sous le nom : une automatisation se lit d'abord,
   elle se règle ensuite. Sans elle, il fallait relire trois blocs de
   contrôles pour savoir ce qu'elle faisait. */
.crm-au-phrase {
    font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
    background: var(--gray-100); border-radius: 9px; padding: 8px 11px; margin-bottom: 10px;
}
.crm-au-bloc { border-top: 1px solid var(--gray-200); padding-top: 9px; margin-top: 9px; }
.crm-au-bloc > .sgf-f { width: 100%; }
.crm-au-k {
    display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.crm-au-k i { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--gray-300); }
.crm-au-aide { font-size: 12px; line-height: 1.45; color: var(--text-muted); margin: 6px 0 8px; }
.crm-au-vide { font-size: 12px; line-height: 1.5; color: var(--orange-ink); background: var(--orange-soft); border-radius: 8px; padding: 8px 10px; margin: 6px 0 8px; }
.crm-au-vide a { color: inherit; font-weight: 800; }
/* Les conditions : la grammaire des règles de filtre, en compact */
.crm-au-sis { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.crm-au-si { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr) 30px; gap: 5px; align-items: center; }
.crm-au-si:not(:has(.sgf-v)) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) 30px; }
/* Les actions : une carte par action, avec les champs de SON type */
.crm-au-ac { border: 1px solid var(--gray-200); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; background: var(--gray-100); }
.crm-au-ach { display: flex; align-items: center; gap: 6px; }
.crm-au-ach .sgf-f { flex: 1; min-width: 0; }
.crm-au-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.crm-au-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-au-f--large { grid-column: 1 / -1; }
.crm-au-f > span { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
/* La taille, la bordure et le chevron viennent du bloc partagé plus haut.
   Ne PAS redéclarer `background` ici : la propriété raccourcie effaçait
   le chevron SVG posé en background-image. */
.crm-au-f input, .crm-au-f select { width: 100%; }
.crm-au-j { display: flex; align-items: center; gap: 7px; }
.crm-au-j input { width: 74px; flex: none; }
.crm-au-j i { font-style: normal; font-size: 11px; color: var(--text-muted); }
/* Le journal : ce que la règle a VRAIMENT fait. Une automatisation muette
   ne se débogue pas. */
.crm-au-jd { margin-top: 10px; border-top: 1px solid var(--gray-200); padding-top: 7px; }
.crm-au-jd > summary { font-size: 11.5px; font-weight: 800; color: var(--text-secondary); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.crm-au-jd > summary::-webkit-details-marker { display: none; }
.crm-au-jd > summary i { font-style: normal; font-size: 10.5px; color: var(--blue-dark); background: var(--blue-pale); border-radius: 999px; padding: 1px 7px; }
.crm-au-jl { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.crm-au-jl li { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; color: var(--text-secondary); }
.crm-au-jl b { color: var(--text-primary); }
.crm-au-jl i { margin-left: auto; font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-au-empty { font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.crm-au-empty span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 560px) {
    .crm-au-grid { grid-template-columns: minmax(0, 1fr); }
    .crm-au-si, .crm-au-si:not(:has(.sgf-v)) { grid-template-columns: minmax(0, 1fr) 30px; }
}
@media (max-width: 760px) {
    /* Les onglets défilent plutôt que de pousser la page à déborder. Le
       défilement CLIPPE ce qui pend d'eux : les deux panneaux passent donc
       en feuille ancrée en BAS d'écran (le `position: fixed` échappe au
       rognage, et le bas ne demande aucune hauteur devinée, contrairement
       au « top: 120px » qui datait d'une mise en page à deux rangées). */
    .crm-vues { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .crm-vuep, .crm-vplus-p {
        position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
        width: auto; max-height: 70dvh; overflow-y: auto;
    }
}

/* Le retrait d'une règle, dans un panneau de filtre comme de tri */
.crm-rule-x {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--gray-300);
    background: var(--surface); color: var(--text-secondary); cursor: pointer;
}
.crm-rule-x:hover { border-color: var(--danger-ink); color: var(--danger-ink); background: var(--danger-soft); }

/* ============================================================
   LE FORMULAIRE D'UN PANNEAU OU D'UNE MODALE (crm-build, crm-field)
   Venu de crm.css le 2026-08-05 : le constructeur de segment, la
   création de propriété et les modales d'ajout du Pipe et de la
   Production posent leurs champs de la même façon.
   ============================================================ */
.crm-build { display: flex; flex-direction: column; gap: 14px; }
.crm-field { display: flex; flex-direction: column; gap: 6px; }
.crm-field > label { font-size: 12px; font-weight: 800; color: var(--text-secondary); }
/* « (obligatoire) » plutôt qu'un astérisque nu : lu tel quel par les
   lecteurs d'écran, compris sans légende par tout le monde */
.crm-req { font-weight: 700; color: var(--text-secondary); }
/* État vide des suggestions : du texte courant, pas un petit label.
   --text-muted y tombait à 4,34:1. */
.crm-vide { font-size: 12.5px; color: var(--text-secondary); }
/* Tous les types de saisie, pas seulement text : un input[type="email"]
   laissé hors du sélecteur retombait au rendu natif de 19 px, sans bordure */
.crm-field input:not([type="checkbox"]):not([type="radio"]), .crm-field select {
    min-height: 44px; padding: 0 13px; border: 1.5px solid var(--gray-300); border-radius: 11px;
    font: inherit; font-size: 13.5px; color: var(--text-primary); background: var(--surface);
}
.crm-field input:focus-visible, .crm-field select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

/* ============================================================
   LE REMPLISSAGE EN MASSE (crm-bk-) et son retour en arrière
   ============================================================ */
.crm-bk-l { max-height: 232px; border: 1.5px solid var(--gray-300); border-radius: 11px; background: var(--surface); }
.crm-bk-l .crm-cp-i[disabled] { opacity: 1; cursor: default; color: var(--text-muted); }
.crm-bk-l .crm-cp-i[disabled]:hover { background: none; }
.crm-bk-neuve { width: 100%; gap: 7px; }
.crm-bk-pick { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1.5px solid var(--blue-muted); border-radius: 11px; background: var(--blue-pale); }
.crm-bk-pick b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--blue-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Trois modes, trois surfaces égales : le choix se lit d'un coup d'œil,
   il ne se déduit pas d'une liste déroulante. */
.crm-bk-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.crm-bk-mode {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; text-align: left;
    border: 1.5px solid var(--gray-300); border-radius: 11px; background: var(--surface);
    font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.crm-bk-mode b { font-size: 12.5px; font-weight: 800; color: var(--text-primary); }
.crm-bk-mode small { font-size: 11px; line-height: 1.35; color: var(--text-secondary); }
.crm-bk-mode:hover { border-color: var(--blue-muted); }
.crm-bk-mode[aria-checked="true"] { border-color: var(--blue); background: var(--blue-pale); }
.crm-bk-mode[aria-checked="true"] b { color: var(--blue-dark); }
.crm-bk-mode:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.crm-bk-impact b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .crm-bk-modes { grid-template-columns: 1fr; } }

/* La barre de retour en arrière : elle RESTE, contrairement à un toast.
   On revient sur une écriture de masse quand on s'en aperçoit, pas dans
   les quatre secondes qui suivent. */
.crm-undo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 10px 12px 10px 14px;
    border: 1.5px solid var(--blue-muted); border-radius: 12px; background: var(--blue-pale);
    font-size: 12.5px; color: var(--blue-dark);
}
.crm-undo span { flex: 1; min-width: 0; }
.crm-undo b { font-weight: 800; font-variant-numeric: tabular-nums; }
.crm-undo [data-undo] {
    border: 1.5px solid var(--blue); border-radius: var(--radius-pill); background: var(--surface);
    padding: 5px 13px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--blue-dark); cursor: pointer;
}
.crm-undo [data-undo]:hover { background: var(--blue); color: #fff; }
.crm-undo [data-undo]:focus-visible, .crm-undo-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.crm-undo-x {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: 0; border-radius: 50%; background: none; color: var(--blue-dark); cursor: pointer;
}
.crm-undo-x:hover { background: var(--blue-muted); }

/* ============================================================
   LA CLOCHE DE L'AGENDA (una-band)
   ------------------------------------------------------------
   Elle vivait dans css/univers.css, accrochée au canevas du jeu : on
   ne la voyait qu'en étant déjà sur le plateau, c'est-à-dire à
   l'endroit précis où l'on n'a pas besoin qu'on nous rappelle d'y
   aller. Un rappel de réunion sert quand on est AILLEURS, dans le
   CRM, dans un dossier, dans la messagerie. Elle est donc ici, dans
   la feuille que toutes les pages chargent, et POSÉE SUR L'ÉCRAN
   (`fixed`) et non dans un cadre : elle ne dépend plus d'aucune page.

   SOUS L'EN-TÊTE, PAS DESSUS. Elle se glisse à 76 px du haut, juste
   sous la barre de l'application : recouvrir la recherche et le
   sélecteur de portée pour annoncer une réunion serait prendre la
   place de ce qu'on était en train de faire. Le z-index de 90 la met
   au-dessus des panneaux et des menus (80) et sous les modales (95) :
   un rappel se voit toujours, il ne bloque jamais.
   ============================================================ */
.una-band {
    position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 90;
    display: flex; align-items: center; gap: 11px;
    max-width: calc(100vw - 24px); padding: 8px 8px 8px 15px;
    border-radius: var(--radius-pill);
    background: var(--it, var(--blue)); color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .18);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
.una-band[hidden] { display: none; }
.una-band-p { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
    .una-band-p { animation: unaBat 2.2s ease-in-out infinite; }
    @keyframes unaBat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }
}
/* LE TEXTE PREND LE MOU, SINON PERSONNE NE LE PREND (2026-08-10).
   `min-width: 0` l'autorisait à RÉTRÉCIR, rien ne l'autorisait à
   GRANDIR : les quatre enfants se tassaient à gauche et le bandeau
   finissait sur une flaque de vide. Mesuré sur un téléphone de 430 pt,
   la croix s'arrêtait à 362 pour un bandeau qui va jusqu'à 422 :
   cinquante-deux pixels de violet pour rien, et une croix qui n'était
   plus dans son coin. Le texte absorbe désormais l'écart. */
.una-band-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.una-band-txt b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.una-band-txt span { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.una-band-go {
    min-height: 36px; padding: 0 16px; border: none; border-radius: var(--radius-pill);
    background: #fff; color: var(--it, var(--blue)); font: inherit; font-size: 13px; font-weight: 800;
    cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.una-band-go:hover:not(:disabled) { background: rgba(255, 255, 255, .86); }
.una-band-go:disabled { opacity: .45; cursor: not-allowed; }
.una-band-go:focus-visible, .una-band-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.una-band-x {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; flex-shrink: 0;
}
.una-band-x:hover { background: rgba(255, 255, 255, .26); }
/* La cible tactile reste à 44 px, par un débord invisible. */
.una-band-x::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
@media (max-width: 560px) {
    /* Sur téléphone, la barre du haut est plus courte et la cloche prend
       toute la largeur : un rappel tronqué ne se lit pas. Le retrait de
       gauche reste plus généreux que les autres : la pastille ne fait
       que neuf pixels, collée à huit du bord elle paraît tombée là. */
    .una-band { left: 8px; right: 8px; top: 68px; transform: none; max-width: none; padding: 8px 8px 8px 13px; gap: 9px; }
    .una-band-go { padding: 0 12px; }
}

/* ============================================================
   ET SURTOUT : ELLE NE RECOUVRE RIEN (2026-08-10)
   ------------------------------------------------------------
   Posée à 68 px du haut, la cloche tombait PILE sur l'en-tête de
   l'écran. Mesuré dans une conversation à 430 pt : 59 des 67 px du
   bandeau étaient dessous, et les neuf points de contrôle du retour,
   du nom, du bouton « i » et de la pastille étaient tous pris par
   elle. Un rappel qui prend la place du bouton « revenir » n'est plus
   un rappel, c'est un piège : on ne pouvait plus sortir de la
   conversation sans écarter le rappel.

   La page DESCEND donc de la hauteur du rappel, qui se loge dans la
   place ainsi ouverte au lieu de prendre celle d'autrui. Le passage
   par une variable héritée, et non par une règle sur `main.page`,
   évite une guerre de spécificité que `body:has(#itPage) main.page`
   gagnerait de toute façon : chaque feuille garde SA règle de
   retrait, elle y ajoute seulement la cale. `--una-h` est mesuré à
   chaque affichage par agenda.js, parce que le rappel tient sur une
   ou deux lignes selon la largeur et qu'on ne devine pas laquelle.
   ============================================================ */
@media (max-width: 860px) {
    body.una-on { --una-cale: calc(var(--una-h, 62px) + 16px); }
}

/* ============================================================
   LE PLANCHER TACTILE
   ------------------------------------------------------------
   Relevé sur les treize écrans de l'app admin, en 375x812 et en
   768x1024, par scripts/audit-mobile.js : aucun débordement
   horizontal, aucun bouton sans nom accessible, aucun champ sans
   étiquette. En revanche, des centaines de cibles sous 44 px, et
   toujours les mêmes quatre familles :
     116 cases à cocher de 18x18 (la sélection dans les tableaux)
      62 boutons carrés de 32 ou 36 px (les commandes en icône)
      52 en-têtes d'application (le logo mobile, la recherche)
      78 liens de liste en bloc, hauts de 26 à 30 px
   Ce n'est pas un oubli par écran, c'est une GRAMMAIRE dessinée pour
   la souris : 36 px est une bonne hauteur au curseur et une mauvaise
   au doigt. On la corrige donc en un endroit, par famille.

   POURQUOI `pointer: coarse` ET NON UNE LARGEUR. Une tablette de
   768 px est un doigt ; une fenêtre de navigateur réduite à 768 px sur
   un Mac est une souris. Se régler sur la largeur gonflerait l'outil de
   bureau dès qu'on rétrécit une fenêtre, et laisserait un grand écran
   tactile intact. C'est l'organe qui pointe qui est la contrainte, pas
   le nombre de pixels.

   CE QUI N'EST PAS TOUCHÉ, et c'est la règle WCAG elle-même (2.5.8) :
   un lien DANS une phrase n'a pas à faire 44 px de haut. L'exiger
   casserait toute densité de texte. On ne relève ici que les commandes
   qui SONT une cible.
   ============================================================ */
@media (pointer: coarse) {
    /* LES RANGÉES DE RÉGLAGES SOUS LE DOIGT (2026-08-19). Elles font
       38 px, ce qui passait tant qu'elles n'étaient qu'une poignée ; le
       panneau en porte maintenant treize, dont l'export, l'import et le
       modèle de données qui viennent du menu « ⋯ » supprimé. Sous le
       doigt, la règle est 44. */
    .crm-set-r { min-height: 44px; }

    /* 1. LES CASES À COCHER. Elles passent de 18 à 22 px pour l'oeil, et
       leur zone sensible déborde de 11 px tout autour : 44 px sous le
       doigt sans que la case grossisse au point de dominer la ligne.
       `appearance: none` est déjà posé sur les deux, le pseudo-élément
       est donc disponible.

       `input.` DEVANT LA CLASSE, ET CE N'EST PAS DE LA COQUETTERIE :
       `.crm-cb` est déclarée dans css/crm.css, qui se charge APRÈS
       cette feuille. À spécificité égale, c'est la dernière écrite qui
       gagne, et la case restait obstinément à 18 px pendant que le
       relevé disait « corrigé ». Le sélecteur d'élément suffit à passer
       devant, sans toucher à l'ordre des feuilles. */
    input.crm-cb, input.sel-cb, input.tk-sel { position: relative; width: 22px; height: 22px; }
    input.crm-cb::after, input.sel-cb::after, input.tk-sel::after { content: ''; position: absolute; inset: -11px; }

    /* 2. LES COMMANDES EN ICÔNE ET LA LIGNE DE COMMANDE. `--crm-h` est la
       hauteur partagée par les quatre écrans à vues (CRM, les deux Pipe,
       Tâches) : la relever ici relève d'un coup la recherche, le filtre,
       le tri, les vues et les réglages. */
    :root { --crm-h: 44px; }

    /* UNE RÈGLE DE GRAMMAIRE, PAS UNE LISTE DE NOMS. Le premier jet
       énumérait les classes relevées ; il en restait deux cent trente-huit
       après deux passes, et toujours les mêmes causes : une feuille de page
       (css/crm.css, css/notion.css) ou un <style> de document chargé APRÈS
       celle-ci, à spécificité égale, reprend la main. Poursuivre à la
       classe, c'était courir derrière chaque écran.

       Un bouton est un bouton : sous le doigt, il fait 44 px. Le sélecteur
       d'élément passe devant les classes tardives, et la règle vaut pour
       ceux qu'on écrira demain. `min-width` compte autant que `min-height` :
       plusieurs boutons mesurés faisaient bien 44 px de haut et 5 px de
       large, ce qui n'est pas une cible, c'est un fil. */
    button, [role="button"], [role="tab"], [role="menuitem"], summary {
        min-height: 44px;
    }
    /* LE PLATEAU EST HORS DE CETTE RÈGLE, ET C'EST UNE ERREUR CORRIGÉE.
       ------------------------------------------------------------
       Le rail de l'Univers avait DÉJÀ réglé la question, mieux que cette
       feuille : ses boutons font 32 px pour l'oeil et portent chacun un
       `::after` de 44x44 centré, c'est-à-dire une cible réglementaire
       sous un bouton discret. C'est le bon dessin pour un plateau de
       jeu, où les commandes ne doivent pas être le sujet.

       Ma règle générale a écrasé ce dessin : les boutons sont passés à
       44 px de haut, le rail a grandi d'un tiers, il s'est poussé
       lui-même hors de l'écran (il est ancré par le bas) et PLUS AUCUN
       BOUTON DU MODE UNIVERS N'ÉTAIT ATTEIGNABLE. Mesuré : boîtes de
       20x44 au lieu de 32x32, et `elementFromPoint` au centre de chacune
       rendant « rien », c'est-à-dire hors du cadre.

       La leçon vaut au-delà de ce bloc : une règle qui vaut « partout »
       doit s'arrêter là où quelqu'un a déjà décidé mieux. */
    .it-uni button, .it-uni [role="button"], .it-uni [role="tab"] {
        min-height: 0; min-width: 0;
    }
    /* MÊME EXCEPTION, MÊME RAISON (2026-08-13). Le bouton d'outils
       internes fait 28 px pour l'oeil et porte déjà un `::after` de
       `inset: -8px`, soit une cible de 44x44 (css/admin.css) : la règle
       générale n'avait rien à corriger ici, et elle l'étirait en un
       ovale de 28x44. Or il se glisse dans les LIGNES DE TITRE, à côté
       d'un nom de client : partout où il apparaît, il faisait grandir la
       rangée de seize pixels. Mesuré sur le bandeau de conversation de
       la messagerie externe : 85 px au lieu de 67, seize pris à la
       conversation pour un bouton qui ne demandait rien. */
    button.adm-btn { min-height: 0; }
    /* MÊME EXCEPTION ENCORE (2026-08-14) : le rond « marquer comme
       faite » des tâches fait 30 px pour l'oeil avec un ::after de
       -7 px, soit 44 sous le doigt ; étiré à 30x44 par la règle
       générale, c'était un OVALE au milieu de chaque carte. La puce
       dossier (26 px + ::after) subissait pareil. */
    button.tk-done, button.tk-dchip-btn { min-height: 0; }
    /* Un bouton SANS TEXTE est une icône : il lui faut ses 44 px dans les
       deux sens. Ceux qui portent un mot s'étirent d'eux-mêmes. */
    button.crm-filt-b--ic, button.crm-vb, button.nt-grip, button.nt-gplus,
    button.kb-kebab, button.cmp-icbtn, button.nt-chev, button.crm-vue--plus,
    button.pr-use, button.una-band-x { min-width: 44px; }

    /* Les composants dont la hauteur est portée par une classe tardive :
       le sélecteur d'élément suffit à repasser devant. */
    a.nt-item-a, a.crm-lk, a.dg-fi-cible, a.tk-cli,
    button.kb-adddl, button.cmp-addstep, button.nt-item { min-height: 44px; }

    /* LE « PETIT MODÈLE » DE BOUTON N'EXISTE PAS SOUS LE DOIGT.
       ------------------------------------------------------------
       `.btn--sm` pose `min-height: 36px`, une classe contre un élément :
       elle passe donc devant la règle générale ci-dessus, et trente-deux
       cibles du relevé restaient à 36 px sur tablette comme sur
       téléphone (« Éditer », « Exporter », « Inscrire des clients »,
       « Créer une propriété »…). Le petit modèle est une affaire de
       DENSITÉ à la souris, pas de taille de doigt : le doigt, lui,
       mesure toujours pareil. On lui rend ses 44 px ; il garde son
       écriture resserrée et ses marges compactes, tout ce qui fait qu'on
       l'a choisi. Les champs et menus du même gabarit suivent : on ne
       relève pas un bouton en laissant à côté de lui, sur la même ligne,
       un menu déroulant à 38 px. */
    .btn--sm, select.pr-sel, input.pr-search, input.mg-search { min-height: 44px; }

    /* LES BASCULES SEGMENTÉES : LA CIBLE GRANDIT, PAS LA PASTILLE.
       ------------------------------------------------------------
       « Base complète | Segments », « Messages | Mail », « Séquences |
       Modèles », « Salons | Univers » : partout le même dessin, une
       pastille de 32 à 38 px posée dans une piste qui, elle, en fait 47.
       Soixante-quatre cibles du relevé, la plus grosse famille qui
       restait.

       Les grossir à 44 ferait une piste de 55 et deux rangées de plus en
       tête de page, pour un objet qui n'est pas le sujet. Or ces
       pastilles sont LARGES (88 à 143 px) : il ne manque que de la
       hauteur. On étire donc la zone sensible à la verticale seulement,
       comme pour les cases à cocher : 44 px sous le doigt, la pastille
       inchangée à l'oeil, et aucun recouvrement entre voisines puisque
       rien ne déborde sur les côtés. */
    .crm-seg button, .mg-seg button, .pipe-modes button, .it-vue button,
    .tk-mode, .nt-tab, .nt-ong, .nt-fil-x { position: relative; }
    /* La croix d'un onglet passe DEVANT la zone étendue de l'onglet : sans
       cela, la toucher ouvrait l'onglet au lieu de le fermer. */
    .nt-ong-x { position: relative; z-index: 1; }
    .crm-seg button::after, .mg-seg button::after, .pipe-modes button::after,
    .it-vue button::after, .tk-mode::after, .nt-tab::after, .nt-ong::after, .nt-fil-x::after {
        content: ''; position: absolute; left: 0; right: 0;
        top: 50%; height: 44px; transform: translateY(-50%);
    }

    /* SOUS 16 px, iOS ZOOME. CE N'EST PAS UN GOÛT, C'EST UN RÉFLEXE DU
       SYSTÈME.
       ------------------------------------------------------------
       Quand on met le doigt dans un champ dont le texte fait moins de
       16 px, Safari agrandit toute la page pour le rendre lisible. La
       mise en page saute, on perd sa place, et il faut pincer pour
       revenir : le sabotage d'une saisie sur deux. Vingt-cinq champs
       étaient concernés, dont `.cmd-search`, la recherche de l'en-tête,
       à 13 px sur les quatorze écrans, c'est-à-dire le champ le plus
       utilisé de l'application.

       On les passe donc à 16 px sous le doigt, et à 16 seulement : à la
       souris, la densité de 13 px reste. Les cases et les boutons radio
       sont exclus, ils n'ouvrent pas de clavier et leur taille est déjà
       traitée plus haut. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea, select { font-size: 16px; }
    /* `.pr-sel` vit dans le <style> de sa page, une classe contre un
       élément : elle repasse devant. On la nomme, comme les autres. */
    select.pr-sel { font-size: 16px; }

    /* 3. L'EN-TÊTE DE L'APPLICATION. Il échouait sur les treize écrans,
       aux deux formats : c'est la barre qu'on touche le plus, et la seule
       qui soit partout. */
    .cmd-search { height: 44px; }
    .cmd-logo--mob { min-height: 44px; }

    /* 4. LES LIENS DE LISTE EN BLOC. Une ligne de dossier, une page de
       Notion, une cible de pipe : ce sont des cases, pas des mots dans
       une phrase. */
    .nt-item-a, .crm-lk, .dg-fi-cible, .tk-cli { min-height: 44px; }

    /* LE RESTE DU RELEVÉ, RAMASSÉ EN UNE FOIS (2026-08-10).
       ------------------------------------------------------------
       Ce qui suit n'a rien de commun sinon d'avoir échappé aux règles
       générales, chacun pour une raison différente : un bandeau né après
       elles, un en-tête d'écran qui a ses propres pastilles, un lien qui
       fait office de bouton, une case à cocher que la liste des cases
       nommées plus haut ne connaissait pas.

       Le bouton « Rejoindre » du bandeau de réunion vient en premier :
       c'est, à cette heure-ci, le bouton le plus présent de
       l'application, il s'affiche sur les treize écrans. */
    .una-band-go { min-height: 44px; }
    /* L'en-tête de l'espace client : trois pastilles rondes à 38 px. */
    .ecb-back, .ecb-set { min-width: 44px; min-height: 44px; }
    /* Un lien qui ramène en arrière est un bouton, quoi qu'en dise sa
       balise : 20 px de haut, c'est une ligne de texte, pas une cible. */
    .fi-back { min-height: 44px; }
    /* PRÉFIXÉES PAR L'ÉLÉMENT, ET CE N'EST PAS UN TIC : css/interne.css,
       css/notion.css et les <style> de page se chargent APRÈS celle-ci,
       et à spécificité égale c'est la dernière écrite qui gagne. Écrites
       à la classe seule, les six règles qui suivent n'ont rien relevé du
       tout au premier essai (mesuré : 32 cibles inchangées). */
    button.it-grp-t { min-height: 44px; }
    /* Les boutons d'une base Notion et le bloc « onglets » de l'éditeur
       (la barre de vues des bases est celle du CRM depuis le 2026-08-18,
       ses cibles sont réglées avec les siennes). */
    button.nt-tab, button.ntb-outil, button.ntb-ajligne, button.ntb-th, button.nt-prop-k { min-height: 44px; }
    button.nt-rail, button.nt-callout-ico, button.nt-tab, button.nt-ong-plus { min-width: 44px; }
    /* `div.` DEVANT LA CLASSE, pour la même raison : le <style> de
       campagnes.html pose `min-height: 34px` sur ces boutons de menu et
       se charge après cette feuille. */
    div.cmp-addmenu button { min-height: 44px; }
    /* Un bouton d'icône du vocabulaire général : il a ses 44 px de haut
       par la règle d'élément, il lui manquait la largeur. */
    .nt-barre > .btn--ghost, .nt-barre-actions > .btn--ghost { min-width: 44px; }
    /* L'EN-TÊTE D'UNE COLONNE DE TABLEAU EST UN BOUTON DE TRI, et il fait
       la largeur de sa colonne : sur les colonnes courtes (« Nom »,
       « Ville »), 26 px. Un plancher de largeur les ramène à 44 et
       élargit d'autant la colonne, qui défile déjà dans son cadre. */
    thead th > button, tr > th > button { min-width: 44px; }
    /* Le nom d'une propriété, dans la liste du modèle de données. */
    .pr-nm-t > button { min-width: 44px; }
    /* La pastille d'un dossier dans le fil d'accueil. */
    a.dg-fi-cible { min-width: 44px; }
    /* La case « Tout sélectionner » des tâches n'était pas dans la liste
       nommée plus haut : elle n'a pas de classe à elle, elle est le seul
       `input` de son étiquette. Même traitement, même débord. */
    .tk-selline > input[type="checkbox"] { position: relative; width: 22px; height: 22px; }
    .tk-selline > input[type="checkbox"]::after { content: ''; position: absolute; inset: -11px; }

    /* CE QUI RESTE PETIT, ET POURQUOI. La poignée de glissement d'un bloc
       Notion n'est pas une cible qu'on vise : elle sert à SAISIR, geste
       qui tolère l'à-peu-près, et l'agrandir mettrait une colonne de
       poignées devant chaque ligne de texte. Le bloc entier reste
       actionnable au doigt. */
    .nt-grip { min-height: 32px; }
    /* LES DEUX MOITIÉS DE LA BASCULE NE SONT PAS DEUX CIBLES. Elles font
       34,5 px de large chacune, et le relevé les compte donc comme trop
       étroites. Mais elles font la MÊME chose : où que le doigt tombe sur
       la pilule, le monde bascule. La cible réelle, c'est l'objet entier,
       69 x 44. On ne les élargit pas, on ne prétend pas non plus qu'elles
       sont conformes chacune de leur côté : c'est le groupe qui l'est. */
}

/* ============================================================
   LE SEGMENTÉ DE TÊTE (.crm-seg), COMPOSANT PARTAGÉ (2026-08-15)
   ------------------------------------------------------------
   Accolé au titre, il dit QUELLE vue du menu on regarde : c'est une
   précision du titre, pas une action de page. Le CRM l'a inventé
   (« Base complète / Segments »), les Tâches en ont une variante
   (.tk-modes), et les menus Aides et Devis l'emploient à leur tour
   pour leurs deux modes. Il vivait dans css/crm.css, que ces deux
   menus ne chargent pas : il descend ici, où vit déjà sa règle de
   cible tactile (plus haut dans cette feuille).

   Les variantes restent chez leur propriétaire : .crm-seg--nat dans
   css/crm.css, le segmenté des Tâches dans taches.html.
   ============================================================ */
.crm-seg {
    display: inline-flex; gap: 3px; padding: 4px;
    background: var(--surface); border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-pill);
}
.crm-seg button {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 15px;
    border: none; border-radius: var(--radius-pill); background: none; font: inherit;
    font-size: 12.5px; font-weight: 800; color: var(--text-secondary); cursor: pointer;
    transition: background .15s, color .15s;
}
.crm-seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.crm-seg button:not([aria-pressed="true"]):hover { background: var(--gray-100); color: var(--text-primary); }
.crm-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.crm-seg svg { flex-shrink: 0; }