/*
 * ============================================================================
 * VELOX · Design System v2 — overlays & composants métier
 * ============================================================================
 *
 * Session Phase 1 · 20 avril 2026 — Session 3
 * (enchaînement après Session 1 `986f755` tokens + Session 2 `89de819` atomiques)
 * Source de vérité : VELOX-KB/01_Projet/Refonte UI/08 — Design system v2.md
 *
 * Coexiste avec `design-tokens.css` v1 pendant toute la Phase 3 (DS-1).
 * À importer APRÈS `design-tokens-v2.css` ET `components-v2.css` :
 *   <link rel="stylesheet" href="/interfaces/css/design-tokens-v2.css">
 *   <link rel="stylesheet" href="/interfaces/css/components-v2.css">
 *   <link rel="stylesheet" href="/interfaces/css/overlays-v2.css">
 *
 * ----------------------------------------------------------------------------
 * Rappel des décisions figées (20 avril 2026)
 * ----------------------------------------------------------------------------
 *   DS-1 : coexistence v1/v2, aucun fichier figé modifié
 *   DS-2 : dark mode reporté post-MVP
 *   DS-3 : statuts 3 macro pour tickets + devis uniquement
 *   DS-4 : icônes Lucide SVG inline (stroke=currentColor, stroke-width=2)
 *   DS-5 : densité moyenne aérée
 *
 * ----------------------------------------------------------------------------
 * Décisions Session 3 tranchées (20 avril 2026)
 * ----------------------------------------------------------------------------
 *   Point 1 : nouveau fichier overlays-v2.css (P4 + P5 métier regroupés)
 *   Point 2 : modals 4 tailles (sm 400 / md 600 / lg 800 / xl 1000)
 *   Point 3 : 1 composant .v2-slide-in avec modifiers --docked / --overlay
 *             largeurs 480 / 560 (défaut) / 640 / 720
 *   Point 4 : 2 tokens (--v2-overlay-hover + --v2-overlay-backdrop)
 *             PROMUS Session 4 (21 avril) vers design-tokens-v2.css §14.
 *             2 tokens --v2-on-dark-* restent locaux (usage limité au
 *             tier-banner, promotion reportée Phase 3).
 *   Point 5 : command palette ⌘K en CSS + structure uniquement,
 *             JS binding = Phase 3
 *
 * ----------------------------------------------------------------------------
 * Composants NON écrits (conditionnés go produit [[00 — Plan global]])
 * ----------------------------------------------------------------------------
 *   - sla-indicator (item #8 SLA CACOMIAF)
 *   - task-row Admin Inbox (item #14)
 *   - message-bubble / conversation-list / message-composer (item #1)
 *   - absence-banner (item #9)
 *
 * ----------------------------------------------------------------------------
 * Règles appliquées Session 3
 * ----------------------------------------------------------------------------
 *   Focus : outline + focus-ring token, override accent-500 sur surfaces
 *           sombres (identique Session 1+2)
 *   Z-index : tokens --v2-z-* exclusivement (jamais de valeur hardcodée)
 *   Transitions : --v2-transition-slow (300ms) pour panels/modals,
 *                 --v2-transition-base (200ms) pour toasts,
 *                 --v2-transition-fast (100ms) pour hover
 *   Valeurs hors token : 2 tokens locaux documentés (section 0 ci-dessous)
 *
 * ----------------------------------------------------------------------------
 * Table des matières
 * ----------------------------------------------------------------------------
 *    0. TOKENS LOCAUX — on-dark-hover, on-dark-text-subtle
 *                       (overlay-hover + overlay-backdrop promus §14 tokens)
 *    1. MODALS — .v2-modal (sm/md/lg/xl + --confirmation, --form)
 *    2. SLIDE-IN PANELS — .v2-slide-in (--docked, --overlay + 4 tailles)
 *    3. DRAWERS — .v2-drawer (mobile sidebar, origine gauche ou droite)
 *    4. TOASTS — .v2-toast (--success, --warning, --danger, --info + stack)
 *    5. BANNERS — .v2-banner (--info, --warning, --danger + tier-banner)
 *    6. LOADERS — .v2-spinner + .v2-skeleton
 *    7. EMPTY STATES — .v2-empty (3 variants)
 *    8. COMMAND PALETTE ⌘K — .v2-command-palette
 *    9. TIER-BANNER — .v2-tier-banner (variant sticky du banner)
 *   10. SCOPE-TOGGLE — .v2-scope-toggle (segmented control superviseur)
 *   11. ACTIVITY FEED ITEM — .v2-activity-feed-item
 *   12. CR-FORM — .v2-cr-form (modèle CR structuré)
 *   13. ARTICLE-LIBRE-MODAL — .v2-article-libre (structure dans modal)
 *   14. KPI-CARD métier — .v2-kpi-card (évolution de .v2-card--kpi Session 2)
 *   15. TIMELINE-ITEM — .v2-timeline-item (fiche tiers cockpit v57)
 * ============================================================================
 */


/* ============================================================================
 * 0. TOKENS LOCAUX (après promotion Session 4)
 * ============================================================================
 *
 * Historique : cette section contenait 4 tokens Session 3. Deux d'entre eux
 * (`--v2-overlay-hover` + `--v2-overlay-backdrop`) ont été promus en Session 4
 * (21 avril 2026) vers `design-tokens-v2.css` §14, après validation Codex et
 * usage confirmé (>= 5 usages pour overlay-hover, 4 overlays partageant
 * overlay-backdrop).
 *
 * Restent locaux ici : `--v2-on-dark-hover` + `--v2-on-dark-text-subtle`.
 * Usage actuellement limité au tier-banner uniquement. Promotion reportée
 * Phase 3 si header v2 + sidebar v2 les consomment aussi.
 *
 * Note `components-v2.css` : pattern `rgb(0 0 0 / 0.08)` sur `.v2-pill-remove`
 * peut désormais pointer vers `--v2-overlay-hover` (token central). Migration
 * à faire dans un commit Phase 1 ultérieur si re-ouverture de
 * `components-v2.css` validée — non urgente.
 */

:root {
  /* --- Tokens promus Session 4 (21 avril 2026) ---
   * `--v2-overlay-hover` et `--v2-overlay-backdrop` sont désormais déclarés
   * dans `design-tokens-v2.css` section 14. Les composants de ce fichier les
   * consomment de façon transparente (mêmes noms, mêmes valeurs). Aucune
   * redéclaration ici pour éviter toute ambiguïté de source.
   */

  /* --- Surfaces sombres — tokens locaux pour lisibilité sur fond coloré ---
   * Utilisés par les composants qui s'affichent sur fond primary-700
   * (tier-banner) ou surface sombre équivalente. Candidats promotion Session 4
   * vers `design-tokens-v2.css` après validation visuelle storybook.
   *
   * `--v2-on-dark-hover` : teinte blanche 10% pour les états :hover sur
   *   surfaces sombres (back button tier-banner, futurs boutons header).
   * `--v2-on-dark-text-subtle` : teinte blanche 70% pour les textes
   *   secondaires / labels / codes sur fond bleu CACOMIAF. Équivalent
   *   sémantique de `--v2-text-color-tertiary` (neutral-500) mais décliné
   *   pour les surfaces sombres où le noir ne serait pas lisible. Valeur
   *   unique (0.7) pour uniformité — un seul niveau de "secondaire sombre"
   *   suffit en Phase 1. */
  --v2-on-dark-hover:        rgb(255 255 255 / 0.1);
  --v2-on-dark-text-subtle:  rgb(255 255 255 / 0.7);
}


/* ============================================================================
 * 1. MODALS — .v2-modal
 * ============================================================================
 *
 * Structure HTML :
 *   <div class="v2-modal-overlay" data-modal-open>
 *     <div class="v2-modal v2-modal--md" role="dialog" aria-modal="true"
 *          aria-labelledby="m-title">
 *       <header class="v2-modal-header">
 *         <h2 class="v2-modal-title" id="m-title">Titre</h2>
 *         <button class="v2-modal-close" aria-label="Fermer">
 *           <svg><!-- Lucide x --></svg>
 *         </button>
 *       </header>
 *       <div class="v2-modal-body">...</div>
 *       <footer class="v2-modal-footer">
 *         <button class="v2-btn v2-btn--ghost">Annuler</button>
 *         <button class="v2-btn v2-btn--primary">Valider</button>
 *       </footer>
 *     </div>
 *   </div>
 *
 * Tailles (Point 2) : --sm 400px / (défaut) 600px / --lg 800px / --xl 1000px
 * Variants : --confirmation (footer centré, pas de X header), --form (body
 *            scroll vertical, footer sticky)
 *
 * JS attendu Phase 3 : ouverture/fermeture, focus trap, Escape, click backdrop.
 * CSS Session 3 : toutes les animations CSS pures via classes `is-open`.
 */

.v2-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--v2-z-overlay);
  background: var(--v2-overlay-backdrop);

  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--v2-spacing-4);

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v2-transition-slow);
}
.v2-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.v2-modal {
  position: relative;
  z-index: var(--v2-z-modal);

  width: 600px;
  max-width: 100%;
  max-height: 80vh;

  display: flex;
  flex-direction: column;

  background: var(--v2-bg-surface);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-xl);

  transform: translateY(-8px) scale(0.98);
  transition:
    transform var(--v2-transition-slow),
    opacity var(--v2-transition-slow);
  opacity: 0;
}
.v2-modal-overlay.is-open .v2-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Tailles */
.v2-modal--sm { width: 400px; }
.v2-modal--md { width: 600px; }  /* explicite pour cohérence */
.v2-modal--lg { width: 800px; }
.v2-modal--xl { width: 1000px; }

/* Header */
.v2-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-spacing-4);
  padding: var(--v2-spacing-4) var(--v2-spacing-6);
  border-bottom: 1px solid var(--v2-border-subtle);
  flex-shrink: 0;
}

.v2-modal-title {
  margin: 0;
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-xl);
  font-weight: var(--v2-weight-bold);
  line-height: var(--v2-leading-tight);
  color: var(--v2-text-color-primary);
}

.v2-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: var(--v2-text-color-secondary);
  cursor: pointer;
  transition: background-color var(--v2-transition-fast);
}
.v2-modal-close:hover { background: var(--v2-overlay-hover); }
.v2-modal-close:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}
.v2-modal-close > svg { width: 20px; height: 20px; }

/* Body */
.v2-modal-body {
  padding: var(--v2-spacing-6);
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: var(--v2-text-base);
  line-height: var(--v2-leading-base);
  color: var(--v2-text-color-primary);
}

/* Footer */
.v2-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-4) var(--v2-spacing-6);
  border-top: 1px solid var(--v2-border-subtle);
  background: var(--v2-bg-surface);
  flex-shrink: 0;
}

/* Variant --confirmation : pas de X header, footer centré, titre centré */
.v2-modal--confirmation .v2-modal-header {
  justify-content: center;
  border-bottom: 0;
}
.v2-modal--confirmation .v2-modal-close { display: none; }
.v2-modal--confirmation .v2-modal-body { text-align: center; }
.v2-modal--confirmation .v2-modal-footer {
  justify-content: center;
  border-top: 0;
}

/* Variant --form : footer sticky en bas du body scrollable */
.v2-modal--form .v2-modal-body {
  padding-bottom: var(--v2-spacing-8);
}
.v2-modal--form .v2-modal-footer {
  position: sticky;
  bottom: 0;
  box-shadow: 0 -1px 0 var(--v2-border-subtle);
}

/* Mobile : toutes les tailles deviennent plein écran sous 640px */
@media (max-width: 640px) {
  .v2-modal-overlay {
    padding: 0;
  }
  .v2-modal,
  .v2-modal--sm,
  .v2-modal--md,
  .v2-modal--lg,
  .v2-modal--xl {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}


/* ============================================================================
 * 2. SLIDE-IN PANELS — .v2-slide-in
 * ============================================================================
 *
 * Un seul composant avec 2 modifiers (Point 3) :
 *   --docked  : posé dans un conteneur (cockpit pattern v54), pas de
 *               backdrop, pas d'ombre portée, slide depuis la droite du
 *               conteneur parent
 *   --overlay : overlay cross-page avec backdrop, slide depuis le bord droit
 *               de la fenêtre
 *
 * Largeurs : --sm 480 / (défaut) 560 / --md 640 / --lg 720
 * Usage v54 préservé : ticket 560 · devis/client 640 · contrat 720
 *
 * Structure identique à modal : header + body + footer
 *
 * Structure HTML overlay :
 *   <div class="v2-slide-in-backdrop" data-slidein-open></div>
 *   <aside class="v2-slide-in v2-slide-in--overlay v2-slide-in--md"
 *          role="dialog" aria-labelledby="si-title">
 *     <header class="v2-slide-in-header">
 *       <h2 class="v2-slide-in-title" id="si-title">Ticket TK-2026-001</h2>
 *       <button class="v2-slide-in-close" aria-label="Fermer">
 *         <svg><!-- Lucide x --></svg>
 *       </button>
 *     </header>
 *     <div class="v2-slide-in-body">...</div>
 *     <footer class="v2-slide-in-footer">...</footer>
 *   </aside>
 *
 * Structure HTML docked (cockpit) :
 *   <section class="v2-detail-card">
 *     <div class="v2-cockpit-list">...</div>
 *     <aside class="v2-slide-in v2-slide-in--docked v2-slide-in--md">...</aside>
 *   </section>
 */

/* Backdrop (uniquement --overlay) */
.v2-slide-in-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--v2-z-overlay);
  background: var(--v2-overlay-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v2-transition-slow);
}
.v2-slide-in-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Base */
.v2-slide-in {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100%;

  display: flex;
  flex-direction: column;

  background: var(--v2-bg-surface);

  transform: translateX(100%);
  transition: transform var(--v2-transition-slow);
}
.v2-slide-in.is-open { transform: translateX(0); }

/* Modifier --overlay : backdrop, ombre forte, z-index modal */
.v2-slide-in--overlay {
  z-index: var(--v2-z-modal);
  box-shadow: var(--v2-shadow-xl);
}

/* Modifier --docked : posé dans le conteneur parent, pas d'ombre, z-base */
.v2-slide-in--docked {
  position: absolute;   /* relatif au conteneur .v2-detail-card */
  z-index: var(--v2-z-base);
  border-left: 1px solid var(--v2-border-default);
  box-shadow: none;
}

/* Tailles */
.v2-slide-in--sm { width: 480px; }
.v2-slide-in          { width: 560px; }
.v2-slide-in--md { width: 640px; }
.v2-slide-in--lg { width: 720px; }

/* Header */
.v2-slide-in-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-spacing-4);
  padding: var(--v2-spacing-4) var(--v2-spacing-6);
  border-bottom: 1px solid var(--v2-border-subtle);
  flex-shrink: 0;
}

.v2-slide-in-title {
  margin: 0;
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-xl);
  font-weight: var(--v2-weight-bold);
  line-height: var(--v2-leading-tight);
  color: var(--v2-text-color-primary);
}

.v2-slide-in-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: var(--v2-text-color-secondary);
  cursor: pointer;
  transition: background-color var(--v2-transition-fast);
}
.v2-slide-in-close:hover { background: var(--v2-overlay-hover); }
.v2-slide-in-close:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}
.v2-slide-in-close > svg { width: 20px; height: 20px; }

/* Body */
.v2-slide-in-body {
  padding: var(--v2-spacing-6);
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: var(--v2-text-base);
  line-height: var(--v2-leading-base);
  color: var(--v2-text-color-primary);
}

/* Footer */
.v2-slide-in-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-4) var(--v2-spacing-6);
  border-top: 1px solid var(--v2-border-subtle);
  background: var(--v2-bg-surface);
  flex-shrink: 0;
}

/* Mobile : overlay full-width sous 700px */
@media (max-width: 700px) {
  .v2-slide-in--overlay,
  .v2-slide-in--overlay.v2-slide-in--sm,
  .v2-slide-in--overlay.v2-slide-in--md,
  .v2-slide-in--overlay.v2-slide-in--lg {
    width: 100vw;
  }
}


/* ============================================================================
 * 3. DRAWERS — .v2-drawer
 * ============================================================================
 *
 * Panneau latéral depuis la gauche (sidebar mobile) ou la droite (variantes
 * filtres, paramètres contextuels).
 *
 * Usage principal : sidebar mobile portail client (< 640px), menu navigation
 * mobile back-office (rare — VELOX est desktop-first).
 *
 * Structure HTML :
 *   <div class="v2-drawer-backdrop" data-drawer-open></div>
 *   <aside class="v2-drawer v2-drawer--left">
 *     <header class="v2-drawer-header">
 *       <h2 class="v2-drawer-title">Navigation</h2>
 *       <button class="v2-drawer-close" aria-label="Fermer">
 *         <svg><!-- Lucide x --></svg>
 *       </button>
 *     </header>
 *     <div class="v2-drawer-body">...</div>
 *   </aside>
 *
 * Variants : --left (défaut), --right
 * Largeur : 280px sur desktop, 85vw sur mobile (toujours laisser un bord)
 */

.v2-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--v2-z-overlay);
  background: var(--v2-overlay-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v2-transition-slow);
}
.v2-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.v2-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--v2-z-modal);
  width: 280px;
  max-width: 85vw;

  display: flex;
  flex-direction: column;

  background: var(--v2-bg-surface);
  box-shadow: var(--v2-shadow-xl);

  transition: transform var(--v2-transition-slow);
}

/* Variants origine */
.v2-drawer--left {
  left: 0;
  transform: translateX(-100%);
}
.v2-drawer--right {
  right: 0;
  transform: translateX(100%);
}
.v2-drawer.is-open { transform: translateX(0); }

.v2-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v2-spacing-4);
  border-bottom: 1px solid var(--v2-border-subtle);
  flex-shrink: 0;
}

.v2-drawer-title {
  margin: 0;
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-weight-bold);
  color: var(--v2-text-color-primary);
}

.v2-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: var(--v2-text-color-secondary);
  cursor: pointer;
  transition: background-color var(--v2-transition-fast);
}
.v2-drawer-close:hover { background: var(--v2-overlay-hover); }
.v2-drawer-close:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}
.v2-drawer-close > svg { width: 20px; height: 20px; }

.v2-drawer-body {
  padding: var(--v2-spacing-4);
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: var(--v2-text-base);
  line-height: var(--v2-leading-base);
}


/* ============================================================================
 * 4. TOASTS — .v2-toast
 * ============================================================================
 *
 * Notifications transitoires en coin d'écran. Auto-dismiss via animation CSS
 * (déclenchée par classe `is-leaving` côté JS) ou manuel via bouton dismiss.
 *
 * Variants : --success (défaut neutre), --warning, --danger, --info
 * Position par défaut : top-right. La container `.v2-toast-stack` positionne
 * les toasts, les toasts eux-mêmes ne se positionnent pas (permet stacking).
 *
 * Structure HTML :
 *   <div class="v2-toast-stack">
 *     <div class="v2-toast v2-toast--success" role="status">
 *       <span class="v2-toast-icon"><svg><!-- Lucide circle-check-big --></svg></span>
 *       <div class="v2-toast-content">
 *         <div class="v2-toast-title">Enregistré</div>
 *         <div class="v2-toast-message">Le devis a bien été enregistré.</div>
 *       </div>
 *       <button class="v2-toast-dismiss" aria-label="Fermer">
 *         <svg><!-- Lucide x --></svg>
 *       </button>
 *     </div>
 *   </div>
 */

.v2-toast-stack {
  position: fixed;
  top: var(--v2-spacing-4);
  right: var(--v2-spacing-4);
  z-index: var(--v2-z-toast);

  display: flex;
  flex-direction: column;
  gap: var(--v2-spacing-2);
  max-width: 420px;
  pointer-events: none;  /* enfants récupèrent les clics individuellement */
}

/* Variants de position optionnels (classe sur .v2-toast-stack) */
.v2-toast-stack--top-left    { right: auto; left: var(--v2-spacing-4); }
.v2-toast-stack--bottom-right { top: auto; bottom: var(--v2-spacing-4); }
.v2-toast-stack--bottom-left  { top: auto; bottom: var(--v2-spacing-4); right: auto; left: var(--v2-spacing-4); }

.v2-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-3) var(--v2-spacing-4);

  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-left: 4px solid var(--v2-info-500);
  border-radius: var(--v2-radius-md);
  box-shadow: var(--v2-shadow-lg);

  pointer-events: auto;
  min-width: 320px;

  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity var(--v2-transition-base),
    transform var(--v2-transition-base);
}
.v2-toast.is-entering,
.v2-toast.is-open {
  opacity: 1;
  transform: translateX(0);
}
.v2-toast.is-leaving {
  opacity: 0;
  transform: translateX(16px);
}

.v2-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--v2-info-600);
  margin-top: 2px;  /* aligne optiquement avec la 1re ligne de texte */
}
.v2-toast-icon > svg { width: 20px; height: 20px; }

.v2-toast-content {
  flex: 1 1 auto;
  min-width: 0;  /* permet le text-overflow */
}

.v2-toast-title {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-weight-semibold);
  color: var(--v2-text-color-primary);
  line-height: var(--v2-leading-tight);
}

.v2-toast-message {
  margin-top: 2px;
  font-size: var(--v2-text-sm);
  color: var(--v2-text-color-secondary);
  line-height: var(--v2-leading-base);
}

.v2-toast-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: var(--v2-text-color-secondary);
  cursor: pointer;
  transition: background-color var(--v2-transition-fast);
  flex-shrink: 0;
}
.v2-toast-dismiss:hover { background: var(--v2-overlay-hover); }
.v2-toast-dismiss:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: 1px;
}
.v2-toast-dismiss > svg { width: 16px; height: 16px; }

/* Variants sémantiques (couleur border-left + couleur icône) */
.v2-toast--info {
  border-left-color: var(--v2-info-500);
}
.v2-toast--info .v2-toast-icon { color: var(--v2-info-600); }

.v2-toast--success {
  border-left-color: var(--v2-success-500);
}
.v2-toast--success .v2-toast-icon { color: var(--v2-success-600); }

.v2-toast--warning {
  border-left-color: var(--v2-warning-500);
}
.v2-toast--warning .v2-toast-icon { color: var(--v2-warning-600); }

.v2-toast--danger {
  border-left-color: var(--v2-danger-500);
}
.v2-toast--danger .v2-toast-icon { color: var(--v2-danger-600); }

/* Mobile : stack prend toute la largeur sous 640px */
@media (max-width: 640px) {
  .v2-toast-stack,
  .v2-toast-stack--top-left,
  .v2-toast-stack--bottom-right,
  .v2-toast-stack--bottom-left {
    left: var(--v2-spacing-4);
    right: var(--v2-spacing-4);
    max-width: none;
  }
  .v2-toast {
    min-width: 0;
  }
}


/* ============================================================================
 * 5. BANNERS — .v2-banner
 * ============================================================================
 *
 * Messages persistants inline dans une page ou en tête.
 * Variants : --info (défaut), --warning, --danger
 * Le tier-banner sticky (section 9) est une spécialisation dédiée.
 *
 * Structure HTML :
 *   <div class="v2-banner v2-banner--warning" role="alert">
 *     <span class="v2-banner-icon">
 *       <svg><!-- Lucide triangle-alert --></svg>
 *     </span>
 *     <div class="v2-banner-content">
 *       <strong class="v2-banner-title">Contrat expirant J-15</strong>
 *       <p class="v2-banner-text">Le contrat SCI TOUR arrive à échéance.</p>
 *     </div>
 *     <div class="v2-banner-actions">
 *       <button class="v2-btn v2-btn--sm v2-btn--ghost">Détails</button>
 *     </div>
 *     <button class="v2-banner-dismiss" aria-label="Fermer">
 *       <svg><!-- Lucide x --></svg>
 *     </button>
 *   </div>
 */

.v2-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-3) var(--v2-spacing-4);

  background: var(--v2-info-50);
  border: 1px solid var(--v2-info-200);
  border-left: 4px solid var(--v2-info-500);
  border-radius: var(--v2-radius-md);
  color: var(--v2-info-700);
}

.v2-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--v2-info-600);
  margin-top: 2px;
}
.v2-banner-icon > svg { width: 20px; height: 20px; }

.v2-banner-content {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--v2-text-base);
  line-height: var(--v2-leading-base);
}

.v2-banner-title {
  display: block;
  font-family: var(--v2-font-body);
  font-weight: var(--v2-weight-semibold);
  color: var(--v2-text-color-primary);
  line-height: var(--v2-leading-tight);
}

.v2-banner-text {
  margin: 2px 0 0 0;
  color: var(--v2-text-color-secondary);
  font-size: var(--v2-text-sm);
}

.v2-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
  flex-shrink: 0;
}

.v2-banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: currentColor;
  opacity: 0.7;
  cursor: pointer;
  transition:
    opacity var(--v2-transition-fast),
    background-color var(--v2-transition-fast);
  flex-shrink: 0;
}
.v2-banner-dismiss:hover {
  opacity: 1;
  background: var(--v2-overlay-hover);
}
.v2-banner-dismiss:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: 1px;
}
.v2-banner-dismiss > svg { width: 16px; height: 16px; }

/* Variants sémantiques */
.v2-banner--info {
  background: var(--v2-info-50);
  border-color: var(--v2-info-200);
  border-left-color: var(--v2-info-500);
  color: var(--v2-info-700);
}
.v2-banner--info .v2-banner-icon { color: var(--v2-info-600); }

.v2-banner--warning {
  background: var(--v2-warning-50);
  border-color: var(--v2-warning-200);
  border-left-color: var(--v2-warning-500);
  color: var(--v2-warning-700);
}
.v2-banner--warning .v2-banner-icon { color: var(--v2-warning-600); }

.v2-banner--danger {
  background: var(--v2-danger-50);
  border-color: var(--v2-danger-200);
  border-left-color: var(--v2-danger-500);
  color: var(--v2-danger-700);
}
.v2-banner--danger .v2-banner-icon { color: var(--v2-danger-600); }


/* ============================================================================
 * 6. LOADERS — .v2-spinner + .v2-skeleton
 * ============================================================================
 *
 * Spinner circulaire : même animation que `.v2-btn.is-loading::after`
 * (réutilise `@keyframes v2-spin` de components-v2.css).
 *
 * Skeleton : shimmer de chargement pour contenu structuré (cards, listes,
 * tableaux) avant que les données soient prêtes.
 *
 * Structure HTML spinner :
 *   <div class="v2-spinner" role="status" aria-label="Chargement">
 *     <span class="v2-sr-only">Chargement…</span>
 *   </div>
 *
 * Structure HTML skeleton :
 *   <div class="v2-skeleton" aria-hidden="true"></div>
 *   <div class="v2-skeleton v2-skeleton--title" aria-hidden="true"></div>
 *   <div class="v2-skeleton v2-skeleton--circle" aria-hidden="true"></div>
 */

/* --- Spinner --- */
.v2-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--v2-border-subtle);
  border-top-color: var(--v2-primary-600);
  border-radius: var(--v2-radius-full);
  animation: v2-spin 0.8s linear infinite;
}

.v2-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.v2-spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

/* --- Skeleton shimmer --- */
@keyframes v2-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.v2-skeleton {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: var(--v2-radius-sm);
  background:
    linear-gradient(
      90deg,
      var(--v2-neutral-100) 0%,
      var(--v2-neutral-200) 50%,
      var(--v2-neutral-100) 100%
    );
  background-size: 200% 100%;
  animation: v2-skeleton-shimmer 1.4s ease-in-out infinite;
}

.v2-skeleton--title {
  height: 24px;
  width: 40%;
}
.v2-skeleton--text {
  height: 14px;
  width: 100%;
}
.v2-skeleton--text-sm { width: 60%; }
.v2-skeleton--text-md { width: 80%; }
.v2-skeleton--circle {
  width: 40px;
  height: 40px;
  border-radius: var(--v2-radius-full);
}
.v2-skeleton--card {
  height: 120px;
  border-radius: var(--v2-radius-md);
}


/* ============================================================================
 * 7. EMPTY STATES — .v2-empty
 * ============================================================================
 *
 * Variants : --default (aucun résultat), --error (erreur chargement),
 *            --unauthorized (pas d'accès)
 * Tailles : (défaut) confortable, --compact pour listes étroites
 *
 * Structure HTML :
 *   <div class="v2-empty">
 *     <div class="v2-empty-icon">
 *       <svg><!-- Lucide package (ou inbox, search, lock) --></svg>
 *     </div>
 *     <h3 class="v2-empty-title">Aucun devis pour le moment</h3>
 *     <p class="v2-empty-text">Crée ton premier devis pour commencer.</p>
 *     <div class="v2-empty-actions">
 *       <button class="v2-btn v2-btn--primary">+ Nouveau devis</button>
 *     </div>
 *   </div>
 */

.v2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-12) var(--v2-spacing-6);
  text-align: center;
  color: var(--v2-text-color-secondary);
}

.v2-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--v2-radius-full);
  background: var(--v2-neutral-100);
  color: var(--v2-neutral-400);
  margin-bottom: var(--v2-spacing-2);
}
.v2-empty-icon > svg { width: 32px; height: 32px; }

.v2-empty-title {
  margin: 0;
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-weight-bold);
  line-height: var(--v2-leading-tight);
  color: var(--v2-text-color-primary);
}

.v2-empty-text {
  margin: 0;
  max-width: 420px;
  font-size: var(--v2-text-base);
  line-height: var(--v2-leading-base);
  color: var(--v2-text-color-secondary);
}

.v2-empty-actions {
  margin-top: var(--v2-spacing-2);
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
}

/* Variants sémantiques */
.v2-empty--error .v2-empty-icon {
  background: var(--v2-danger-50);
  color: var(--v2-danger-600);
}

.v2-empty--unauthorized .v2-empty-icon {
  background: var(--v2-warning-50);
  color: var(--v2-warning-600);
}

/* Variant compact — usage liste étroite, panel slide-in */
.v2-empty--compact {
  padding: var(--v2-spacing-6) var(--v2-spacing-4);
  gap: var(--v2-spacing-2);
}
.v2-empty--compact .v2-empty-icon {
  width: 48px;
  height: 48px;
}
.v2-empty--compact .v2-empty-icon > svg { width: 24px; height: 24px; }


/* ============================================================================
 * 8. COMMAND PALETTE ⌘K — .v2-command-palette
 * ============================================================================
 *
 * Overlay centré, clavier-first. CSS + structure + animations uniquement.
 * JS binding (⌘K/Ctrl+K, Escape, flèches, fuzzy search) = Phase 3.
 *
 * Largeur fixe 640px (Point 5). Sections distinctes avec headers.
 * Empty state et loading state intégrés (pas d'import de .v2-empty).
 *
 * Structure HTML :
 *   <div class="v2-command-palette-backdrop" data-cp-open></div>
 *   <div class="v2-command-palette" role="dialog" aria-modal="true">
 *     <div class="v2-command-palette-input-wrap">
 *       <span class="v2-command-palette-input-icon">
 *         <svg><!-- Lucide search --></svg>
 *       </span>
 *       <input type="text" class="v2-command-palette-input"
 *              placeholder="Rechercher un tiers, un ticket, un devis…"
 *              autofocus>
 *       <kbd class="v2-kbd">ESC</kbd>
 *     </div>
 *     <div class="v2-command-palette-list" role="listbox">
 *
 *       <div class="v2-command-palette-section">
 *         <div class="v2-command-palette-section-title">Tiers</div>
 *         <button class="v2-command-palette-item" role="option">
 *           <span class="v2-command-palette-item-icon">
 *             <svg><!-- Lucide building-2 --></svg>
 *           </span>
 *           <span class="v2-command-palette-item-label">PRESTIGE AUTO</span>
 *           <span class="v2-command-palette-item-meta">C-10234</span>
 *           <kbd class="v2-kbd v2-kbd--sm">↵</kbd>
 *         </button>
 *       </div>
 *
 *       <div class="v2-command-palette-section">
 *         <div class="v2-command-palette-section-title">Actions rapides</div>
 *         <button class="v2-command-palette-item" role="option">
 *           <span class="v2-command-palette-item-icon">
 *             <svg><!-- Lucide plus --></svg>
 *           </span>
 *           <span class="v2-command-palette-item-label">Nouveau devis</span>
 *           <kbd class="v2-kbd v2-kbd--sm">N</kbd>
 *         </button>
 *       </div>
 *
 *     </div>
 *     <div class="v2-command-palette-footer">
 *       <span><kbd class="v2-kbd v2-kbd--sm">↑↓</kbd> naviguer</span>
 *       <span><kbd class="v2-kbd v2-kbd--sm">↵</kbd> ouvrir</span>
 *       <span><kbd class="v2-kbd v2-kbd--sm">ESC</kbd> fermer</span>
 *     </div>
 *   </div>
 *
 * États intégrés :
 *   .v2-command-palette.is-loading  → masque la liste, affiche skeleton
 *   .v2-command-palette.is-empty    → masque la liste, affiche empty inline
 */

.v2-command-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--v2-z-overlay);
  background: var(--v2-overlay-backdrop);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v2-transition-slow);
}
.v2-command-palette-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.v2-command-palette {
  position: fixed;
  top: 15vh;
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  z-index: var(--v2-z-command-palette);

  width: 640px;
  max-width: calc(100vw - var(--v2-spacing-8));
  max-height: 60vh;

  display: flex;
  flex-direction: column;

  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-lg);
  box-shadow: var(--v2-shadow-xl);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--v2-transition-slow),
    transform var(--v2-transition-slow);
}
.v2-command-palette.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

/* --- Input header ---
 *
 * L'input lui-même est nu visuellement (`outline: none` ci-dessous) : son
 * conteneur `.v2-command-palette-input-wrap` porte l'affordance visuelle
 * et reçoit le focus-visible via `:focus-within`. Pattern identique à
 * `.v2-search` Session 2 (wrap = conteneur visuel, input = contrôle nu).
 *
 * Règle focus Session 1 : `outline: none` nu est interdit. Le wrap relaie
 * l'état focus avec un halo box-shadow + border primary qui remplit le
 * rôle de l'anneau (contraste > 3:1 sur fond blanc — WCAG 2.2 SC 2.4.11).
 */
.v2-command-palette-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-3) var(--v2-spacing-4);
  border-bottom: 1px solid var(--v2-border-subtle);
  flex-shrink: 0;
  transition:
    border-color var(--v2-transition-fast),
    box-shadow var(--v2-transition-fast);
}

.v2-command-palette-input-wrap:focus-within {
  border-bottom-color: var(--v2-primary-600);
  box-shadow: inset 0 -2px 0 0 var(--v2-primary-600);
}

.v2-command-palette-input-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v2-text-color-tertiary);
  flex-shrink: 0;
}
.v2-command-palette-input-icon > svg { width: 20px; height: 20px; }

.v2-command-palette-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-md);
  color: var(--v2-text-color-primary);
  outline: none;
}
.v2-command-palette-input::placeholder {
  color: var(--v2-text-color-muted);
}

/* --- Liste résultats --- */
.v2-command-palette-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--v2-spacing-2) 0;
}

.v2-command-palette-section {
  padding: var(--v2-spacing-2) 0;
}
.v2-command-palette-section + .v2-command-palette-section {
  border-top: 1px solid var(--v2-border-subtle);
}

.v2-command-palette-section-title {
  padding: var(--v2-spacing-1) var(--v2-spacing-4);
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-weight-semibold);
  color: var(--v2-text-color-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--v2-tracking-wider);
}

.v2-command-palette-item {
  display: flex;
  align-items: center;
  gap: var(--v2-spacing-3);
  width: 100%;
  padding: var(--v2-spacing-2) var(--v2-spacing-4);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-primary);
  transition: background-color var(--v2-transition-fast);
}
.v2-command-palette-item:hover,
.v2-command-palette-item[aria-selected="true"],
.v2-command-palette-item.is-selected {
  background: var(--v2-bg-selected);
}
.v2-command-palette-item:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: -2px;  /* outline intérieur pour éviter débordement */
}

.v2-command-palette-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--v2-text-color-secondary);
}
.v2-command-palette-item-icon > svg { width: 20px; height: 20px; }

.v2-command-palette-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-command-palette-item-meta {
  font-size: var(--v2-text-sm);
  color: var(--v2-text-color-tertiary);
  font-family: var(--v2-font-mono);
  flex-shrink: 0;
}

/* --- Footer raccourcis --- */
.v2-command-palette-footer {
  display: flex;
  align-items: center;
  gap: var(--v2-spacing-4);
  padding: var(--v2-spacing-2) var(--v2-spacing-4);
  border-top: 1px solid var(--v2-border-subtle);
  background: var(--v2-bg-surface-alt);
  font-size: var(--v2-text-xs);
  color: var(--v2-text-color-tertiary);
  flex-shrink: 0;
}

/* --- États intégrés --- */

/* Loading : skeleton 3 lignes */
.v2-command-palette.is-loading .v2-command-palette-list {
  padding: var(--v2-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--v2-spacing-3);
}
.v2-command-palette.is-loading .v2-command-palette-list::before,
.v2-command-palette.is-loading .v2-command-palette-list::after {
  content: "";
  display: block;
  height: 32px;
  border-radius: var(--v2-radius-md);
  background:
    linear-gradient(
      90deg,
      var(--v2-neutral-100) 0%,
      var(--v2-neutral-200) 50%,
      var(--v2-neutral-100) 100%
    );
  background-size: 200% 100%;
  animation: v2-skeleton-shimmer 1.4s ease-in-out infinite;
}
.v2-command-palette.is-loading .v2-command-palette-section,
.v2-command-palette.is-loading .v2-command-palette-item {
  display: none;
}

/* Empty : message centré inline */
.v2-command-palette.is-empty .v2-command-palette-section,
.v2-command-palette.is-empty .v2-command-palette-item {
  display: none;
}
.v2-command-palette.is-empty .v2-command-palette-list::before {
  content: "Aucun résultat — tape un autre mot-clé.";
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v2-spacing-8) var(--v2-spacing-4);
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-tertiary);
  text-align: center;
}

/* --- Raccourcis kbd (utilisés aussi ailleurs, donc exposés) --- */
.v2-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 var(--v2-spacing-1);
  border: 1px solid var(--v2-border-default);
  border-bottom-width: 2px;
  border-radius: var(--v2-radius-sm);
  background: var(--v2-neutral-50);
  font-family: var(--v2-font-mono);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-weight-medium);
  color: var(--v2-text-color-secondary);
  line-height: 1;
}
.v2-kbd--sm {
  min-width: 20px;
  height: 18px;
  font-size: 10px;
}

/* Mobile : command palette plein écran sous 640px */
@media (max-width: 640px) {
  .v2-command-palette {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .v2-command-palette.is-open {
    transform: none;
  }
}


/* ============================================================================
 * 9. TIER-BANNER — .v2-tier-banner
 * ============================================================================
 *
 * Bandeau tiers sticky affiché en haut des pages ticket et devis quand
 * ouvertes depuis la fiche tiers (ou depuis l'URL quand le contexte tiers
 * est résolu). Décision persona commercial : le ticket devient un objet
 * au service du tiers, pas le pivot.
 *
 * Structure HTML (variant étendu desktop) :
 *   <div class="v2-tier-banner" role="region" aria-label="Tiers lié">
 *     <div class="v2-tier-banner-left">
 *       <a href="#" class="v2-tier-banner-back" aria-label="Retour fiche tiers">
 *         <svg><!-- Lucide arrow-left --></svg>
 *       </a>
 *       <span class="v2-tier-banner-icon">
 *         <svg><!-- Lucide building-2 --></svg>
 *       </span>
 *       <div class="v2-tier-banner-identity">
 *         <span class="v2-tier-banner-name">PRESTIGE AUTO</span>
 *         <span class="v2-tier-banner-code">C-10234</span>
 *       </div>
 *     </div>
 *     <div class="v2-tier-banner-metrics">
 *       <div class="v2-tier-banner-metric">
 *         <span class="v2-tier-banner-metric-label">Solde</span>
 *         <span class="v2-tier-banner-metric-value">+1,25 M</span>
 *       </div>
 *       <div class="v2-tier-banner-metric">
 *         <span class="v2-tier-banner-metric-label">Encours / Plafond</span>
 *         <span class="v2-tier-banner-metric-value">2,3 / 5 M</span>
 *       </div>
 *       <div class="v2-tier-banner-metric">
 *         <span class="v2-tier-banner-metric-label">Dernière facture</span>
 *         <span class="v2-tier-banner-metric-value">FAC-2026-101</span>
 *       </div>
 *     </div>
 *     <div class="v2-tier-banner-actions">
 *       <a href="#" class="v2-btn v2-btn--sm v2-btn--ghost">Ouvrir fiche</a>
 *     </div>
 *   </div>
 *
 * Variant --compact (mobile ou espace réduit) : masque les metrics et affiche
 * un dropdown cliquable sur le nom.
 *
 * Position : `position: sticky; top: 0;` — à placer juste sous le header.
 * Tous rôles internes (commercial, superviseur, admin) + client portail
 * (usage limité sur ses propres écrans).
 */

.v2-tier-banner {
  position: sticky;
  top: 0;
  z-index: var(--v2-z-sticky);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-spacing-6);
  padding: var(--v2-spacing-3) var(--v2-spacing-6);

  background: var(--v2-primary-700);
  color: var(--v2-text-color-inverse);
  border-bottom: 2px solid var(--v2-accent-500);

  /* Override focus-ring pour visibilité sur fond sombre (règle Session 1) */
  --v2-focus-ring: var(--v2-accent-500);
}

.v2-tier-banner-left {
  display: flex;
  align-items: center;
  gap: var(--v2-spacing-3);
  min-width: 0;
}

.v2-tier-banner-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--v2-radius-sm);
  background: transparent;
  color: currentColor;
  opacity: 0.85;
  cursor: pointer;
  text-decoration: none;
  transition:
    opacity var(--v2-transition-fast),
    background-color var(--v2-transition-fast);
}
.v2-tier-banner-back:hover {
  opacity: 1;
  background: var(--v2-on-dark-hover);
}
.v2-tier-banner-back:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}
.v2-tier-banner-back > svg { width: 20px; height: 20px; }

.v2-tier-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--v2-accent-500);
  flex-shrink: 0;
}
.v2-tier-banner-icon > svg { width: 24px; height: 24px; }

.v2-tier-banner-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--v2-leading-tight);
}

.v2-tier-banner-name {
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-weight-bold);
  color: var(--v2-text-color-inverse);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-tier-banner-code {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-text-xs);
  color: var(--v2-on-dark-text-subtle);
}

.v2-tier-banner-metrics {
  display: flex;
  align-items: center;
  gap: var(--v2-spacing-6);
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.v2-tier-banner-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: var(--v2-leading-tight);
}

.v2-tier-banner-metric-label {
  font-size: var(--v2-text-xs);
  color: var(--v2-on-dark-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--v2-tracking-wider);
}

.v2-tier-banner-metric-value {
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-weight-bold);
  color: var(--v2-text-color-inverse);
}

.v2-tier-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
  flex-shrink: 0;
}

/* Variant compact : masque les metrics (mobile, espace étroit) */
.v2-tier-banner--compact .v2-tier-banner-metrics {
  display: none;
}

/* Mobile : compact forcé sous 900px, actions simplifiées */
@media (max-width: 900px) {
  .v2-tier-banner-metrics {
    display: none;
  }
}


/* ============================================================================
 * 10. SCOPE-TOGGLE — .v2-scope-toggle
 * ============================================================================
 *
 * Segmented control pour basculer entre "Toute l'équipe" et "Mon portefeuille"
 * (décision persona superviseur : un compte, double capacité).
 *
 * Pattern : s'appuie sur la logique `.v2-tabs--segment` de components-v2.css
 * Session 2, avec variant visuel spécifique (pilule bleue sur fond clair).
 *
 * Structure HTML :
 *   <div class="v2-scope-toggle" role="tablist" aria-label="Portée affichage">
 *     <button class="v2-scope-toggle-option is-active" role="tab"
 *             aria-selected="true">
 *       Toute l'équipe
 *     </button>
 *     <button class="v2-scope-toggle-option" role="tab" aria-selected="false">
 *       Mon portefeuille
 *     </button>
 *   </div>
 *
 * Usage :
 *   - Header dashboard superviseur (bascule scope listes)
 *   - Header dashboard admin (casquette)
 *   - Filtre de scope sur pages tickets/devis superviseur
 */

.v2-scope-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: var(--v2-neutral-100);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-full);
}

.v2-scope-toggle-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--v2-spacing-4);
  border: 0;
  border-radius: var(--v2-radius-full);
  background: transparent;
  color: var(--v2-text-color-secondary);
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-medium);
  cursor: pointer;
  transition:
    background-color var(--v2-transition-fast),
    color var(--v2-transition-fast),
    box-shadow var(--v2-transition-fast);
}

.v2-scope-toggle-option:hover:not(.is-active) {
  color: var(--v2-text-color-primary);
}

.v2-scope-toggle-option.is-active,
.v2-scope-toggle-option[aria-selected="true"] {
  background: var(--v2-bg-surface);
  color: var(--v2-primary-700);
  font-weight: var(--v2-weight-semibold);
  box-shadow: var(--v2-shadow-sm);
}

.v2-scope-toggle-option:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}


/* ============================================================================
 * 11. ACTIVITY FEED ITEM — .v2-activity-feed-item
 * ============================================================================
 *
 * Ligne d'un feed permanent Home commercial "Alertes & activité récente"
 * (décision persona commercial : notifications A+B combiné).
 *
 * Chaque item : icône Lucide + texte principal + timestamp + (optionnel)
 * lien d'action.
 *
 * Variants par type : ticket, devis, message, cr, opportunite, facture.
 * Chaque variant a une couleur d'accent (border-left coloré).
 *
 * Structure HTML :
 *   <div class="v2-activity-feed">
 *     <a href="#" class="v2-activity-feed-item v2-activity-feed-item--ticket">
 *       <span class="v2-activity-feed-item-icon">
 *         <svg><!-- Lucide ticket --></svg>
 *       </span>
 *       <div class="v2-activity-feed-item-body">
 *         <div class="v2-activity-feed-item-text">
 *           <strong>Nouveau ticket SAV</strong> de PRESTIGE AUTO
 *         </div>
 *         <div class="v2-activity-feed-item-meta">
 *           Il y a 35 min · Landry Koeta
 *         </div>
 *       </div>
 *     </a>
 *   </div>
 */

.v2-activity-feed {
  display: flex;
  flex-direction: column;
}

.v2-activity-feed-item {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-3) var(--v2-spacing-4);
  border-left: 3px solid var(--v2-border-default);
  background: var(--v2-bg-surface);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--v2-transition-fast);
}
.v2-activity-feed-item + .v2-activity-feed-item {
  border-top: 1px solid var(--v2-border-subtle);
}
.v2-activity-feed-item:hover {
  background: var(--v2-bg-hover);
}
.v2-activity-feed-item:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: -2px;
}

.v2-activity-feed-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--v2-radius-full);
  background: var(--v2-neutral-100);
  color: var(--v2-text-color-secondary);
  flex-shrink: 0;
}
.v2-activity-feed-item-icon > svg { width: 16px; height: 16px; }

.v2-activity-feed-item-body {
  flex: 1 1 auto;
  min-width: 0;
  line-height: var(--v2-leading-base);
}

.v2-activity-feed-item-text {
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-primary);
}

.v2-activity-feed-item-meta {
  margin-top: 2px;
  font-size: var(--v2-text-sm);
  color: var(--v2-text-color-tertiary);
}

/* Variants par type (border-left coloré + icône teintée) */
.v2-activity-feed-item--ticket {
  border-left-color: var(--v2-primary-500);
}
.v2-activity-feed-item--ticket .v2-activity-feed-item-icon {
  background: var(--v2-primary-50);
  color: var(--v2-primary-700);
}

.v2-activity-feed-item--devis {
  border-left-color: var(--v2-accent-500);
}
.v2-activity-feed-item--devis .v2-activity-feed-item-icon {
  background: var(--v2-accent-50);
  color: var(--v2-accent-800);
}

.v2-activity-feed-item--message {
  border-left-color: var(--v2-info-500);
}
.v2-activity-feed-item--message .v2-activity-feed-item-icon {
  background: var(--v2-info-50);
  color: var(--v2-info-700);
}

.v2-activity-feed-item--cr {
  border-left-color: var(--v2-neutral-400);
}
.v2-activity-feed-item--cr .v2-activity-feed-item-icon {
  background: var(--v2-neutral-100);
  color: var(--v2-neutral-700);
}

.v2-activity-feed-item--opportunite {
  border-left-color: var(--v2-service-500);
}
.v2-activity-feed-item--opportunite .v2-activity-feed-item-icon {
  background: var(--v2-service-50);
  color: var(--v2-service-700);
}

.v2-activity-feed-item--facture {
  border-left-color: var(--v2-success-500);
}
.v2-activity-feed-item--facture .v2-activity-feed-item-icon {
  background: var(--v2-success-50);
  color: var(--v2-success-700);
}


/* ============================================================================
 * 12. CR-FORM — .v2-cr-form
 * ============================================================================
 *
 * Formulaire de saisie CR structuré (décision persona commercial, modèle à
 * 7 sections). Utilise les composants form-group + input + select + textarea
 * de Session 2.
 *
 * Ce composant fournit uniquement la structure de disposition. Les champs
 * eux-mêmes sont des `.v2-form-group` avec leurs `.v2-input`, `.v2-select`,
 * `.v2-textarea`.
 *
 * Structure HTML :
 *   <form class="v2-cr-form">
 *     <div class="v2-cr-form-row v2-cr-form-row--2col">
 *       <div class="v2-form-group">
 *         <label class="v2-form-label">Canal</label>
 *         <select class="v2-select">...</select>
 *       </div>
 *       <div class="v2-form-group">
 *         <label class="v2-form-label">Type</label>
 *         <select class="v2-select">...</select>
 *       </div>
 *     </div>
 *     <div class="v2-cr-form-row">
 *       <div class="v2-form-group">
 *         <label class="v2-form-label">Interlocuteur</label>
 *         <select class="v2-select">...</select>
 *       </div>
 *     </div>
 *     <div class="v2-cr-form-row">
 *       <div class="v2-form-group">
 *         <label class="v2-form-label">Sujet</label>
 *         <input type="text" class="v2-input">
 *       </div>
 *     </div>
 *     <div class="v2-cr-form-row">
 *       <div class="v2-form-group">
 *         <label class="v2-form-label">Compte-rendu</label>
 *         <textarea class="v2-textarea" rows="5"></textarea>
 *       </div>
 *     </div>
 *     <div class="v2-cr-form-section">
 *       <label class="v2-checkbox">
 *         <input type="checkbox"> <span>Créer une prochaine action</span>
 *       </label>
 *       <div class="v2-cr-form-row v2-cr-form-row--2col"
 *            data-next-action-fields>
 *         <!-- date + type action visibles si checkbox cochée -->
 *       </div>
 *     </div>
 *     <div class="v2-cr-form-section">
 *       <label class="v2-form-label">Rattachement (optionnel)</label>
 *       <div class="v2-cr-form-row v2-cr-form-row--3col">
 *         <select class="v2-select">Ticket</select>
 *         <select class="v2-select">Devis</select>
 *         <select class="v2-select">Opportunité</select>
 *       </div>
 *     </div>
 *   </form>
 */

.v2-cr-form {
  display: flex;
  flex-direction: column;
  gap: var(--v2-spacing-4);
}

.v2-cr-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-spacing-4);
}
.v2-cr-form-row--2col {
  grid-template-columns: 1fr 1fr;
}
.v2-cr-form-row--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

.v2-cr-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--v2-spacing-3);
  padding: var(--v2-spacing-4);
  background: var(--v2-bg-surface-alt);
  border: 1px solid var(--v2-border-subtle);
  border-radius: var(--v2-radius-md);
}

/* Mobile : tout en 1 colonne sous 640px */
@media (max-width: 640px) {
  .v2-cr-form-row--2col,
  .v2-cr-form-row--3col {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
 * 13. ARTICLE-LIBRE-MODAL — .v2-article-libre
 * ============================================================================
 *
 * Structure du contenu d'une modal d'ajout d'article hors catalogue (décision
 * persona commercial item 13, scope étendu item #2 [[00 — Plan global]]).
 *
 * Ce composant décrit uniquement la disposition des champs dans une
 * `.v2-modal--md` ou `.v2-modal--form`. Le routage backend vers les codes
 * THALIA G00/K00/etc. est Phase 3.
 *
 * Structure HTML :
 *   <div class="v2-modal-overlay is-open">
 *     <div class="v2-modal v2-modal--md v2-modal--form" role="dialog">
 *       <header class="v2-modal-header">
 *         <h2 class="v2-modal-title">Article hors catalogue</h2>
 *         <button class="v2-modal-close">...</button>
 *       </header>
 *       <div class="v2-modal-body">
 *         <div class="v2-article-libre">
 *           <div class="v2-article-libre-help">
 *             <svg><!-- Lucide info --></svg>
 *             <span>
 *               Cet article sera enregistré dans THALIA avec le code
 *               correspondant à la famille choisie (ex: G00 pour pneus).
 *             </span>
 *           </div>
 *           <div class="v2-form-group">
 *             <label class="v2-form-label">Famille</label>
 *             <select class="v2-select">
 *               <option>Pneu</option>
 *               <option>Batterie</option>
 *               <option>Lubrifiant</option>
 *               <option>Outillage</option>
 *               <option>Autre</option>
 *             </select>
 *           </div>
 *           <div class="v2-form-group">
 *             <label class="v2-form-label">Description</label>
 *             <textarea class="v2-textarea" rows="3"
 *                       placeholder="Ex: Pneu 295/80R22.5 radial rainuré"></textarea>
 *           </div>
 *           <div class="v2-cr-form-row v2-cr-form-row--2col">
 *             <div class="v2-form-group">
 *               <label class="v2-form-label">Prix unitaire HT</label>
 *               <input type="number" class="v2-input" min="0">
 *             </div>
 *             <div class="v2-form-group">
 *               <label class="v2-form-label">Quantité</label>
 *               <input type="number" class="v2-input" min="1" value="1">
 *             </div>
 *           </div>
 *         </div>
 *       </div>
 *       <footer class="v2-modal-footer">
 *         <button class="v2-btn v2-btn--ghost">Annuler</button>
 *         <button class="v2-btn v2-btn--primary">Ajouter au devis</button>
 *       </footer>
 *     </div>
 *   </div>
 */

.v2-article-libre {
  display: flex;
  flex-direction: column;
  gap: var(--v2-spacing-4);
}

.v2-article-libre-help {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-spacing-2);
  padding: var(--v2-spacing-3);
  background: var(--v2-info-50);
  border: 1px solid var(--v2-info-200);
  border-radius: var(--v2-radius-md);
  font-size: var(--v2-text-sm);
  color: var(--v2-info-700);
  line-height: var(--v2-leading-base);
}
.v2-article-libre-help > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--v2-info-600);
  margin-top: 2px;
}


/* ============================================================================
 * 14. KPI-CARD métier — .v2-kpi-card
 * ============================================================================
 *
 * Évolution de `.v2-card--kpi` Session 2 avec enrichissements métier :
 *   - icône Lucide en tête
 *   - comparaison N-1 (trend indicator coloré)
 *   - sparkline optionnelle (réservée placeholder, rendu SVG Phase 3)
 *
 * Usage : dashboards commercial/superviseur/admin (4 KPIs par ligne).
 *
 * Structure HTML :
 *   <div class="v2-kpi-card">
 *     <div class="v2-kpi-card-header">
 *       <span class="v2-kpi-card-icon">
 *         <svg><!-- Lucide trending-up --></svg>
 *       </span>
 *       <span class="v2-kpi-card-label">CA du mois</span>
 *     </div>
 *     <div class="v2-kpi-card-value">24,5 M</div>
 *     <div class="v2-kpi-card-trend v2-kpi-card-trend--up">
 *       <svg><!-- Lucide arrow-up --></svg>
 *       <span>+12% vs avril 2025</span>
 *     </div>
 *     <div class="v2-kpi-card-sparkline" aria-hidden="true">
 *       <!-- SVG sparkline rendu Phase 3 -->
 *     </div>
 *   </div>
 */

.v2-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--v2-spacing-2);
  padding: var(--v2-spacing-4) var(--v2-spacing-6);
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-top: 3px solid var(--v2-accent-500);  /* signature CACOMIAF */
  border-radius: var(--v2-radius-md);
  min-width: 0;
}

.v2-kpi-card-header {
  display: flex;
  align-items: center;
  gap: var(--v2-spacing-2);
  color: var(--v2-text-color-secondary);
}

.v2-kpi-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--v2-primary-600);
}
.v2-kpi-card-icon > svg { width: 18px; height: 18px; }

.v2-kpi-card-label {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--v2-tracking-wide);
}

.v2-kpi-card-value {
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-4xl);
  font-weight: var(--v2-weight-bold);
  line-height: var(--v2-leading-tight);
  color: var(--v2-text-color-primary);
}

.v2-kpi-card-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-1);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-medium);
  color: var(--v2-text-color-tertiary);
}
.v2-kpi-card-trend > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Trend variants : positif (success), négatif (danger), neutre (tertiaire) */
.v2-kpi-card-trend--up   { color: var(--v2-success-600); }
.v2-kpi-card-trend--down { color: var(--v2-danger-600); }
.v2-kpi-card-trend--flat { color: var(--v2-text-color-tertiary); }

.v2-kpi-card-sparkline {
  height: 40px;
  margin-top: var(--v2-spacing-2);
  color: var(--v2-primary-300);  /* couleur fill SVG par défaut */
}


/* ============================================================================
 * 15. TIMELINE-ITEM — .v2-timeline-item
 * ============================================================================
 *
 * Item dans la timeline unifiée de la fiche tiers cockpit (v57) — fusion
 * tickets + devis + CR + opportunités + messages + factures THALIA.
 *
 * Pattern vertical avec trait de connexion qui lie les items (affiché via
 * un pseudo-élément sur le point d'icône).
 *
 * Variants par type (même code couleur que .v2-activity-feed-item) :
 *   ticket, devis, cr, message, opportunite, facture
 *
 * Structure HTML :
 *   <ol class="v2-timeline">
 *     <li class="v2-timeline-item v2-timeline-item--devis">
 *       <div class="v2-timeline-item-point">
 *         <svg><!-- Lucide file-text --></svg>
 *       </div>
 *       <div class="v2-timeline-item-content">
 *         <div class="v2-timeline-item-header">
 *           <span class="v2-timeline-item-title">DEV-2026-089 envoyé</span>
 *           <span class="v2-timeline-item-date">15 avr 14:32</span>
 *         </div>
 *         <div class="v2-timeline-item-body">
 *           Montant 1,25 M — 3 lignes — par Landry Koeta
 *         </div>
 *         <div class="v2-timeline-item-actions">
 *           <a href="#" class="v2-btn v2-btn--sm v2-btn--ghost">Voir le devis</a>
 *         </div>
 *       </div>
 *     </li>
 *   </ol>
 */

.v2-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.v2-timeline-item {
  /* `isolation: isolate` crée un contexte d'empilement local dédié au
   * timeline-item. Le trait ::before y reste à `--v2-z-base` (= 0), le
   * point vient après dans l'ordre DOM et se rend naturellement au-dessus
   * sans avoir besoin d'un z-index local. Respecte la règle Session 3
   * "z-index exclusivement via tokens --v2-z-*". */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--v2-spacing-4);
  padding: var(--v2-spacing-4) 0;
}

/* Trait de connexion entre points (sauf sur le dernier item) */
.v2-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: var(--v2-z-base);
  left: 15px;          /* centré sur le point (32/2 - 1) */
  top: 48px;           /* sous le point */
  bottom: -4px;
  width: 2px;
  background: var(--v2-border-default);
}

.v2-timeline-item-point {
  /* Pas de z-index : grâce à `isolation: isolate` sur le parent et à
   * l'ordre DOM (le point vient après le ::before), le point est rendu
   * au-dessus du trait sans empilement explicite. Le `border` opaque
   * couleur surface masque visuellement le trait sous le point. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--v2-radius-full);
  background: var(--v2-neutral-100);
  color: var(--v2-text-color-secondary);
  border: 2px solid var(--v2-bg-surface);  /* masque le trait derrière */
  flex-shrink: 0;
}
.v2-timeline-item-point > svg { width: 16px; height: 16px; }

.v2-timeline-item-content {
  display: flex;
  flex-direction: column;
  gap: var(--v2-spacing-1);
  min-width: 0;
  padding-top: 4px;   /* aligne avec le centre du point */
}

.v2-timeline-item-header {
  display: flex;
  align-items: baseline;
  gap: var(--v2-spacing-2);
  flex-wrap: wrap;
}

.v2-timeline-item-title {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-weight-semibold);
  color: var(--v2-text-color-primary);
}

.v2-timeline-item-date {
  font-size: var(--v2-text-sm);
  color: var(--v2-text-color-tertiary);
  white-space: nowrap;
}

.v2-timeline-item-body {
  font-size: var(--v2-text-sm);
  line-height: var(--v2-leading-base);
  color: var(--v2-text-color-secondary);
}

.v2-timeline-item-actions {
  margin-top: var(--v2-spacing-2);
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
}

/* Variants par type (point coloré, même mapping que .v2-activity-feed-item) */
.v2-timeline-item--ticket .v2-timeline-item-point {
  background: var(--v2-primary-50);
  color: var(--v2-primary-700);
}
.v2-timeline-item--devis .v2-timeline-item-point {
  background: var(--v2-accent-50);
  color: var(--v2-accent-800);
}
.v2-timeline-item--message .v2-timeline-item-point {
  background: var(--v2-info-50);
  color: var(--v2-info-700);
}
.v2-timeline-item--cr .v2-timeline-item-point {
  background: var(--v2-neutral-100);
  color: var(--v2-neutral-700);
}
.v2-timeline-item--opportunite .v2-timeline-item-point {
  background: var(--v2-service-50);
  color: var(--v2-service-700);
}
.v2-timeline-item--facture .v2-timeline-item-point {
  background: var(--v2-success-50);
  color: var(--v2-success-700);
}


/* ============================================================================
 * FIN — overlays-v2.css Session 3
 * ============================================================================
 *
 * Récap des composants livrés :
 *   P4 Overlays & feedback (8) :
 *     ✅ Modal (4 tailles + --confirmation + --form)
 *     ✅ Slide-in panel (4 tailles + --docked + --overlay)
 *     ✅ Drawer (--left + --right)
 *     ✅ Toast (4 variants + stack)
 *     ✅ Banner (3 variants)
 *     ✅ Loaders (spinner + skeleton shimmer)
 *     ✅ Empty state (3 variants)
 *     ✅ Command palette ⌘K (structure + états intégrés, JS Phase 3)
 *
 *   P5 Composants métier inconditionnels (7) :
 *     ✅ Tier-banner sticky
 *     ✅ Scope-toggle segmented control
 *     ✅ Activity-feed-item (6 variants de type)
 *     ✅ CR-form (layout 7 sections)
 *     ✅ Article-libre (structure dans modal)
 *     ✅ KPI-card métier
 *     ✅ Timeline-item (6 variants de type)
 *
 * Composants non écrits (conditionnés go produit [[00 — Plan global]]) :
 *     ⏳ sla-indicator (item #8)
 *     ⏳ task-row Admin Inbox (item #14)
 *     ⏳ message-* (item #1 module messagerie)
 *     ⏳ absence-banner (item #9)
 *
 * Tokens locaux restants (après promotion Session 4, commit `180bff4`) :
 *     --v2-on-dark-hover        (local — surfaces sombres, tier-banner uniquement)
 *     --v2-on-dark-text-subtle  (local — surfaces sombres, tier-banner uniquement)
 *
 * Tokens promus Session 4 vers `design-tokens-v2.css` §14 :
 *     --v2-overlay-hover        (5 usages actuels dans ce fichier :
 *                                modal-close, slide-in-close, drawer-close,
 *                                toast-dismiss, banner-dismiss — tous en
 *                                :hover. Le pattern `rgb(0 0 0 / 0.08)` sur
 *                                `.v2-pill-remove:hover` dans components-v2.css
 *                                reste un candidat migration ultérieur, pas un
 *                                usage courant du token.)
 *     --v2-overlay-backdrop     (4 overlays : modal, slide-in overlay, drawer, command palette)
 *
 * Règles respectées :
 *     Focus-visible systématique + override accent-500 sur surfaces sombres
 *     Z-index exclusivement via tokens --v2-z-*
 *     Animations exclusivement via tokens --v2-transition-*
 *     Nommage BEM light .v2-* conforme Session 1/2
 *     Aucune modification des fichiers figés Session 1 et Session 2
 * ============================================================================
 */