/* ============================================================
   COMPOSANTS — Catalogue des composants UI

   Tous les styles ci-dessous consomment EXCLUSIVEMENT des
   custom properties (var(--…)) exportées par le Design System.
   Aucune valeur en dur autre que :
   - 0 (zéro, neutre)
   - currentColor (référence dynamique)
   - transparent
   - inherit / unset / initial
   - les pourcentages (qui sont des ratios, pas des valeurs absolues)
   - les valeurs 1fr / auto / none (mots-clés grid/flex)

   Si l'utilisateur change un token DS, les composants se mettent
   à jour automatiquement via les custom properties — pas besoin
   de re-rendre le HTML.

   Préfixe : .comp-* pour ne pas entrer en conflit avec les classes
   du Nuancier lui-même (.btn, .btn-ghost, …).
   ============================================================ */


/* ===========================================================
   ACCESSIBILITÉ — utilitaires partagés
   =========================================================== */

/* Visually-hidden : texte destiné aux lecteurs d'écran mais
   retiré du rendu visuel. Pattern standard (clip + 1px).
   Utilisé par Spinner ("Loading…"), CommandPalette (instructions),
   IconButton fallback, etc. */
.comp-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;
}


/* ===========================================================
   LAYOUT — Conteneurs de la vue
   =========================================================== */

#view-components .sub-view {
  padding: var(--space-lg);
}

.comp-intro {
  background: var(--color-bg-subtle);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.comp-intro-text {
  margin: 0;
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  color: var(--color-text-muted);
}

.comp-intro-text strong {
  color: var(--color-text-default);
  font-weight: var(--font-weight-semibold);
}

.comp-stack-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}


/* ===========================================================
   COMP-CARD — Fiche composant
   Chaque composant est emballé dans une carte autonome.
   =========================================================== */

.comp-card {
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  /* Évite que les composants positionnés en absolu (Popover, Menu,
     Tooltip, Sidebar) ne débordent visuellement de leur fiche démo.
     Si un composant doit légitimement déborder (ex: bordure d'un
     element actif), on relâchera localement avec overflow: visible. */
  overflow: hidden;
}

.comp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.comp-card-title {
  margin: 0 0 var(--space-xs) 0;
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--color-text-default);
}

.comp-card-desc {
  /* Descriptions cachées dans la démo : redondantes avec le titre du composant.
     Conservées dans le HTML pour accessibilité. */
  display: none;
}

.comp-card-section {
  margin-top: var(--space-xl);
}

.comp-card-section:first-of-type {
  margin-top: 0;
}

.comp-card-subtitle {
  margin: 0 0 var(--space-md) 0;
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-caption-lh);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}


/* ===========================================================
   COMP-GRID — Grilles d'affichage des variantes
   La grille s'adapte automatiquement à la largeur dispo.
   =========================================================== */

.comp-grid {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}

/* Grille pour les variantes/états : minmax adapté à un bouton */
.comp-grid--variants,
.comp-grid--states {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Grille pour les tailles : largeur libre, alignement gauche */
.comp-grid--sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* Grille pour les champs (input, textarea, select) : plus large */
.comp-grid--fields {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Grille pour les toggles (checkbox, radio, switch) : compacte */
.comp-grid--toggles {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Stack vertical pour les groupes (radio group, settings panel) */
.comp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 360px;
}


/* ===========================================================
   COMP-BTN — Button
   Pattern fondamental, doit consommer tous les tokens.
   =========================================================== */

.comp-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  /* Typo */
  font-family: var(--text-button-family);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-lh);
  letter-spacing: var(--tracking-base);
  white-space: nowrap;

  /* Forme */
  border: var(--border-default) solid transparent;
  border-radius: var(--radius-default);
  cursor: pointer;
  user-select: none;

  /* Motion */
  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* Tailles — padding + font-size */
.comp-btn--sm {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  min-height: calc(var(--space-2xl) + var(--space-2xs));   /* ~ 38-44px selon densité */
}

.comp-btn--md {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-button-size);
  min-height: var(--space-3xl);                            /* ~ 40-56px */
}

.comp-btn--lg {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-lg);
  min-height: var(--space-4xl);                            /* ~ 48-64px */
}

/* Variante : primary */
.comp-btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.comp-btn--primary:hover,
.comp-btn--primary.is-hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.comp-btn--primary:active,
.comp-btn--primary.is-active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
  transform: translateY(1px);
}

/* Variante : secondary */
.comp-btn--secondary {
  background: var(--color-bg-elevated);
  color: var(--color-text-default);
  border-color: var(--color-border-default);
}
.comp-btn--secondary:hover,
.comp-btn--secondary.is-hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}
.comp-btn--secondary:active,
.comp-btn--secondary.is-active {
  background: var(--color-bg-muted);
  transform: translateY(1px);
}

/* Variante : ghost */
.comp-btn--ghost {
  background: transparent;
  color: var(--color-text-default);
  border-color: transparent;
}
.comp-btn--ghost:hover,
.comp-btn--ghost.is-hover {
  background: var(--color-bg-subtle);
}
.comp-btn--ghost:active,
.comp-btn--ghost.is-active {
  background: var(--color-bg-muted);
  transform: translateY(1px);
}

/* Variante : danger */
.comp-btn--danger {
  background: var(--color-error);
  color: var(--color-text-on-error);
  border-color: var(--color-error);
}
.comp-btn--danger:hover,
.comp-btn--danger.is-hover {
  /* Pas d'équivalent --color-error-hover dans les tokens — on assombrit
     via filter, qui respecte l'identité du DS sans dur. */
  filter: brightness(0.92);
}
.comp-btn--danger:active,
.comp-btn--danger.is-active {
  filter: brightness(0.85);
  transform: translateY(1px);
}

/* Variante : link */
.comp-btn--link {
  background: transparent;
  color: var(--color-text-link);
  border-color: transparent;
  padding-left: var(--space-2xs);
  padding-right: var(--space-2xs);
  text-decoration: underline;
  text-decoration-thickness: var(--text-underline-thickness);
  text-underline-offset: var(--text-underline-offset);
}
.comp-btn--link:hover,
.comp-btn--link.is-hover {
  color: var(--color-text-link-hover);
}
.comp-btn--link:active,
.comp-btn--link.is-active {
  transform: translateY(1px);
}

/* État : focus visible */
.comp-btn:focus-visible,
.comp-btn.is-focus {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* État : disabled */
.comp-btn:disabled,
.comp-btn.is-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* État : loading — spinner + texte un peu plus pâle */
.comp-btn.is-loading {
  cursor: progress;
}
.comp-btn.is-loading span {
  opacity: 0.7;
}

/* Icônes dans le bouton */
.comp-btn-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

.comp-btn--lg .comp-btn-icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.comp-btn--sm .comp-btn-icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

/* Spinner — animation de rotation */
.comp-btn-spinner {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
  animation: comp-spin var(--duration-slow) linear infinite;
}

.comp-btn--lg .comp-btn-spinner {
  width: var(--icon-md);
  height: var(--icon-md);
}

.comp-btn--sm .comp-btn-spinner {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

@keyframes comp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .comp-btn-spinner {
    animation-duration: calc(var(--duration-slow) * 4);
  }
}


/* ===========================================================
   COMP-ICONBTN — IconButton
   Bouton carré, taille basée sur les tokens --icon-*.
   =========================================================== */

.comp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-default) solid transparent;
  border-radius: var(--radius-default);
  cursor: pointer;
  padding: 0;

  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    color var(--duration-default) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* Tailles carrées — basées sur les tokens icon-* + padding */
.comp-iconbtn--sm {
  width: var(--space-2xl);    /* ~ 32px à 40px selon densité */
  height: var(--space-2xl);
}
.comp-iconbtn--md {
  width: var(--space-3xl);    /* ~ 40-56px */
  height: var(--space-3xl);
}
.comp-iconbtn--lg {
  width: var(--space-4xl);    /* ~ 48-64px */
  height: var(--space-4xl);
}

/* Icône à l'intérieur */
.comp-iconbtn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.comp-iconbtn--md svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.comp-iconbtn--lg svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* Variantes — mêmes règles que Button */
.comp-iconbtn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.comp-iconbtn--primary:hover,
.comp-iconbtn--primary.is-hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.comp-iconbtn--primary:active,
.comp-iconbtn--primary.is-active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
  transform: translateY(1px);
}

.comp-iconbtn--secondary {
  background: var(--color-bg-elevated);
  color: var(--color-text-default);
  border-color: var(--color-border-default);
}
.comp-iconbtn--secondary:hover,
.comp-iconbtn--secondary.is-hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}
.comp-iconbtn--secondary:active,
.comp-iconbtn--secondary.is-active {
  background: var(--color-bg-muted);
  transform: translateY(1px);
}

.comp-iconbtn--ghost {
  background: transparent;
  color: var(--color-text-default);
  border-color: transparent;
}
.comp-iconbtn--ghost:hover,
.comp-iconbtn--ghost.is-hover {
  background: var(--color-bg-subtle);
}
.comp-iconbtn--ghost:active,
.comp-iconbtn--ghost.is-active {
  background: var(--color-bg-muted);
  transform: translateY(1px);
}

.comp-iconbtn--danger {
  background: var(--color-error);
  color: var(--color-text-on-error);
  border-color: var(--color-error);
}
.comp-iconbtn--danger:hover,
.comp-iconbtn--danger.is-hover {
  filter: brightness(0.92);
}
.comp-iconbtn--danger:active,
.comp-iconbtn--danger.is-active {
  filter: brightness(0.85);
  transform: translateY(1px);
}

.comp-iconbtn:focus-visible,
.comp-iconbtn.is-focus {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.comp-iconbtn:disabled,
.comp-iconbtn.is-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}


/* ===========================================================
   COMP-BTNGROUP — ButtonGroup (segmented control)
   =========================================================== */

.comp-btngroup {
  display: inline-flex;
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.comp-btngroup-item {
  background: transparent;
  border: 0;
  border-right: var(--border-default) solid var(--color-border-default);
  color: var(--color-text-default);
  font-family: var(--text-button-family);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-lh);
  cursor: pointer;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-button-size);

  transition:
    background-color var(--duration-default) var(--ease-out),
    color var(--duration-default) var(--ease-out);
}

.comp-btngroup-item--sm {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
}

.comp-btngroup-item--lg {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-lg);
}

.comp-btngroup-item:last-child {
  border-right: 0;
}

.comp-btngroup-item:hover {
  background: var(--color-bg-subtle);
}

.comp-btngroup-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-offset));
  z-index: 1;
  position: relative;
}

.comp-btngroup-item.is-active {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.comp-btngroup-item.is-active:hover {
  background: var(--color-primary-hover);
}



/* ===========================================================
   COMP-FIELD — Wrapper de champ (label + input + helper)
   Pattern réutilisé par Input, Textarea, Select, Slider, InputGroup.
   =========================================================== */

.comp-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.comp-field-label {
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-sm);
  color: var(--color-text-default);
}

.comp-field-helper {
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  color: var(--color-text-muted);
}

.comp-field.is-error .comp-field-helper {
  color: var(--color-error);
}

.comp-field.is-success .comp-field-helper {
  color: var(--color-success);
}


/* ===========================================================
   COMP-INPUT — Input
   =========================================================== */

.comp-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-page);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  color: var(--color-text-default);
  font-family: var(--text-body-family);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);

  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-input--sm {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  min-height: var(--space-2xl);
}

.comp-input--md {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-body-size);
  min-height: var(--space-3xl);
}

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

.comp-input:focus,
.comp-field.is-focus .comp-input {
  outline: 0;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.comp-field.is-error .comp-input {
  border-color: var(--color-error);
}
.comp-field.is-error .comp-input:focus,
.comp-field.is-error.is-focus .comp-input {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-subtle);
}

.comp-field.is-success .comp-input {
  border-color: var(--color-success);
}
.comp-field.is-success .comp-input:focus,
.comp-field.is-success.is-focus .comp-input {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-subtle);
}

.comp-input:disabled,
.comp-field.is-disabled .comp-input {
  background: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.comp-input[readonly],
.comp-field.is-readonly .comp-input {
  background: var(--color-bg-subtle);
  cursor: default;
}


/* Input avec affixes (préfixe/suffixe inline) */
.comp-input-wrap {
  display: flex;
  align-items: stretch;
  background: var(--color-bg-page);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  overflow: hidden;
  transition:
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-input-wrap:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.comp-field.is-focus .comp-input-wrap {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.comp-field.is-error .comp-input-wrap { border-color: var(--color-error); }
.comp-field.is-success .comp-input-wrap { border-color: var(--color-success); }

.comp-input-wrap .comp-input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.comp-input-wrap .comp-input:focus {
  box-shadow: none;
  outline: 0;
}

.comp-input-prefix,
.comp-input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  background: var(--color-bg-subtle);
}

.comp-input-prefix svg,
.comp-input-suffix svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}


/* ===========================================================
   COMP-TEXTAREA — Textarea
   =========================================================== */

.comp-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-page);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  color: var(--color-text-default);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  padding: var(--space-xs) var(--space-md);
  resize: vertical;

  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-textarea::placeholder {
  color: var(--color-text-muted);
}

.comp-textarea:focus,
.comp-field.is-focus .comp-textarea {
  outline: 0;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.comp-field.is-error .comp-textarea {
  border-color: var(--color-error);
}

.comp-field.is-success .comp-textarea {
  border-color: var(--color-success);
}

.comp-textarea:disabled,
.comp-field.is-disabled .comp-textarea {
  background: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.comp-textarea[readonly],
.comp-field.is-readonly .comp-textarea {
  background: var(--color-bg-subtle);
  cursor: default;
  resize: none;
}



/* ===========================================================
   COMP-SELECT — Select
   On force appearance:none et on dessine la flèche en SVG inline
   via background-image. La flèche utilise currentColor pour
   suivre la couleur du texte (et donc le mode clair/sombre).
   =========================================================== */

.comp-select-wrap {
  position: relative;
  display: flex;
}

.comp-select {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg-page);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  color: var(--color-text-default);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  padding-right: var(--space-2xl);
  cursor: pointer;

  /* Flèche en SVG inline via background-image. On utilise
     currentColor pour respecter automatiquement le thème. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: var(--icon-sm) var(--icon-sm);

  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-select--sm {
  padding: var(--space-2xs) var(--space-2xl) var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  min-height: var(--space-2xl);
}

.comp-select--md {
  padding: var(--space-xs) var(--space-2xl) var(--space-xs) var(--space-md);
  font-size: var(--text-body-size);
  min-height: var(--space-3xl);
}

.comp-select:focus,
.comp-field.is-focus .comp-select {
  outline: 0;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.comp-field.is-error .comp-select { border-color: var(--color-error); }

.comp-select:disabled,
.comp-field.is-disabled .comp-select {
  background-color: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}


/* ===========================================================
   COMP-CHECKBOX — Checkbox
   Pattern : input visuel masqué + span dessin via pseudo ::after
   pour le check (SVG mask). Préserve l'accessibilité native.
   =========================================================== */

.comp-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
  position: relative;
}

.comp-checkbox-input {
  /* Masquer visuellement mais rester accessible */
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: inherit;
  margin: 0;
}

.comp-checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-md);
  height: var(--space-md);
  border: var(--border-default) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-page);

  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-checkbox--sm .comp-checkbox-box {
  width: var(--space-sm);
  height: var(--space-sm);
}

/* Le check : SVG via mask, pour pouvoir le colorer en currentColor */
.comp-checkbox-box::after {
  content: '';
  width: 80%;
  height: 80%;
  background: var(--color-text-on-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.comp-checkbox-label {
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-default);
}

/* État : checked */
.comp-checkbox-input:checked + .comp-checkbox-box,
.comp-checkbox.is-checked .comp-checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.comp-checkbox-input:checked + .comp-checkbox-box::after,
.comp-checkbox.is-checked .comp-checkbox-box::after {
  opacity: 1;
}

/* État : indeterminate — un trait horizontal à la place du check */
.comp-checkbox.is-indeterminate .comp-checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.comp-checkbox.is-indeterminate .comp-checkbox-box::after {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>") center / contain no-repeat;
  opacity: 1;
}

/* État : focus */
.comp-checkbox-input:focus-visible + .comp-checkbox-box,
.comp-checkbox.is-focus .comp-checkbox-box {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

/* État : disabled */
.comp-checkbox.is-disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.comp-checkbox-input:disabled + .comp-checkbox-box {
  cursor: not-allowed;
}


/* ===========================================================
   COMP-RADIO — Radio
   Même pattern que Checkbox mais avec un cercle plein concentrique.
   =========================================================== */

.comp-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
  position: relative;
}

.comp-radio-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: inherit;
  margin: 0;
}

.comp-radio-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-md);
  height: var(--space-md);
  border: var(--border-default) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-bg-page);

  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-radio--sm .comp-radio-dot {
  width: var(--space-sm);
  height: var(--space-sm);
}

.comp-radio-dot::after {
  content: '';
  width: 50%;
  height: 50%;
  border-radius: var(--radius-full);
  background: var(--color-text-on-primary);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.comp-radio-label {
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-default);
}

/* État : checked */
.comp-radio-input:checked + .comp-radio-dot,
.comp-radio.is-checked .comp-radio-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.comp-radio-input:checked + .comp-radio-dot::after,
.comp-radio.is-checked .comp-radio-dot::after {
  transform: scale(1);
}

/* État : focus */
.comp-radio-input:focus-visible + .comp-radio-dot,
.comp-radio.is-focus .comp-radio-dot {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

/* État : disabled */
.comp-radio.is-disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}



/* ===========================================================
   COMP-SWITCH — Switch (toggle on/off)
   =========================================================== */

.comp-switch {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  user-select: none;
  position: relative;
}

.comp-switch-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: inherit;
  margin: 0;
}

.comp-switch-label {
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-default);
}

.comp-switch-track {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: calc(var(--space-2xl) + var(--space-2xs));     /* ~36-44px */
  height: var(--space-lg);                              /* ~20-24px */
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  border: var(--border-default) solid var(--color-border-default);

  transition:
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-switch--sm .comp-switch-track {
  width: var(--space-2xl);
  height: var(--space-md);
}

.comp-switch-thumb {
  position: absolute;
  top: 50%;
  left: var(--space-2xs);
  width: calc(var(--space-md) - var(--space-2xs));
  height: calc(var(--space-md) - var(--space-2xs));
  background: var(--color-bg-page);
  border-radius: var(--radius-full);
  transform: translateY(-50%);
  box-shadow: var(--shadow-sm);

  transition: left var(--duration-default) var(--ease-out);
}

/* État : on (la pastille glisse à droite, la piste devient primary) */
.comp-switch-input:checked + .comp-switch-track,
.comp-switch.is-on .comp-switch-track {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.comp-switch-input:checked + .comp-switch-track .comp-switch-thumb,
.comp-switch.is-on .comp-switch-track .comp-switch-thumb {
  left: calc(100% - var(--space-md));
}

/* État : focus */
.comp-switch-input:focus-visible + .comp-switch-track,
.comp-switch.is-focus .comp-switch-track {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

/* État : disabled */
.comp-switch.is-disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}


/* ===========================================================
   COMP-SLIDER — Slider (range)
   Stylisation cross-browser via ::-webkit et ::-moz pseudo-elements.
   La piste teintée utilise une custom property --comp-slider-pct
   définie sur le wrap (calcul en JS au rendu).
   =========================================================== */

.comp-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.comp-slider-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.comp-slider-wrap {
  display: block;
  position: relative;
}

.comp-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  height: var(--space-md);
  padding: 0;
  margin: 0;
}

/* Piste WebKit */
.comp-slider::-webkit-slider-runnable-track {
  height: var(--space-2xs);
  border-radius: var(--radius-full);
  background:
    linear-gradient(
      to right,
      var(--color-primary) 0%,
      var(--color-primary) var(--comp-slider-pct, 0%),
      var(--color-bg-muted) var(--comp-slider-pct, 0%),
      var(--color-bg-muted) 100%
    );
}

/* Piste Firefox */
.comp-slider::-moz-range-track {
  height: var(--space-2xs);
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
}

.comp-slider::-moz-range-progress {
  height: var(--space-2xs);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* Pouce WebKit */
.comp-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--space-md);
  height: var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-bg-page);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  margin-top: calc(-1 * (var(--space-md) - var(--space-2xs)) / 2);

  transition: transform var(--duration-fast) var(--ease-out);
}

.comp-slider::-webkit-slider-thumb:active { cursor: grabbing; }

/* Pouce Firefox */
.comp-slider::-moz-range-thumb {
  width: var(--space-md);
  height: var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-bg-page);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

/* Focus */
.comp-slider:focus-visible::-webkit-slider-thumb,
.comp-slider.is-focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}
.comp-slider:focus-visible::-moz-range-thumb,
.comp-slider.is-focus::-moz-range-thumb {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.comp-slider:focus { outline: 0; }

/* Disabled */
.comp-slider:disabled,
.comp-slider.is-disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}


/* ===========================================================
   COMP-INPUTGROUP — InputGroup
   Input flanqué d'addons texte ou boutons.
   =========================================================== */

.comp-inputgroup {
  display: flex;
  align-items: stretch;
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  overflow: hidden;
  background: var(--color-bg-page);

  transition:
    border-color var(--duration-default) var(--ease-out),
    box-shadow var(--duration-default) var(--ease-out);
}

.comp-inputgroup:focus-within,
.comp-inputgroup.is-focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.comp-inputgroup.is-disabled {
  opacity: var(--opacity-disabled);
}

.comp-inputgroup-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-right: var(--border-default) solid var(--color-border-default);
  white-space: nowrap;
}

.comp-inputgroup-addon:last-child {
  border-right: 0;
  border-left: var(--border-default) solid var(--color-border-default);
}

.comp-inputgroup-addon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-inputgroup-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  padding: var(--space-xs) var(--space-md);
}

.comp-inputgroup--sm .comp-inputgroup-input {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  min-height: calc(var(--space-2xl) - var(--border-2));
}
.comp-inputgroup--md .comp-inputgroup-input {
  min-height: calc(var(--space-3xl) - var(--border-2));
}
.comp-inputgroup--sm .comp-inputgroup-addon {
  font-size: var(--text-xs);
  padding: 0 var(--space-sm);
}

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

.comp-inputgroup-input:focus {
  outline: 0;
}

.comp-inputgroup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-subtle);
  color: var(--color-text-default);
  border: 0;
  border-left: var(--border-default) solid var(--color-border-default);
  padding: 0 var(--space-md);
  cursor: pointer;

  transition: background-color var(--duration-default) var(--ease-out);
}

.comp-inputgroup-btn:hover {
  background: var(--color-bg-muted);
}

.comp-inputgroup-btn:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.comp-inputgroup-btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}



/* =================================================================
   ===================  AFFICHAGE — Display  =======================
   ================================================================= */

/* ===========================================================
   COMP-BADGE — Badge
   =========================================================== */

.comp-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--text-caption-family);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  border: var(--border-default) solid transparent;
}

.comp-badge--sm {
  padding: 0 var(--space-2xs);
  font-size: var(--text-xs);
  min-height: var(--space-md);
  line-height: 1.4;
}

.comp-badge--md {
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-xs);
  min-height: var(--space-lg);
  line-height: 1.4;
}

/* Solid */
.comp-badge--solid.comp-badge--neutral { background: var(--color-bg-muted);     color: var(--color-text-default); }
.comp-badge--solid.comp-badge--primary { background: var(--color-primary);      color: var(--color-text-on-primary); }
.comp-badge--solid.comp-badge--success { background: var(--color-success);      color: var(--color-text-on-success); }
.comp-badge--solid.comp-badge--warning { background: var(--color-warning);      color: var(--color-text-on-warning); }
.comp-badge--solid.comp-badge--error   { background: var(--color-error);        color: var(--color-text-on-error); }
.comp-badge--solid.comp-badge--info    { background: var(--color-info);         color: var(--color-text-on-info); }

/* Subtle */
.comp-badge--subtle.comp-badge--neutral { background: var(--color-bg-muted);     color: var(--color-text-default); }
.comp-badge--subtle.comp-badge--primary { background: var(--color-primary-subtle); color: var(--color-primary); }
.comp-badge--subtle.comp-badge--success { background: var(--color-success-subtle); color: var(--color-success); }
.comp-badge--subtle.comp-badge--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.comp-badge--subtle.comp-badge--error   { background: var(--color-error-subtle);   color: var(--color-error); }
.comp-badge--subtle.comp-badge--info    { background: var(--color-info-subtle);    color: var(--color-info); }

/* Outline */
.comp-badge--outline { background: transparent; }
.comp-badge--outline.comp-badge--neutral { border-color: var(--color-border-strong); color: var(--color-text-default); }
.comp-badge--outline.comp-badge--primary { border-color: var(--color-primary); color: var(--color-primary); }
.comp-badge--outline.comp-badge--success { border-color: var(--color-success); color: var(--color-success); }
.comp-badge--outline.comp-badge--warning { border-color: var(--color-warning); color: var(--color-warning); }
.comp-badge--outline.comp-badge--error   { border-color: var(--color-error);   color: var(--color-error); }
.comp-badge--outline.comp-badge--info    { border-color: var(--color-info);    color: var(--color-info); }


/* ===========================================================
   COMP-CONTEXT-ROW — Lignes "en contexte" (utilitaire)
   =========================================================== */

.comp-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  color: var(--color-text-default);
}


/* ===========================================================
   COMP-TAG — Tag
   =========================================================== */

.comp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  border-radius: var(--radius-full);
  border: var(--border-default) solid transparent;
  font-family: var(--text-caption-family);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.comp-tag--sm {
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-xs);
  min-height: var(--space-lg);
}

.comp-tag--md {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  min-height: var(--space-xl);
}

.comp-tag--neutral { background: var(--color-bg-muted);     color: var(--color-text-default); }
.comp-tag--primary { background: var(--color-primary-subtle); color: var(--color-primary); }
.comp-tag--success { background: var(--color-success-subtle); color: var(--color-success); }
.comp-tag--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.comp-tag--error   { background: var(--color-error-subtle);   color: var(--color-error); }
.comp-tag--info    { background: var(--color-info-subtle);    color: var(--color-info); }

.comp-tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-md);
  height: var(--space-md);
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: var(--radius-full);
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.comp-tag-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.comp-tag-close svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}


/* ===========================================================
   COMP-AVATAR — Avatar
   =========================================================== */

.comp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-bg-muted);
  color: var(--color-text-default);
  font-family: var(--text-body-family);
  font-weight: var(--font-weight-semibold);
  overflow: visible;
  flex-shrink: 0;
}

.comp-avatar--circle { border-radius: var(--radius-full); }
.comp-avatar--square { border-radius: var(--radius-default); }

/* Tailles : la police est calibrée à ~40-45% de la taille du cercle
   pour que 2 lettres tiennent confortablement. */
.comp-avatar--xs { width: var(--space-xl);  height: var(--space-xl);  font-size: var(--text-2xs, 10px); }
.comp-avatar--sm { width: var(--space-2xl); height: var(--space-2xl); font-size: var(--text-xs); }
.comp-avatar--md { width: var(--space-3xl); height: var(--space-3xl); font-size: var(--text-sm); }
.comp-avatar--lg { width: var(--space-4xl); height: var(--space-4xl); font-size: var(--text-base); }
.comp-avatar--xl { width: var(--space-5xl); height: var(--space-5xl); font-size: var(--text-lg); }

.comp-avatar-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.comp-avatar--circle .comp-avatar-image { border-radius: var(--radius-full); }
.comp-avatar--square .comp-avatar-image { border-radius: var(--radius-default); }

/* Initiales : ratio par rapport à la taille de l'avatar plutôt qu'une
   taille absolue, pour rester proportionnel quelle que soit la taille
   (xs à xl). Centrage strict via flex + line-height 1. La taille de
   police définie sur .comp-avatar--<size> sert de base ; on n'écrase
   pas, on hérite simplement. */
.comp-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  /* Empêche les longues initiales (3 lettres) de déborder du cercle. */
  overflow: hidden;
  font-size: inherit;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

.comp-avatar svg {
  width: 60%;
  height: 60%;
}

.comp-avatar-status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  height: 28%;
  min-width: var(--space-xs);
  min-height: var(--space-xs);
  border-radius: var(--radius-full);
  border: var(--border-2) solid var(--color-bg-page);
}
.comp-avatar-status--online   { background: var(--color-success); }
.comp-avatar-status--away     { background: var(--color-warning); }
.comp-avatar-status--busy     { background: var(--color-error); }
.comp-avatar-status--offline  { background: var(--color-bg-muted); }

.comp-avatar-stack {
  display: inline-flex;
}
.comp-avatar-stack .comp-avatar {
  margin-left: calc(var(--space-sm) * -1);
  border: var(--border-2) solid var(--color-bg-page);
}
.comp-avatar-stack .comp-avatar:first-child { margin-left: 0; }


/* ===========================================================
   COMP-TOOLTIP — Tooltip
   =========================================================== */

/* Conteneur de démo pour les composants flottants (Tooltip, Popover) :
   dimensionné pour que le composant absolu reste dans le cadre quel
   que soit son placement (top/right/bottom/left). Inutile en production :
   ces composants seraient attachés au document et positionnés en JS. */
.comp-tooltip-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--space-5xl) * 2);
  padding: var(--space-3xl);
}

.comp-tooltip {
  position: absolute;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  white-space: nowrap;
  max-width: 240px;
  pointer-events: none;
  z-index: var(--z-popover);
}

.comp-tooltip--default {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverted);
}

.comp-tooltip--light {
  background: var(--color-bg-page);
  color: var(--color-text-default);
  border: var(--border-default) solid var(--color-border-default);
  box-shadow: var(--shadow-md);
}

.comp-tooltip--top    { bottom: calc(100% + var(--space-xs)); left: 50%; transform: translateX(-50%); }
.comp-tooltip--bottom { top:    calc(100% + var(--space-xs)); left: 50%; transform: translateX(-50%); }
.comp-tooltip--left   { right:  calc(100% + var(--space-xs)); top: 50%;  transform: translateY(-50%); }
.comp-tooltip--right  { left:   calc(100% + var(--space-xs)); top: 50%;  transform: translateY(-50%); }

.comp-grid--tooltips {
  /* Pour les composants flottants (Tooltip, Popover), on prévoit
     des cellules plus larges pour qu'il y ait de la place autour
     de l'ancre, dans toutes les directions de placement. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-xl);
  align-items: center;
  justify-items: center;
  padding: var(--space-2xl) 0;
}


/* ===========================================================
   COMP-PILL — Pill (compteur)
   =========================================================== */

.comp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-family: var(--text-caption-family);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.comp-pill--sm {
  min-width: var(--space-md);
  height: var(--space-md);
  padding: 0 var(--space-2xs);
  font-size: var(--text-xs);
}
.comp-pill--md {
  min-width: var(--space-lg);
  height: var(--space-lg);
  padding: 0 var(--space-xs);
  font-size: var(--text-sm);
}

.comp-pill--neutral { background: var(--color-bg-muted);  color: var(--color-text-default); }
.comp-pill--primary { background: var(--color-primary);   color: var(--color-text-on-primary); }
.comp-pill--error   { background: var(--color-error);     color: var(--color-text-on-error); }

.comp-pill-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3xl);
  height: var(--space-3xl);
  border-radius: var(--radius-default);
  background: var(--color-bg-subtle);
  color: var(--color-text-default);
}
.comp-pill-anchor-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.comp-pill--floating {
  position: absolute;
  top: calc(var(--space-2xs) * -1);
  right: calc(var(--space-2xs) * -1);
  border: var(--border-2) solid var(--color-bg-page);
}


/* ===========================================================
   COMP-KBD — Kbd (touche clavier)
   =========================================================== */

.comp-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  background: var(--color-bg-elevated);
  color: var(--color-text-default);
  border: var(--border-default) solid var(--color-border-default);
  border-bottom-width: var(--border-2);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 var(--color-border-subtle);
}

.comp-kbd--sm {
  font-size: var(--text-xs);
  padding: 0 var(--space-2xs);
  min-height: var(--space-md);
  min-width: var(--space-md);
}

.comp-kbd--md {
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-xs);
  min-height: var(--space-lg);
  min-width: var(--space-lg);
}

.comp-kbd-combo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.comp-kbd-sep {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}



/* =================================================================
   ====================  FEEDBACK  =================================
   ================================================================= */

/* ===========================================================
   COMP-ALERT — Alert (bandeau d'information)
   =========================================================== */

.comp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-default);
  border: var(--border-default) solid transparent;
}

.comp-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: var(--space-2xs);
}
.comp-alert-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.comp-alert-body {
  flex: 1;
  min-width: 0;
}

.comp-alert-title {
  margin: 0 0 var(--space-2xs) 0;
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-base);
  color: inherit;
}

.comp-alert-text {
  margin: 0;
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.comp-alert-actions {
  margin-top: var(--space-sm);
  display: flex;
  gap: var(--space-xs);
}

.comp-alert-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-lg);
  height: var(--space-lg);
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  border-radius: var(--radius-sm);
  padding: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.comp-alert-close:hover { opacity: 1; }
.comp-alert-close svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Subtle */
.comp-alert--subtle.comp-alert--info    { background: var(--color-info-subtle);    color: var(--color-info);    border-color: var(--color-info); }
.comp-alert--subtle.comp-alert--success { background: var(--color-success-subtle); color: var(--color-success); border-color: var(--color-success); }
.comp-alert--subtle.comp-alert--warning { background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning); }
.comp-alert--subtle.comp-alert--error   { background: var(--color-error-subtle);   color: var(--color-error);   border-color: var(--color-error); }

.comp-alert--subtle .comp-alert-title,
.comp-alert--subtle .comp-alert-text { color: var(--color-text-default); }

/* Solid */
.comp-alert--solid.comp-alert--info    { background: var(--color-info);    color: var(--color-text-on-info); }
.comp-alert--solid.comp-alert--success { background: var(--color-success); color: var(--color-text-on-success); }
.comp-alert--solid.comp-alert--warning { background: var(--color-warning); color: var(--color-text-on-warning); }
.comp-alert--solid.comp-alert--error   { background: var(--color-error);   color: var(--color-text-on-error); }


/* ===========================================================
   COMP-TOAST — Toast (notification flottante)
   =========================================================== */

.comp-toast-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-end;
  max-width: 400px;
  margin-left: auto;
}

.comp-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-elevated);
  border: var(--border-default) solid var(--color-border-default);
  border-left-width: var(--border-4);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 400px;
}

.comp-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: var(--space-2xs);
}
.comp-toast-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-toast-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.comp-toast-title {
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

.comp-toast-text {
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}

.comp-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-lg);
  height: var(--space-lg);
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.comp-toast-close:hover { opacity: 1; }
.comp-toast-close svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-toast--info    { border-left-color: var(--color-info); }
.comp-toast--success { border-left-color: var(--color-success); }
.comp-toast--warning { border-left-color: var(--color-warning); }
.comp-toast--error   { border-left-color: var(--color-error); }

.comp-toast--info    .comp-toast-icon { color: var(--color-info); }
.comp-toast--success .comp-toast-icon { color: var(--color-success); }
.comp-toast--warning .comp-toast-icon { color: var(--color-warning); }
.comp-toast--error   .comp-toast-icon { color: var(--color-error); }


/* ===========================================================
   COMP-BANNER — Banner (alerte de page)
   =========================================================== */

.comp-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-default);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
}

.comp-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.comp-banner-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-banner-text {
  flex: 1;
  min-width: 0;
}

.comp-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-lg);
  height: var(--space-lg);
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  border-radius: var(--radius-sm);
}
.comp-banner-close:hover { opacity: 1; }
.comp-banner-close svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-banner--announcement { background: var(--color-primary-subtle); color: var(--color-primary); }
.comp-banner--info         { background: var(--color-info-subtle);    color: var(--color-info); }
.comp-banner--success      { background: var(--color-success-subtle); color: var(--color-success); }
.comp-banner--warning      { background: var(--color-warning-subtle); color: var(--color-warning); }
.comp-banner--error        { background: var(--color-error-subtle);   color: var(--color-error); }


/* ===========================================================
   COMP-PROGRESS — ProgressBar
   =========================================================== */

.comp-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.comp-progress-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.comp-progress {
  position: relative;
  width: 100%;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.comp-progress--sm { height: var(--space-2xs); }
.comp-progress--md { height: var(--space-xs); }
.comp-progress--lg { height: var(--space-sm); }

.comp-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-default) var(--ease-out);
}

.comp-progress--primary .comp-progress-fill { background: var(--color-primary); }
.comp-progress--success .comp-progress-fill { background: var(--color-success); }
.comp-progress--warning .comp-progress-fill { background: var(--color-warning); }
.comp-progress--error   .comp-progress-fill { background: var(--color-error); }

/* Indeterminate — barre qui glisse en boucle */
.comp-progress--indeterminate .comp-progress-fill {
  width: 30%;
  position: absolute;
  animation: comp-progress-slide 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes comp-progress-slide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .comp-progress--indeterminate .comp-progress-fill {
    animation-duration: 4s;
  }
}


/* ===========================================================
   COMP-SPINNER — Spinner
   =========================================================== */

.comp-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comp-spinner svg {
  animation: comp-spin var(--duration-slow) linear infinite;
}

.comp-spinner--sm svg { width: var(--icon-sm); height: var(--icon-sm); }
.comp-spinner--md svg { width: var(--icon-md); height: var(--icon-md); }
.comp-spinner--lg svg { width: var(--icon-lg); height: var(--icon-lg); }
.comp-spinner--xl svg { width: var(--icon-xl); height: var(--icon-xl); }

.comp-spinner--primary { color: var(--color-primary); }
.comp-spinner--neutral { color: var(--color-text-muted); }


/* ===========================================================
   COMP-SKELETON — Skeleton (placeholder)
   =========================================================== */

.comp-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 0%,
    var(--color-bg-subtle) 50%,
    var(--color-bg-muted) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: comp-shimmer 1.6s linear infinite;
}

@keyframes comp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .comp-skeleton { animation-duration: 6s; }
}

.comp-skeleton--text  { height: var(--text-base); margin: var(--space-2xs) 0; }
.comp-skeleton--title { height: var(--text-xl); margin: var(--space-2xs) 0 var(--space-sm) 0; max-width: 60%; }
.comp-skeleton--short   { max-width: 80%; }
.comp-skeleton--shorter { max-width: 50%; }

.comp-skeleton--avatar {
  width: var(--space-3xl);
  height: var(--space-3xl);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.comp-skeleton--box {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-default);
  margin: var(--space-sm) 0;
}

.comp-skeleton-card {
  padding: var(--space-lg);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.comp-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.comp-skeleton-row:last-child { margin-bottom: 0; }

.comp-skeleton-col {
  flex: 1;
  min-width: 0;
}


/* ===========================================================
   COMP-STACK-WIDE — Stack vertical large (utilitaire)
   =========================================================== */

.comp-stack-wide {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}



/* =================================================================
   ====================  CONTENEURS  ===============================
   ================================================================= */

/* ===========================================================
   COMP-UICARD — Card (renommée pour éviter conflit avec .comp-card)
   =========================================================== */

.comp-uicard {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.comp-uicard--default    { box-shadow: var(--shadow-sm); }
.comp-uicard--flat       { box-shadow: none; }
.comp-uicard--elevated   { border-color: transparent; box-shadow: var(--shadow-lg); }
.comp-uicard--interactive {
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    box-shadow var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out),
    transform var(--duration-default) var(--ease-out);
}
.comp-uicard--interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-default);
  transform: translateY(-2px);
}

.comp-uicard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-default) solid var(--color-border-subtle);
}

.comp-uicard-title {
  margin: 0;
  font-family: var(--text-body-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

.comp-uicard-body {
  padding: var(--space-lg);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-default);
  flex: 1;
}

.comp-uicard-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-top: var(--border-default) solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
}

.comp-grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}


/* ===========================================================
   COMP-MODAL — Modal / Dialog
   =========================================================== */

/* Démo : on n'utilise pas position:fixed (qui sortirait de la fiche).
   On simule l'overlay dans une boîte parente positionnée. */
.comp-modal-demo {
  position: relative;
  width: 100%;
  min-height: 220px;
  padding: var(--space-lg);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
  opacity: 0.6;
}

.comp-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 100%;
  overflow: hidden;
}

.comp-modal--sm { width: 400px; }
.comp-modal--md { width: 560px; }
.comp-modal--lg { width: 720px; }

.comp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-default) solid var(--color-border-subtle);
}

.comp-modal-title {
  margin: 0;
  font-family: var(--text-body-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

.comp-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-2xl);
  height: var(--space-2xl);
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
}
.comp-modal-close:hover { background: var(--color-bg-subtle); color: var(--color-text-default); }
.comp-modal-close svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-modal-body {
  padding: var(--space-lg);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-default);
}

.comp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-top: var(--border-default) solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
}


/* ===========================================================
   COMP-DRAWER — Drawer / Sheet
   =========================================================== */

.comp-drawer-demo {
  position: relative;
  width: 100%;
  height: 320px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  overflow: hidden;
}

.comp-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
  opacity: 0.6;
}

.comp-drawer {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-lg);
}

.comp-drawer--left   { top: 0; bottom: 0; left:  0; width: 320px; }
.comp-drawer--right  { top: 0; bottom: 0; right: 0; width: 320px; }
.comp-drawer--top    { top: 0; left: 0; right: 0; height: 200px; }
.comp-drawer--bottom { bottom: 0; left: 0; right: 0; height: 200px; }

.comp-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-default) solid var(--color-border-subtle);
}

.comp-drawer-title {
  margin: 0;
  font-family: var(--text-body-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

.comp-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-2xl);
  height: var(--space-2xl);
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
}
.comp-drawer-close:hover { background: var(--color-bg-subtle); color: var(--color-text-default); }
.comp-drawer-close svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-drawer-body {
  padding: var(--space-lg);
  overflow: auto;
  flex: 1;
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  color: var(--color-text-default);
}


/* ===========================================================
   COMP-POPOVER — Popover
   =========================================================== */

.comp-popover-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--space-5xl) * 2);
  padding: var(--space-3xl);
}

.comp-popover {
  position: absolute;
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  min-width: 240px;
  max-width: 320px;
  z-index: var(--z-popover);
}

.comp-popover--top    { bottom: calc(100% + var(--space-xs)); left: 50%; transform: translateX(-50%); }
.comp-popover--bottom { top:    calc(100% + var(--space-xs)); left: 50%; transform: translateX(-50%); }
.comp-popover--left   { right:  calc(100% + var(--space-xs)); top: 50%;  transform: translateY(-50%); }
.comp-popover--right  { left:   calc(100% + var(--space-xs)); top: 50%;  transform: translateY(-50%); }

.comp-popover-title {
  margin: 0 0 var(--space-xs) 0;
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

.comp-popover-body {
  margin: 0;
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}


/* ===========================================================
   COMP-ACCORDION — Accordion
   =========================================================== */

.comp-accordion {
  display: flex;
  flex-direction: column;
}

.comp-accordion--bordered {
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  overflow: hidden;
}

.comp-accordion-item {
  border-bottom: var(--border-default) solid var(--color-border-subtle);
}
.comp-accordion-item:last-child { border-bottom: 0; }

.comp-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  list-style: none;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.comp-accordion-summary::-webkit-details-marker { display: none; }
.comp-accordion-summary::marker { content: ""; }

.comp-accordion-summary:hover { background: var(--color-bg-subtle); }

.comp-accordion-chevron {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--duration-default) var(--ease-out);
}

.comp-accordion-item[open] .comp-accordion-chevron {
  transform: rotate(180deg);
}

.comp-accordion-body {
  padding: 0 var(--space-lg) var(--space-lg);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-muted);
}


/* ===========================================================
   COMP-EMPTY — EmptyState
   =========================================================== */

.comp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  border: var(--border-default) dashed var(--color-border-default);
}

.comp-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5xl);
  height: var(--space-5xl);
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.comp-empty-icon svg {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.comp-empty-title {
  margin: 0 0 var(--space-xs) 0;
  font-family: var(--text-body-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}

.comp-empty-body {
  margin: 0 0 var(--space-md) 0;
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-muted);
  max-width: 50ch;
}

.comp-empty-actions {
  display: flex;
  gap: var(--space-xs);
}



/* =================================================================
   ====================  NAVIGATION  ===============================
   ================================================================= */

/* ===========================================================
   COMP-TABS — Tabs
   =========================================================== */

.comp-tabs {
  display: flex;
  flex-direction: column;
}

.comp-tabs-bar {
  display: flex;
  gap: var(--space-2xs);
}

.comp-tabs-item {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-md);
  transition:
    color var(--duration-default) var(--ease-out),
    background-color var(--duration-default) var(--ease-out),
    border-color var(--duration-default) var(--ease-out);
}

.comp-tabs-item:hover { color: var(--color-text-default); }
.comp-tabs-item.is-active { color: var(--color-text-default); }

.comp-tabs-panel {
  padding: var(--space-lg);
  background: var(--color-bg-surface);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-default);
}

/* Underline */
.comp-tabs--underline .comp-tabs-bar {
  border-bottom: var(--border-default) solid var(--color-border-default);
}
.comp-tabs--underline .comp-tabs-item {
  border-bottom: var(--border-2) solid transparent;
  margin-bottom: calc(var(--border-default) * -1);
}
.comp-tabs--underline .comp-tabs-item.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* Pills */
.comp-tabs--pills .comp-tabs-bar {
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  align-self: flex-start;
}
.comp-tabs--pills .comp-tabs-item {
  border-radius: var(--radius-sm);
}
.comp-tabs--pills .comp-tabs-item.is-active {
  background: var(--color-bg-page);
  color: var(--color-text-default);
  box-shadow: var(--shadow-sm);
}

/* Enclosed */
.comp-tabs--enclosed .comp-tabs-bar {
  border-bottom: var(--border-default) solid var(--color-border-default);
}
.comp-tabs--enclosed .comp-tabs-item {
  border: var(--border-default) solid transparent;
  border-top-left-radius: var(--radius-default);
  border-top-right-radius: var(--radius-default);
  margin-bottom: calc(var(--border-default) * -1);
}
.comp-tabs--enclosed .comp-tabs-item.is-active {
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  border-color: var(--color-border-default);
  border-bottom-color: var(--color-bg-surface);
}
.comp-tabs--enclosed .comp-tabs-panel {
  border: var(--border-default) solid var(--color-border-default);
  border-top: 0;
  border-bottom-left-radius: var(--radius-default);
  border-bottom-right-radius: var(--radius-default);
}


/* ===========================================================
   COMP-BREADCRUMB — Breadcrumb
   =========================================================== */

.comp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
}

.comp-breadcrumb-item {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.comp-breadcrumb-item:hover { color: var(--color-text-link-hover); }
.comp-breadcrumb-item.is-current { color: var(--color-text-default); font-weight: var(--font-weight-medium); }

.comp-breadcrumb-sep {
  color: var(--color-text-muted);
  user-select: none;
}


/* ===========================================================
   COMP-PAGINATION — Pagination
   =========================================================== */

.comp-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.comp-pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--border-default) solid var(--color-border-default);
  color: var(--color-text-default);
  font-family: var(--text-body-family);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.comp-pagination-item--sm {
  min-width: var(--space-2xl);
  height: var(--space-2xl);
  padding: 0 var(--space-2xs);
  font-size: var(--text-sm);
}

.comp-pagination-item--md {
  min-width: var(--space-3xl);
  height: var(--space-3xl);
  padding: 0 var(--space-xs);
  font-size: var(--text-base);
}

.comp-pagination-item svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-pagination-item:hover { background: var(--color-bg-subtle); }

.comp-pagination-item.is-active {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}

.comp-pagination-item.is-disabled,
.comp-pagination-item:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.comp-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-family: var(--text-body-family);
}


/* ===========================================================
   COMP-STEPPER — Stepper
   =========================================================== */

.comp-stepper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-md);
}

.comp-stepper--horizontal { flex-direction: row; }
.comp-stepper--vertical   { flex-direction: column; }

.comp-stepper-item {
  display: flex;
  gap: var(--space-sm);
  position: relative;
  flex: 1;
}

.comp-stepper--horizontal .comp-stepper-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--space-xl) / 2);
  left: calc(var(--space-xl) + var(--space-xs));
  right: calc(var(--space-md) * -1);
  height: var(--border-2);
  background: var(--color-border-default);
}

.comp-stepper--vertical .comp-stepper-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--space-xl) / 2);
  top: calc(var(--space-xl) + var(--space-2xs));
  bottom: calc(var(--space-md) * -1);
  width: var(--border-2);
  background: var(--color-border-default);
}

.comp-stepper-item.is-complete::after { background: var(--color-primary); }

.comp-stepper-indicator {
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: var(--color-bg-page);
  border: var(--border-2) solid var(--color-border-default);
  color: var(--color-text-muted);
}

.comp-stepper-item.is-complete .comp-stepper-indicator {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.comp-stepper-item.is-current .comp-stepper-indicator {
  background: var(--color-bg-page);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-subtle);
}

.comp-stepper-indicator svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-stepper-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.comp-stepper-title {
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
}

.comp-stepper-item.is-upcoming .comp-stepper-title { color: var(--color-text-muted); }

.comp-stepper-desc {
  font-family: var(--text-body-family);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-xs);
}


/* ===========================================================
   COMP-MENU — Dropdown menu
   =========================================================== */

.comp-menu-wrap {
  /* Conteneur de démo : on réserve assez de hauteur (~280px) pour que
     le menu déployé absolu ne déborde pas en bas de la fiche.
     En production, le menu est attaché au document et positionné en JS. */
  position: relative;
  display: block;
  min-height: 320px;
  padding-top: var(--space-md);
}

.comp-menu {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xs);
  min-width: 240px;
  z-index: var(--z-dropdown);
}

.comp-menu-wrap--left  .comp-menu { left: 0; }
.comp-menu-wrap--right .comp-menu { right: 0; }

.comp-menu-header {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--text-caption-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.comp-menu-sep {
  border: 0;
  border-top: var(--border-default) solid var(--color-border-subtle);
  margin: var(--space-2xs) 0;
}

.comp-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  color: var(--color-text-default);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.comp-menu-item:hover { background: var(--color-bg-subtle); }
.comp-menu-item.is-danger { color: var(--color-error); }
.comp-menu-item.is-danger:hover { background: var(--color-error-subtle); }

.comp-menu-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}
.comp-menu-item.is-danger .comp-menu-icon { color: var(--color-error); }
.comp-menu-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-menu-label { flex: 1; }


/* ===========================================================
   COMP-SIDEBAR — Sidebar
   =========================================================== */

.comp-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  gap: var(--space-md);
  /* Ne jamais déborder de la fiche, même si la grille est étroite. */
  max-width: 100%;
}

.comp-sidebar--expanded { width: 260px; max-width: 100%; }
.comp-sidebar--rail     { width: var(--space-5xl); }

.comp-sidebar-brand {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--text-body-family);
  font-size: var(--text-lg);
  color: var(--color-text-default);
}

.comp-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

.comp-sidebar-foot {
  margin-top: auto;
}

.comp-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-default);
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.comp-sidebar--rail .comp-sidebar-item {
  justify-content: center;
}

.comp-sidebar-item:hover { background: var(--color-bg-subtle); }

.comp-sidebar-item.is-active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.comp-sidebar-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.comp-sidebar-item.is-active .comp-sidebar-icon { color: var(--color-primary); }
.comp-sidebar-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-sidebar-label { flex: 1; }


/* ===========================================================
   COMP-CMDK — Command palette
   =========================================================== */

.comp-cmdk {
  width: 100%;
  max-width: 560px;
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.comp-cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: var(--border-default) solid var(--color-border-subtle);
}

.comp-cmdk-input-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}
.comp-cmdk-input-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-cmdk-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  color: var(--color-text-default);
}

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

.comp-cmdk-list {
  padding: var(--space-2xs);
  max-height: 320px;
  overflow: auto;
}

.comp-cmdk-header {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--text-caption-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.comp-cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  color: var(--color-text-default);
  cursor: pointer;
  text-align: left;
}

.comp-cmdk-item.is-selected { background: var(--color-primary-subtle); color: var(--color-primary); }

.comp-cmdk-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}
.comp-cmdk-item.is-selected .comp-cmdk-icon { color: var(--color-primary); }
.comp-cmdk-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-cmdk-label { flex: 1; }

.comp-cmdk-foot {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-subtle);
  border-top: var(--border-default) solid var(--color-border-subtle);
  font-family: var(--text-body-family);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.comp-cmdk-foot span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}



/* =================================================================
   ====================  LAYOUT FIN  ===============================
   ================================================================= */

/* ===========================================================
   COMP-DIVIDER — Divider
   =========================================================== */

.comp-divider {
  border: 0;
  background: var(--color-border-default);
}

.comp-divider--horizontal {
  height: var(--border-default);
  width: 100%;
  margin: var(--space-sm) 0;
}

.comp-divider--vertical {
  width: var(--border-default);
  display: inline-block;
  vertical-align: middle;
  margin: 0 var(--space-xs);
}

.comp-divider--dashed.comp-divider--horizontal {
  background: transparent;
  border-top: var(--border-default) dashed var(--color-border-default);
  height: 0;
}

.comp-divider-labeled {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.comp-divider-labeled .comp-divider { flex: 1; margin: 0; }

.comp-divider-labeled--left .comp-divider:first-child  { flex: 0 0 var(--space-md); }
.comp-divider-labeled--right .comp-divider:last-child   { flex: 0 0 var(--space-md); }

.comp-divider-label {
  font-family: var(--text-caption-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.comp-divider-vstack {
  display: flex;
  align-items: center;
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  color: var(--color-text-default);
}


/* ===========================================================
   COMP-STACK-HELPER — Stack helper (démo)
   =========================================================== */

.comp-stack-helper {
  display: flex;
  padding: var(--space-sm);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
}

.comp-stack-helper--column { flex-direction: column; }
.comp-stack-helper--row    { flex-direction: row; }

.comp-stack-helper--gap-xs  { gap: var(--space-xs); }
.comp-stack-helper--gap-sm  { gap: var(--space-sm); }
.comp-stack-helper--gap-md  { gap: var(--space-md); }
.comp-stack-helper--gap-lg  { gap: var(--space-lg); }
.comp-stack-helper--gap-xl  { gap: var(--space-xl); }
.comp-stack-helper--gap-2xl { gap: var(--space-2xl); }

.comp-stack-helper--align-start   { justify-content: flex-start; }
.comp-stack-helper--align-center  { justify-content: center; }
.comp-stack-helper--align-end     { justify-content: flex-end; }
.comp-stack-helper--align-between { justify-content: space-between; }


/* ===========================================================
   COMP-SPACER — Spacer
   =========================================================== */

.comp-spacer { display: block; flex-shrink: 0; }

.comp-spacer--xs  { height: var(--space-xs); }
.comp-spacer--sm  { height: var(--space-sm); }
.comp-spacer--md  { height: var(--space-md); }
.comp-spacer--lg  { height: var(--space-lg); }
.comp-spacer--xl  { height: var(--space-xl); }
.comp-spacer--2xl { height: var(--space-2xl); }

.comp-spacer--grow {
  flex: 1;
  height: auto;
  width: auto;
}

.comp-spacer-row {
  display: flex;
  align-items: center;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  padding: var(--space-sm);
}

.comp-spacer-demos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.comp-spacer-demos > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.comp-spacer-demos small {
  margin-top: var(--space-2xs);
  text-align: center;
}


/* ===========================================================
   COMP-GRID-HELPER — Grid helper
   =========================================================== */

.comp-grid-helper {
  display: grid;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-default);
  padding: var(--space-sm);
}

.comp-grid-helper--cols-2    { grid-template-columns: repeat(2, 1fr); }
.comp-grid-helper--cols-3    { grid-template-columns: repeat(3, 1fr); }
.comp-grid-helper--cols-4    { grid-template-columns: repeat(4, 1fr); }
.comp-grid-helper--cols-6    { grid-template-columns: repeat(6, 1fr); }
.comp-grid-helper--cols-12   { grid-template-columns: repeat(12, 1fr); }
.comp-grid-helper--cols-auto { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.comp-grid-helper--gap-xs { gap: var(--space-xs); }
.comp-grid-helper--gap-sm { gap: var(--space-sm); }
.comp-grid-helper--gap-md { gap: var(--space-md); }
.comp-grid-helper--gap-lg { gap: var(--space-lg); }


/* ===========================================================
   COMP-DEMO-BOX — Boîte de démo utilisée dans Stack/Spacer/Grid
   =========================================================== */

.comp-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: var(--border-default) solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  min-height: var(--space-2xl);
}



/* =================================================================
   ====================  DATA DISPLAY  =============================
   ================================================================= */

/* ===========================================================
   COMP-TABLE — Table
   =========================================================== */

.comp-table-wrap {
  overflow-x: auto;
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
}

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

.comp-table thead {
  background: var(--color-bg-subtle);
}

.comp-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  border-bottom: var(--border-default) solid var(--color-border-default);
  white-space: nowrap;
}

.comp-table td {
  border-bottom: var(--border-default) solid var(--color-border-subtle);
}

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

.comp-table tbody tr:hover { background: var(--color-bg-subtle); }
.comp-table tbody tr.is-selected { background: var(--color-primary-subtle); }

.comp-table--comfortable th { padding: var(--space-sm) var(--space-md); }
.comp-table--comfortable td { padding: var(--space-sm) var(--space-md); }

.comp-table--compact th { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }
.comp-table--compact td { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }

.comp-table-cell-select {
  width: var(--space-xl);
}

.comp-table-cell-actions {
  width: var(--space-2xl);
  text-align: right;
}

.comp-table-cell-sortable {
  cursor: pointer;
  user-select: none;
}

.comp-table-cell-sortable svg {
  display: inline-block;
  width: var(--icon-xs);
  height: var(--icon-xs);
  margin-left: var(--space-2xs);
  vertical-align: middle;
  color: var(--color-text-muted);
}

.comp-table-cell-sortable.is-active {
  color: var(--color-text-default);
}
.comp-table-cell-sortable.is-active svg { color: var(--color-primary); }

.comp-table-link {
  color: var(--color-text-link);
  text-decoration: none;
}
.comp-table-link:hover { text-decoration: underline; }


/* ===========================================================
   COMP-LIST — List
   =========================================================== */

.comp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comp-list--default .comp-list-item {
  padding: var(--space-sm) var(--space-md);
}

.comp-list--divided .comp-list-item {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-default) solid var(--color-border-subtle);
}
.comp-list--divided .comp-list-item:last-child { border-bottom: 0; }

.comp-list--hoverable .comp-list-item {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.comp-list--hoverable .comp-list-item:hover {
  background: var(--color-bg-subtle);
}

.comp-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.comp-list-avatar {
  flex-shrink: 0;
}

.comp-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.comp-list-title {
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
}

.comp-list-desc {
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.comp-list-meta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
}

.comp-list-chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.comp-list-chevron svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}


/* ===========================================================
   COMP-TREE — Tree
   =========================================================== */

.comp-tree {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
}

.comp-tree-node {
  padding: 0;
}

.comp-tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  padding-left: calc(var(--space-md) + var(--space-md) * var(--comp-tree-depth, 0));
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.comp-tree-row:hover { background: var(--color-bg-subtle); }

.comp-tree-node.is-active .comp-tree-row {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.comp-tree-chevron {
  width: var(--icon-xs);
  height: var(--icon-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Rotation pilotée par aria-expanded : un seul chevron source, qui
   pointe à droite par défaut, pivote à 90° quand le nœud est ouvert.
   Permet à _a11y.js (sprint 3) de basculer l'icône en ne touchant
   qu'à l'attribut aria-expanded — pas de mutation SVG en JS. */
[role="treeitem"][aria-expanded="true"] > .comp-tree-row > .comp-tree-chevron {
  transform: rotate(90deg);
}

.comp-tree-chevron-placeholder {
  width: var(--icon-xs);
  height: var(--icon-xs);
  flex-shrink: 0;
}

.comp-tree-icon {
  display: inline-flex;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.comp-tree-node.is-active .comp-tree-icon { color: var(--color-primary); }
.comp-tree-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-tree-label {
  color: var(--color-text-default);
}
.comp-tree-node.is-active .comp-tree-label { color: var(--color-primary); font-weight: var(--font-weight-medium); }


/* ===========================================================
   COMP-STAT — Stat (KPI)
   =========================================================== */

.comp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
}

.comp-stat--bordered {
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
}

.comp-stat-label {
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comp-stat-value {
  font-family: var(--text-display, var(--text-body-family));
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text-default);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.comp-stat-unit {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.comp-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.comp-stat-trend svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.comp-stat-trend--up   { color: var(--color-success); }
.comp-stat-trend--down { color: var(--color-error); }
.comp-stat-trend--flat { color: var(--color-text-muted); }

.comp-grid--stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}


/* =================================================================
   ====================  MÉDIAS  ===================================
   ================================================================= */

/* ===========================================================
   COMP-IMG — Image
   =========================================================== */

.comp-img-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.comp-img {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-default);
}

.comp-img--square   { aspect-ratio: 1 / 1; }
.comp-img--video    { aspect-ratio: 16 / 9; }
.comp-img--portrait { aspect-ratio: 3 / 4; }
.comp-img--wide     { aspect-ratio: 21 / 9; }

.comp-img--default { border-radius: var(--radius-default); }
.comp-img--rounded { border-radius: var(--radius-lg); }

.comp-img--bordered {
  border: var(--border-2) solid var(--color-border-default);
}

.comp-img--with-overlay {
  position: relative;
}
.comp-img--with-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.45));
  border-radius: inherit;
}

.comp-img-caption {
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}

.comp-grid--media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}


/* ===========================================================
   COMP-VIDEO — Video / Embed
   =========================================================== */

.comp-video {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.comp-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-default);
  overflow: hidden;
}

.comp-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-5xl);
  height: var(--space-5xl);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-bg-inverse);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  padding: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}
.comp-video-play:hover { transform: translate(-50%, -50%) scale(1.05); }
.comp-video-play svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.comp-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
}

.comp-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  width: var(--space-xl);
  height: var(--space-xl);
  padding: 0;
  border-radius: var(--radius-sm);
}
.comp-video-btn:hover { background: rgba(255, 255, 255, 0.15); }
.comp-video-btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.comp-video-progress {
  flex: 1;
  height: var(--space-2xs);
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.comp-video-progress-fill {
  height: 100%;
  background: white;
  border-radius: var(--radius-full);
}

.comp-video-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: white;
  white-space: nowrap;
}

.comp-video-caption {
  font-family: var(--text-caption-family);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}



/* =================================================================
   ====================  EXPORT UI  ================================
   Toggle Preview/Code + boutons Copy/Download sur chaque fiche.
   Bouton master "Télécharger tout" dans le header de la vue.
   ================================================================= */

/* ===========================================================
   .comp-card-actions — barre d'actions dans le header de fiche
   =========================================================== */

.comp-card-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
  flex-shrink: 0;
}

.comp-card-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  background: transparent;
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: var(--text-body-family);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.comp-card-action:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

.comp-card-action:active { transform: translateY(1px); }

.comp-card-action svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
  flex-shrink: 0;
}

.comp-card-action--toggle.is-active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.comp-card-action.is-flash {
  background: var(--color-success-subtle);
  color: var(--color-success);
  border-color: var(--color-success);
}

/* ===========================================================
   .comp-card-code — bloc code repliable
   =========================================================== */

.comp-card-code {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverted);
  border-radius: var(--radius-default);
  overflow: hidden;
}

.comp-card-code-pre {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  overflow-x: auto;
  /* Permettre le retour à la ligne sur très long contenu */
  white-space: pre;
}

.comp-card-code-pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* ===========================================================
   #comp-download-all — bouton master dans le header
   =========================================================== */

#comp-download-all {
  /* Hérite du style .btn .btn-small du Nuancier (style.css parent).
     On ajoute juste un margin-left auto pour pousser à droite. */
  margin-left: auto;
}

#comp-download-all:disabled {
  opacity: var(--opacity-disabled);
  cursor: wait;
}



/* =================================================================
   ====================  AUDIO PLAYER — 5 variantes  ===============
   =================================================================
   Cinq directions de design distinctes. Toutes branchées sur les
   tokens DS pour les espacements, ombres, transitions, font
   stacks. Chaque variante conserve son accent local (radical pour
   l'identité visuelle), exposé via --audio-player-accent.

   Les classes sont préfixées .player-* (pas .comp-*) parce que
   ces variantes constituent un CATALOGUE de styles applicables
   ailleurs dans un site — pas un composant DS au sens strict.
   ================================================================= */


/* ===========================================================
   0) LECTEUR MINIMAL — embed dans flux de texte, samples
   =========================================================== */

.player-minimal {
  --player-minimal-accent: var(--audio-player-accent, #d4a437);

  display: block;
  padding: var(--space-xl) var(--space-2xl);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverted);
  border: var(--border-default) solid color-mix(in srgb, var(--color-text-inverted) 12%, transparent);
  border-radius: var(--radius-default);
  font-family: var(--text-body-family);
}

.player-minimal-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.player-minimal-play {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--player-minimal-accent);
  color: var(--color-bg-inverse);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-default) var(--ease-out);
}
.player-minimal-play:hover {
  transform: scale(1.05);
  background: color-mix(in srgb, var(--player-minimal-accent) 80%, #fff);
}
.player-minimal-play:active {
  transform: scale(0.96);
}
.player-minimal-play svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.player-minimal-progress {
  flex: 1;
  height: 3px;
  background: color-mix(in srgb, var(--color-text-inverted) 12%, transparent);
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.player-minimal-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--player-minimal-accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-default) var(--ease-out);
}

.player-minimal-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-text-inverted) 55%, transparent);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 84px;
  text-align: right;
}

.player-minimal-time-current {
  color: var(--color-text-inverted);
}


/* ===========================================================
   1) MINI FLOATING — sticky / mobile / e-commerce
   =========================================================== */

.player-mini {
  --player-mini-accent: var(--audio-player-accent, #1a1a1a);

  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 540px;
  font-family: var(--text-body-family);
}

.player-mini-cover {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-default);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active, var(--color-primary)));
  position: relative;
  overflow: hidden;
}
.player-mini-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 55%);
}

.player-mini-info {
  flex: 1;
  min-width: 0;
}

.player-mini-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.player-mini-artist {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-mini-progress {
  height: 3px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  margin-top: var(--space-xs);
  overflow: hidden;
}

.player-mini-progress-fill {
  height: 100%;
  background: var(--player-mini-accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-default) var(--ease-out);
}

.player-mini-actions {
  display: flex;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.player-mini-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 0;
  background: var(--color-bg-subtle);
  color: var(--color-text-default);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.player-mini-btn:hover {
  background: var(--color-text-default);
  color: var(--color-bg-surface);
}
.player-mini-btn svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.player-mini-btn--main {
  width: 44px;
  height: 44px;
  background: var(--player-mini-accent);
  color: var(--color-bg-surface);
}
.player-mini-btn--main svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}


/* ===========================================================
   2) EDITORIAL PREMIUM — magazines, archives, podcasts longs
   =========================================================== */

.player-editorial {
  --player-editorial-accent: var(--audio-player-accent, #a8261c);

  position: relative;
  padding: var(--space-3xl) var(--space-2xl);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  border-radius: var(--radius-default);
  overflow: hidden;
  font-family: var(--text-body-family);
}

.player-editorial-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--player-editorial-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.player-editorial-title {
  font-family: var(--text-h3-family, var(--text-body-family));
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2xs);
  max-width: 75%;
  font-weight: var(--text-h3-weight, 400);
}

.player-editorial-artist {
  font-family: var(--text-body-family);
  font-style: italic;
  font-size: var(--text-lg);
  margin-bottom: var(--space-xl);
  color: var(--color-text-muted);
}

.player-editorial-progress {
  height: 1px;
  background: var(--color-border-subtle);
  position: relative;
  margin-bottom: var(--space-xs);
}

.player-editorial-progress-fill {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  background: var(--player-editorial-accent);
  transition: width var(--duration-default) var(--ease-out);
}
.player-editorial-progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: -3px;
  width: 9px;
  height: 9px;
  background: var(--player-editorial-accent);
  border-radius: var(--radius-full);
}

.player-editorial-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.player-editorial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

.player-editorial-play {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-text-default);
  background: transparent;
  color: var(--color-text-default);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--duration-default) var(--ease-out),
              color var(--duration-default) var(--ease-out);
}
.player-editorial-play:hover {
  background: var(--color-text-default);
  color: var(--color-bg-surface);
}
.player-editorial-play svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.player-editorial-nav {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-text-muted);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color var(--duration-default) var(--ease-out),
              color var(--duration-default) var(--ease-out);
}
.player-editorial-nav:hover {
  border-color: var(--color-text-default);
  color: var(--color-text-default);
}
.player-editorial-nav svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}


/* ===========================================================
   3) POCHETTE CARRÉE — catalogues, sites d'artistes
   =========================================================== */

.player-cover {
  --player-cover-accent: var(--audio-player-accent, #c4523a);

  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverted);
  border-radius: var(--radius-default);
  overflow: hidden;
  font-family: var(--text-body-family);
}
@media (max-width: 600px) {
  .player-cover { grid-template-columns: 1fr; }
}

.player-cover-art {
  aspect-ratio: 1;
  position: relative;
  background:
    linear-gradient(135deg,
      var(--player-cover-accent),
      color-mix(in srgb, var(--player-cover-accent) 30%, #000)),
    var(--color-bg-muted);
  background-blend-mode: multiply;
  overflow: hidden;
}
.player-cover-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 220, 180, 0.25), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(0, 0, 0, 0.4), transparent 60%);
}
.player-cover-art-placeholder {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  z-index: 1;
  pointer-events: none;
}

.player-cover-info {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 240px;
}

.player-cover-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  color: color-mix(in srgb, var(--color-text-inverted) 60%, transparent);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.player-cover-title {
  font-family: var(--text-body-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2xs);
}

.player-cover-artist {
  font-size: var(--text-base);
  color: color-mix(in srgb, var(--color-text-inverted) 75%, transparent);
  margin-bottom: 4px;
}

.player-cover-album {
  font-style: italic;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-text-inverted) 55%, transparent);
}

.player-cover-progress {
  height: 2px;
  background: color-mix(in srgb, var(--color-text-inverted) 20%, transparent);
  margin-bottom: var(--space-xs);
  position: relative;
}
.player-cover-progress-fill {
  height: 100%;
  background: var(--player-cover-accent);
  width: 0;
  position: relative;
  transition: width var(--duration-default) var(--ease-out);
}
.player-cover-progress-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--player-cover-accent);
  border-radius: var(--radius-full);
}

.player-cover-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-text-inverted) 55%, transparent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.player-cover-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.player-cover-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-text-inverted) 30%, transparent);
  color: color-mix(in srgb, var(--color-text-inverted) 75%, transparent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.player-cover-btn:hover {
  border-color: var(--color-text-inverted);
  color: var(--color-text-inverted);
}
.player-cover-btn svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.player-cover-btn--main {
  width: 52px;
  height: 52px;
  background: var(--color-text-inverted);
  color: var(--color-bg-inverse);
  border-color: var(--color-text-inverted);
}
.player-cover-btn--main:hover {
  background: var(--player-cover-accent);
  border-color: var(--player-cover-accent);
  color: var(--color-text-inverted);
}
.player-cover-btn--main svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}


/* ===========================================================
   4) WAVEFORM — plateformes sociales, démos, pistes uploadées
   =========================================================== */

.player-waveform {
  --player-waveform-accent: var(--audio-player-accent, #ff5500);

  display: block;
  padding: var(--space-lg);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  font-family: var(--text-body-family);
}

.player-waveform-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.player-waveform-play {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--player-waveform-accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.player-waveform-play:hover {
  background: color-mix(in srgb, var(--player-waveform-accent) 85%, #000);
  transform: scale(1.03);
}
.player-waveform-play svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.player-waveform-meta {
  flex: 1;
  min-width: 0;
}

.player-waveform-artist {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.player-waveform-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-waveform-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-align: right;
  flex-shrink: 0;
}

.player-waveform-time-current {
  color: var(--player-waveform-accent);
  font-weight: var(--font-weight-medium);
}

.player-waveform-wrap {
  position: relative;
  cursor: pointer;
  height: 100px;
  /* Filet de sécurité : si le total des colonnes (flex items)
     dépasse à cause des min-width, on clippe plutôt que de
     laisser déborder hors de la carte. */
  overflow: hidden;
}

.player-waveform-bars {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2px;
  position: relative;
  /* La rangée de barres occupe toute la largeur du wrap, pas
     plus : empêche les colonnes flex de pousser la rangée. */
  width: 100%;
}

.player-waveform-axis {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--color-text-default) 8%, transparent);
  pointer-events: none;
  z-index: 0;
}

.player-waveform-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Pas de min-width : on autorise les colonnes à descendre
     jusqu'à 0 si nécessaire, le wrap est de toute façon
     largement assez large pour 80 barres. */
  min-width: 0;
}

.player-waveform-bar-up,
.player-waveform-bar-dn {
  width: 100%;
  background: color-mix(in srgb, var(--color-text-default) 25%, transparent);
  transition: background var(--duration-fast) var(--ease-out);
}

.player-waveform-bar-up {
  border-radius: 1px 1px 0 0;
}

.player-waveform-bar-dn {
  border-radius: 0 0 1px 1px;
  opacity: 0.65;
}

.player-waveform-col.is-played .player-waveform-bar-up,
.player-waveform-col.is-played .player-waveform-bar-dn {
  background: var(--player-waveform-accent);
}

.player-waveform-col:hover .player-waveform-bar-up,
.player-waveform-col:hover .player-waveform-bar-dn {
  background: var(--color-text-muted);
}

.player-waveform-col.is-played:hover .player-waveform-bar-up,
.player-waveform-col.is-played:hover .player-waveform-bar-dn {
  background: color-mix(in srgb, var(--player-waveform-accent) 85%, #000);
}

.player-waveform-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--player-waveform-accent);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-waveform-accent) 15%, transparent);
  transition: left var(--duration-default) var(--ease-out);
}

.player-waveform-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--border-default) solid var(--color-border-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.player-waveform-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.player-waveform-stat svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}


/* ===========================================================
   5) DAILY EDITION — podcasts presse, chroniques
   =========================================================== */

.player-news {
  --player-news-accent: var(--audio-player-accent, var(--color-text-default));

  background: var(--color-bg-surface);
  color: var(--color-text-default);
  padding: var(--space-xl) var(--space-2xl);
  font-family: var(--text-body-family);
  border-top: 6px double var(--color-text-default);
  border-bottom: 1px solid var(--color-text-default);
}

.player-news-mast {
  text-align: center;
  border-bottom: 1px solid var(--color-text-default);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
}

.player-news-mast-title {
  font-family: var(--text-h3-family, var(--text-body-family));
  font-size: var(--text-3xl);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.player-news-mast-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}
.player-news-mast-sub span {
  margin: 0 var(--space-xs);
}

.player-news-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  border-bottom: 1px solid var(--color-text-default);
  padding-bottom: var(--space-lg);
}
@media (max-width: 600px) {
  .player-news-grid { grid-template-columns: 1fr; }
}

.player-news-headline {
  font-family: var(--text-h3-family, var(--text-body-family));
  font-size: var(--text-xl);
  line-height: 1.05;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}

.player-news-deck {
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin-bottom: var(--space-md);
  border-left: 2px solid var(--color-text-default);
  padding-left: var(--space-sm);
}

.player-news-byline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.player-news-side {
  border-left: 1px solid var(--color-text-default);
  padding-left: var(--space-md);
}

.player-news-side-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

.player-news-side-val {
  font-family: var(--text-h3-family, var(--text-body-family));
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
  line-height: 1;
}

.player-news-controls {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
}

.player-news-play {
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: var(--player-news-accent);
  color: var(--color-bg-surface);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}
.player-news-play:hover {
  transform: scale(1.03);
}
.player-news-play svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.player-news-bar {
  flex: 1;
  height: 2px;
  background: var(--player-news-accent);
  position: relative;
}
.player-news-bar-fill {
  position: absolute;
  top: -3px;
  left: 0;
  height: 8px;
  background: var(--player-news-accent);
  transition: width var(--duration-default) var(--ease-out);
}

.player-news-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}


/* ===========================================================
   6) STORY FORMAT — releases mobile, social, 9:16
   =========================================================== */

.player-story {
  --player-story-accent: var(--audio-player-accent, #ffffff);

  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: #fff;
  font-family: var(--text-body-family);
  background: var(--color-bg-inverse);
}

.player-story-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--color-primary-active, var(--color-primary)) 0%,
      var(--color-primary) 35%,
      color-mix(in srgb, var(--color-primary) 60%, #f0a050) 70%,
      #f0a050 100%);
}
.player-story-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 220, 180, 0.3), transparent 40%),
    radial-gradient(ellipse at 70% 75%, rgba(20, 5, 30, 0.5), transparent 50%);
}

.player-story-img-placeholder {
  /* Indication discrète, pas du contenu. Quand une vraie image
     est mise à la place du gradient .player-story-bg, ce
     placeholder disparaît. Positionné en haut au-dessus des
     progress bars pour ne pas interférer avec le titre. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
.player-story-img-placeholder::before {
  content: '⬚';
  font-size: 24px;
  line-height: 1;
  opacity: 0.6;
}

.player-story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.45) 0%,
    transparent 25%,
    transparent 60%,
    rgba(0, 0, 0, 0.85) 100%);
  z-index: 2;
}

.player-story-progress-bars {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-sm);
  right: var(--space-sm);
  z-index: 4;
  display: flex;
  gap: 4px;
}

.player-story-pbar {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.player-story-pbar.is-done {
  background: rgba(255, 255, 255, 0.9);
}
.player-story-pbar.is-current {
  background: rgba(255, 255, 255, 0.3);
}
.player-story-pbar-fill {
  height: 100%;
  background: var(--player-story-accent);
  transition: width var(--duration-default) var(--ease-out);
}

.player-story-top {
  position: absolute;
  top: calc(var(--space-md) + 8px);
  left: var(--space-md);
  right: var(--space-md);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.player-story-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-warning, #ffd93d), var(--color-error, #ff4081));
  border: 2px solid #fff;
  flex-shrink: 0;
}

.player-story-handle {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: #fff;
}
.player-story-handle small {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-xs);
}

.player-story-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.player-story-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.player-story-title {
  font-family: var(--text-body-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.player-story-artist {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-md);
}

.player-story-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.player-story-play {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--duration-fast) var(--ease-out);
}
.player-story-play:hover {
  transform: scale(1.05);
}
.player-story-play svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.player-story-actions {
  display: flex;
  gap: var(--space-xs);
}

.player-story-action {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(8px);
  transition: background var(--duration-fast) var(--ease-out);
}
.player-story-action:hover {
  background: rgba(255, 255, 255, 0.3);
}
.player-story-action svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}


/* =================================================================
   ====================  COMP-AUDIO — Galerie  =====================
   =================================================================
   La galerie qui apparaît dans Components > Media. Affiche la
   variante choisie dans le DS, en deux états côte à côte
   (idle + playing). Si la fenêtre est étroite, on empile.
   ================================================================= */

.comp-audio-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.comp-audio-gallery-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px dashed var(--color-border-subtle);
  margin-bottom: var(--space-xs);
}

.comp-audio-gallery-meta-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.comp-audio-gallery-meta-name strong {
  color: var(--color-text-default);
  font-weight: var(--font-weight-semibold);
}

.comp-audio-gallery-meta-link {
  font-family: var(--text-body-family);
  font-size: var(--text-xs);
  color: var(--color-text-link);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.comp-audio-gallery-meta-link:hover {
  color: var(--color-text-link-hover);
}

.comp-audio-gallery-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 960px) {
  .comp-audio-gallery-states {
    grid-template-columns: 1fr;
  }
}

.comp-audio-gallery-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.comp-audio-gallery-state-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.comp-audio-gallery-state-frame {
  min-width: 0;
  overflow: hidden;
}


/* =================================================================
   ====================  DS — onglet Audio Player  =================
   =================================================================
   La sub-view #sub-ds-players : intro + grille de 5 cartes.
   Chaque carte montre un mini-aperçu du player + ses méta.
   ================================================================= */

.ds-players-intro {
  margin-bottom: var(--space-xl);
}

.ds-players-intro-title {
  font-family: var(--text-h3-family, var(--text-body-family));
  font-size: var(--text-xl);
  margin: 0 0 var(--space-xs);
  color: var(--color-text-default);
}

.ds-players-intro-text {
  font-family: var(--text-body-family);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 70ch;
  line-height: var(--leading-base);
}

.ds-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

.ds-players-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-surface);
  border: var(--border-default) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  /* .ds-shapes-selectable porte cursor, hover, focus, is-selected */
}

.ds-players-card-preview {
  background: var(--color-bg-page);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Mise à l'échelle : on rend le player en taille réelle puis on
     applique un zoom CSS pour qu'il rentre dans la preview sans
     casser sa typographie. Transform mieux que zoom pour la
     compatibilité, mais zoom est plus simple pour la mise en
     page. On va utiliser transform: scale et compenser la
     largeur via width. */
}

.ds-players-card-preview-inner {
  width: 100%;
  /* Permet aux contenus internes de prendre la largeur du parent
     sans dépasser. Pour la variante story (9:16) on contraint
     en hauteur via le sélecteur ci-dessous. */
}

/* Cas spécial : story est très vertical, on la réduit pour qu'elle
   ne pousse pas la carte trop haut. */
.ds-players-card-preview-inner[data-variant-scope="story"] {
  display: flex;
  justify-content: center;
}
.ds-players-card-preview-inner[data-variant-scope="story"] .player-story {
  max-width: 180px;
}

/* Cas spécial : news, cover et editorial sont longs ; on réduit
   la taille typo dans la preview pour éviter le scroll horizontal. */
.ds-players-card-preview-inner[data-variant-scope="editorial"] .player-editorial {
  padding: var(--space-lg) var(--space-md);
}
.ds-players-card-preview-inner[data-variant-scope="editorial"] .player-editorial-title {
  font-size: clamp(20px, 2.5vw, 28px);
  max-width: 100%;
}
.ds-players-card-preview-inner[data-variant-scope="editorial"] .player-editorial-play {
  width: 48px;
  height: 48px;
}

.ds-players-card-preview-inner[data-variant-scope="news"] .player-news {
  padding: var(--space-md);
}
.ds-players-card-preview-inner[data-variant-scope="news"] .player-news-mast-title {
  font-size: var(--text-xl);
}
.ds-players-card-preview-inner[data-variant-scope="news"] .player-news-headline {
  font-size: var(--text-base);
}

.ds-players-card-preview-inner[data-variant-scope="cover"] .player-cover {
  grid-template-columns: 140px 1fr;
}
.ds-players-card-preview-inner[data-variant-scope="cover"] .player-cover-info {
  padding: var(--space-md);
  min-height: 140px;
}
.ds-players-card-preview-inner[data-variant-scope="cover"] .player-cover-title {
  font-size: var(--text-lg);
}

/* Minimal : un peu moins de padding pour rentrer dans la carte preview. */
.ds-players-card-preview-inner[data-variant-scope="minimal"] .player-minimal {
  padding: var(--space-lg);
}
.ds-players-card-preview-inner[data-variant-scope="minimal"] .player-minimal-play {
  width: 44px;
  height: 44px;
}
.ds-players-card-preview-inner[data-variant-scope="minimal"] .player-minimal-time {
  min-width: 70px;
}

/* Waveform : compacter la hauteur de la forme d'onde, réduire le bouton play. */
.ds-players-card-preview-inner[data-variant-scope="waveform"] .player-waveform {
  padding: var(--space-md);
}
.ds-players-card-preview-inner[data-variant-scope="waveform"] .player-waveform-play {
  width: 44px;
  height: 44px;
}
.ds-players-card-preview-inner[data-variant-scope="waveform"] .player-waveform-wrap {
  height: 60px;
}
.ds-players-card-preview-inner[data-variant-scope="waveform"] .player-waveform-stats {
  gap: var(--space-md);
}

.ds-players-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ds-players-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.ds-players-card-title {
  font-family: var(--text-h3-family, var(--text-body-family));
  font-size: var(--text-lg);
  margin: 0;
  color: var(--color-text-default);
}

.ds-players-card-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-on-primary);
  background: var(--color-primary);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.ds-players-card-desc {
  font-family: var(--text-body-family);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin: 0;
}

.ds-players-card-usage {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
.ds-players-card-usage strong {
  color: var(--color-text-default);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}