/* ==========================================================================
   SUPERNOVA UI KIT V1 — terrain.css · couche TERRAIN (parcours manager, E3-A)
   Session E3-A · Équivalent mobile de cockpit/cockpit.css : COMPOSITION + colle
   terrain (.tr-*). Tout le rendu (couleurs, type, cartes, badges, boutons,
   jauges, listes, chat) vient du UI Kit V1 (core/tokens.css + core/components.css).
   Règles :
     - Zéro hex/rgba littéral hors tokens, SAUF la valeur de compat --sn-violet-10
       ré-injectée à l'identique de style.css pour préserver E3-B (§0).
     - Coexiste avec style.css (ancienne charte, écrans E3-B). Chargé APRÈS
       style.css + voice-ui.css → le kit gagne sur les éléments migrés E3-A.
     - Ancres jamais renommées : le kit s'ajoute en CLASSE ADDITIONNELLE, terrain.css
       neutralise les propriétés d'ancien layout que le kit ne réécrit pas.
   ========================================================================== */

/* ==========================================================================
   §0 — ISOLATION DE COHABITATION (C : E3-B strictement inchangé)
   Seul token en collision de NOM entre style.css et le kit : --sn-violet-10
   (style.css = rgba translucide ; kit = #EBE8FD opaque). Le kit charge après →
   gagnerait au :root. On restitue la valeur d'origine sur les racines d'écrans
   E3-B pour qu'ils rendent EXACTEMENT comme avant.
   (Les autres --sn-* de style.css ont des noms distincts du kit : pas de collision.)
   ========================================================================== */
#screen-feedback, #screen-team, #screen-settings, #screen-visite,
#screen-merch-onboard, #screen-merch-fixture,
#confirm-reset-modal, #reset-modal, #reco-modal {
  --sn-violet-10: rgba(108, 92, 231, 0.1);
}

/* ==========================================================================
   §1 — SHELL · TAB BAR   (.bottom-nav + .sn-tabbar ; .nav-item + .sn-tabbar__item)
   Le kit .sn-tabbar pose position:fixed / inset:auto 0 0 0 / flex / safe-area.
   On neutralise les propriétés d'ancien layout NON réécrites par le kit
   (centrage translateX, max-width, height fixe, backdrop-blur, fond translucide).
   ========================================================================== */
.bottom-nav.sn-tabbar {
  left: 0;
  transform: none;
  max-width: none;
  height: auto;
  background-color: var(--sn-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--sn-separator);
}
/* Icône SVG de l'onglet : pilotée par currentColor (le kit met color: sur l'item). */
.bottom-nav.sn-tabbar .nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  transition: stroke var(--sn-dur-fast) var(--sn-ease);
}
/* Libellé : reprend la couleur héritée de l'onglet (kit : ink-60 / accent si actif). */
.bottom-nav.sn-tabbar .nav-label {
  font-size: var(--sn-fs-label);
  color: inherit;
  transition: none;
}
.sn-tabbar__item--active .nav-label { font-weight: 700; }
/* L'onglet actif : le kit met color:accent → currentColor propage au SVG et au label. */
.bottom-nav.sn-tabbar .nav-item.active svg { stroke: var(--sn-accent); }

/* ==========================================================================
   §2 — EN-TÊTE D'ÉCRAN  (.screen-header + .sn-screen-header--terrain)
   DOM terrain = icône + titre alignés à gauche ; le kit est space-between
   (titre / actions). On conserve l'alignement gauche icône+titre.
   ========================================================================== */
.screen-header.sn-screen-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--sn-space-3);
  padding: var(--sn-space-4) var(--sn-space-4) var(--sn-space-3);
}
.screen-header.sn-screen-header svg {
  flex-shrink: 0;
  stroke: var(--sn-accent);
}
/* Titre : H2 terrain (18px) — densité mobile, plus grand que l'ancien 14px. */
.screen-title.sn-screen-header__title {
  font-size: var(--sn-fs-h2);
}

/* ==========================================================================
   §3 — LOGIN  (.login-field+.sn-field, label+.sn-field__label,
                input+.sn-field__input, .login-btn+.sn-btn--primary,
                .login-error+.sn-field__message)
   Le kit rend champs/bouton ; terrain.css = layout de l'écran + marque.
   ========================================================================== */
#screen-login.active {
  gap: var(--sn-space-5);
  padding: var(--sn-space-7) var(--sn-space-5) calc(var(--sn-space-7) + var(--sn-safe-bottom));
}
.login-brand {
  font-family: var(--sn-font-ui);
  font-size: var(--sn-fs-h1);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sn-accent);
  text-transform: uppercase;
  margin-bottom: var(--sn-space-6);
}
.login-form {
  width: 100%;
  max-width: 360px;
  gap: var(--sn-space-4);
}
/* style.css `.login-field input`/`label` (0,1,1) battent les classes kit (0,1,0).
   On restitue le rendu kit avec une spécificité suffisante (0,2,0) — unité cockpit (police ui). */
.login-field .sn-field__input {
  font-family: var(--sn-font-ui);
  font-size: var(--sn-fs-base-terrain);
  color: var(--sn-ink-100);
  background-color: var(--sn-bg);
  border: 1px solid var(--sn-ink-20);
  border-radius: var(--sn-radius-s);
  padding: var(--sn-space-3) var(--sn-space-4);
}
.login-field .sn-field__input:focus,
.login-field .sn-field__input:focus-visible {
  outline: none;
  border-color: var(--sn-accent);
  background-color: var(--sn-bg);
  box-shadow: 0 0 0 2px var(--sn-violet-10);
}
.login-field .sn-field__label {
  font-size: var(--sn-fs-label);
  font-weight: 500;
  letter-spacing: var(--sn-ls-label);
  color: var(--sn-ink-60);
}
.login-btn.sn-btn {
  width: 100%;
  margin-top: var(--sn-space-2);
}
.login-error.sn-field__message {
  text-align: center;
  min-height: var(--sn-space-4);
}

/* ==========================================================================
   §4 — DASHBOARD  (#screen-dashboard)
   Re-skin des ancres existantes au contrat visuel kit ; DOM & handlers
   préservés (setGauge, renderTicker inchangés). hud-panel étant PARTAGÉ avec
   E3-B, tout est scopé #screen-dashboard → E3-B intact.
   ========================================================================== */
/* En-tête PDV */
#screen-dashboard .dash-header-left .pdv-name { font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); }
#screen-dashboard .dash-header-left .pdv-date { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
#screen-dashboard .pdv-badge {
  font-family: var(--sn-font-mono);
  font-size: var(--sn-fs-caption);
  color: var(--sn-accent-ink);   /* AA sur violet-10 : 5.30:1 (accent seul = 4.05, échec — leçon F1 E2-QA) */
  background-color: var(--sn-violet-10);
  border: none;
  border-radius: var(--sn-radius-pill);
  padding: var(--sn-space-1) var(--sn-space-3);
}

/* Panneaux HUD → cartes kit (crochets de coin supprimés). Étendu à #screen-taches
   (checklist-panel, même composant hud-panel migré E3-A). */
#screen-dashboard .hud-panel,
#screen-taches .hud-panel {
  background-color: var(--sn-bg);
  border: 1px solid var(--sn-separator);
  border-radius: var(--sn-radius-l);
  box-shadow: var(--sn-shadow-rest);
}
#screen-dashboard .hud-panel::before,
#screen-dashboard .hud-panel::after,
#screen-taches .hud-panel::before,
#screen-taches .hud-panel::after { content: none; }

/* Jauges : arc SVG existant re-teinté aux tokens (setGauge intouché) + carte/valeur/label kit. */
#screen-dashboard .gauge-card { padding: var(--sn-space-4) var(--sn-space-3); }
#screen-dashboard .gauge-label { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); color: var(--sn-ink-60); }
#screen-dashboard #gauge-ca-arc { stroke: var(--sn-accent); }
/* S3 SL-0e — la règle `#gauge-sat-arc` a été retirée : l'élément n'existe dans aucun
   document (0 occurrence dans index.html et app.js), reliquat de la jauge satisfaction
   retirée avant S1 (dette E1 du rapport S1, F6 du rapport S2). */
#screen-dashboard .gauge-value { font-family: var(--sn-font-mono); font-size: var(--sn-fs-h1); font-weight: 700; color: var(--sn-ink-100); font-variant-numeric: tabular-nums; }
#screen-dashboard .gauge-objectif { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
#screen-dashboard .gauge-delta { font-family: var(--sn-font-mono); font-size: var(--sn-fs-caption); font-weight: 700; }
#screen-dashboard .gauge-delta.pos { color: var(--sn-ok-ink); }
#screen-dashboard .gauge-delta.neg { color: var(--sn-crit-ink); }
#screen-dashboard .gauge-n1-badge {
  font-family: var(--sn-font-mono);
  font-size: var(--sn-fs-caption);
  color: var(--sn-ink-60);
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-separator);
  border-radius: var(--sn-radius-s);
}

/* Cartes stats → look .sn-card-kpi (valeurs mono, label uppercase). */
#screen-dashboard .stat-cell {
  background-color: var(--sn-bg);
  border: 1px solid var(--sn-separator);
  border-radius: var(--sn-radius-m);
  box-shadow: var(--sn-shadow-rest);
  padding: var(--sn-space-3);
}
#screen-dashboard .stat-value { font-family: var(--sn-font-mono); font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); font-variant-numeric: tabular-nums; }
#screen-dashboard .stat-value.accent { color: var(--sn-accent); }
#screen-dashboard .stat-label { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); color: var(--sn-ink-60); }

/* Ticker (rhabillé en surface — ancres intactes). */
#screen-dashboard .ticker-wrap {
  height: auto;
  min-height: var(--sn-space-6);
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-separator);
  border-radius: var(--sn-radius-m);
}
#screen-dashboard .ticker-wrap::before { background-color: var(--sn-crit); width: 3px; }
#screen-dashboard .ticker-item { font-size: var(--sn-fs-caption); color: var(--sn-ink-80); }
#screen-dashboard .ticker-sep { color: var(--sn-ink-20); }
#screen-dashboard .severity-dot.crit { background-color: var(--sn-crit); }
#screen-dashboard .severity-dot.high { background-color: var(--sn-warn); }
#screen-dashboard .severity-dot.med  { background-color: var(--sn-ambre); }

/* Brief du jour → panneau kit à liseré accent. */
#screen-dashboard .brief-panel {
  background-color: var(--sn-surface);
  border: 1px solid var(--sn-separator);
  border-radius: var(--sn-radius-l);
  padding: var(--sn-space-3) var(--sn-space-4) var(--sn-space-3) var(--sn-space-5);
}
#screen-dashboard .brief-panel::before { background-color: var(--sn-accent); width: 3px; }
#screen-dashboard .brief-tag { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); color: var(--sn-accent); }
#screen-dashboard .brief-text { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-80); }

/* Checklist : en-tête ici ; les ITEMS sont migrés en SL-5. */
#screen-dashboard .checklist-label { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); color: var(--sn-ink-60); }
#screen-dashboard .checklist-counter { font-family: var(--sn-font-mono); color: var(--sn-accent); }

/* Console grid (raccourcis) → boutons kit discrets. */
#screen-dashboard .console-btn { background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); }
#screen-dashboard .console-btn.active { border-color: var(--sn-accent); background-color: var(--sn-violet-10); }
#screen-dashboard .console-btn svg { stroke: var(--sn-ink-40); }
#screen-dashboard .console-btn.active svg { stroke: var(--sn-accent); }
#screen-dashboard .console-btn-label { font-size: var(--sn-fs-label); color: var(--sn-ink-60); }
#screen-dashboard .console-btn.active .console-btn-label { color: var(--sn-accent-ink); }

/* PULSE zone (surface — le canvas particules reste piloté par app.js). */
#screen-dashboard .pulse-zone { border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); }
#screen-dashboard .pulse-title { color: var(--sn-accent); }

/* Squelette de chargement → tokens kit. */
#screen-dashboard .skel { background: linear-gradient(90deg, var(--sn-surface) 25%, color-mix(in srgb, var(--sn-separator) 60%, var(--sn-surface)) 50%, var(--sn-surface) 75%); background-size: 200% 100%; border-radius: var(--sn-radius-s); }

/* ==========================================================================
   §5 — ALERTES  (#screen-alertes)
   Re-skin .alerte-card au contrat .sn-alert-item : liseré sévérité gauche
   (via la classe cls existante crit/high/med/low), expand diagnostic préservé.
   Mapping anti-régression : low/inconnu → neutre (--sn-ink-40), jamais vert
   (une alerte critique mal-typée ne doit pas paraître "positive").
   ========================================================================== */
#screen-alertes .screen-body { padding: 0; gap: 0; }
#screen-alertes .alerte-card {
  background-color: var(--sn-bg);
  border: none;
  border-bottom: 1px solid var(--sn-separator);
  border-radius: 0;
  padding: var(--sn-space-3) var(--sn-space-4) var(--sn-space-3) var(--sn-space-5);
}
#screen-alertes .alerte-card::before { width: 3px; border-radius: 0; background-color: var(--sn-ink-40); }
#screen-alertes .alerte-card.crit::before { background-color: var(--sn-crit); }
#screen-alertes .alerte-card.high::before { background-color: var(--sn-warn); }
#screen-alertes .alerte-card.med::before  { background-color: var(--sn-warn); }
#screen-alertes .alerte-card.low::before  { background-color: var(--sn-ink-40); }
#screen-alertes .alerte-type { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); color: var(--sn-ink-60); margin-bottom: var(--sn-space-1); }
#screen-alertes .alerte-message { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); }
#screen-alertes .alerte-date { font-family: var(--sn-font-mono); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); margin-top: var(--sn-space-2); }
#screen-alertes .alerte-expand { border-top: 1px solid var(--sn-separator); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }

/* ==========================================================================
   §6 — TÂCHES / CHECKLIST  (#screen-dashboard + #screen-taches → look .sn-task-item)
   Modèle div-toggle PRÉSERVÉ (cb-box + classe .done ; pas d'input natif ;
   toggleChecklistItem intouché). Case 24px, cible 44px, coché = accent + barré.
   checklist-item partagé dashboard+taches → scope aux 2 écrans E3-A.
   ========================================================================== */
#screen-dashboard .checklist-item,
#screen-taches .checklist-item {
  min-height: var(--sn-tap-min);
  gap: var(--sn-space-3);
  padding: var(--sn-space-2) 0;
  align-items: center;
  border-bottom: 1px solid var(--sn-separator);
}
#screen-dashboard .cb-box,
#screen-taches .cb-box {
  width: var(--sn-space-5); height: var(--sn-space-5);           /* 24px */
  display: flex; align-items: center; justify-content: center;
  margin-top: 0;
  border: 2px solid var(--sn-ink-40);
  border-radius: var(--sn-radius-s);
  background-color: var(--sn-bg);
  transition: background-color var(--sn-dur-base) var(--sn-ease), border-color var(--sn-dur-base) var(--sn-ease);
}
#screen-dashboard .checklist-item.done .cb-box,
#screen-taches .checklist-item.done .cb-box {
  border-color: var(--sn-accent);
  background-color: var(--sn-violet-10);
}
/* Coche : re-centrée pour la case 24px (position static → centrée par le flex), teinte accent. */
#screen-dashboard .checklist-item.done .cb-box::after,
#screen-taches .checklist-item.done .cb-box::after {
  position: static; top: auto; left: auto;
  width: 6px; height: 11px; margin-top: -2px;
  border: 2px solid var(--sn-accent);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
#screen-dashboard .cb-text,
#screen-taches .cb-text { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); }
#screen-dashboard .checklist-item.done .cb-text,
#screen-taches .checklist-item.done .cb-text { color: var(--sn-ink-40); }
/* Badges priorité → pilules kit. */
#screen-dashboard .prio-badge, #screen-taches .prio-badge {
  font-size: var(--sn-fs-caption); border-radius: var(--sn-radius-pill);
  padding: var(--sn-space-1) var(--sn-space-2); font-family: var(--sn-font-ui);
}
#screen-dashboard .prio-badge.URG, #screen-taches .prio-badge.URG { color: var(--sn-crit-ink); background-color: var(--sn-crit-10); border: none; }
#screen-dashboard .prio-badge.MOY, #screen-taches .prio-badge.MOY { color: var(--sn-warn-ink); background-color: var(--sn-warn-10); border: none; }
#screen-taches .checklist-label { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); color: var(--sn-ink-60); }
#screen-taches .checklist-counter { font-family: var(--sn-font-mono); color: var(--sn-accent); }

/* ==========================================================================
   §7 — PULSE  (zone dashboard + re-skin overlay vocal voice-*)
   voice-ui.css utilise DÉJÀ la palette charte (hex == tokens) → l'overlay est
   déjà unifié. terrain.css ne fait que : neutraliser les crochets HUD de la
   zone, forcer la police kit sur les bulles, et geler les animations vocales
   sous reduced-motion (voice-ui.css a des durées en dur, sans @media).
   NB horodatages (.sn-chat__time) : voice-ui.js ne les rend pas → non ajoutables
   sans toucher voice-ui.js (INTOUCHÉ) → consigné.
   ========================================================================== */
#screen-dashboard .pulse-zone::before,
#screen-dashboard .pulse-zone::after { content: none; }
.voice-bubble { font-family: var(--sn-font-ui); }

@media (prefers-reduced-motion: reduce) {
  /* Overlay vocal : gèle les animations CSS (halo listening, loader, onde speaking, entrée bulle/envoi). */
  .voice-fab.voice-listening,
  .voice-fab.voice-processing .vfi-loader,
  .vfi-wave i,
  .voice-bubble,
  .voice-send { animation: none; }
  /* Particules PULSE : canvas piloté par RAF (app.js) → masqué (le gel CSS d'un canvas est impossible). */
  #screen-dashboard #pulse-canvas { opacity: 0; }
  /* Squelette de chargement re-skiné : gel du shimmer. */
  #screen-dashboard .skel { animation: none; }
}

/* ==========================================================================
   §8 — ÉTATS (chargement / vide / erreur) — remplacent les <div style="..."> inline
   ========================================================================== */
.tr-state { padding: var(--sn-space-5); text-align: center; color: var(--sn-ink-60); font-size: var(--sn-fs-caption); font-family: var(--sn-font-ui); }
.tr-state--error { color: var(--sn-crit); }
/* Squelette de valeur (jauges dashboard) — évacue les 2 derniers inline présentationnels E3-A. */
.tr-skel-val { display: inline-block; width: 56px; height: 20px; }

/* ==========================================================================
   §9 — SETTINGS + TEAM + MODALES  (SL-2 E3-B)
   Rhabillage kit par re-skin scopé des classes existantes (méthode §4
   dashboard : tokens, zéro ajout de classe sur les contrôles → DOM/handlers
   100 % préservés ; anchors intouchés). Les margin/padding inline des
   .hud-panel et le bloc <style> deleg sont évacués ICI. Modales = re-skin du
   .modal div (PAS de swap <dialog> : préserve le toggle display d'app.js).
   Valeurs mirroir des composants kit (.sn-btn/.sn-field/.sn-btn--*).
   ========================================================================== */

/* Panneaux → cartes kit (comme dashboard/taches) + margin/padding (ex-inline). */
#screen-settings .hud-panel,
#screen-team .hud-panel {
  background-color: var(--sn-bg);
  border: 1px solid var(--sn-separator);
  border-radius: var(--sn-radius-l);
  box-shadow: var(--sn-shadow-rest);
  margin: var(--sn-space-4);
  padding: var(--sn-space-4);
}
#screen-settings .hud-panel::before, #screen-settings .hud-panel::after,
#screen-team .hud-panel::before, #screen-team .hud-panel::after { content: none; }

/* Libellés de section (.checklist-label) + note secondaire. */
#screen-settings .checklist-label,
#screen-team .checklist-label {
  display: block;
  margin-bottom: var(--sn-space-4);
  font-size: var(--sn-fs-label); font-weight: 600; letter-spacing: var(--sn-ls-label);
  text-transform: uppercase; color: var(--sn-ink-60);
}
#screen-settings .tr-note { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); margin: 0 0 var(--sn-space-3); }

/* Champs (PIN + délégation) → look .sn-field (mirroir tokens du kit). */
#screen-settings .login-field { display: flex; flex-direction: column; gap: var(--sn-space-2); margin-bottom: var(--sn-space-3); }
#screen-settings .login-field label {
  font-size: var(--sn-fs-label); font-weight: 500; letter-spacing: var(--sn-ls-label);
  text-transform: uppercase; color: var(--sn-ink-60);
}
#screen-settings .login-field input,
#screen-settings .login-field select,
#screen-settings .login-field textarea,
#screen-settings #deleg-mandate-id {
  min-height: var(--sn-tap-min);
  padding: var(--sn-space-3) var(--sn-space-4);
  border: 1px solid var(--sn-ink-20);
  border-radius: var(--sn-radius-s);
  background-color: var(--sn-bg);
  font-family: var(--sn-font-ui);
  font-size: var(--sn-fs-base-terrain);
  color: var(--sn-ink-100);
  width: 100%; box-sizing: border-box;
  transition: border-color var(--sn-dur-fast) var(--sn-ease), box-shadow var(--sn-dur-fast) var(--sn-ease);
}
#screen-settings .login-field textarea { min-height: calc(var(--sn-tap-min) * 1.4); resize: vertical; }
#screen-settings .login-field input:focus-visible,
#screen-settings .login-field select:focus-visible,
#screen-settings .login-field textarea:focus-visible,
#screen-settings #deleg-mandate-id:focus-visible {
  outline: none; border-color: var(--sn-accent); box-shadow: 0 0 0 2px var(--sn-violet-10);
}
#screen-settings .login-field input::placeholder,
#screen-settings .login-field textarea::placeholder { color: var(--sn-ink-40); }

/* Boutons primaires (.login-btn) → .sn-btn--primary (mirroir). */
#screen-settings .login-btn,
#screen-team .login-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sn-space-2);
  min-height: var(--sn-tap-min); padding: var(--sn-space-3) var(--sn-space-5);
  border: 1px solid transparent; border-radius: var(--sn-radius-m);
  background-color: var(--sn-accent); color: var(--sn-bg);
  font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); font-weight: 600;
  letter-spacing: 0; line-height: 1.2; cursor: pointer;
  transition: background-color var(--sn-dur-fast) var(--sn-ease), box-shadow var(--sn-dur-fast) var(--sn-ease);
}
#screen-settings .login-btn:active,
#screen-team .login-btn:active { background-color: color-mix(in srgb, var(--sn-accent) 78%, var(--sn-ink-100)); }
/* CTA solo (formulaires) pleine largeur — norme kit mobile (les paires restent côte à côte). */
#screen-settings #btn-change-pin,
#screen-settings #btn-reconfigure-merch,
#screen-settings #deleg-create-form button[type="submit"] { width: 100%; }

/* Boutons secondaires (.btn-secondary) → .sn-btn--secondary. */
#screen-settings .btn-secondary,
#screen-team .btn-secondary {
  min-height: var(--sn-tap-min); padding: var(--sn-space-3) var(--sn-space-5);
  border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-m);
  background-color: var(--sn-bg); color: var(--sn-ink-80);
  font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); font-weight: 500; cursor: pointer;
}

/* Profil (avatar + méta + RGPD). */
#screen-settings .profil-avatar { background-color: var(--sn-accent); color: var(--sn-bg); box-shadow: var(--sn-shadow-rest); }
#screen-settings .profil-nom { font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); }
#screen-settings .profil-role { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
#screen-settings .profil-rgpd { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); }
/* Messages succès (remplacent l'inline color:var(--sn-vert) ; display togglé par JS conservé). */
.tr-success { color: var(--sn-ok); font-size: var(--sn-fs-caption); }

/* Délégation — ex-<style> inline (hex → tokens), cible tactile 44px. */
#screen-settings .deleg-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-4); min-height: var(--sn-tap-min); }
#screen-settings .deleg-row-title { font-weight: 600; font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); }
#screen-settings .deleg-row-sub { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); margin-top: var(--sn-space-1); }
#screen-settings .deleg-row-sub--block { margin: 0 0 var(--sn-space-3); }
#screen-settings .deleg-switch { position: relative; display: inline-flex; align-items: center; width: 46px; height: var(--sn-tap-min); flex: 0 0 auto; }
#screen-settings .deleg-switch input { opacity: 0; width: 0; height: 0; }
#screen-settings .deleg-slider { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 46px; height: 26px; background-color: var(--sn-ink-20); border-radius: var(--sn-radius-pill); transition: background-color var(--sn-dur-base) var(--sn-ease); cursor: pointer; }
#screen-settings .deleg-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background-color: var(--sn-bg); border-radius: 50%; transition: transform var(--sn-dur-base) var(--sn-ease); }
#screen-settings .deleg-switch input:checked + .deleg-slider { background-color: var(--sn-accent); }
#screen-settings .deleg-switch input:checked + .deleg-slider::before { transform: translateX(20px); }
#screen-settings .deleg-sep { border: none; border-top: 1px solid var(--sn-separator); margin: var(--sn-space-4) 0; }
#screen-settings .deleg-sub-title { font-weight: 600; color: var(--sn-accent-ink); font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; margin-bottom: var(--sn-space-3); }
#screen-settings .deleg-duree { display: flex; gap: var(--sn-space-5); padding-top: var(--sn-space-1); font-size: var(--sn-fs-base-terrain); }
#screen-settings .deleg-radio { display: flex; align-items: center; gap: var(--sn-space-2); }
#screen-settings #deleg-create-form input[type="radio"] { accent-color: var(--sn-accent); }
#screen-settings .deleg-msg { font-size: var(--sn-fs-caption); margin-top: var(--sn-space-2); min-height: 1em; }
#screen-settings .deleg-ok { color: var(--sn-ok); }
#screen-settings .deleg-err { color: var(--sn-crit); }
#screen-settings .deleg-actions { display: flex; gap: var(--sn-space-3); margin-top: var(--sn-space-2); }

/* Team. */
#screen-team .team-disclaimer { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); margin-bottom: var(--sn-space-3); }
#screen-team .team-loading { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); padding: var(--sn-space-3) 0; }

/* Modales — re-skin de la carte (.modal-content) + boutons kit (toggle display préservé). */
#confirm-reset-modal .modal-content,
#reset-modal .modal-content,
#reco-modal .modal-content {
  background-color: var(--sn-bg);
  border-radius: var(--sn-radius-l);
  box-shadow: var(--sn-shadow-hover);
  padding: var(--sn-space-5);
}
#confirm-reset-modal .modal-content h3,
#reset-modal .modal-content h3,
#reco-modal .modal-content h3 { font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); }
.btn-modal {
  min-height: var(--sn-tap-min); padding: var(--sn-space-3) var(--sn-space-5);
  border: 1px solid transparent; border-radius: var(--sn-radius-m);
  font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); font-weight: 600; cursor: pointer;
}
.btn-modal.btn-primary { background-color: var(--sn-accent); color: var(--sn-bg); }
.btn-modal.btn-secondary { background-color: var(--sn-bg); border-color: var(--sn-ink-20); color: var(--sn-ink-80); }
.btn-modal.btn-danger { background-color: var(--sn-crit); color: var(--sn-bg); }
#reset-modal .temp-pin { color: var(--sn-ink-100); }
#reset-modal .temp-pin-display { background-color: var(--sn-surface); border: 1px dashed var(--sn-accent); border-radius: var(--sn-radius-m); }
#reco-modal .reco-textarea { border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); }

/* ==========================================================================
   §10 — FEEDBACK + FB-OVERLAY + B29 + SOLLICITATIONS  (SL-3 E3-B)
   Re-skin scopé (tokens). Feedback = écran statique ; fb-overlay/b29/sol =
   overlays construits en innerHTML par app.js → stylés par leurs classes,
   sans édit de handler. DOM/logique préservés.
   ========================================================================== */

/* --- Écran Feedback (#screen-feedback) --- */
#screen-feedback .feedback-form { padding: var(--sn-space-4); gap: var(--sn-space-5); }
#screen-feedback .feedback-section { gap: var(--sn-space-2); }
#screen-feedback .feedback-label { font-size: var(--sn-fs-label); font-weight: 600; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); }
#screen-feedback .stars-row { gap: var(--sn-space-3); }
#screen-feedback .star-btn { font-size: 30px; color: var(--sn-ink-20); }
#screen-feedback .star-btn.active { color: var(--sn-ambre); }
#screen-feedback .radio-row, #screen-feedback .toggle-row { gap: var(--sn-space-2); }
#screen-feedback .radio-opt, #screen-feedback .toggle-btn {
  min-height: var(--sn-tap-min); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s);
  font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-60); background-color: var(--sn-bg); font-weight: 500;
}
#screen-feedback .radio-opt.active, #screen-feedback .toggle-btn.active {
  border-color: var(--sn-accent); background-color: var(--sn-violet-10); color: var(--sn-accent-ink); font-weight: 600;
}
#screen-feedback .feedback-textarea textarea, #screen-feedback .feedback-textarea input {
  border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s); padding: var(--sn-space-3) var(--sn-space-4);
  font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); background-color: var(--sn-bg);
}
#screen-feedback .feedback-textarea textarea:focus-visible, #screen-feedback .feedback-textarea input:focus-visible {
  border-color: var(--sn-accent); box-shadow: 0 0 0 2px var(--sn-violet-10);
}
#screen-feedback .charge-slider { height: 4px; background-color: var(--sn-separator); border-radius: var(--sn-radius-pill); }
#screen-feedback .charge-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background-color: var(--sn-accent); cursor: pointer; }
#screen-feedback .charge-slider::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 50%; background-color: var(--sn-accent); cursor: pointer; }
#screen-feedback .feedback-submit {
  min-height: var(--sn-tap-min); border: none; border-radius: var(--sn-radius-m);
  background-color: var(--sn-accent); color: var(--sn-bg);
  font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); font-weight: 600; letter-spacing: 0;
}
#screen-feedback .feedback-confirm { color: var(--sn-ok); font-size: var(--sn-fs-base-terrain); font-weight: 600; }

/* --- FB-OVERLAY (D071, index + vendeur) --- */
#fb-overlay .fb-modal { background-color: var(--sn-bg); border-radius: var(--sn-radius-l) var(--sn-radius-l) 0 0; box-shadow: var(--sn-shadow-hover); }
#fb-overlay .fb-title { font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); }
#fb-overlay .fb-error { color: var(--sn-crit); font-size: var(--sn-fs-caption); }
#fb-overlay .fb-label { font-size: var(--sn-fs-label); font-weight: 500; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); }
#fb-overlay .fb-select, #fb-overlay .fb-textarea {
  min-height: var(--sn-tap-min); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s);
  padding: var(--sn-space-3) var(--sn-space-4); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain);
  color: var(--sn-ink-100); background-color: var(--sn-bg); width: 100%; box-sizing: border-box;
}
#fb-overlay .fb-textarea { min-height: calc(var(--sn-tap-min) * 1.6); resize: vertical; }
#fb-overlay .fb-select:focus-visible, #fb-overlay .fb-textarea:focus-visible { outline: none; border-color: var(--sn-accent); box-shadow: 0 0 0 2px var(--sn-violet-10); }
#fb-overlay .fb-counter { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); }
#fb-overlay .fb-cancel { min-height: var(--sn-tap-min); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-m); background-color: var(--sn-bg); color: var(--sn-ink-80); font-family: var(--sn-font-ui); font-weight: 500; }
#fb-overlay .fb-submit { min-height: var(--sn-tap-min); border: none; border-radius: var(--sn-radius-m); background-color: var(--sn-accent); color: var(--sn-bg); font-family: var(--sn-font-ui); font-weight: 600; }
#fb-overlay .fb-submit:disabled { background-color: var(--sn-surface); color: var(--sn-ink-40); cursor: not-allowed; }
.fb-toast { border-radius: var(--sn-radius-m); font-family: var(--sn-font-ui); }
.d071-fab { background-color: var(--sn-accent); }

/* --- B29 broadcast (receiver + admin, innerHTML app.js) — registre alerte (crit) --- */
#b29-overlay .b29-card { background-color: var(--sn-bg); border-radius: var(--sn-radius-l); box-shadow: var(--sn-shadow-hover); border-top: 4px solid var(--sn-crit); }
#b29-overlay .b29-icon { color: var(--sn-crit); }
#b29-overlay .b29-title { color: var(--sn-crit-ink); font-weight: 700; font-size: var(--sn-fs-h2); }
#b29-overlay .b29-meta { font-family: var(--sn-font-mono); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
#b29-overlay .b29-message { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); }
#b29-overlay .b29-from { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
#b29-overlay .b29-ack-btn { min-height: var(--sn-tap-min); border: none; border-radius: var(--sn-radius-m); background-color: var(--sn-crit); color: var(--sn-bg); font-family: var(--sn-font-ui); font-weight: 600; }
.b29-badge { background-color: var(--sn-crit); color: var(--sn-bg); font-family: var(--sn-font-mono); font-weight: 700; }
.b29-admin-btn { background-color: var(--sn-crit); color: var(--sn-bg); border: none; border-radius: var(--sn-radius-m); font-family: var(--sn-font-ui); font-weight: 600; }
#b29-admin-overlay .b29-admin-modal { background-color: var(--sn-bg); border-radius: var(--sn-radius-l); box-shadow: var(--sn-shadow-hover); }
#b29-admin-overlay h3 { font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); }
#b29-admin-overlay h4 { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); }
#b29-admin-overlay label { font-size: var(--sn-fs-label); font-weight: 500; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); }
#b29-admin-overlay textarea, #b29-admin-overlay select, #b29-admin-overlay input {
  min-height: var(--sn-tap-min); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s); padding: var(--sn-space-3) var(--sn-space-4);
  font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); background-color: var(--sn-bg); width: 100%; box-sizing: border-box;
}
#b29-admin-overlay .b29-counter { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); }
#b29-admin-overlay .b29-send-btn { min-height: var(--sn-tap-min); border: none; border-radius: var(--sn-radius-m); background-color: var(--sn-crit); color: var(--sn-bg); font-family: var(--sn-font-ui); font-weight: 600; width: 100%; }
#b29-admin-overlay .b29-close-x { background: none; border: none; color: var(--sn-ink-40); cursor: pointer; font-size: 20px; }
#b29-admin-overlay .b29-status-list { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }

/* --- Sollicitations (#sol-overlay, innerHTML app.js) --- */
#sol-overlay .sol-modal { background-color: var(--sn-bg); border-radius: var(--sn-radius-l); box-shadow: var(--sn-shadow-hover); }
#sol-overlay .sol-badge-icon { font-size: 28px; }
#sol-overlay .sol-title { font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); }
#sol-overlay .sol-sub { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
#sol-overlay .sol-card { background-color: var(--sn-surface); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); padding: var(--sn-space-3); }
#sol-overlay .sol-pdv { font-weight: 600; color: var(--sn-ink-100); }
#sol-overlay .sol-msg { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-80); }
#sol-overlay .sol-days-label { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
#sol-overlay .sol-actions { display: flex; gap: var(--sn-space-2); }
#sol-overlay .sol-btn { min-height: var(--sn-tap-min); border-radius: var(--sn-radius-m); border: none; color: var(--sn-bg); font-family: var(--sn-font-ui); font-weight: 600; font-size: var(--sn-fs-base-terrain); }
#sol-overlay .sol-btn-yes { background-color: var(--sn-ok); }
#sol-overlay .sol-btn-partial { background-color: var(--sn-accent); }
#sol-overlay .sol-btn-no { background-color: var(--sn-ink-40); }
#sol-overlay .sol-day-confirm { min-height: var(--sn-tap-min); border-radius: var(--sn-radius-s); border: none; background-color: var(--sn-accent); color: var(--sn-bg); font-family: var(--sn-font-ui); font-weight: 600; }
#sol-overlay .sol-done-msg { color: var(--sn-ok); font-weight: 600; text-align: center; padding: var(--sn-space-3); }
#sol-overlay .sol-err { color: var(--sn-crit); font-size: var(--sn-fs-caption); }

/* ==========================================================================
   §11 — TEAM DYNAMIQUE (s10b) + VISITE PDV  (SL-4 E3-B + addendum team)
   Ex-<style> inline head index.html (s10b attribution/compétences + visite) →
   tokens kit (hex littéraux/fallbacks éliminés). Contenus construits en
   innerHTML par app.js → stylés par classes, handlers préservés.
   ========================================================================== */

/* --- S10b : attribution + compétences (contenu dynamique #screen-team) --- */
.s10b-title { font-size: var(--sn-fs-base-terrain); font-weight: 700; color: var(--sn-ink-100); margin-bottom: var(--sn-space-2); }
.s10b-hint, .s10b-meta { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); margin-bottom: var(--sn-space-3); }
.s10b-pill { display: inline-block; padding: 2px var(--sn-space-2); border-radius: var(--sn-radius-pill); font-size: var(--sn-fs-label); font-weight: 700; }
.s10b-pill-performance { background-color: var(--sn-ok-10); color: var(--sn-ok-ink); }
.s10b-pill-development { background-color: var(--sn-azur-10); color: color-mix(in srgb, var(--sn-azur) 70%, var(--sn-ink-100)); }
.s10b-tag { font-size: var(--sn-fs-label); text-transform: uppercase; letter-spacing: var(--sn-ls-label); color: var(--sn-ink-40); }
.s10b-ok { color: var(--sn-ok-ink); font-weight: 700; }
.s10b-warn { color: var(--sn-warn-ink); font-weight: 700; }
.s10b-group { margin: var(--sn-space-2) 0; padding: var(--sn-space-2) var(--sn-space-3); background-color: var(--sn-surface); border-radius: var(--sn-radius-m); }
.s10b-group-coll { background-color: var(--sn-violet-10); }
.s10b-collab { font-weight: 600; font-size: var(--sn-fs-caption); color: var(--sn-ink-100); margin-bottom: var(--sn-space-1); }
.s10b-role { font-weight: 400; font-size: var(--sn-fs-label); color: var(--sn-ink-40); text-transform: uppercase; letter-spacing: var(--sn-ls-label); }
.s10b-tasks { list-style: none; margin: 0; padding: 0; }
.s10b-tasks li { font-size: var(--sn-fs-caption); color: var(--sn-ink-80); padding: 2px 0; }
.s10b-senior { font-size: var(--sn-fs-label); background-color: var(--sn-warn-10); color: var(--sn-warn-ink); padding: 1px var(--sn-space-2); border-radius: var(--sn-radius-s); text-transform: uppercase; letter-spacing: var(--sn-ls-label); }
/* S13 SL-1 — la consigne jointe à la délégation, au panneau d'attribution du jour. Elle prend
   sa propre ligne, en retrait sous la tâche : c'est l'intention du manager, elle se lit après
   ce qu'il y a à faire, jamais mêlée à l'intitulé. */
.s10b-consigne { display: block; margin: 2px 0 0 var(--sn-space-4); font-size: var(--sn-fs-label); color: var(--sn-ink-60); }
.s10b-actions { display: flex; flex-wrap: wrap; gap: var(--sn-space-2); margin-top: var(--sn-space-3); }
.s10b-btn { flex: 1; min-width: 120px; min-height: var(--sn-tap-min); padding: var(--sn-space-2) var(--sn-space-3); border: none; border-radius: var(--sn-radius-m); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); font-weight: 600; cursor: pointer; }
.s10b-btn-primary { background-color: var(--sn-accent); color: var(--sn-bg); }
.s10b-btn-sec { background-color: var(--sn-surface); color: var(--sn-ink-80); }
.s10b-btn:disabled { opacity: .5; }
.s10b-comp-collab { margin: var(--sn-space-3) 0; padding-bottom: var(--sn-space-2); border-bottom: 1px solid var(--sn-separator); }
.s10b-comp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-1) 0; }
.s10b-fam { font-size: var(--sn-fs-caption); color: var(--sn-ink-80); }
.s10b-select { min-height: var(--sn-tap-min); padding: var(--sn-space-2); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s); font-size: var(--sn-fs-caption); background-color: var(--sn-bg); color: var(--sn-ink-80); min-width: 130px; }

/* --- Visite PDV (#screen-visite + brief dynamique) --- */
.visite-intro { color: var(--sn-ink-60); font-size: var(--sn-fs-caption); margin: var(--sn-space-1) 0 var(--sn-space-3); }
.visite-pdv-card { display: flex; align-items: center; gap: var(--sn-space-3); padding: var(--sn-space-3) var(--sn-space-4); margin-bottom: var(--sn-space-2); background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); cursor: pointer; min-height: var(--sn-tap-min); transition: border-color var(--sn-dur-fast) var(--sn-ease), box-shadow var(--sn-dur-fast) var(--sn-ease); }
.visite-pdv-card:active { border-color: var(--sn-accent); box-shadow: var(--sn-shadow-rest); }
.visite-pdv-nom { font-weight: 600; font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); flex: 1; }
.visite-pdv-zone { font-size: var(--sn-fs-label); font-weight: 700; color: var(--sn-accent-ink); background-color: var(--sn-violet-10); padding: 2px var(--sn-space-2); border-radius: var(--sn-radius-s); text-transform: uppercase; letter-spacing: var(--sn-ls-label); }
.visite-pdv-arrow { color: var(--sn-ink-40); flex: 0 0 auto; }
.visite-back { background: none; border: none; color: var(--sn-accent); font-size: var(--sn-fs-base-terrain); font-weight: 600; padding: var(--sn-space-2) 0; margin-bottom: var(--sn-space-1); cursor: pointer; min-height: var(--sn-tap-min); }
.visite-acc { border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); margin-bottom: var(--sn-space-2); background-color: var(--sn-bg); overflow: hidden; }
.visite-acc-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sn-space-3) var(--sn-space-4); cursor: pointer; user-select: none; min-height: var(--sn-tap-min); }
.visite-acc-title { font-weight: 700; font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); }
.visite-acc-badge { display: inline-block; margin-left: var(--sn-space-2); font-size: var(--sn-fs-label); font-weight: 700; background-color: var(--sn-violet-10); color: var(--sn-accent-ink); border-radius: var(--sn-radius-s); padding: 1px var(--sn-space-2); }
.visite-acc-chev { transition: transform var(--sn-dur-base) var(--sn-ease); color: var(--sn-ink-40); flex: 0 0 auto; }
.visite-acc.open .visite-acc-chev { transform: rotate(180deg); }
.visite-acc-body { display: none; padding: 0 var(--sn-space-4) var(--sn-space-3); }
.visite-acc.open .visite-acc-body { display: block; }
.visite-kv { display: flex; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-1) 0; font-size: var(--sn-fs-caption); color: var(--sn-ink-80); border-top: 1px solid var(--sn-separator); }
.visite-kv span { color: var(--sn-ink-40); }
.visite-kv b { text-align: right; }
.visite-deleg { margin-top: var(--sn-space-2); font-size: var(--sn-fs-caption); color: var(--sn-warn-ink); background-color: var(--sn-ambre-10); padding: var(--sn-space-2) var(--sn-space-3); border-radius: var(--sn-radius-s); }
.visite-team-row { padding: var(--sn-space-2) 0; border-top: 1px solid var(--sn-separator); }
.visite-team-nom { font-weight: 600; font-size: var(--sn-fs-caption); color: var(--sn-ink-100); }
.visite-team-meta { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); }
.visite-senior { font-size: var(--sn-fs-label); background-color: var(--sn-warn-10); color: var(--sn-warn-ink); border-radius: var(--sn-radius-s); padding: 1px var(--sn-space-2); margin-left: var(--sn-space-1); text-transform: uppercase; letter-spacing: var(--sn-ls-label); vertical-align: middle; }
.visite-jalon { padding: var(--sn-space-2) 0; font-size: var(--sn-fs-caption); color: var(--sn-ink-80); border-top: 1px solid var(--sn-separator); }
.visite-reco { padding: var(--sn-space-2) 0; border-top: 1px solid var(--sn-separator); }
.visite-reco-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sn-space-3); }
.visite-reco-top b { font-size: var(--sn-fs-caption); color: var(--sn-ink-100); }
.visite-reco-top span { color: var(--sn-ink-40); font-size: var(--sn-fs-label); white-space: nowrap; }
.visite-reco-txt { font-size: var(--sn-fs-caption); color: var(--sn-ink-80); margin: var(--sn-space-1) 0; }
.visite-reco-auth { font-size: var(--sn-fs-label); color: var(--sn-ink-40); font-style: italic; }
.visite-first, .visite-empty { color: var(--sn-ink-40); font-size: var(--sn-fs-caption); padding: var(--sn-space-2) 0; }
.visite-notes-hint, .visite-qa-hint { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); margin: var(--sn-space-1) 0; }
.visite-notes-area, .visite-qa-input { width: 100%; box-sizing: border-box; background-color: var(--sn-surface); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s); color: var(--sn-ink-100); padding: var(--sn-space-3); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); resize: vertical; }
.visite-notes-area { min-height: 90px; }
.visite-qa-input { min-height: 64px; }
.visite-qa-actions { margin-top: var(--sn-space-2); display: flex; justify-content: flex-end; }
.visite-qa-answer { margin-top: var(--sn-space-3); background-color: var(--sn-surface); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-s); padding: var(--sn-space-3); font-size: var(--sn-fs-caption); line-height: 1.5; color: var(--sn-ink-80); white-space: pre-wrap; }
.visite-qa-answer.visite-qa-loading, .visite-qa-answer.visite-qa-dormant { color: var(--sn-ink-40); font-style: italic; }
.visite-qa-answer.visite-qa-err { color: var(--sn-crit); border-color: var(--sn-crit); background-color: var(--sn-crit-10); }
.visite-start-msg { font-size: var(--sn-fs-caption); margin-top: var(--sn-space-2); }
.visite-start-msg.visite-ok { color: var(--sn-ok); }
.visite-start-msg.visite-err { color: var(--sn-crit); }
#visite-start-wrap { margin-top: var(--sn-space-3); }
.visite-cache-banner { background-color: var(--sn-ambre-10); color: var(--sn-warn-ink); font-size: var(--sn-fs-caption); padding: var(--sn-space-2) var(--sn-space-3); border-radius: var(--sn-radius-s); margin-bottom: var(--sn-space-3); }
.visite-generated { text-align: center; font-size: var(--sn-fs-label); color: var(--sn-ink-40); margin: var(--sn-space-3) 0 var(--sn-space-1); }

/* ==========================================================================
   §12 — VERSANT VENDEUR  (SL-5 E3-B · vendeur.html + vendeur.js dynamique)
   Ex-<style> inline de vendeur.html (v-*) → tokens kit. vendeur.html charge
   désormais tokens.css + components.css + terrain.css. Les fb-* de vendeur
   étaient identiques à style.css → supprimées (style.css + §10 fournissent).
   Correctif D (voice-speech.js) = balise <script>, hors CSS.
   ========================================================================== */
body.v-body { overflow-y: auto; }
.v-screen { padding: var(--sn-space-4) var(--sn-space-4) 80px; max-width: 430px; margin: 0 auto; }
.v-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-3) var(--sn-space-4); background-color: var(--sn-bg); border-radius: var(--sn-radius-l); box-shadow: var(--sn-shadow-rest); margin-bottom: var(--sn-space-3); }
.v-header-left { flex: 1; min-width: 0; }
.v-collab-nom { font-weight: 700; font-size: var(--sn-fs-h2); color: var(--sn-ink-100); margin-bottom: 2px; }
.v-pdv-nom { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
.v-role-badge { display: inline-block; padding: var(--sn-space-1) var(--sn-space-3); border-radius: var(--sn-radius-pill); font-size: var(--sn-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--sn-ls-label); background-color: var(--sn-violet-10); color: var(--sn-accent-ink); white-space: nowrap; }
.v-section { background-color: var(--sn-bg); border-radius: var(--sn-radius-l); padding: var(--sn-space-4); margin-bottom: var(--sn-space-3); box-shadow: var(--sn-shadow-rest); }
.v-section-title { font-size: var(--sn-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--sn-ls-label); color: var(--sn-ink-60); margin-bottom: var(--sn-space-3); display: flex; align-items: center; justify-content: space-between; }
.v-checklist-date { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--sn-fs-label); color: var(--sn-ink-40); }
.v-progress-wrap { margin-bottom: var(--sn-space-3); }
.v-progress-text { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); display: flex; justify-content: space-between; margin-bottom: var(--sn-space-1); }
.v-progress-bar { height: 6px; background-color: var(--sn-separator); border-radius: var(--sn-radius-pill); overflow: hidden; }
.v-progress-fill { height: 100%; background: linear-gradient(90deg, var(--sn-accent), var(--sn-azur)); transition: width var(--sn-dur-base) var(--sn-ease); }
.v-checklist-item { display: flex; align-items: center; gap: var(--sn-space-3); padding: var(--sn-space-3) 0; min-height: var(--sn-tap-min); border-bottom: 1px solid var(--sn-separator); }
.v-checklist-item:last-child { border-bottom: none; }
.v-check-icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--sn-fs-caption); font-weight: 700; }
.v-check-icon.done { background-color: var(--sn-ok); color: var(--sn-bg); }
.v-check-icon.pending { background-color: var(--sn-surface); color: var(--sn-ink-40); border: 2px solid var(--sn-ink-20); }
.v-check-label { flex: 1; font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-80); }
.v-check-label.done { text-decoration: line-through; color: var(--sn-ink-40); }
/* S13 SL-2 — ce qui accompagne une tâche confiée, chez le collaborateur. L'intitulé reste ce
   qu'on lit en premier ; l'origine, le mot du responsable et la consigne dont la tâche procède
   viennent après, chacun sur sa ligne et en encre atténuée. Le barré d'une tâche faite les
   couvre aussi : la ligne entière est faite, pas seulement son titre. */
.v-item-org { font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-40); }
.v-item-mot,
.v-item-origine { display: block; margin-top: 2px; font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
.v-item-mot { color: var(--sn-ink-80); }
.v-checklist-item { align-items: flex-start; }
.v-check-icon { flex-shrink: 0; }
.v-alert-item, .v-directive-item { padding: var(--sn-space-3) 0; border-bottom: 1px solid var(--sn-separator); display: flex; gap: var(--sn-space-3); }
.v-alert-item:last-child, .v-directive-item:last-child { border-bottom: none; }
.v-badge { padding: 3px var(--sn-space-2); border-radius: var(--sn-radius-pill); font-size: var(--sn-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--sn-ls-label); flex-shrink: 0; height: fit-content; }
.v-sev-critical { background-color: var(--sn-crit-10); color: var(--sn-crit-ink); }
.v-sev-high     { background-color: var(--sn-warn-10); color: var(--sn-warn-ink); }
.v-sev-warning  { background-color: var(--sn-ambre-10); color: var(--sn-warn-ink); }
.v-sev-info     { background-color: var(--sn-azur-10); color: color-mix(in srgb, var(--sn-azur) 70%, var(--sn-ink-100)); }
.v-prio-haute   { background-color: var(--sn-crit-10); color: var(--sn-crit-ink); }
.v-prio-moyenne { background-color: var(--sn-warn-10); color: var(--sn-warn-ink); }
.v-prio-basse   { background-color: var(--sn-violet-10); color: var(--sn-accent-ink); }
.v-text-content { flex: 1; font-size: var(--sn-fs-caption); color: var(--sn-ink-80); line-height: 1.4; }
/* SRV-ROLES — version equipe servie au vendeur : titre court + consigne empiles,
   duree d'annonce en pastille. Aucun texte source siege n'est rendu ici (G8). */
.v-directive-body { flex: 1; display: flex; flex-direction: column; gap: var(--sn-space-1); }
.v-directive-titre { font-size: var(--sn-fs-caption); font-weight: 600; color: var(--sn-ink-100); line-height: 1.3; }
.v-directive-duree { background-color: var(--sn-azur-10); color: color-mix(in srgb, var(--sn-azur) 70%, var(--sn-ink-100)); text-transform: none; letter-spacing: normal; }
.v-directive-pending { font-style: italic; color: var(--sn-ink-40); }
.v-empty { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); text-align: center; padding: var(--sn-space-4) 0; font-style: italic; }
.v-loading { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); text-align: center; padding: var(--sn-space-5) 0; }
.v-error { font-size: var(--sn-fs-caption); color: var(--sn-crit); text-align: center; padding: var(--sn-space-3); background-color: var(--sn-crit-10); border-radius: var(--sn-radius-s); margin-bottom: var(--sn-space-3); }
.v-actions { display: flex; gap: var(--sn-space-3); margin-top: var(--sn-space-4); }
.v-btn { flex: 1; min-height: var(--sn-tap-min); padding: var(--sn-space-3) var(--sn-space-4); border: none; border-radius: var(--sn-radius-m); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); font-weight: 600; cursor: pointer; transition: opacity var(--sn-dur-fast) var(--sn-ease); }
.v-btn-primary { background-color: var(--sn-accent); color: var(--sn-bg); }
.v-btn-secondary { background-color: var(--sn-surface); color: var(--sn-ink-80); border: 1px solid var(--sn-ink-20); }
.v-btn:active { opacity: 0.7; }
.v-clickable { cursor: pointer; }
.v-clickable:active { opacity: 0.6; }
.v-pending-save { opacity: 0.5; pointer-events: none; }
.v-sub { font-size: var(--sn-fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--sn-ls-label); color: var(--sn-ink-60); margin: var(--sn-space-3) 0 var(--sn-space-1); }
.v-comp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-2) 0; border-bottom: 1px solid var(--sn-separator); }
.v-comp-row:last-of-type { border-bottom: none; }
.v-comp-fam { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-80); }
.v-comp-select { min-height: var(--sn-tap-min); padding: var(--sn-space-2) var(--sn-space-3); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s); font-size: var(--sn-fs-caption); background-color: var(--sn-bg); color: var(--sn-ink-80); }

/* ==========================================================================
   §13 — MERCHANDISING (onboard + fixture)  (SL-6 E3-B)
   RHABILLAGE STRICTEMENT PÉRIPHÉRIQUE : boutons, champs, progression, récap,
   badges, tables, en-têtes de section → tokens kit. AUCUNE règle ne cible
   <video>/<canvas>/<img> (caméra/scan/preview SACRÉS) : seul le CONTENEUR
   .merch-camera-wrap est re-teinté ; ses enfants restent style.css. Zéro
   reparentage DOM, zéro modif de handler (capture/scan/PDF intouchés).
   ========================================================================== */

/* --- Onboard : progression, texte, champs, boutons --- */
.merch-onboard-container { padding: var(--sn-space-5) var(--sn-space-4) var(--sn-space-6); }
.merch-progress { background-color: var(--sn-separator); border-radius: var(--sn-radius-pill); }
.merch-progress-bar { background-color: var(--sn-accent); border-radius: var(--sn-radius-pill); }
.merch-progress-text { font-size: var(--sn-fs-label); font-weight: 600; color: var(--sn-ink-60); text-transform: uppercase; letter-spacing: var(--sn-ls-label); }
.merch-h2 { font-size: var(--sn-fs-h1); font-weight: 700; color: var(--sn-ink-100); line-height: 1.2; }
.merch-p { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-60); line-height: 1.5; }
.merch-field label { display: block; font-size: var(--sn-fs-label); font-weight: 600; color: var(--sn-ink-60); text-transform: uppercase; letter-spacing: var(--sn-ls-label); margin-bottom: var(--sn-space-1); }
.merch-field input, .merch-field select { width: 100%; min-height: var(--sn-tap-min); padding: var(--sn-space-3) var(--sn-space-4); border: 1px solid var(--sn-ink-20); border-radius: var(--sn-radius-s); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); background-color: var(--sn-bg); box-sizing: border-box; }
.merch-field input:focus, .merch-field select:focus { outline: none; border-color: var(--sn-accent); box-shadow: 0 0 0 2px var(--sn-violet-10); }
.merch-btn { min-height: var(--sn-tap-min); border-radius: var(--sn-radius-m); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); font-weight: 600; }
.merch-btn-primary { background-color: var(--sn-accent); color: var(--sn-bg); }
.merch-btn-secondary { background-color: var(--sn-surface); color: var(--sn-ink-80); border: 1px solid var(--sn-ink-20); }
.merch-btn-skip { background: transparent; color: var(--sn-ink-40); }
.merch-summary { background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); }
.merch-summary-item { border-bottom: 1px solid var(--sn-separator); font-size: var(--sn-fs-caption); }
.merch-summary-k { color: var(--sn-ink-60); }
.merch-summary-v { color: var(--sn-ink-80); font-weight: 600; }
.merch-summary-empty { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); font-style: italic; }
.merch-error { font-size: var(--sn-fs-caption); color: var(--sn-crit); background-color: var(--sn-crit-10); border-radius: var(--sn-radius-s); }
.merch-zone-progress { font-size: var(--sn-fs-caption); color: var(--sn-ink-40); font-weight: 500; }
/* Conteneur caméra : re-teinte du CADRE uniquement (video/canvas/img intouchés). */
.merch-camera-wrap { background-color: var(--sn-ink-100); border-radius: var(--sn-radius-m); }
.merch-scan-status { font-size: var(--sn-fs-base-terrain); font-weight: 600; border-radius: var(--sn-radius-s); }
.merch-scan-status.ok { color: var(--sn-ok-ink); background-color: var(--sn-ok-10); }
.merch-scan-status.warn { color: var(--sn-warn-ink); background-color: var(--sn-ambre-10); }
.merch-scan-status.err { color: var(--sn-crit); background-color: var(--sn-crit-10); }
.merch-checkboxes { background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); }
.merch-checkbox-item { font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-80); }
.merch-checkbox-item input[type=checkbox] { accent-color: var(--sn-accent); }
.merch-recap { background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); }
.merch-recap-block { border-bottom: 1px solid var(--sn-separator); }
.merch-recap-title { font-size: var(--sn-fs-label); font-weight: 700; color: var(--sn-ink-40); text-transform: uppercase; letter-spacing: var(--sn-ls-label); }
.merch-recap-zone { border-bottom: 1px dashed var(--sn-separator); }
.merch-recap-zone-label { font-weight: 700; font-size: var(--sn-fs-h2); color: var(--sn-accent); }
.merch-recap-zone-meta { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
.merch-recap-zone-cat { font-size: var(--sn-fs-caption); color: var(--sn-ink-80); }

/* --- Fixture (fiche signalétique) --- */
.fixture-card { background-color: var(--sn-bg); }
.fx-header { border-bottom: 1px solid var(--sn-separator); }
.fx-title { font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); }
.fx-meta { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
.fx-section { border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); background-color: var(--sn-bg); }
.fx-section-header { background-color: var(--sn-surface); font-size: var(--sn-fs-base-terrain); font-weight: 600; color: var(--sn-ink-100); min-height: var(--sn-tap-min); }
.fx-section-header::after { color: var(--sn-ink-40); }
.fx-section-body { font-size: var(--sn-fs-caption); color: var(--sn-ink-80); }
.fx-empty { color: var(--sn-ink-40); font-size: var(--sn-fs-caption); font-style: italic; }
.fx-badge { color: var(--sn-bg); background-color: var(--sn-ink-40); border-radius: var(--sn-radius-pill); font-size: var(--sn-fs-label); font-weight: 700; }
.fx-badge-ok { background-color: var(--sn-ok); }
.fx-badge-warn { background-color: var(--sn-warn); }
.fx-badge-alert { background-color: var(--sn-crit); }
.fx-plan-name { font-weight: 700; font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); }
.fx-plan-period { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
.fx-table { font-size: var(--sn-fs-caption); }
.fx-table thead th { background-color: var(--sn-ink-100); color: var(--sn-bg); font-size: var(--sn-fs-label); text-transform: uppercase; letter-spacing: var(--sn-ls-label); }
.fx-table tbody tr { border-bottom: 1px solid var(--sn-separator); }
.fx-table tbody tr:nth-child(even) { background-color: var(--sn-surface); }
.fx-table tbody td { color: var(--sn-ink-80); }

/* ==========================================================================
   §14 — DASHBOARD RECOMPOSÉ (E3-FULL, maquette cockpit-du-jour littérale)
   Composition maquette portée en .tr-* ; rendu depuis le kit (.sn-card-kpi,
   .sn-gauge, .sn-alert-item, .sn-badge). .dash-header CONSERVÉ (ancre insertion
   B29 + #dash-pdv-name lu par voice-ui). Les anciennes règles §4/§6 dashboard
   deviennent inertes (éléments retirés) ; le gel #pulse-canvas (ID, §7) tient.
   ========================================================================== */

/* Scroll : pile verticale + gouttière (le header porte sa propre gouttière). */
#screen-dashboard .dashboard-scroll {
  display: flex; flex-direction: column; gap: var(--sn-space-4);
  padding: 0 var(--sn-space-4) calc(var(--sn-space-7) + var(--sn-safe-bottom));
}

/* En-tête terrain : titre PDV + date à gauche, badge à droite (space-between). */
#screen-dashboard .dash-header.sn-screen-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-space-3);
  margin: 0 calc(-1 * var(--sn-space-4));
  padding: calc(var(--sn-space-5) + var(--sn-safe-top)) var(--sn-space-4) var(--sn-space-3);
  border-bottom: 1px solid var(--sn-separator);
  background: none;
}
#screen-dashboard .dash-header .tr-head__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#screen-dashboard .dash-header .sn-screen-header__title { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-h1); font-weight: 700; color: var(--sn-ink-100); }
#screen-dashboard .dash-header .sn-screen-header__context { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }

/* Grille KPI (= .mq-kpi-grid) : 2 colonnes, carte CA pleine largeur. */
.tr-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-3); }
/* S4 SL-2b — la carte CA est passée à l'intérieur de `.dt-kpi-row` pour rejoindre la
   rangée des indicateurs au poste de travail. Ce conteneur est en `display: contents` sur
   téléphone : la carte reste un item direct de la grille et doit garder sa pleine largeur.
   Le combinateur passe donc d'enfant direct à descendant — sans quoi la règle cesserait de
   s'appliquer et la carte tomberait sur une demi-colonne. Rendu mobile inchangé, vérifié
   au pixel. C'est la SEULE intervention de la session sur ce fichier. */
.tr-kpi-grid .tr-kpi--wide { grid-column: 1 / -1; }
.tr-kpi-gaugerow { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-3); }
.tr-kpi-gaugerow__main { display: flex; flex-direction: column; gap: var(--sn-space-1); min-width: 0; }
.tr-kpi-gaugerow .sn-gauge { --sn-gauge-size: 64px; --sn-gauge-thickness: 8px; flex-shrink: 0; }
/* S2 SL-0b — l'anneau du CA porte la couleur de son ÉTAT D'ATTEINTE, à toutes les
   largeurs d'écran. Cette règle fixait la teinte à l'accent violet quelle que soit la
   performance : sur le poste de travail S1 la corrigeait, sur le téléphone elle
   l'emportait dans la cascade — le même chiffre se lisait donc de deux façons selon
   l'appareil, et la couleur cessait d'être une information fiable.
   Les trois classes d'état viennent du kit et sont posées par setGauge() d'après
   l'atteinte (>= 95 % vert · 80-95 % orange · < 80 % rouge). Deux classes dans le
   sélecteur : l'état l'emporte partout sur la teinte par défaut.
   Sans objectif servi, aucune classe d'état n'est posée et l'anneau reste violet —
   une couleur neutre pour une progression sans référence. */
.tr-gauge-ca { --sn-gauge-color: var(--sn-accent); }
.tr-gauge-ca.sn-gauge--ok   { --sn-gauge-color: var(--sn-ok); }
.tr-gauge-ca.sn-gauge--warn { --sn-gauge-color: var(--sn-warn); }
.tr-gauge-ca.sn-gauge--crit { --sn-gauge-color: var(--sn-crit); }
.tr-skel-inline { display: inline-block; width: 92px; height: 22px; vertical-align: middle; }

/* Pile de sections + titre (= .mq-stack / .mq-section-title). */
.tr-stack { display: flex; flex-direction: column; gap: var(--sn-space-3); }
.tr-section-title { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); }

/* Panneau liste (= .mq-panel) + zone action de l'item alerte. */
.tr-panel { background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); overflow: hidden; }
.tr-panel > .sn-alert-item:last-child { border-bottom: 0; }
.tr-panel .tr-state { padding: var(--sn-space-4); }
.sn-alert-item__action { display: flex; align-items: center; gap: var(--sn-space-2); flex-shrink: 0; }

/* Brief (= .mq-brief). */
.tr-brief { padding: var(--sn-space-4); background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); box-shadow: var(--sn-shadow-rest); }
.tr-brief__text { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); line-height: 1.5; color: var(--sn-ink-80); }

/* Dock PULSE (= .mq-pulse) + halo particules (canvas piloté par app.js) + barre C-V1-01. */
.tr-pulse { border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); overflow: hidden; background-color: var(--sn-bg); }
.tr-pulse__halo { position: relative; }
.tr-pulse__halo #pulse-canvas { display: block; width: 100%; height: auto; }
.tr-pulse__halo .pulse-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-3) var(--sn-space-4); }
.tr-pulse .sn-chat__bar { border-top: 1px solid var(--sn-separator); align-items: flex-end; }
.tr-pulse .pulse-info { display: flex; flex-direction: column; gap: 2px; }
.tr-pulse .pulse-title { font-family: var(--sn-font-ui); font-weight: 700; color: var(--sn-accent); }
.tr-pulse .pulse-subtitle { font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
.tr-pulse .pulse-status { display: flex; align-items: center; gap: var(--sn-space-2); font-family: var(--sn-font-mono); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }
.tr-pulse .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--sn-ok); }
/* F3 — statut de service réel (non cliquable) : hors ligne = pastille + texte atténués */
.tr-pulse .pulse-status[data-online="false"] { color: var(--sn-ink-40); }
.tr-pulse .pulse-status[data-online="false"] .pulse-dot { background-color: var(--sn-ink-40); }
/* F3 — fil de conversation écrit (questions + réponses PULSE, rendu **gras**) */
.tr-pulse__thread { display: flex; flex-direction: column; gap: var(--sn-space-2); padding: var(--sn-space-3) var(--sn-space-4); max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tr-pulse__thread:empty { display: none; }
.tr-pulse__msg { max-width: 88%; padding: var(--sn-space-2) var(--sn-space-3); border-radius: var(--sn-radius-m); font-size: var(--sn-fs-body, 15px); line-height: 1.45; overflow-wrap: anywhere; }
.tr-pulse__msg--user { align-self: flex-end; background-color: var(--sn-accent); color: #fff; border-bottom-right-radius: 4px; }
.tr-pulse__msg--assistant { align-self: flex-start; background-color: color-mix(in srgb, var(--sn-accent) 8%, var(--sn-bg)); color: var(--sn-ink-100); border-bottom-left-radius: 4px; }
.tr-pulse__msg--pending { color: var(--sn-ink-60); font-style: italic; }
.tr-pulse__msg strong { font-weight: 700; }
/* F3 — saisie multiligne pleine largeur (remplace l'input readonly de la coquille) */
.tr-pulse__input { pointer-events: auto; background: transparent; resize: none; border: none; outline: none; width: 100%; min-height: 40px; max-height: 120px; padding: var(--sn-space-2) 0; font: inherit; font-size: var(--sn-fs-body, 15px); line-height: 1.4; color: var(--sn-ink-100); }
.tr-pulse .sn-chat__mic, .tr-pulse .sn-chat__send { pointer-events: auto; flex: 0 0 auto; }
/* F3 — un seul micro : celui du dock. Le FAB vocal flottant est masqué sur le terrain
   (terrain.css n'est PAS chargé par le cockpit → cockpit intact) ; il reste déclenché
   par programme (#pulse-mic → .voice-fab.click()). */
.voice-fab { display: none !important; }

/* Action « Préparer une visite » (ex-console-grid) — CTA secondaire pleine largeur. */
.tr-visite-link { width: 100%; }

/* ==========================================================================
   §15 — ALERTES RECOMPOSÉ (E3-FULL) — liste .sn-alert-item + pastille sévérité
   (A1) + diagnostic dépliable. .alerte-card (§5) ne sert plus qu'aux cartes
   suggestion-délégation (dormantes). Liseré : crit/warn/neutre, jamais vert.
   ========================================================================== */
#screen-alertes .screen-body { display: flex; flex-direction: column; gap: var(--sn-space-2); padding: var(--sn-space-4); }
#screen-alertes .tr-alert { background-color: var(--sn-bg); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); overflow: hidden; }
#screen-alertes .tr-alert .sn-alert-item { align-items: flex-start; border-bottom: 0; }
#screen-alertes .tr-alert--expandable .sn-alert-item { cursor: pointer; }
.tr-alert-chev { width: 24px; height: 24px; padding: 0; border: none; background: transparent; position: relative; flex-shrink: 0; cursor: pointer; }
.tr-alert-chev::after { content: ""; position: absolute; top: 7px; left: 8px; width: 7px; height: 7px; border-right: 2px solid var(--sn-ink-40); border-bottom: 2px solid var(--sn-ink-40); transform: rotate(45deg); transition: transform var(--sn-dur-base) var(--sn-ease); }
#screen-alertes .tr-alert.open .tr-alert-chev::after { transform: rotate(-135deg); }
.tr-alert-diag { display: none; margin: 0 var(--sn-space-4) var(--sn-space-3); padding-top: var(--sn-space-3); border-top: 1px solid var(--sn-separator); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); line-height: 1.5; white-space: pre-wrap; }
#screen-alertes .tr-alert.open .tr-alert-diag { display: block; }

/* ==========================================================================
   §16 — VENDEUR RECOMPOSÉ (E3-FULL, maquette front-vendeur)
   En-tête « Bonjour », onglets 4 (Accueil/Checklist/PULSE/Moi), hero, zone du
   pouce, barre PULSE. Sections .v-* (rendu) inchangées (§12). Tabbar kit fixe.
   ========================================================================== */
.v-tab { display: none; }
.v-tab.active { display: block; }

/* En-tête greeting (sn-screen-header--terrain sur fond carte). */
.v-header.sn-screen-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-space-3); padding: calc(var(--sn-space-4) + var(--sn-safe-top)) var(--sn-space-4) var(--sn-space-3); background-color: var(--sn-bg); border-radius: var(--sn-radius-l); box-shadow: var(--sn-shadow-rest); margin-bottom: var(--sn-space-3); }
.v-header .sn-screen-header__title { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-h1); font-weight: 700; color: var(--sn-ink-100); }
.v-header .sn-screen-header__context { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); }

/* Hero (accueil + pulse). */
.v-hero { padding: var(--sn-space-5) var(--sn-space-2) var(--sn-space-3); }
.v-hero__hello { margin: 0 0 var(--sn-space-1); font-family: var(--sn-font-ui); font-size: var(--sn-fs-h1); font-weight: 700; color: var(--sn-ink-100); }
.v-hero__prompt { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-h2); font-weight: 500; color: var(--sn-ink-60); line-height: 1.35; }

/* Zone du pouce (actions basses pleine largeur). */
.v-thumb { display: flex; flex-direction: column; gap: var(--sn-space-3); margin-top: var(--sn-space-4); }
.v-thumb .v-btn { width: 100%; min-height: calc(var(--sn-tap-min) + var(--sn-space-2)); font-size: var(--sn-fs-h2); }

/* Barre PULSE vendeur (coquille kit — tap = overlay vocal). */
.v-pulse-bar { border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); background-color: var(--sn-bg); margin-top: var(--sn-space-4); align-items: flex-end; }
.v-pulse-bar .sn-field__input { pointer-events: auto; background: transparent; }

/* Tabbar vendeur (kit fixe bas) — items <a>, non re-skinnés par §1 (.bottom-nav absent). */
.v-tabbar.sn-tabbar { z-index: 20; }