/* ============================================================================
   Beaver — coquille
   T-UX-1 · consomme les jetons de `tokens.css`, système de conception Beaver.

   TOUT CE FICHIER EST PORTÉ PAR `body.ui-v2`.
   -------------------------------------------
   Aucune règle ici ne s'applique tant qu'une vue n'a pas appelé `mountShell()`.
   Les écrans non migrés gardent exactement leur apparence, sans qu'on ait eu à
   les modifier. C'est la contrepartie du montage parallèle.

   L'ORDRE DE CHARGEMENT COMPTE
   ---------------------------
   Ce fichier vient APRÈS `main.css` dans `index.html`. Il doit gagner, et
   uniquement sous `body.ui-v2` — d'où la portée systématique plutôt que des
   `!important`.

   CE QUE LA COQUILLE PORTE, ET CE QU'ELLE NE PORTE PAS
   -----------------------------------------------------
   · le filet dégradé de marque en haut de l'écran — le seul endroit où le
     dégradé est permanent ;
   · une barre latérale CALME : blanche, bordée, texte fusain, entrée active en
     orange d'accent ; pas de colonne violette ;
   · les composants transversaux normalisés — boutons, champs, badges, titre
     de page, libellé de section, chiffre clé — pour que chaque écran migré
     les hérite sans les redéclarer. Les tableaux restent des tableaux.
   ============================================================================ */

/* ─── Base ──────────────────────────────────────────────────────────────────*/
body.ui-v2 {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Le filet dégradé de marque : 3 px, fixé en haut, au-dessus de tout. C'est
   l'élément de signature ; il n'est repris nulle part ailleurs en permanence. */
body.ui-v2::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--brand-rule-height);
  background: var(--gradient-brand);
  z-index: 130;
  pointer-events: none;
}

/* La coquille historique reste dans le DOM — `nav.js` continue d'y écrire au
   boot et `unmountShell()` la restitue sans reconstruction. Elle est masquée,
   pas retirée. */
body.ui-v2 > #app > .sidebar,
body.ui-v2 .main-content > .topbar { display: none; }

body.ui-v2 .main-content {
  margin-left: var(--sidebar-expanded);
  transition: margin-left var(--transition-normal);
  background: var(--bg-canvas);
  min-height: 100vh;
  min-width: 0;
}
body.ui-v2.ui-v2-collapsed .main-content { margin-left: var(--sidebar-collapsed); }

body.ui-v2 #view-root {
  max-width: var(--content-max);
  padding: var(--space-6) var(--space-8) var(--space-12);
  min-width: 0;
}

/* Portée au CONTENU, pas à `body`, pour ne pas surclasser `.v2-item`. */
body.ui-v2 #view-root a { color: var(--accent-text); }
body.ui-v2 #view-root a:hover { color: var(--accent-hover); text-decoration: none; }
body.ui-v2 #view-root a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Le bouton d'aide flottant vient d'`index.html` avec un indigo hérité en
   style INLINE, que rien d'externe ne peut surclasser sans `!important`. */
body.ui-v2 #help-fab {
  background: var(--brand-aubergine) !important;
  color: var(--text-inverse) !important;
  width: 2.25rem !important; height: 2.25rem !important;
  font-size: var(--text-md) !important;
  box-shadow: var(--shadow-popover) !important;
}

/* ─── Barre latérale ────────────────────────────────────────────────────────*/
.v2-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-expanded);
  height: 100vh;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-inverse);
  color: var(--sidebar-text);
  padding-top: var(--brand-rule-height);
  transition: width var(--transition-normal);
}
body.ui-v2-collapsed .v2-sidebar { width: var(--sidebar-collapsed); }

.v2-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  height: var(--topbar-height);
  padding: 0 var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--border-inverse);
  flex: 0 0 auto;
}
.v2-brand-mark {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--text-primary); text-decoration: none; min-width: 0;
}
/* Le glyphe de marque porte le dégradé de signature : c'est l'un des endroits
   nommés pour lui. */
.v2-brand-glyph {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--text-base);
}
.v2-brand-text { display: flex; flex-direction: column; min-width: 0; }
.v2-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700;
  color: var(--brand-aubergine);
  letter-spacing: var(--tracking-tight); line-height: 1.1;
}
.v2-brand-tagline {
  font-size: var(--text-2xs); color: var(--sidebar-text-muted);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
body.ui-v2-collapsed .v2-brand { padding: 0 var(--space-2); gap: var(--space-1); }
body.ui-v2-collapsed .v2-brand-text { display: none; }

.v2-collapse {
  flex: 0 0 auto;
  background: transparent; border: 1px solid var(--border-inverse);
  color: var(--sidebar-text-muted);
  width: 22px; height: 22px; line-height: 1;
  border-radius: var(--radius-xs); cursor: pointer;
  font-size: var(--text-xs);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.v2-collapse:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }
.v2-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.v2-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3) 0 var(--space-4); }
.v2-group { margin-bottom: var(--space-3); }
.v2-group-title {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sidebar-text-muted);
  font-weight: 700;
  background: transparent; border: none; text-align: left;
}
/* Un groupe secondaire se replie : le titre est un bouton, avec un chevron
   fin. Il reste lisible au clavier et annonce son état (aria-expanded). */
.v2-group-toggle { cursor: pointer; border-radius: var(--radius-xs); }
.v2-group-toggle:hover { color: var(--text-primary); }
.v2-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.v2-group-chevron {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin: 0 4px 3px 0;
  transition: transform var(--transition-fast);
}
.v2-group.is-closed .v2-group-chevron { transform: rotate(-45deg); margin-bottom: 0; }
body.ui-v2-collapsed .v2-group-title {
  /* Replié, un titre de groupe est illisible ; le séparer par un trait garde la
     structure sans afficher un mot tronqué. */
  height: 1px; padding: 0; margin: var(--space-3) var(--space-4);
  overflow: hidden; color: transparent; background: var(--border-inverse);
}
body.ui-v2-collapsed .v2-group-chevron { display: none; }
/* Barre repliée : les groupes secondaires restent accessibles, même fermés —
   sinon un membre de plateforme perdrait l'Atelier en repliant la barre. */
body.ui-v2-collapsed .v2-group-items[hidden] { display: block; }

.v2-item {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 1px var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--sidebar-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.v2-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.v2-item:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); text-decoration: none; }
/* L'entrée active : texte orange, filet gauche orange, fond orange très clair.
   La couleur seule ne porte pas le sens — `aria-current` et le poids de police
   le doublent. */
a.v2-item.is-active {
  background: var(--bg-sidebar-active);
  color: var(--sidebar-text-active);
  border-left-color: var(--accent);
  font-weight: 700;
}
a.v2-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Indisponible : ni lien, ni bouton. Le curseur par défaut et l'absence de
   survol doivent dire « ceci n'est pas cliquable » avant même la pastille. */
.v2-item.is-unavailable { color: var(--text-faint); cursor: default; }

/* ── Replié : icônes, initiales en secours ─────────────────────────────────*/
body.ui-v2-collapsed .v2-item { justify-content: center; padding: 7px 0; border-left-width: 0; }
body.ui-v2-collapsed .v2-item-label { display: none; }
body.ui-v2-collapsed .v2-item-badge { display: none; }
body.ui-v2-collapsed .v2-item::before {
  content: attr(data-initial);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}
.v2-item::before { content: none; }
body.ui-v2-collapsed .v2-item.has-icon::before,
body.ui-v2 .v2-item.has-icon::before { content: none; }
.v2-icon { flex: 0 0 auto; width: 16px; height: 16px; opacity: .85; }
a.v2-item:hover .v2-icon, a.v2-item.is-active .v2-icon { opacity: 1; }
.v2-item.is-unavailable .v2-icon { opacity: .5; }

.v2-item-badge {
  flex: 0 0 auto;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  color: var(--sidebar-text-muted);
  font-weight: 700;
}
.v2-item-badge.is-sim     { color: var(--brand-magenta); border-color: var(--brand-pink); }
.v2-item-badge.is-locked  { color: var(--text-faint); }
/* Discret : c'est une note de marge, pas une alerte. */
.v2-item-badge.is-missing { color: var(--text-faint); border-style: dashed; }
.v2-item-badge.is-action  {
  color: var(--text-inverse); background: var(--accent); border-color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.v2-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-inverse);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
/* Le pied porte l'aide, pour tous ; en barre repliée, elle reste visible. */
.v2-foot-nav { margin: 0 calc(-1 * var(--space-2)); }
body.ui-v2-collapsed .v2-foot { padding: var(--space-3) 0; }
body.ui-v2-collapsed .v2-lang,
body.ui-v2-collapsed .v2-account { display: none; }

.v2-lang { display: flex; align-items: center; gap: var(--space-2); }
.v2-lang-label {
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--sidebar-text-muted); font-weight: 700;
}
.v2-lang-select {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-xs);
}
.v2-lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.v2-account { display: flex; flex-direction: column; gap: 2px; }
.v2-account-label {
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--sidebar-text-muted); font-weight: 700;
}
.v2-account-email {
  font-size: var(--text-sm); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-account-role { font-size: var(--text-2xs); color: var(--sidebar-text-muted); }
.v2-logout {
  margin-top: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-control);
  color: var(--text-secondary);
  padding: 5px var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.v2-logout:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }
.v2-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2-logout[disabled] { opacity: .5; cursor: default; }

/* ─── Barre supérieure ──────────────────────────────────────────────────────*/
.v2-topbar {
  position: sticky; top: 0; z-index: 110;
  height: var(--topbar-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--brand-rule-height) var(--space-8) 0;
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-default);
}
/* Ancre, pas second titre : l'écran porte déjà son grand titre. */
.v2-page-title {
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-topbar-right { display: flex; align-items: center; gap: var(--space-3); }

.v2-palette-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2) 4px var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-ui); font-size: var(--text-sm);
  cursor: pointer;
  min-width: 200px;
  justify-content: space-between;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.v2-palette-trigger:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.v2-palette-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2-palette-trigger kbd {
  font-size: var(--text-2xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  background: var(--bg-surface-muted);
  color: var(--text-faint);
}

/* ─── Palette de commandes ──────────────────────────────────────────────────*/
.v2-palette-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(42, 19, 38, .40);
  display: flex; justify-content: center;
  padding-top: 12vh;
}
.v2-palette {
  width: min(560px, calc(100vw - var(--space-8)));
  max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.v2-palette-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.v2-palette-input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--font-ui); font-size: var(--text-lg);
  color: var(--text-primary);
}
.v2-palette-input::placeholder { color: var(--text-faint); }
/* Le périmètre est affiché en permanence : cette palette ne déclenche rien. */
.v2-palette-scope {
  flex: 0 0 auto;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-faint);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}
.v2-palette-list { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; }
.v2-palette-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.v2-palette-item.is-active { background: var(--accent-subtle); }
.v2-palette-label { font-size: var(--text-md); color: var(--text-primary); }
.v2-palette-group {
  font-size: var(--text-xs); color: var(--text-faint);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  white-space: nowrap;
}
.v2-palette-empty {
  list-style: none;
  padding: var(--space-4) var(--space-3);
  color: var(--text-faint); font-size: var(--text-md);
}

/* ─── Composants transversaux normalisés ───────────────────────────────────
   Chaque écran migré hérite de ces formes ; il ne les redéclare pas. Un seul
   bouton PRIMAIRE par page — c'est une règle de composition, tenue à la
   relecture, pas une propriété CSS. */

/* Titre de page : Quicksand, aubergine. Libellé de section : Open Sans gras,
   orange. Chiffre clé : Open Sans gras, violet des données. */
body.ui-v2 .v2-page-title-lg,
body.ui-v2 .cc-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-aubergine);
  letter-spacing: var(--tracking-tight);
}
body.ui-v2 .v2-eyebrow,
body.ui-v2 .cc-eyebrow {
  color: var(--accent-text);
  font-weight: 700;
}
body.ui-v2 .cc-metric-value {
  font-weight: 700;
  color: var(--data-violet);
}

/* Boutons. `.v2-btn` est la forme de base ; les variantes portent l'emphase.
   Rayon 8 px, 0,2 s ease, focus orange visible. */
body.ui-v2 .v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700;
  padding: 7px var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-control);
  background: var(--bg-surface); color: var(--text-secondary);
  cursor: pointer; text-decoration: none; line-height: 1.3;
  transition: background var(--transition-normal), color var(--transition-normal),
              border-color var(--transition-normal), box-shadow var(--transition-normal);
}
body.ui-v2 .v2-btn:hover { background: var(--bg-canvas); color: var(--text-primary); }
body.ui-v2 .v2-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.ui-v2 .v2-btn[disabled], body.ui-v2 .v2-btn[aria-disabled="true"] {
  background: var(--bg-surface-muted); color: var(--text-faint); border-color: var(--border-subtle);
  cursor: not-allowed;
}
/* Primaire : orange plein, texte blanc. */
body.ui-v2 .v2-btn-primary,
body.ui-v2 .v2-btn-send {
  background: var(--accent-fill); border-color: var(--accent-fill); color: var(--text-inverse);
}
body.ui-v2 .v2-btn-primary:hover,
body.ui-v2 .v2-btn-send:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--text-inverse); }
/* Un lien habillé en bouton garde la couleur du BOUTON : la règle générale
   `#view-root a` (portée par un identifiant) l'emporterait sinon, et un
   primaire orange écrirait en orange sur orange (mesuré T-UX-3). */
body.ui-v2 #view-root a.v2-btn { color: var(--text-secondary); }
body.ui-v2 #view-root a.v2-btn:hover { color: var(--text-primary); }
body.ui-v2 #view-root a.v2-btn-primary, body.ui-v2 #view-root a.v2-btn-primary:hover,
body.ui-v2 #view-root a.v2-btn-send, body.ui-v2 #view-root a.v2-btn-send:hover,
body.ui-v2 #view-root a.v2-btn-hero, body.ui-v2 #view-root a.v2-btn-hero:hover { color: var(--text-inverse); }
body.ui-v2 #view-root a.v2-btn-secondary, body.ui-v2 #view-root a.v2-btn-secondary:hover { color: var(--brand-aubergine); }
/* Haute emphase — au plus un par page. Le dégradé orange n'atteint pas 4,5:1
   sous un texte blanc sur toute sa largeur (#F5821F : 2,7) : il passe SOUS le
   bouton, en filet de 3 px, et le texte repose sur l'orange de remplissage. */
body.ui-v2 .v2-btn-hero {
  background: linear-gradient(var(--accent-fill), var(--accent-fill)) padding-box, var(--gradient-orange) border-box;
  border: 0; border-bottom: 3px solid transparent; color: var(--text-inverse);
}
body.ui-v2 .v2-btn-hero:hover { background: linear-gradient(var(--accent-fill-hover), var(--accent-fill-hover)) padding-box, var(--gradient-orange) border-box; color: var(--text-inverse); }
/* Secondaire : fond blanc, bordure aubergine 2 px, texte aubergine. */
body.ui-v2 .v2-btn-secondary {
  background: var(--bg-surface); border: 2px solid var(--brand-aubergine); color: var(--brand-aubergine);
  padding: 6px calc(var(--space-4) - 1px);
}
body.ui-v2 .v2-btn-secondary:hover { background: var(--brand-aubergine); color: var(--text-inverse); }
/* Action structurante : aubergine plein. */
body.ui-v2 .v2-btn-structural {
  background: var(--brand-aubergine); border-color: var(--brand-aubergine); color: var(--text-inverse);
}
body.ui-v2 .v2-btn-structural:hover { background: var(--brand-aubergine-hover); border-color: var(--brand-aubergine-hover); color: var(--text-inverse); }
/* Fantôme : texte orange DE TEXTE, sans fond. */
body.ui-v2 .v2-btn-ghost {
  background: transparent; border-color: transparent; color: var(--accent-text);
}
body.ui-v2 .v2-btn-ghost:hover { color: var(--accent-fill-hover); background: transparent; opacity: 1; }
body.ui-v2 .v2-btn-quiet { background: transparent; }
body.ui-v2 .v2-btn-danger { color: var(--danger); border-color: var(--danger); background: var(--bg-surface); }
body.ui-v2 .v2-btn-danger:hover { background: var(--danger-subtle); opacity: 1; }

/* Champs : fond blanc, bordure fine, 8 px, focus orange, libellés petits et
   gras. Une erreur se dit en TEXTE, la couleur seule ne suffit pas. */
body.ui-v2 .v2-input,
body.ui-v2 .v2-select,
body.ui-v2 #view-root textarea {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border-control);
  border-radius: var(--radius-sm); padding: 7px var(--space-3); min-width: 0;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
body.ui-v2 .v2-input:hover, body.ui-v2 .v2-select:hover { border-color: var(--border-strong); }
body.ui-v2 .v2-input:focus-visible,
body.ui-v2 .v2-select:focus-visible,
body.ui-v2 #view-root textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
body.ui-v2 .v2-input[aria-invalid="true"], body.ui-v2 .v2-select[aria-invalid="true"] {
  border-color: var(--danger);
}
body.ui-v2 .v2-input[disabled], body.ui-v2 .v2-select[disabled] {
  background: var(--bg-surface-sunken); color: var(--text-faint);
}
body.ui-v2 .v2-field-label, body.ui-v2 .v2-rep-label {
  font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary);
  letter-spacing: var(--tracking-normal); text-transform: none;
}
body.ui-v2 .v2-field-error { font-size: var(--text-xs); color: var(--danger); font-weight: 600; }

/* Badges : pastilles, texte en capitales, jamais la couleur seule. */
body.ui-v2 .v2-badge {
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-weight: 700;
}
body.ui-v2 .v2-badge.is-accent  { border-color: var(--accent); color: var(--accent-text-on-tint); background: var(--accent-subtle); }
body.ui-v2 .v2-badge.is-success { border-color: var(--success); color: var(--success-text); background: var(--success-subtle); }
body.ui-v2 .v2-badge.is-warning { border-color: var(--warning); color: var(--accent-text-on-tint); background: var(--warning-subtle); }
body.ui-v2 .v2-badge.is-danger  { border-color: var(--danger); color: var(--danger); background: var(--danger-subtle); }

/* Cartes et panneaux : blancs, 16 px, ombre douce teintée. Un tableau n'est
   pas une carte : il garde sa bordure et ses séparateurs. */
body.ui-v2 .cc-panel, body.ui-v2 .cc-metric, body.ui-v2 .v2-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ─── Étroit ────────────────────────────────────────────────────────────────
   Sous 900px la barre latérale se replie d'office. */
@media (max-width: 900px) {
  body.ui-v2 .main-content { margin-left: var(--sidebar-collapsed); }
  body.ui-v2 .v2-sidebar { width: var(--sidebar-collapsed); }
  body.ui-v2 .v2-brand-text,
  body.ui-v2 .v2-collapse,
  body.ui-v2 .v2-item-label,
  body.ui-v2 .v2-item-badge,
  body.ui-v2 .v2-lang,
  body.ui-v2 .v2-account,
  body.ui-v2 .v2-workspace { display: none; }
  body.ui-v2 .v2-foot { padding: var(--space-3) 0; }
  body.ui-v2 .v2-item { justify-content: center; padding: 7px 0; border-left-width: 0; }
  /* Le repli forcé par la largeur reçoit EXACTEMENT le même traitement que le
     repli choisi : titres de groupe en trait, groupes secondaires visibles. */
  body.ui-v2 .v2-group-title {
    height: 1px; padding: 0; margin: var(--space-3) var(--space-4);
    overflow: hidden; color: transparent; background: var(--border-inverse);
  }
  body.ui-v2 .v2-group-chevron { display: none; }
  body.ui-v2 .v2-group-items[hidden] { display: block; }
  body.ui-v2 .v2-item::before {
    content: attr(data-initial);
    font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
  }
  body.ui-v2 #view-root { padding: var(--space-4); }
  body.ui-v2 .v2-topbar { padding: var(--brand-rule-height) var(--space-4) 0; }
  .v2-palette-trigger { min-width: 0; }
  .v2-palette-trigger span { display: none; }
}

/* ─── Sélecteur d'espace de travail ────────────────────────────────────────
   L'espace actif est écrit en permanence, au-dessus de la navigation. Réduit à
   rien quand la barre est repliée — un libellé tronqué serait pire que rien. */
.v2-workspace:empty { display: none; }
.v2-workspace { padding: 0 var(--space-3, .75rem) var(--space-2, .5rem); }
body.ui-v2-collapsed .v2-workspace { display: none; }
/* `nav.js` rend le sélecteur avec les variables historiques `--c-*` en style
   inline : sous la coquille claire, on les ramène aux jetons. */
body.ui-v2 .v2-workspace select {
  background: var(--bg-surface) !important; color: var(--text-primary) !important;
  border: 1px solid var(--border-control) !important; border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui);
}
body.ui-v2 .v2-workspace > div > div { color: var(--text-primary) !important; }
/* L'état « espace indisponible » rend deux blocs en `--c-muted` / `--c-text`
   (jeu sombre historique : 3,1 et 1,2 sur blanc) : ramenés au texte latéral. */
body.ui-v2 .v2-workspace > div { color: var(--sidebar-text) !important; }
body.ui-v2 .v2-workspace #workspace-label { color: var(--sidebar-text-muted) !important; }

/* ─── T-UX-5 — file de travail et boîte « à décider » ──────────────────────
   L'urgence est un MOT ; la teinte le qualifie. Le geste primaire d'une ligne
   est un lien habillé en bouton discret : un par ligne, jamais deux. */
body.ui-v2 .v2-badge[data-urgency="immediate"] { border-color: var(--danger); color: var(--danger); background: var(--danger-subtle); }
body.ui-v2 .v2-badge[data-urgency="today"] { border-color: var(--accent); color: var(--accent-text-on-tint); background: var(--accent-subtle); }
body.ui-v2 .v2-badge[data-urgency="deferred"] { color: var(--text-faint); }
body.ui-v2 .v2-wq-why { display: block; max-width: 48ch; white-space: normal; color: var(--text-muted); font-size: var(--text-xs); }
body.ui-v2 .v2-wq-primary { white-space: nowrap; }
body.ui-v2 .v2-apr-inbox-row td { vertical-align: middle; }
body.ui-v2 .v2-panel-note.is-warn { color: var(--warning-text); }
/* Compteurs par motif (file de travail) : le chiffre en violet des données,
   « indisponible » en mot — jamais 0 à la place. */
body.ui-v2 .v2-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
body.ui-v2 .v2-metric { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
body.ui-v2 .v2-metric-label { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
body.ui-v2 .v2-metric-value { font-size: var(--text-title); font-weight: 700; color: var(--data-violet); font-variant-numeric: tabular-nums; }
body.ui-v2 .v2-metric-value .v2-unavailable { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; }

/* ── T-UX-7 — accessibilité ───────────────────────────────────────────────
   Lien d'évitement : hors écran jusqu'au focus clavier, puis au-dessus de
   tout, sur l'aubergine (texte blanc : 10,9:1). Le repère principal reçoit
   le focus par script : aucun anneau sur lui, le saut suffit. */
body.ui-v2 .v2-skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10000;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--brand-aubergine); color: var(--text-inverse);
  font-weight: 700; text-decoration: none;
  transition: top var(--transition-fast);
}
body.ui-v2 .v2-skip:focus-visible { top: var(--space-4); outline: 2px solid var(--accent); outline-offset: 2px; }
body.ui-v2 #view-root:focus { outline: none; }
/* Focus visible pour TOUT contrôle de la coquille v2 qui n'a pas sa propre
   règle : un anneau d'accent (3,9:1 sur blanc, 3:1 suffit à un indicateur). */
body.ui-v2 :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}