/*
 * ============================================================================
 * VELOX · Design System v2 — composants atomiques
 * ============================================================================
 *
 * Session Phase 1 · 20 avril 2026 (enchaînement après Session 1 `986f755`)
 * 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` dans toute page v2 :
 *   <link rel="stylesheet" href="/interfaces/css/design-tokens-v2.css">
 *   <link rel="stylesheet" href="/interfaces/css/components-v2.css">
 *
 * ----------------------------------------------------------------------------
 * Rappel des décisions figées (20 avril 2026)
 * ----------------------------------------------------------------------------
 *   DS-1 : nouveau fichier, aucune modification v1 ni pages legacy
 *   DS-2 : dark mode reporté post-MVP (thème unique clair)
 *   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 (hauteur par défaut 40px, padding card
 *          16-24px, corps 14-15px)
 *
 * ----------------------------------------------------------------------------
 * Décisions Session 2 tranchées (20 avril 2026)
 * ----------------------------------------------------------------------------
 *   Point 1 : boutons + inputs = 3 tailles symétriques
 *              sm 32px / md 40px (défaut) / lg 48px
 *   Point 2 : command palette ⌘K reportée Session 3 (overlays P4)
 *   Point 3 : tables = sticky header, fond uni (pas zébré), séparateur fin,
 *              hover gris clair, tri Lucide, scroll horizontal mobile,
 *              40px données / 48px en-tête
 *   Point 4 : badge unique + 3 variants (défaut texte, --dot, --icon)
 *
 * ----------------------------------------------------------------------------
 * Convention de nommage (BEM light)
 * ----------------------------------------------------------------------------
 *   .v2-<composant>                    → base
 *   .v2-<composant>--<variant>         → variant global
 *   .v2-<composant>-<sous-élément>     → sous-élément structurel
 *   .v2-<composant>.is-<état>          → état (is-active, is-loading, is-error)
 *
 * ----------------------------------------------------------------------------
 * Règle focus (post-Session 1, Codex signé)
 * ----------------------------------------------------------------------------
 * Tous les éléments interactifs exposent un focus-visible clair :
 *   outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
 *   outline-offset: var(--v2-focus-ring-offset);
 *
 * Les éléments sur surface sombre (boutons primary remplis, danger remplis,
 * pills selected, sidebar, header) surchargent localement :
 *   --v2-focus-ring: var(--v2-accent-500);
 *
 * Jamais d'`outline: none` nu. Les inputs et select utilisent une combinaison
 * `outline: none` + box-shadow halo + border colorée : le halo remplit le
 * rôle de l'anneau de focus, avec un contraste > 3:1 contre le fond blanc
 * (cf. WCAG 2.2 SC 2.4.11 / 2.4.13). C'est le pattern shadcn/Radix/Tailwind
 * Forms — volontaire et accessible.
 *
 * ----------------------------------------------------------------------------
 * Composants NON écrits cette session (reportés Session 3)
 * ----------------------------------------------------------------------------
 *   - Command palette ⌘K (P2 → requalifiée P4 overlays)
 *   - Modals / slide-ins / drawers (P4)
 *   - Toasts / banners / loaders / empty states (P4)
 *   - Composants métier inconditionnels (tier-banner, cr-form,
 *     article-libre-modal, kpi-card version métier, timeline-item,
 *     activity-feed-item, pipeline-badge enrichi) (P5)
 *   - Composants métier conditionnels (sla-indicator, task-row, message-*,
 *     absence-banner) — en attente go/no-go produit sur items scope étendu
 *
 * ----------------------------------------------------------------------------
 * Table des matières
 * ----------------------------------------------------------------------------
 *    1. BASE — utilitaires communs
 *    2. BOUTONS — .v2-btn (primary/secondary/ghost/danger/icon/cta)
 *    3. INPUTS — .v2-input (text/email/password/search/number/date/textarea)
 *    4. SELECT — .v2-select
 *    5. CASES À COCHER, RADIOS, TOGGLES — .v2-checkbox, .v2-radio, .v2-toggle
 *    6. FORM GROUP — .v2-form-group (label + control + help + error)
 *    7. SEARCH FIELD — .v2-search (input + icône prefix + clear)
 *    8. CARDS — .v2-card et sous-éléments (KPI strip inclus)
 *    9. TABLES — .v2-table (sortable, sticky header)
 *   10. BADGES — .v2-badge (texte / --dot / --icon + sémantiques)
 *   11. TOOLTIPS — [data-tooltip] (CSS pur)
 *   12. PILLS / CHIPS — .v2-pill (--removable, --selected)
 *   13. AVATARS — .v2-avatar (initiales, tailles, palettes dérivées)
 *   14. TABS — .v2-tabs (--segment, --underline)
 * ============================================================================
 */


/* ============================================================================
 * 1. BASE — utilitaires communs v2
 * ============================================================================ */

/* Visuellement caché, accessible aux lecteurs d'écran (labels de formulaire,
 * textes additionnels pour l'accessibilité). */
.v2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animation de rotation partagée (boutons loading, spinners futurs). */
@keyframes v2-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================================
 * 2. BOUTONS
 * ============================================================================
 *
 * Base : .v2-btn (hauteur md 40px par défaut, DS-5)
 * Variants : --primary, --secondary, --ghost, --danger, --cta
 * Tailles : défaut md / --sm (32px) / --lg (48px) — Point 1
 * Variant de forme : --icon (carré, pour icônes seules)
 * États : default, :hover, :focus-visible, :active, :disabled, .is-loading
 *
 * Exemples :
 *   <button class="v2-btn v2-btn--primary">Enregistrer</button>
 *   <button class="v2-btn v2-btn--ghost v2-btn--sm">Annuler</button>
 *   <button class="v2-btn v2-btn--icon" aria-label="Supprimer">
 *     <svg><!-- Lucide trash-2 --></svg>
 *   </button>
 *   <button class="v2-btn v2-btn--cta">+ Nouveau devis</button>
 */

.v2-btn {
  /* Structure */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-spacing-2);

  /* Taille md par défaut */
  height: 40px;
  padding: 0 var(--v2-spacing-4);

  /* Typographie */
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-weight-semibold);
  line-height: 1;

  /* Apparence neutre (variant donne la couleur) */
  border: 1px solid transparent;
  border-radius: var(--v2-radius-md);
  background: transparent;
  color: var(--v2-text-color-primary);

  /* --v2-btn-fg : couleur de premier-plan du bouton, utilisée par le
   * spinner `.is-loading::after` (qui ne peut pas hériter via
   * `currentColor` puisque `color` est forcé à `transparent` pour masquer
   * le texte). Défaut = texte sombre ; les variants remplis sombres
   * (--primary, --danger) et le --cta (texte bleu foncé) la surchargent. */
  --v2-btn-fg: var(--v2-text-color-primary);

  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;

  transition:
    background-color var(--v2-transition-fast),
    border-color var(--v2-transition-fast),
    color var(--v2-transition-fast),
    transform var(--v2-transition-fast);
}

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

.v2-btn:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  transform: scale(0.98);
}

.v2-btn:disabled,
.v2-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.v2-btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.v2-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  /* La couleur est fournie par --v2-btn-fg (déclarée sur .v2-btn et
   * surchargée par chaque variant rempli sombre). Ne PAS utiliser
   * `currentColor` ici : .v2-btn.is-loading force `color: transparent`
   * pour masquer le texte, ce qui rendrait le spinner invisible. */
  border: 2px solid var(--v2-btn-fg);
  border-top-color: transparent;
  border-radius: var(--v2-radius-full);
  animation: v2-spin 800ms linear infinite;
}

/* Icônes Lucide dans un bouton — alignement vertical + taille ajustée */
.v2-btn > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- Tailles (Point 1 : symétriques avec inputs) --- */

.v2-btn--sm {
  height: 32px;
  padding: 0 var(--v2-spacing-3);
  font-size: var(--v2-text-sm);
  gap: var(--v2-spacing-2);
}
.v2-btn--sm > svg {
  width: 16px;
  height: 16px;
}

.v2-btn--lg {
  height: 48px;
  padding: 0 var(--v2-spacing-6);
  font-size: var(--v2-text-md);
}

/* --- Variant icon-only (carré, sans padding latéral) --- */
.v2-btn--icon {
  width: 40px;
  padding: 0;
}
.v2-btn--icon.v2-btn--sm { width: 32px; }
.v2-btn--icon.v2-btn--lg { width: 48px; }

/* --- Variant primary (bleu CACOMIAF rempli) ---
 * Surface sombre : focus surchargé vers l'accent jaune pour garder un
 * contraste ≥ 7:1 au focus.
 */
.v2-btn--primary {
  background: var(--v2-primary-700);
  color: var(--v2-text-color-inverse);
  border-color: var(--v2-primary-700);
  --v2-focus-ring: var(--v2-accent-500);
  --v2-btn-fg: var(--v2-text-color-inverse);
}
.v2-btn--primary:hover:not(:disabled):not(.is-disabled) {
  background: var(--v2-primary-800);
  border-color: var(--v2-primary-800);
}
.v2-btn--primary:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--v2-primary-900);
  border-color: var(--v2-primary-900);
}

/* --- Variant secondary (fond clair avec bordure) --- */
.v2-btn--secondary {
  background: var(--v2-bg-surface);
  color: var(--v2-text-color-primary);
  border-color: var(--v2-border-strong);
}
.v2-btn--secondary:hover:not(:disabled):not(.is-disabled) {
  background: var(--v2-bg-hover);
  border-color: var(--v2-neutral-400);
}
.v2-btn--secondary:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--v2-neutral-200);
}

/* --- Variant ghost (transparent, minimal) --- */
.v2-btn--ghost {
  background: transparent;
  color: var(--v2-text-color-primary);
}
.v2-btn--ghost:hover:not(:disabled):not(.is-disabled) {
  background: var(--v2-bg-hover);
}
.v2-btn--ghost:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--v2-neutral-200);
}

/* --- Variant danger (rouge rempli) — surface sombre, focus accent --- */
.v2-btn--danger {
  background: var(--v2-danger-600);
  color: var(--v2-text-color-inverse);
  border-color: var(--v2-danger-600);
  --v2-focus-ring: var(--v2-accent-500);
  --v2-btn-fg: var(--v2-text-color-inverse);
}
.v2-btn--danger:hover:not(:disabled):not(.is-disabled) {
  background: var(--v2-danger-700);
  border-color: var(--v2-danger-700);
}
.v2-btn--danger:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--v2-danger-700);
}

/* --- Variant CTA (jaune CACOMIAF, Barlow uppercase) ---
 * CTA primaire persistant : "+ Nouveau devis" header, bouton d'action
 * principale formulaires, dashboards. Fond jaune clair → focus reste en
 * primary-700 par défaut (bon contraste).
 */
.v2-btn--cta {
  background: var(--v2-accent-500);
  color: var(--v2-primary-900);
  border-color: var(--v2-accent-500);
  --v2-btn-fg: var(--v2-primary-900);
  font-family: var(--v2-font-display);
  font-weight: var(--v2-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--v2-tracking-wider);
}
.v2-btn--cta:hover:not(:disabled):not(.is-disabled) {
  background: var(--v2-accent-600);
  border-color: var(--v2-accent-600);
}
.v2-btn--cta:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--v2-accent-700);
  border-color: var(--v2-accent-700);
}


/* ============================================================================
 * 3. INPUTS
 * ============================================================================
 *
 * Base : .v2-input (input text/email/password/search/number/date/tel/url +
 *        textarea)
 * Tailles : défaut md (40px) / --sm (32px) / --lg (48px) — Point 1
 * États : default, :hover, :focus-visible, :disabled, .is-error, .is-success
 *
 * Note focus : combinaison `outline:none` + halo box-shadow + border colorée.
 * Pattern shadcn/Radix/Tailwind Forms, volontaire et accessible (contraste
 * halo > 3:1 sur fond blanc).
 *
 * Exemple :
 *   <input type="text" class="v2-input" placeholder="Nom">
 *   <textarea class="v2-input" rows="4"></textarea>
 *   <input type="email" class="v2-input is-error">
 */

.v2-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--v2-spacing-3);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  line-height: 1.4;
  color: var(--v2-text-color-primary);

  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-md);

  transition:
    border-color var(--v2-transition-fast),
    box-shadow var(--v2-transition-fast);
}

.v2-input::placeholder {
  color: var(--v2-text-color-muted);
}

.v2-input:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--v2-border-strong);
}

.v2-input:focus-visible,
.v2-input:focus {
  outline: none;
  border-color: var(--v2-primary-600);
  box-shadow: 0 0 0 var(--v2-focus-ring-width) var(--v2-primary-200);
}

.v2-input:disabled,
.v2-input.is-disabled {
  background: var(--v2-bg-surface-muted);
  color: var(--v2-text-color-muted);
  cursor: not-allowed;
}

.v2-input.is-error {
  border-color: var(--v2-danger-500);
}
.v2-input.is-error:focus-visible,
.v2-input.is-error:focus {
  box-shadow: 0 0 0 var(--v2-focus-ring-width) var(--v2-danger-200);
}

.v2-input.is-success {
  border-color: var(--v2-success-500);
}
.v2-input.is-success:focus-visible,
.v2-input.is-success:focus {
  box-shadow: 0 0 0 var(--v2-focus-ring-width) var(--v2-success-200);
}

/* Textarea : hérite visuellement de .v2-input avec hauteur auto */
textarea.v2-input {
  height: auto;
  min-height: 80px;
  padding: var(--v2-spacing-3);
  line-height: var(--v2-leading-base);
  resize: vertical;
}

/* --- Tailles (symétriques boutons) --- */

.v2-input--sm {
  height: 32px;
  padding: 0 var(--v2-spacing-2);
  font-size: var(--v2-text-sm);
}
textarea.v2-input--sm {
  height: auto;
  min-height: 64px;
  padding: var(--v2-spacing-2);
}

.v2-input--lg {
  height: 48px;
  padding: 0 var(--v2-spacing-4);
  font-size: var(--v2-text-md);
}
textarea.v2-input--lg {
  height: auto;
  min-height: 96px;
  padding: var(--v2-spacing-4);
}


/* ============================================================================
 * 4. SELECT
 * ============================================================================
 *
 * Base : .v2-select — select natif stylé, chevron custom via background-image
 *        (data URI d'une icône Lucide `chevron-down` en neutral-600).
 * Tailles : défaut md / --sm / --lg
 * États : default, :hover, :focus-visible, :disabled, .is-error
 *
 * Exemple :
 *   <select class="v2-select">
 *     <option>Choisir...</option>
 *     <option>Option 1</option>
 *   </select>
 */

.v2-select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--v2-spacing-8) 0 var(--v2-spacing-3);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  line-height: 1.4;
  color: var(--v2-text-color-primary);

  background-color: var(--v2-bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--v2-spacing-3) center;
  background-size: 16px 16px;

  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-md);

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color var(--v2-transition-fast),
    box-shadow var(--v2-transition-fast);
}

.v2-select:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--v2-border-strong);
}

.v2-select:focus-visible,
.v2-select:focus {
  outline: none;
  border-color: var(--v2-primary-600);
  box-shadow: 0 0 0 var(--v2-focus-ring-width) var(--v2-primary-200);
}

.v2-select:disabled,
.v2-select.is-disabled {
  background-color: var(--v2-bg-surface-muted);
  color: var(--v2-text-color-muted);
  cursor: not-allowed;
}

.v2-select.is-error {
  border-color: var(--v2-danger-500);
}
.v2-select.is-error:focus-visible,
.v2-select.is-error:focus {
  box-shadow: 0 0 0 var(--v2-focus-ring-width) var(--v2-danger-200);
}

.v2-select--sm {
  height: 32px;
  padding: 0 var(--v2-spacing-6) 0 var(--v2-spacing-2);
  font-size: var(--v2-text-sm);
  background-position: right var(--v2-spacing-2) center;
}

.v2-select--lg {
  height: 48px;
  padding: 0 var(--v2-spacing-8) 0 var(--v2-spacing-4);
  font-size: var(--v2-text-md);
  background-position: right var(--v2-spacing-4) center;
}


/* ============================================================================
 * 5. CASES À COCHER / RADIOS / TOGGLES
 * ============================================================================
 *
 * Pattern commun : <label> englobant + <input> natif visuellement caché +
 * <span> "control" visuel. Le focus arrive sur l'input, le style est
 * transmis au control via sélecteur voisin.
 *
 * Exemples :
 *   <label class="v2-checkbox">
 *     <input type="checkbox">
 *     <span class="v2-checkbox-control"></span>
 *     <span class="v2-checkbox-label">Accepter les conditions</span>
 *   </label>
 *
 *   <label class="v2-radio">
 *     <input type="radio" name="pipeline">
 *     <span class="v2-radio-control"></span>
 *     <span class="v2-radio-label">Commercial</span>
 *   </label>
 *
 *   <label class="v2-toggle">
 *     <input type="checkbox">
 *     <span class="v2-toggle-control"></span>
 *     <span class="v2-toggle-label">Notifications activées</span>
 *   </label>
 */

/* --- Checkbox --- */

.v2-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
  cursor: pointer;
  user-select: none;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-primary);
}

.v2-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v2-checkbox-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--v2-bg-surface);
  border: 1.5px solid var(--v2-border-strong);
  border-radius: var(--v2-radius-sm);
  flex-shrink: 0;
  transition:
    background-color var(--v2-transition-fast),
    border-color var(--v2-transition-fast);
}

.v2-checkbox:hover .v2-checkbox-control {
  border-color: var(--v2-primary-600);
}

.v2-checkbox input:focus-visible + .v2-checkbox-control {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}

.v2-checkbox input:checked + .v2-checkbox-control {
  background: var(--v2-primary-700);
  border-color: var(--v2-primary-700);
}

.v2-checkbox input:checked + .v2-checkbox-control::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.v2-checkbox input:disabled + .v2-checkbox-control,
.v2-checkbox.is-disabled .v2-checkbox-control {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Radio --- */

.v2-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
  cursor: pointer;
  user-select: none;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-primary);
}

.v2-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v2-radio-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--v2-bg-surface);
  border: 1.5px solid var(--v2-border-strong);
  border-radius: var(--v2-radius-full);
  flex-shrink: 0;
  transition:
    background-color var(--v2-transition-fast),
    border-color var(--v2-transition-fast),
    border-width var(--v2-transition-fast);
}

.v2-radio:hover .v2-radio-control {
  border-color: var(--v2-primary-600);
}

.v2-radio input:focus-visible + .v2-radio-control {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}

.v2-radio input:checked + .v2-radio-control {
  border-color: var(--v2-primary-700);
  border-width: 5px;
}

.v2-radio input:disabled + .v2-radio-control,
.v2-radio.is-disabled .v2-radio-control {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Toggle (switch) --- */

.v2-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-3);
  cursor: pointer;
  user-select: none;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-primary);
}

.v2-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v2-toggle-control {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: var(--v2-neutral-300);
  border-radius: var(--v2-radius-full);
  flex-shrink: 0;
  transition: background-color var(--v2-transition-base);
}

.v2-toggle-control::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--v2-white);
  border-radius: var(--v2-radius-full);
  box-shadow: var(--v2-shadow-sm);
  transition: transform var(--v2-transition-base);
}

.v2-toggle:hover .v2-toggle-control {
  background: var(--v2-neutral-400);
}

.v2-toggle input:focus-visible + .v2-toggle-control {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}

.v2-toggle input:checked + .v2-toggle-control {
  background: var(--v2-primary-700);
}

.v2-toggle input:checked + .v2-toggle-control::after {
  transform: translateX(18px);
}

.v2-toggle input:disabled + .v2-toggle-control,
.v2-toggle.is-disabled .v2-toggle-control {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================================
 * 6. FORM GROUP
 * ============================================================================
 *
 * Conteneur standard pour un champ : label + control + help text + error.
 *
 * Exemples :
 *   <div class="v2-form-group">
 *     <label class="v2-form-label" for="email">Email</label>
 *     <input type="email" id="email" class="v2-input">
 *     <span class="v2-form-help">Nous ne partagerons jamais votre email.</span>
 *   </div>
 *
 *   <div class="v2-form-group is-error">
 *     <label class="v2-form-label v2-form-label--required" for="motif">
 *       Motif
 *     </label>
 *     <select id="motif" class="v2-select is-error">...</select>
 *     <span class="v2-form-error">Veuillez choisir un motif.</span>
 *   </div>
 */

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

.v2-form-group + .v2-form-group {
  margin-top: var(--v2-spacing-4);
}

.v2-form-label {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-semibold);
  color: var(--v2-text-color-primary);
  line-height: 1.4;
}

.v2-form-label--required::after {
  content: " *";
  color: var(--v2-danger-600);
}

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

.v2-form-error {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-medium);
  color: var(--v2-danger-600);
  line-height: var(--v2-leading-base);
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-1);
}

.v2-form-error > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ============================================================================
 * 7. SEARCH FIELD
 * ============================================================================
 *
 * Composé : wrapper + icône search prefix + input + bouton clear optionnel.
 *
 * Exemple :
 *   <div class="v2-search">
 *     <svg class="v2-search-icon"><!-- Lucide search --></svg>
 *     <input type="search" class="v2-search-input" placeholder="Rechercher...">
 *     <button class="v2-search-clear" aria-label="Effacer">
 *       <svg><!-- Lucide x --></svg>
 *     </button>
 *   </div>
 */

.v2-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.v2-search-icon {
  position: absolute;
  left: var(--v2-spacing-3);
  width: 16px;
  height: 16px;
  color: var(--v2-text-color-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.v2-search-input {
  display: block;
  width: 100%;
  height: 40px;
  /* Espace à gauche pour l'icône search (16px icône + 12px gauche + 8px gap) */
  padding: 0 var(--v2-spacing-8) 0 calc(var(--v2-spacing-3) + 16px + var(--v2-spacing-2));

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-primary);

  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-md);

  transition:
    border-color var(--v2-transition-fast),
    box-shadow var(--v2-transition-fast);
}

.v2-search-input::placeholder {
  color: var(--v2-text-color-muted);
}

.v2-search-input:focus-visible,
.v2-search-input:focus {
  outline: none;
  border-color: var(--v2-primary-600);
  box-shadow: 0 0 0 var(--v2-focus-ring-width) var(--v2-primary-200);
}

.v2-search-clear {
  position: absolute;
  right: var(--v2-spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--v2-radius-full);
  color: var(--v2-text-color-muted);
  cursor: pointer;
  transition:
    background-color var(--v2-transition-fast),
    color var(--v2-transition-fast);
}

.v2-search-clear:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text-color-primary);
}

.v2-search-clear:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: 1px;
}

.v2-search-clear > svg {
  width: 14px;
  height: 14px;
}


/* ============================================================================
 * 8. CARDS
 * ============================================================================
 *
 * Base : .v2-card
 * Sous-éléments : .v2-card-header, .v2-card-title, .v2-card-subtitle,
 *                 .v2-card-actions, .v2-card-body, .v2-card-footer
 * Variants : --clickable (hover élévation), --compact (padding réduit),
 *            --kpi (KPI strip avec border-top accent)
 *
 * Padding DS-5 : body 24px (confort), header 16×24px, footer 16×24px.
 * Variant compact : 16px uniforme.
 *
 * Exemples :
 *   <div class="v2-card">
 *     <div class="v2-card-body">Contenu</div>
 *   </div>
 *
 *   <div class="v2-card">
 *     <div class="v2-card-header">
 *       <div>
 *         <h3 class="v2-card-title">Mes clients actifs</h3>
 *         <p class="v2-card-subtitle">Cette semaine</p>
 *       </div>
 *       <div class="v2-card-actions">
 *         <button class="v2-btn v2-btn--ghost v2-btn--sm">Voir tout</button>
 *       </div>
 *     </div>
 *     <div class="v2-card-body">...</div>
 *   </div>
 *
 *   <div class="v2-card v2-card--kpi">
 *     <div class="v2-kpi-label">Tickets actifs</div>
 *     <div class="v2-kpi-value">24</div>
 *     <div class="v2-kpi-trend v2-kpi-trend--positive">+3 vs S-1</div>
 *   </div>
 */

.v2-card {
  display: flex;
  flex-direction: column;
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-lg);
  overflow: hidden;
}

/* --- Variant clickable --- */

.v2-card--clickable {
  cursor: pointer;
  transition:
    box-shadow var(--v2-transition-base),
    border-color var(--v2-transition-base),
    transform var(--v2-transition-base);
}

.v2-card--clickable:hover {
  box-shadow: var(--v2-shadow-md);
  border-color: var(--v2-border-strong);
}

.v2-card--clickable:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: var(--v2-focus-ring-offset);
}

.v2-card--clickable:active {
  transform: scale(0.995);
}

/* --- Sous-éléments --- */

.v2-card-header {
  display: flex;
  align-items: flex-start;
  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);
}

.v2-card-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);
  line-height: var(--v2-leading-tight);
}

.v2-card-subtitle {
  margin: var(--v2-spacing-1) 0 0;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  color: var(--v2-text-color-secondary);
  font-weight: var(--v2-weight-regular);
  line-height: var(--v2-leading-base);
}

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

.v2-card-body {
  padding: var(--v2-spacing-6);
  flex: 1;
}

.v2-card-footer {
  padding: var(--v2-spacing-4) var(--v2-spacing-6);
  border-top: 1px solid var(--v2-border-subtle);
  background: var(--v2-bg-surface-alt);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--v2-spacing-2);
}

/* --- Variant compact (padding homogène 16px) --- */

.v2-card--compact .v2-card-header {
  padding: var(--v2-spacing-3) var(--v2-spacing-4);
}
.v2-card--compact .v2-card-body {
  padding: var(--v2-spacing-4);
}
.v2-card--compact .v2-card-footer {
  padding: var(--v2-spacing-3) var(--v2-spacing-4);
}

/* --- Variant KPI strip (remplace .v-hl* v54) ---
 * Border-top jaune 3px = signature visuelle DS v2 pour les KPIs de pilotage.
 */

.v2-card--kpi {
  padding: var(--v2-spacing-4) var(--v2-spacing-6);
  gap: var(--v2-spacing-2);
  border-top: 3px solid var(--v2-accent-500);
}

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

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

.v2-kpi-trend {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  color: var(--v2-text-color-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-1);
}

.v2-kpi-trend > svg {
  width: 14px;
  height: 14px;
}

.v2-kpi-trend--positive { color: var(--v2-success-600); }
.v2-kpi-trend--negative { color: var(--v2-danger-600); }


/* ============================================================================
 * 9. TABLES
 * ============================================================================
 *
 * Structure : wrapper (.v2-table-wrapper, gère le scroll horizontal mobile) +
 * table (.v2-table, sticky header).
 *
 * Décisions Point 3 :
 *   - Sticky header obligatoire
 *   - Fond uni (pas zébré)
 *   - Séparateur fin border-subtle entre lignes
 *   - Hover row : bg-hover
 *   - Tri : icônes Lucide (arrow-up-down inactif / arrow-up actif asc /
 *     arrow-down actif desc) via background-image data URI
 *   - Mobile : scroll horizontal uniquement, pas de transformation en cards
 *   - Hauteur : 48px header / 40px données (DS-5)
 *
 * Classes utilitaires :
 *   .is-right / .is-center     → alignement horizontal
 *   .is-numeric                → alignement droite + chiffres tabulaires
 *   .is-action-cell            → cellule compacte pour boutons d'action
 *   .is-sortable               → cellule de tri cliquable
 *   .is-sort-asc / .is-sort-desc → direction active
 *   .is-selected               → ligne sélectionnée
 *
 * Exemple :
 *   <div class="v2-table-wrapper">
 *     <table class="v2-table">
 *       <thead>
 *         <tr>
 *           <th class="is-sortable is-sort-desc">Date</th>
 *           <th class="is-sortable">Client</th>
 *           <th class="is-numeric is-sortable">Montant</th>
 *           <th class="is-action-cell">Actions</th>
 *         </tr>
 *       </thead>
 *       <tbody>
 *         <tr><td>...</td><td>...</td><td class="is-numeric">...</td>
 *             <td class="is-action-cell">...</td></tr>
 *       </tbody>
 *     </table>
 *   </div>
 */

.v2-table-wrapper {
  width: 100%;
  overflow-x: auto;
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-lg);
}

.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  color: var(--v2-text-color-primary);
}

/* --- En-tête sticky --- */

.v2-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--v2-z-sticky);

  height: 48px;
  padding: 0 var(--v2-spacing-4);

  background: var(--v2-bg-surface);
  border-bottom: 1px solid var(--v2-border-default);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-semibold);
  color: var(--v2-text-color-secondary);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--v2-tracking-wide);
  white-space: nowrap;
}

/* --- Cellules de tri --- */

.v2-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
  transition:
    color var(--v2-transition-fast),
    background-color var(--v2-transition-fast);
}

.v2-table thead th.is-sortable:hover {
  color: var(--v2-primary-700);
  background: var(--v2-bg-hover);
}

.v2-table thead th.is-sortable:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  /* Offset négatif pour que l'outline reste dans la cellule, pas dans la
   * cellule voisine (sticky header) */
  outline-offset: calc(var(--v2-focus-ring-offset) * -1);
}

/* Icône de tri : arrow-up-down (inactif, neutral-400) */
.v2-table thead th.is-sortable::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-left: var(--v2-spacing-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.6;
  transition: opacity var(--v2-transition-fast);
}

.v2-table thead th.is-sortable:hover::after {
  opacity: 1;
}

/* Actif ascendant : arrow-up en primary-700 */
.v2-table thead th.is-sort-asc::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23053D76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 1;
}

/* Actif descendant : arrow-down en primary-700 */
.v2-table thead th.is-sort-desc::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23053D76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 1;
}

/* --- Corps du tableau --- */

.v2-table tbody tr {
  border-bottom: 1px solid var(--v2-border-subtle);
  transition: background-color var(--v2-transition-fast);
}

.v2-table tbody tr:last-child {
  border-bottom: 0;
}

.v2-table tbody tr:hover {
  background: var(--v2-bg-hover);
}

.v2-table tbody tr.is-selected {
  background: var(--v2-bg-selected);
}

.v2-table tbody td {
  height: 40px;
  padding: var(--v2-spacing-2) var(--v2-spacing-4);
  vertical-align: middle;
  line-height: var(--v2-leading-base);
}

/* --- Utilitaires alignement / types de cellule --- */

.v2-table .is-right  { text-align: right; }
.v2-table .is-center { text-align: center; }

.v2-table .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.v2-table .is-action-cell {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* --- État vide --- */

.v2-table-empty {
  padding: var(--v2-spacing-16) var(--v2-spacing-6);
  text-align: center;
  color: var(--v2-text-color-tertiary);
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
}

/* --- Variant dense (exception, ex: panneau latéral compact) --- */

.v2-table--dense thead th {
  height: 40px;
  padding: 0 var(--v2-spacing-3);
}
.v2-table--dense tbody td {
  height: 32px;
  padding: var(--v2-spacing-1) var(--v2-spacing-3);
}


/* ============================================================================
 * 10. BADGES
 * ============================================================================
 *
 * Base : .v2-badge (texte seul par défaut)
 * Modifiers forme : .v2-badge--dot (point coloré), .v2-badge--icon (Lucide)
 * Tailles : défaut (22px) / --lg (26px)
 *
 * Couleurs sémantiques (cumulables avec les modifiers forme) :
 *   --neutral / --info / --success / --warning / --danger
 *
 * Couleurs spécialisées (cumulables aussi) :
 *   --macro-en-cours / --macro-action-requise / --macro-termine    (DS-3)
 *   --pipeline-commercial / --pipeline-service                     (v66)
 *   --source-thalia / --source-velox / --source-portail
 *
 * Point 4 mapping :
 *   Défaut texte   → filtres actifs, tags, source, pipeline
 *   --dot          → compteurs notifications, indicateurs en ligne
 *   --icon         → statuts macro, santé, sévérité
 *
 * Exemples :
 *   <span class="v2-badge v2-badge--info v2-badge--source-thalia">THALIA</span>
 *   <span class="v2-badge v2-badge--dot v2-badge--danger">3</span>
 *   <span class="v2-badge v2-badge--icon v2-badge--macro-en-cours">
 *     <svg><!-- Lucide loader --></svg>
 *     En cours
 *   </span>
 */

.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-1);
  height: 22px;
  padding: 0 var(--v2-spacing-2);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-weight-semibold);
  line-height: 1;
  letter-spacing: var(--v2-tracking-wide);
  white-space: nowrap;

  background: var(--v2-neutral-100);
  color: var(--v2-neutral-700);
  border-radius: var(--v2-radius-full);
}

/* --- Taille lg (dans titres, cellules larges) --- */

.v2-badge--lg {
  height: 26px;
  padding: 0 var(--v2-spacing-3);
  font-size: var(--v2-text-sm);
}

/* --- Couleurs sémantiques --- */

.v2-badge--neutral {
  background: var(--v2-neutral-100);
  color: var(--v2-neutral-700);
}

.v2-badge--info {
  background: var(--v2-info-50);
  color: var(--v2-info-700);
}

.v2-badge--success {
  background: var(--v2-success-50);
  color: var(--v2-success-700);
}

.v2-badge--warning {
  background: var(--v2-warning-50);
  color: var(--v2-warning-700);
}

.v2-badge--danger {
  background: var(--v2-danger-50);
  color: var(--v2-danger-700);
}

/* --- Statuts macro (DS-3 : tickets + devis) ---
 * À combiner typiquement avec .v2-badge--icon (loader / circle-alert /
 * circle-check-big). Le mapping sémantique (statut technique → catégorie
 * macro) est fait en Phase 3 dans le code métier, pas en CSS.
 */

.v2-badge--macro-en-cours {
  background: var(--v2-statut-en-cours-bg);
  color: var(--v2-info-700);
}

.v2-badge--macro-action-requise {
  background: var(--v2-statut-action-requise-bg);
  color: var(--v2-warning-700);
}

.v2-badge--macro-termine {
  background: var(--v2-statut-termine-bg);
  color: var(--v2-success-700);
}

/* --- Pipeline v66 --- */

.v2-badge--pipeline-commercial {
  background: var(--v2-primary-50);
  color: var(--v2-primary-700);
}

.v2-badge--pipeline-service {
  background: var(--v2-service-50);
  color: var(--v2-service-700);
}

/* --- Sources THALIA / VELOX / PORTAIL --- */

.v2-badge--source-thalia {
  background: var(--v2-info-50);
  color: var(--v2-info-700);
}

.v2-badge--source-velox {
  background: var(--v2-neutral-100);
  color: var(--v2-neutral-700);
}

.v2-badge--source-portail {
  background: var(--v2-accent-50);
  color: var(--v2-accent-800);
}

/* --- Modifier forme : --dot (point coloré à gauche du texte) ---
 * Le point hérite de la couleur du badge via currentColor.
 */

.v2-badge--dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--v2-radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* Badge --dot sans texte (compteur pur / indicateur ponctuel) : carré
 * compact 8×8 */
.v2-badge--dot:empty {
  padding: 0;
  width: 8px;
  height: 8px;
  min-width: 0;
}
.v2-badge--dot:empty::before {
  display: none;
}

/* --- Modifier forme : --icon (icône Lucide à gauche) --- */

.v2-badge--icon > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.v2-badge--lg.v2-badge--icon > svg {
  width: 16px;
  height: 16px;
}


/* ============================================================================
 * 11. TOOLTIPS
 * ============================================================================
 *
 * CSS pur via [data-tooltip]. Pour les textes courts d'aide contextuelle.
 * Pour du contenu interactif / riche, utiliser un popover (Session 3, P4).
 *
 * Positions : default = top / [data-tooltip-position="bottom|left|right"]
 *
 * Exemple :
 *   <button class="v2-btn v2-btn--icon" data-tooltip="Supprimer">
 *     <svg><!-- Lucide trash-2 --></svg>
 *   </button>
 *
 *   <button data-tooltip="Filtres" data-tooltip-position="bottom">...</button>
 */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--v2-spacing-2));
  transform: translateX(-50%);

  padding: var(--v2-spacing-1) var(--v2-spacing-2);
  background: var(--v2-neutral-800);
  color: var(--v2-text-color-inverse);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-weight-medium);
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  white-space: nowrap;
  border-radius: var(--v2-radius-sm);

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v2-transition-fast);

  z-index: var(--v2-z-toast);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* --- Positions alternatives --- */

[data-tooltip-position="bottom"]::after {
  top: calc(100% + var(--v2-spacing-2));
  bottom: auto;
}

[data-tooltip-position="right"]::after {
  left: calc(100% + var(--v2-spacing-2));
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

[data-tooltip-position="left"]::after {
  right: calc(100% + var(--v2-spacing-2));
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}


/* ============================================================================
 * 12. PILLS / CHIPS
 * ============================================================================
 *
 * Base : .v2-pill (toujours interactif : cliquable ou removable)
 * Modifiers : --removable (avec bouton ×), --selected (état actif primary)
 *
 * Différence avec badge : pill est interactif (filtre actif, tag removable,
 * scope toggle), badge est purement informatif.
 *
 * Exemples :
 *   <span class="v2-pill v2-pill--removable">
 *     Pipeline : Service
 *     <button class="v2-pill-remove" aria-label="Retirer le filtre">
 *       <svg><!-- Lucide x --></svg>
 *     </button>
 *   </span>
 *
 *   <button class="v2-pill v2-pill--selected">Toute l'équipe</button>
 *   <button class="v2-pill">Mon portefeuille</button>
 */

.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
  height: 28px;
  padding: 0 var(--v2-spacing-3);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-medium);
  color: var(--v2-text-color-primary);

  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-full);

  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--v2-transition-fast),
    border-color var(--v2-transition-fast),
    color var(--v2-transition-fast);
}

.v2-pill:hover {
  background: var(--v2-bg-hover);
  border-color: var(--v2-border-strong);
}

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

/* --- Variant selected (surface sombre, focus accent) --- */

.v2-pill--selected {
  background: var(--v2-primary-700);
  color: var(--v2-text-color-inverse);
  border-color: var(--v2-primary-700);
  --v2-focus-ring: var(--v2-accent-500);
}
.v2-pill--selected:hover {
  background: var(--v2-primary-800);
  border-color: var(--v2-primary-800);
}

/* --- Variant removable --- */

.v2-pill--removable {
  padding-right: var(--v2-spacing-1);
}

.v2-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: var(--v2-spacing-1);
  background: transparent;
  border: 0;
  border-radius: var(--v2-radius-full);
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity var(--v2-transition-fast),
    background-color var(--v2-transition-fast);
}

.v2-pill-remove:hover {
  opacity: 1;
  /* Teinte neutre foncée à 8%, compatible pill blanc comme pill selected.
   * Valeur hors token (pas d'overlay token en v2) — à formaliser Session 3
   * si le pattern se répète sur modals et drawers. */
  background: rgb(0 0 0 / 0.08);
}

.v2-pill-remove:focus-visible {
  opacity: 1;
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: 1px;
}

.v2-pill-remove > svg {
  width: 12px;
  height: 12px;
}


/* ============================================================================
 * 13. AVATARS
 * ============================================================================
 *
 * Base : .v2-avatar (circulaire, initiales fallback ou <img>)
 * Tailles : --xs (24) / --sm (32) / défaut md (40) / --lg (48) / --xl (64)
 * Palettes dérivées : --color-1 à --color-5 (couleur stable via hash nom)
 * Groupe : .v2-avatar-group (empilement avec chevauchement)
 *
 * Exemples :
 *   <div class="v2-avatar v2-avatar--color-2">FA</div>
 *   <div class="v2-avatar v2-avatar--lg"><img src="photo.jpg" alt=""></div>
 *
 *   <div class="v2-avatar-group">
 *     <div class="v2-avatar v2-avatar--sm v2-avatar--color-1">LK</div>
 *     <div class="v2-avatar v2-avatar--sm v2-avatar--color-3">DA</div>
 *     <div class="v2-avatar v2-avatar--sm v2-avatar--color-5">AS</div>
 *   </div>
 */

.v2-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;

  background: var(--v2-primary-100);
  color: var(--v2-primary-700);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;

  border-radius: var(--v2-radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.v2-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Tailles --- */

.v2-avatar--xs {
  width: 24px;
  height: 24px;
  font-size: var(--v2-text-xs);
}

.v2-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--v2-text-xs);
}

.v2-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--v2-text-base);
}

.v2-avatar--xl {
  width: 64px;
  height: 64px;
  font-size: var(--v2-text-lg);
}

/* --- Palettes dérivées (hash nom → couleur stable) ---
 * Le JS calcule un hash du nom de l'utilisateur et applique la classe
 * correspondante. 5 palettes suffisent pour une équipe CACOMIAF type.
 */

.v2-avatar--color-1 {
  background: var(--v2-primary-100);
  color: var(--v2-primary-700);
}
.v2-avatar--color-2 {
  background: var(--v2-accent-100);
  color: var(--v2-accent-800);
}
.v2-avatar--color-3 {
  background: var(--v2-success-100);
  color: var(--v2-success-700);
}
.v2-avatar--color-4 {
  background: var(--v2-warning-100);
  color: var(--v2-warning-700);
}
.v2-avatar--color-5 {
  background: var(--v2-service-100);
  color: var(--v2-service-700);
}

/* --- Groupe (empilement avec chevauchement) --- */

.v2-avatar-group {
  display: inline-flex;
  align-items: center;
}

.v2-avatar-group .v2-avatar {
  margin-left: -8px;
  border: 2px solid var(--v2-bg-surface);
}

.v2-avatar-group .v2-avatar:first-child {
  margin-left: 0;
}


/* ============================================================================
 * 14. TABS
 * ============================================================================
 *
 * 2 variants :
 *   - --segment : pills groupées dans un conteneur arrondi (scope toggle,
 *     filtres d'affichage style Notion / Linear)
 *   - --underline : onglets classiques avec barre de soulignement
 *     (navigation interne dans une fiche cockpit, page détail)
 *
 * Base : .v2-tab (bouton d'onglet) à l'intérieur de .v2-tabs
 *
 * Exemples :
 *   Segment :
 *     <div class="v2-tabs v2-tabs--segment">
 *       <button class="v2-tab is-active">Toute l'équipe</button>
 *       <button class="v2-tab">Mon portefeuille</button>
 *     </div>
 *
 *   Underline avec compteurs :
 *     <div class="v2-tabs v2-tabs--underline">
 *       <button class="v2-tab is-active">
 *         Vue d'ensemble <span class="v2-tab-count">12</span>
 *       </button>
 *       <button class="v2-tab">Tickets <span class="v2-tab-count">4</span></button>
 *     </div>
 */

.v2-tabs {
  display: inline-flex;
  align-items: center;
}

.v2-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-spacing-2);
  height: 40px;
  padding: 0 var(--v2-spacing-4);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-weight-medium);
  color: var(--v2-text-color-secondary);

  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--v2-transition-fast),
    background-color var(--v2-transition-fast),
    border-color var(--v2-transition-fast),
    box-shadow var(--v2-transition-fast);
}

.v2-tab:hover {
  color: var(--v2-text-color-primary);
}

.v2-tab:focus-visible {
  outline: var(--v2-focus-ring-width) solid var(--v2-focus-ring);
  outline-offset: calc(var(--v2-focus-ring-offset) * -1);
}

.v2-tab.is-active {
  color: var(--v2-text-color-primary);
  font-weight: var(--v2-weight-semibold);
}

/* --- Compteur sur onglet --- */

.v2-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--v2-spacing-1);

  font-family: var(--v2-font-body);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-weight-semibold);
  line-height: 1;

  background: var(--v2-neutral-200);
  color: var(--v2-neutral-700);
  border-radius: var(--v2-radius-full);
}

.v2-tab.is-active .v2-tab-count {
  background: var(--v2-primary-100);
  color: var(--v2-primary-700);
}

/* --- Variant segment (pills groupées dans conteneur) --- */

.v2-tabs--segment {
  gap: var(--v2-spacing-1);
  padding: var(--v2-spacing-1);
  background: var(--v2-neutral-100);
  border-radius: var(--v2-radius-md);
}

.v2-tabs--segment .v2-tab {
  height: 32px;
  padding: 0 var(--v2-spacing-3);
  font-size: var(--v2-text-sm);
  border-radius: var(--v2-radius-sm);
}

.v2-tabs--segment .v2-tab:hover {
  background: var(--v2-bg-hover);
}

.v2-tabs--segment .v2-tab.is-active {
  background: var(--v2-bg-surface);
  color: var(--v2-primary-700);
  box-shadow: var(--v2-shadow-sm);
}

/* --- Variant underline (onglets avec barre de soulignement) --- */

.v2-tabs--underline {
  gap: var(--v2-spacing-1);
  border-bottom: 1px solid var(--v2-border-default);
}

.v2-tabs--underline .v2-tab {
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.v2-tabs--underline .v2-tab:hover {
  color: var(--v2-text-color-primary);
  border-bottom-color: var(--v2-border-strong);
}

.v2-tabs--underline .v2-tab.is-active {
  color: var(--v2-primary-700);
  border-bottom-color: var(--v2-primary-700);
}

/* Fin de fichier — composants v2 atomiques P2 + P3 livrés Session 2.
 * Session 3 : overlays (modals, slide-ins, drawers, toasts, banners,
 *             loaders, empty states, command palette ⌘K) + composants
 *             métier inconditionnels. */